Showing preview only (893K chars total). Download the full file or copy to clipboard to get everything.
Repository: Microsoft/join-dev-design
Branch: master
Commit: b7d37330ae1d
Files: 231
Total size: 809.8 KB
Directory structure:
gitextract_h061aw8k/
├── .editorconfig
├── .gitignore
├── .vscode/
│ └── settings.json
├── LICENSE
├── README.md
├── docs/
│ ├── css/
│ │ └── style.css
│ ├── index.html
│ ├── scripts/
│ │ └── ls.helper.js
│ ├── simon.js
│ ├── theme/
│ │ ├── msdos/
│ │ │ └── theme.css
│ │ ├── theme.css
│ │ └── theme.js
│ └── time-travel/
│ ├── history/
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── msdostheme.css
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/
│ │ │ └── docs/
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/
│ │ │ └── docs/
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjE5Njgz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjMwODc0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjMyMTA4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjQwMTUx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjU1MzUz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjY5NzUy/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjYwMjc3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjYxMTY1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjg4Njky/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjgxMTcy/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjgxMjE3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzAyNDE3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzE2NDY5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzExMTI4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzM2NDkx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzM3Mjk4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzM3MzA0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzQ0OTM1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzQ5NzE1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzU3MjE0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTA4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTI4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzYxNjM5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzYzMDAw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODAwMDY2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODAzNzE5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODIyMDk1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODMxMTEz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODkzMzc3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTI5OTU1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTM2MTYw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNDA5NTQw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNTI4Nzg0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNTM1NTUw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNTQwNTU0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ └── MDExOlB1bGxSZXF1ZXN0MjAzNTk4NDI2/
│ │ └── docs/
│ │ ├── css/
│ │ │ └── style.css
│ │ ├── index.html
│ │ └── theme/
│ │ ├── theme.css
│ │ └── theme.js
│ ├── index.html
│ ├── index.json
│ ├── style.css
│ ├── time-travel-compiled.js
│ └── time-travel.js
├── example.env
├── package.json
└── time-travel/
└── build.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# EditorConfig is awesome: https://EditorConfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2
[*.html]
indent_size = 2
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .gitignore
================================================
time-travel/zips
.DS_Store
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# next.js build output
.next
================================================
FILE: .vscode/settings.json
================================================
{
"editor.formatOnSave": true
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Microsoft Corporation. All rights reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE
================================================
FILE: README.md
================================================
# Join Microsoft Developer Design
Microsoft is hiring technical product designers and design leaders. [Learn more](https://microsoft.github.io/join-dev-design/).
## Development
```shell
$ npm install
$ npm start
```
### Time Travel
Time travel displays past versions of the repo based on merged pull requests.
The build script in `time-travel` folder fetchs each merged pull request's `docs` folder content (except for `docs/time-travel/`) and store them in `docs/time-travel/history`, then writes data to `docs/time-travel/index.json` for later use. Currently this process has to be done manually.
**Note**: Create a `.env` with your github's access token in order to fetch data from Github API.
```shell
# update build
$ npm run build-timetravel
```
The page for time-travel is intentionally kept separated from `docs/` (not reusing `docs/css/style.css`) so it's easier to maintain.
---
There's a [Figma file](https://www.figma.com/file/Nkddv9KabDaTFtqZ5vlSzUxr/Developer-Design-Recruiting-Site?node-id=1%3A2) for the design but it's currently Microsoft internal.
## Contributing
_We have to include these for legal reasons:_
- [Contributor License Agreement (CLA)](https://cla.microsoft.com).
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
================================================
FILE: docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 1.3rem;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes text-gradient-ltr {
to {
background-position: -600% center;
}
}
@keyframes text-gradient-rtl {
to {
background-position: 600% center;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
}
a:hover,
a:focus {
background-image: linear-gradient(
to right,
var(--brand-yellow) 25%,
var(--brand-green) 50%,
var(--brand-blue) 75%,
var(--brand-yellow) 100%
);
background-size: 600% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
html[dir="ltr"] a:not(.logo-link):hover,
html[dir="ltr"] a:not(.logo-link):focus {
animation: text-gradient-ltr 6.5s linear infinite;
}
html[dir="rtl"] a:not(.logo-link):hover,
html[dir="rtl"] a:not(.logo-link):focus {
animation: text-gradient-rtl 6.5s linear infinite;
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.winner {
display: block;
margin: auto;
text-align: center;
}
.logo-tile--red {
background-color: var(--brand-red);
transition: 150ms;
}
.logo-tile--largered {
background-color: var(--brand-red);
transform: scale(1.2) translateY(-3px);
transition: 150ms;
}
.logo-tile--red:active {
transform: scale(0.8);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
transition: 150ms;
}
.logo-tile--largegreen {
background-color: var(--brand-green);
transform: scale(1.2) translateY(-3px);
animation-delay: var(--logo-tiles-in-delay);
transition: 150ms;
}
.logo-tile--green:active {
transform: scale(0.8);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
transition: 150ms;
}
.logo-tile--largeblue {
background-color: var(--brand-blue);
transform: scale(1.2) translateY(-3px);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
transition: 150ms;
}
.logo-tile--blue:active {
transform: scale(0.8);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
transition: 150ms;
}
.logo-tile--largeyellow {
background-color: var(--brand-yellow);
transform: scale(1.2) translateY(-3px);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
transition: 150ms;
}
.logo-tile--yellow:active {
transform: scale(0.8);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: var(--title-font-size);
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/index.html
================================================
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta name="keywords" content="microsoft, code, designers">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body class="js-theme-dark">
<div id="app" class="container">
<header>
<div class="logo-link" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span @click="clickColor('red')" class="logo-tile" v-bind:class="logoTitleRed"></span>
<span @click="clickColor('green')" class="logo-tile" v-bind:class="logoTitleGreen"></span>
<span @click="clickColor('blue')" class="logo-tile" v-bind:class="logoTitleBlue"></span>
<span @click="clickColor('yellow')" class="logo-tile" v-bind:class="logoTitleYellow"></span>
</div>
</div>
<span v-if="winner" class="winner">🎊 Simon says...A winner is you! 🎊</span>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:mmuno@microsoft.com" title="Email address for mmuno@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p>
<a href="./time-travel/" title="See past versions of this site">Time Travel</a>
</p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="scripts/ls.helper.js"></script>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js "></script>
<script src="simon.js "></script>
</body>
</html>
================================================
FILE: docs/scripts/ls.helper.js
================================================
let debug = false;
const setDebug = function(val) {
debug = val;
console.log("LS DEBUG: ", val);
};
const setItem = function(key, item) {
if (window.localStorage) {
localStorage.setItem(key, item);
if (debug) {
console.log("ls.setItem", item);
}
}
};
const getItem = function(key) {
if (window.localStorage) {
const item = localStorage.getItem(key);
if (debug) {
console.log("ls.getItem", item);
}
return item;
}
return undefined;
};
const clear = function(key) {
if (window.localStorage) {
localStorage.clear(key);
if (debug) {
console.log("ls.getItem", item);
}
}
};
const removeItem = function(key) {
if (window.localStorage) {
localStorage.removeItem(key);
if (debug) {
console.log("ls.removeItem", key);
}
}
};
window.ls = {
setItem,
getItem,
clear,
removeItem,
setDebug
};
================================================
FILE: docs/simon.js
================================================
new Vue({
el: "#app",
data: {
colors: ["red", "green", "yellow", "blue"],
currentSequence: [],
colorStatus: {
red: false,
green: false,
yellow: false,
blue: false
},
colorSymbols: {
red: "❤️",
green: "💚",
yellow: "💛",
blue: "💙"
},
userClicks: [],
currentScore: 0,
difficulty: 1000
},
created() {
this.generateSequence();
},
watch: {
winner: function(isWinner) {
if (isWinner) {
this.changeTheme();
}
}
},
computed: {
logoTitleRed: function() {
return this.colorStatus.red ? "logo-tile--largered" : "logo-tile--red";
},
logoTitleGreen: function() {
return this.colorStatus.green
? "logo-tile--largegreen"
: "logo-tile--green";
},
logoTitleYellow: function() {
return this.colorStatus.yellow
? "logo-tile--largeyellow"
: "logo-tile--yellow";
},
logoTitleBlue: function() {
return this.colorStatus.blue ? "logo-tile--largeblue" : "logo-tile--blue";
},
winner: function() {
return this.currentScore >= 10 ? true : false;
}
},
methods: {
generateSequence: function() {
this.currentSequence.push(
this.colors[this.getRandomInt(this.colors.length)]
);
if (this.currentScore > 0) {
this.play();
} else {
console.log(
`🕵️♂️🕵️♀️ PSSST! There is a game inside this webpage...\nClick the ${
this.colorSymbols[this.currentSequence[0]]
} tile on the Microsoft logo to play!`
);
}
},
clickColor: function(color) {
this.userClicks.push(color);
if (this.checkCorrect()) {
this.userClicks = [];
if (this.difficulty > 100) {
this.difficulty -= 100;
}
this.currentScore++;
console.log(
`Simon says..."correct!" 🎉 Your score is`,
this.currentScore
);
this.lightUp();
this.generateSequence();
}
},
getRandomInt: function(max) {
return Math.floor(Math.random() * Math.floor(max));
},
timer: function(ms) {
return new Promise(res => setTimeout(res, ms));
},
checkCorrect: function() {
let matching = true;
let sequence =
this.userClicks[this.userClicks.length - 1] ===
this.currentSequence[this.userClicks.length - 1];
if (!sequence) {
this.reset();
}
for (let i = 0; i < this.currentSequence.length; i++) {
if (this.userClicks[i] !== this.currentSequence[i]) {
matching = false;
break;
}
}
return matching;
},
reset: function() {
console.log(`😢 Game Over! Refresh to play again.`);
this.currentSequence = [];
this.userClicks = [];
this.currentScore = 0;
this.difficulty = 1000;
this.generateSequence();
},
play: async function() {
await this.timer(2000);
for (var i = 0; i < this.currentSequence.length; i++) {
this.colorStatus[this.currentSequence[i]] = true;
await this.timer(this.difficulty);
this.colorStatus[this.currentSequence[i]] = false;
await this.timer(this.difficulty / 2);
}
},
lightUp: async function() {
let t = 150;
this.colorStatus.red = true;
await this.timer(t);
this.colorStatus.red = false;
this.colorStatus.green = true;
await this.timer(t);
this.colorStatus.green = false;
this.colorStatus.yellow = true;
await this.timer(t);
this.colorStatus.yellow = false;
this.colorStatus.blue = true;
await this.timer(t);
this.colorStatus.blue = false;
this.colorStatus.red = true;
await this.timer(t);
this.colorStatus.red = false;
},
changeTheme: function() {
if (theme && theme.changeTo) {
theme.changeTo("msdos");
}
}
}
});
================================================
FILE: docs/theme/msdos/theme.css
================================================
@font-face {
font-family: "vga";
src: url("moreperfectdosvga.woff2") format("woff2"),
url("moreperfectdosvga.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/* MSDOS Font: 'More Perfect DOS VGA' by Adam Moore http://laemeur.sdf.org/fonts/ */
body.js-theme-msdos {
color: #4bffff;
background: #0000ab;
font-family: "vga", "Courier New", Courier, monospace;
margin: 0;
}
.js-theme-msdos:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 6px double #4bffff;
}
.js-theme-msdos:after {
content: "C:\\";
position: absolute;
top: 4px;
padding: 0 6px;
color: #0000ab;
background: #4bffff;
line-height: 0.9;
font-size: 1.2rem;
}
.js-theme-msdos .logo-link {
animation: none;
}
.js-theme-msdos .logo {
position: relative;
}
.js-theme-msdos .logo > span {
display: none;
}
.js-theme-msdos .logo:before {
content: "";
position: absolute;
top: 66%;
left: 50%;
transform: translate(-50%, -50%);
width: 226px;
height: 32px;
z-index: 100;
background: url("blibbet.png") center/cover no-repeat;
}
.js-theme-msdos main h1 {
border-bottom: 2px solid #4bffff;
}
.js-theme-msdos a:not(.logo-link) {
color: #ffff44;
animation: none;
}
.js-theme-msdos a:not(.logo-link):hover,
.js-theme-msdos a:not(.logo-link):focus {
color: #0e0e0e;
-webkit-text-fill-color: #000 !important;
padding: 0.2rem;
background: #ffff44;
position: relative;
}
.js-theme-msdos a:not(.logo-link):hover:after,
.js-theme-msdos a:not(.logo-link):focus:after {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 100%;
height: 100%;
background: #000;
z-index: -1;
}
.js-theme-msdos .theme {
opacity: 1;
}
.js-theme-msdos .theme__item + .theme__item {
margin-left: 0.5rem;
}
.js-theme-msdos .theme__button:before {
content: "Theme";
padding-right: 5px;
}
.js-theme-msdos .theme__button {
text-indent: 0;
width: auto;
height: 1rem;
font-size: 0.8rem;
padding-right: 10px;
font-family: "vga", "Courier New", Courier, monospace;
background: #00a8a8;
border-radius: 0;
color: #0e0e0e;
}
.js-theme-msdos .theme__button:hover,
.js-theme-msdos .theme__button:focus {
background: #ffff44;
color: #0e0e0e;
}
================================================
FILE: docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
cursor: pointer;
display: inline-block;
position: relative;
margin: auto auto;
padding: 0.5rem 0.5rem;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
pointer-events: all;
}
.theme__list,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 0px solid #444;
border-radius: 0.6rem;
cursor: pointer;
z-index: 100;
}
button.theme__button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: var(--brand-blue);
}
.js-theme-light a:hover {
background-image: linear-gradient(
to right,
var(--brand-blue) 25%,
var(--brand-green) 50%,
var(--brand-yellow) 75%,
var(--brand-blue) 100%
);
}
.js-theme-dark .theme__button[value="dark"] {
z-index: 95;
border: 3px solid #828282;
}
.js-theme-light .theme__button[value="light"] {
z-index: 95;
border: 3px solid #dedede;
}
================================================
FILE: docs/theme/theme.js
================================================
const USER_THEME = "ms-tt-user-theme";
const storedTheme = window.ls.getItem(USER_THEME);
var theme = {
activeTheme: "dark",
load: function(theme, cb) {
var id = "theme-" + theme;
if (!document.getElementById(id)) {
var $head = document.getElementsByTagName("head")[0];
var $link = document.createElement("link");
$link.id = id;
$link.rel = "stylesheet";
$link.type = "text/css";
$link.href = "./theme/" + theme + "/theme.css";
$head.appendChild($link);
$link.onload = function() {
if (!!cb) cb();
};
$link.onerror = function() {
console.warn("loading " + theme + " theme failed.");
};
}
},
changeTo: function(theme) {
if (["light", "dark"].indexOf(theme) === -1) {
this.load(theme);
} else {
window.ls.setItem(USER_THEME, theme);
}
document.body.classList.remove("js-theme-" + this.activeTheme);
this.activeTheme = theme;
document.body.classList.add("js-theme-" + this.activeTheme);
}
};
document.querySelector(".theme").onclick = function(e) {
var nextTheme = theme.activeTheme === "dark" ? "light" : "dark";
theme.changeTo(nextTheme);
};
if (storedTheme) {
theme.changeTo(storedTheme);
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 24px;
--title-line-height: 30px;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--page-background: #121212;
--page-color: #bbb;
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
transition: 400ms color;
}
a:hover {
color: var(--brand-blue);
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-link:hover {
animation: 1s both logo-tiles-hover linear infinite;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.logo-tile--red {
background-color: var(--brand-red);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: 1.3rem;
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body class="js-theme-dark">
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p><a href="./time-travel/" title="See past versions of this site">Time Travel</a></p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
cursor: pointer;
display: inline-block;
position: relative;
margin: auto auto;
padding: 0.5rem 0.5rem;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
pointer-events: all;
}
.theme__list,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 0px solid #444;
border-radius: 0.6rem;
cursor: pointer;
z-index: 100;
}
button.theme__button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: #05a6f0;
}
.js-theme-light a:hover {
color: #f35325;
}
body.js-theme-code {
color: lightslategrey;
font-family: "Courier New", Courier, monospace;
}
.js-theme-dark .theme__button[value="dark"] {
z-index: 95;
border: 3px solid #828282;
}
.js-theme-light .theme__button[value="light"] {
z-index: 95;
border: 3px solid #dedede;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/theme/theme.js
================================================
var $body = document.body;
var activeTheme = "dark";
document.querySelector(".theme").onclick = function(e) {
$body.classList.remove("js-theme-" + activeTheme);
activeTheme = activeTheme === "dark" ? "light" : "dark";
$body.classList.add("js-theme-" + activeTheme);
};
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 24px;
--title-line-height: 30px;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--page-background: #121212;
--page-color: #bbb;
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
transition: 400ms color;
}
a:hover {
color: var(--brand-blue);
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
header h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: var(--title-font-size);
line-height: var(--title-line-height);
font-weight: bolder;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-link:hover {
animation: 1s both logo-tiles-hover linear infinite;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.logo-tile--red {
background-color: var(--brand-red);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: 1.3rem;
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button js-theme-button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button js-theme-button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p><a href="./time-travel/" title="See past versions of this site">Time Travel</a></p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
position: relative;
margin: 1rem 0;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
}
.theme__list,
.theme_item,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 1px solid #444;
border-radius: 0.6rem;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
.theme__button:disabled {
z-index: 95;
border: 3px solid #444;
}
.theme__button:not([disabled]) {
cursor: pointer;
z-index: 100;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: #05a6f0;
}
.js-theme-light a:hover {
color: #f35325;
}
body.js-theme-code {
color: lightslategrey;
font-family: "Courier New", Courier, monospace;
}
.js-theme-light .theme__button {
border: 1px solid #dedede;
}
.js-theme-light .theme__button:disabled {
border: 3px solid #dedede;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");
$themeBtns[0].setAttribute("disabled", "disabled");
$themeBtns.forEach(function(ele) {
ele.onclick = function(e) {
var selectedName = e.target.value;
$themeBtns.forEach(function(ele) {
var themeName = ele.value;
if (themeName === selectedName) return;
$body.classList.remove("js-theme-" + themeName);
ele.removeAttribute("disabled");
});
$body.classList.add("js-theme-" + selectedName);
ele.setAttribute("disabled", "disabled");
};
});
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 1.3rem;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes text-gradient-ltr {
to {
background-position: -600% center;
}
}
@keyframes text-gradient-rtl {
to {
background-position: 600% center;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
}
a:hover,
a:focus {
background-image: linear-gradient(
to right,
var(--brand-yellow) 25%,
var(--brand-green) 50%,
var(--brand-blue) 75%,
var(--brand-yellow) 100%
);
background-size: 600% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
html[dir="ltr"] a:not(.logo-link):hover,
html[dir="ltr"] a:not(.logo-link):focus {
animation: text-gradient-ltr 6.5s linear infinite;
}
html[dir="rtl"] a:not(.logo-link):hover,
html[dir="rtl"] a:not(.logo-link):focus {
animation: text-gradient-rtl 6.5s linear infinite;
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-link:hover {
animation: 1s both logo-tiles-hover linear infinite;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.logo-tile--red {
background-color: var(--brand-red);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: var(--title-font-size);
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body class="js-theme-dark">
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p>
<a href="./time-travel/" title="See past versions of this site">Time Travel</a>
</p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
cursor: pointer;
display: inline-block;
position: relative;
margin: auto auto;
padding: 0.5rem 0.5rem;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
pointer-events: all;
}
.theme__list,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 0px solid #444;
border-radius: 0.6rem;
cursor: pointer;
z-index: 100;
}
button.theme__button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: var(--blue);
}
.js-theme-light a:hover {
background-image: linear-gradient(
to right,
var(--brand-blue) 25%,
var(--brand-green) 50%,
var(--brand-yellow) 75%,
var(--brand-blue) 100%
);
}
body.js-theme-code {
color: lightslategrey;
font-family: "Courier New", Courier, monospace;
}
.js-theme-dark .theme__button[value="dark"] {
z-index: 95;
border: 3px solid #828282;
}
.js-theme-light .theme__button[value="light"] {
z-index: 95;
border: 3px solid #dedede;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/theme/theme.js
================================================
var $body = document.body;
var activeTheme = "dark";
document.querySelector(".theme").onclick = function(e) {
$body.classList.remove("js-theme-" + activeTheme);
activeTheme = activeTheme === "dark" ? "light" : "dark";
$body.classList.add("js-theme-" + activeTheme);
};
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 24px;
--title-line-height: 30px;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--page-background: #121212;
--page-color: #bbb;
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
transition: 400ms color;
}
a:hover {
color: var(--brand-blue);
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-link:hover {
animation: 1s both logo-tiles-hover linear infinite;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.logo-tile--red {
background-color: var(--brand-red);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: 1.3rem;
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button js-theme-button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button js-theme-button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p><a href="./time-travel/" title="See past versions of this site">Time Travel</a></p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
position: relative;
margin: 1rem 0;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
}
.theme__list,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 1px solid #444;
border-radius: 0.6rem;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
.theme__button:disabled {
z-index: 95;
border: 3px solid #444;
}
.theme__button:not([disabled]) {
cursor: pointer;
z-index: 100;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: #05a6f0;
}
.js-theme-light a:hover {
color: #f35325;
}
body.js-theme-code {
color: lightslategrey;
font-family: "Courier New", Courier, monospace;
}
.js-theme-light .theme__button {
border: 1px solid #dedede;
}
.js-theme-light .theme__button:disabled {
border: 3px solid #dedede;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");
$themeBtns[0].setAttribute("disabled", "disabled");
$themeBtns.forEach(function(ele) {
ele.onclick = function(e) {
var selectedName = e.target.value;
$themeBtns.forEach(function(ele) {
var themeName = ele.value;
if (themeName === selectedName) return;
$body.classList.remove("js-theme-" + themeName);
ele.removeAttribute("disabled");
});
$body.classList.add("js-theme-" + selectedName);
ele.setAttribute("disabled", "disabled");
};
});
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 1.3rem;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes text-gradient-ltr {
to {
background-position: -600% center;
}
}
@keyframes text-gradient-rtl {
to {
background-position: 600% center;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
}
a:hover,
a:focus {
background-image: linear-gradient(
to right,
var(--brand-yellow) 25%,
var(--brand-green) 50%,
var(--brand-blue) 75%,
var(--brand-yellow) 100%
);
background-size: 600% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
html[dir="ltr"] a:not(.logo-link):hover,
html[dir="ltr"] a:not(.logo-link):focus {
animation: text-gradient-ltr 6.5s linear infinite;
}
html[dir="rtl"] a:not(.logo-link):hover,
html[dir="rtl"] a:not(.logo-link):focus {
animation: text-gradient-rtl 6.5s linear infinite;
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-link:hover {
animation: 1s both logo-tiles-hover linear infinite;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.logo-tile--red {
background-color: var(--brand-red);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: var(--title-font-size);
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta name="keywords" content="microsoft, code, designers">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body class="js-theme-dark">
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p>
<a href="./time-travel/" title="See past versions of this site">Time Travel</a>
</p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/theme/msdostheme.css
================================================
@font-face {
font-family: "vga";
src: url("moreperfectdosvga.woff2") format("woff2"),
url("moreperfectdosvga.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/* MSDOS Font: 'More Perfect DOS VGA' by Adam Moore http://laemeur.sdf.org/fonts/ */
body.js-theme-msdos {
color: #4bffff;
background: #0000ab;
font-family: "vga", "Courier New", Courier, monospace;
margin: 0;
}
.js-theme-msdos:before {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 6px double #4bffff;
}
.js-theme-msdos:after {
content: "C:\\";
position: absolute;
top: 4px;
padding: 0 6px;
color: #0000ab;
background: #4bffff;
line-height: 0.9;
font-size: 1.2rem;
}
.js-theme-msdos .logo-link {
animation: none;
}
.js-theme-msdos .logo {
position: relative;
}
.js-theme-msdos .logo > span {
display: none;
}
.js-theme-msdos .logo:before {
content: "";
position: absolute;
top: 66%;
left: 50%;
transform: translate(-50%, -50%);
width: 226px;
height: 32px;
z-index: 100;
background: url("blibbet.png") center/cover no-repeat;
}
.js-theme-msdos main h1 {
border-bottom: 2px solid #4bffff;
}
.js-theme-msdos a:not(.logo-link) {
color: #ffff44;
animation: none;
}
.js-theme-msdos a:not(.logo-link):hover,
.js-theme-msdos a:not(.logo-link):focus {
color: #0e0e0e;
-webkit-text-fill-color: #000 !important;
padding: 0.2rem;
background: #ffff44;
position: relative;
}
.js-theme-msdos a:not(.logo-link):hover:after,
.js-theme-msdos a:not(.logo-link):focus:after {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 100%;
height: 100%;
background: #000;
z-index: -1;
}
.js-theme-msdos .theme {
opacity: 1;
}
.js-theme-msdos .theme__item + .theme__item {
margin-left: 0.5rem;
}
.js-theme-msdos .theme__button:before {
content: "Theme";
padding-right: 5px;
}
.js-theme-msdos .theme__button {
text-indent: 0;
width: auto;
height: 1rem;
font-size: 0.8rem;
padding-right: 10px;
font-family: "vga", "Courier New", Courier, monospace;
background: #00a8a8;
border-radius: 0;
color: #0e0e0e;
}
.js-theme-msdos .theme__button:hover,
.js-theme-msdos .theme__button:focus {
background: #ffff44;
color: #0e0e0e;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
cursor: pointer;
display: inline-block;
position: relative;
margin: auto auto;
padding: 0.5rem 0.5rem;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
pointer-events: all;
}
.theme__list,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 0px solid #444;
border-radius: 0.6rem;
cursor: pointer;
z-index: 100;
}
button.theme__button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: var(--brand-blue);
}
.js-theme-light a:hover {
background-image: linear-gradient(
to right,
var(--brand-blue) 25%,
var(--brand-green) 50%,
var(--brand-yellow) 75%,
var(--brand-blue) 100%
);
}
.js-theme-dark .theme__button[value="dark"] {
z-index: 95;
border: 3px solid #828282;
}
.js-theme-light .theme__button[value="light"] {
z-index: 95;
border: 3px solid #dedede;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/theme/theme.js
================================================
var theme = {
activeTheme: "dark",
load: function(theme, cb) {
var id = "theme-" + theme;
if (!document.getElementById(id)) {
var $head = document.getElementsByTagName("head")[0];
var $link = document.createElement("link");
$link.id = id;
$link.rel = "stylesheet";
$link.type = "text/css";
$link.href = "/theme/" + theme + "/theme.css";
$head.appendChild($link);
$link.onload = function() {
if (!!cb) cb();
};
$link.onerror = function() {
console.warn("loading " + theme + " theme failed.");
};
}
},
changeTo: function(theme) {
if (["light", "dark"].indexOf(theme) === -1) this.load(theme);
document.body.classList.remove("js-theme-" + this.activeTheme);
this.activeTheme = theme;
document.body.classList.add("js-theme-" + this.activeTheme);
}
};
document.querySelector(".theme").onclick = function(e) {
var nextTheme = theme.activeTheme === "dark" ? "light" : "dark";
theme.changeTo(nextTheme);
};
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 1.3rem;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes text-gradient-ltr {
to {
background-position: -600% center;
}
}
@keyframes text-gradient-rtl {
to {
background-position: 600% center;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
}
a:hover,
a:focus {
background-image: linear-gradient(
to right,
var(--brand-yellow) 25%,
var(--brand-green) 50%,
var(--brand-blue) 75%,
var(--brand-yellow) 100%
);
background-size: 600% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
html[dir="ltr"] a:not(.logo-link):hover,
html[dir="ltr"] a:not(.logo-link):focus {
animation: text-gradient-ltr 6.5s linear infinite;
}
html[dir="rtl"] a:not(.logo-link):hover,
html[dir="rtl"] a:not(.logo-link):focus {
animation: text-gradient-rtl 6.5s linear infinite;
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-link:hover {
animation: 1s both logo-tiles-hover linear infinite;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.logo-tile--red {
background-color: var(--brand-red);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: var(--title-font-size);
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta name="keywords" content="microsoft, code, designers">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body class="js-theme-dark">
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p>
<a href="./time-travel/" title="See past versions of this site">Time Travel</a>
</p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
cursor: pointer;
display: inline-block;
position: relative;
margin: auto auto;
padding: 0.5rem 0.5rem;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
pointer-events: all;
}
.theme__list,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 0px solid #444;
border-radius: 0.6rem;
cursor: pointer;
z-index: 100;
}
button.theme__button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: var(--blue);
}
.js-theme-light a:hover {
background-image: linear-gradient(
to right,
var(--brand-blue) 25%,
var(--brand-green) 50%,
var(--brand-yellow) 75%,
var(--brand-blue) 100%
);
}
body.js-theme-code {
color: lightslategrey;
font-family: "Courier New", Courier, monospace;
}
.js-theme-dark .theme__button[value="dark"] {
z-index: 95;
border: 3px solid #828282;
}
.js-theme-light .theme__button[value="light"] {
z-index: 95;
border: 3px solid #dedede;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/theme/theme.js
================================================
var $body = document.body;
var activeTheme = "dark";
document.querySelector(".theme").onclick = function(e) {
$body.classList.remove("js-theme-" + activeTheme);
activeTheme = activeTheme === "dark" ? "light" : "dark";
$body.classList.add("js-theme-" + activeTheme);
};
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/css/style.css
================================================
@charset "UTF-8";
:root {
/* color defaults */
--brand-blue: #05a6f0;
--brand-yellow: #ffba08;
--brand-red: #f35325;
--brand-green: #81bc06;
--white: #ffffff;
--off-white: #bbb;
--dark-grey: #121212;
/* typeface defaults */
--primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
Tahoma, Arial, sans-serif;
--title-font-size: 1.3rem;
--base-font-size: 20px;
--base-font-line-height: 28px;
--small-font-size: 12px;
--small-font-line-height: 14px;
/* animations */
--root-gradient-animation: 4s both root-gradient linear infinite;
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
/* spacing */
--small-space: 1em;
--large-space: 2em;
--text-block-spacing: 0.5em;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes logo-tiles-in {
0% {
opacity: 0;
filter: grayscale(1) hue-rotate(100deg);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0;
}
60% {
opacity: 1;
filter: grayscale(1) hue-rotate(100deg);
}
100% {
opacity: 1;
filter: grayscale(0) hue-rotate(0deg);
}
}
@keyframes logo-tiles-hover {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes root-gradient {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes text-gradient-ltr {
to {
background-position: -600% center;
}
}
@keyframes text-gradient-rtl {
to {
background-position: 600% center;
}
}
/* Common */
html {
position: relative;
font-size: var(--base-font-size);
font-family: var(--primary-typeface);
line-height: var(--base-font-line-height);
background-color: var(--dark-grey);
}
html[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}
html:before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: unquote(
"-moz-linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: unquote(
"linear-gradient(center bottom, var(--brand-yellow) 33%, var(--brand-blue) 67%)"
);
background: linear-gradient(
to bottom,
var(--brand-yellow) 33%,
var(--brand-blue) 67%
);
animation: var(--root-gradient-animation);
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: var(--white);
background-color: var(--brand-blue);
}
::selection {
color: var(--white);
background: #05a6f0;
/* Edge could not work with custom property here */
background-color: var(--brand-blue);
}
a {
color: var(--brand-yellow);
text-decoration: none;
}
a:hover,
a:focus {
background-image: linear-gradient(
to right,
var(--brand-yellow) 25%,
var(--brand-green) 50%,
var(--brand-blue) 75%,
var(--brand-yellow) 100%
);
background-size: 600% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
html[dir="ltr"] a:not(.logo-link):hover,
html[dir="ltr"] a:not(.logo-link):focus {
animation: text-gradient-ltr 6.5s linear infinite;
}
html[dir="rtl"] a:not(.logo-link):hover,
html[dir="rtl"] a:not(.logo-link):focus {
animation: text-gradient-rtl 6.5s linear infinite;
}
p,
h1 {
margin: 0;
padding: var(--text-block-spacing) 0;
}
/* Container */
.container {
max-width: 31rem;
margin: 0 auto auto;
}
@media only screen and (max-width: 40em) {
.container {
max-width: 80vw;
}
.container p {
font-size: 1.125rem;
}
}
main p:nth-child(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-child(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-child(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Logo */
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: var(--large-space) auto;
}
.logo-link:hover {
animation: 1s both logo-tiles-hover linear infinite;
}
.logo {
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 0;
}
.logo-tile {
display: block;
width: 45%;
height: 45%;
margin: 2.5%;
outline: 1px solid transparent;
animation: var(--logo-tiles-in-animation);
}
.logo-tile--red {
background-color: var(--brand-red);
}
.logo-tile--green {
background-color: var(--brand-green);
animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
background-color: var(--brand-blue);
animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
background-color: var(--brand-yellow);
animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
/* Main */
main h1 {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 4);
font-size: var(--title-font-size);
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
margin-bottom: var(--small-space);
padding-bottom: var(--small-space);
}
main p {
animation: var(--move-in-animation);
}
main p:nth-of-type(1) {
animation-delay: calc(var(--move-in-base-delay) * 5);
}
main p:nth-of-type(2) {
animation-delay: calc(var(--move-in-base-delay) * 6);
}
main p:nth-of-type(3) {
animation-delay: calc(var(--move-in-base-delay) * 7);
}
main p:nth-of-type(4) {
animation-delay: calc(var(--move-in-base-delay) * 8);
}
/* Footer */
.footer {
font-size: var(--small-font-size);
line-height: var(--small-font-line-height);
text-align: center;
margin: var(--small-space) 0 0;
padding: var(--small-space) 0;
overflow: hidden;
}
@media only screen and (max-width: 40em) {
footer {
font-size: 1rem;
margin: 0 auto;
max-width: 80vw;
}
}
footer p {
animation: var(--move-in-animation);
animation-delay: calc(var(--move-in-base-delay) * 11);
}
footer [href*="github"]:hover,
footer [href*="github"]:focus {
color: var(--brand-green);
}
.footer-piece--separate {
display: block;
}
@media only screen and (max-width: 40em) {
.footer-piece {
display: block;
}
}
.time-travel {
text-align: center;
}
.time-travel a {
cursor: pointer;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Join Microsoft Developer Design</title>
<meta name="description" content="Microsoft is hiring technical product designers and design leaders.">
<meta property="og:title" content="Join Microsoft Developer Design">
<meta property="og:site_name" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:url" content="https://microsoft.github.io/join-dev-design/">
<meta property="og:description" content="Microsoft is hiring technical product designers and design leaders">
<meta property="og:type" content="website">
<meta name="keywords" content="microsoft, code, designers">
<meta property="og:image" content="images/microsoft-og-image.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body class="js-theme-dark">
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</h1>
<p>
We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p>
<a href="./time-travel/" title="See past versions of this site">Time Travel</a>
</p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</script>
</footer>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
const style =
`font-family: Arial; font-size: ${size}px; line-height: 2em; color: #f33525; text-shadow: 0.5em 0 0 #81bc06, 0 0.5em 0 #05a6f0, 0.5em 0.5em 0 #ffba08;`;
console.log('%c■ ', style);
console.log('👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design');
}
logLogo(100);
</script>
<script>
function markDocumentAsLoaded() {
setTimeout(function () {
document.documentElement.dataset.loaded = true
}, 1000)
}
addEventListener('load', markDocumentAsLoaded);
</script>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/theme/theme.css
================================================
@keyframes fade-in {
from {
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
/* UI Styling */
.theme {
cursor: pointer;
display: inline-block;
position: relative;
margin: auto auto;
padding: 0.5rem 0.5rem;
font-size: 0;
text-align: center;
z-index: 1;
transition: opacity 0.3s ease;
pointer-events: all;
}
.theme__list,
.theme__button {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.theme__list {
list-style: none;
animation: 1s both fade-in;
animation-delay: calc(var(--move-in-base-delay) * 9);
}
.theme__item {
position: relative;
display: inline-block;
vertical-align: top;
}
.theme__item + .theme__item {
margin-left: 0.5rem;
transition: margin-left 0.3s ease;
}
.theme__button {
display: block;
position: relative;
text-indent: -9999px;
width: 1.2rem;
height: 1.2rem;
background: blue;
border: 0px solid #444;
border-radius: 0.6rem;
cursor: pointer;
z-index: 100;
}
button.theme__button:focus {
text-decoration: none;
outline: none;
box-shadow: none;
}
.theme__button[value="dark"] {
background: black;
}
.theme__button[value="light"] {
background: white;
}
@media only screen and (min-width: 640px) {
.theme {
opacity: 0.5;
}
.theme:hover {
opacity: 1;
}
.theme__item + .theme__item {
margin-left: -0.8rem;
}
.theme:hover .theme__item + .theme__item {
margin-left: 0.5rem;
}
}
/* Theme Setting */
body {
transition: background-color 0.3s ease;
}
body.js-theme-light {
color: #222;
background-color: #fdfdfd;
}
.js-theme-light main h1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.js-theme-light a {
color: var(--brand-blue);
}
.js-theme-light a:hover {
background-image: linear-gradient(
to right,
var(--brand-blue) 25%,
var(--brand-green) 50%,
var(--brand-yellow) 75%,
var(--brand-blue) 100%
);
}
body.js-theme-code {
color: lightslategrey;
font-family: "Courier New", Courier, monospace;
}
.js-theme-dark .theme__button[value="dark"] {
z-index: 95;
border: 3px solid #828282;
}
.js-theme-light .theme__button[value="light"] {
z-index: 95;
border: 3px solid #dedede;
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/theme/theme.js
================================================
var $body = document.body;
var activeTheme = "dark";
document.querySelector(".theme").onclick = function(e) {
$body.classList.remove("js-theme-" + activeTheme);
activeTheme = activeTheme === "dark" ? "light" : "dark";
$body.classList.add("js-theme-" + activeTheme);
};
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
background-color: #080808;
color: #BBB;
font-family: sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
max-width: 600px;
min-height: calc(100vh - 80px);
margin: 0 auto;
}
.container img {
margin: 40px auto;
width: 100%;
}
.container p {
font-size: 19px;
line-height: 1.3em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: 1.1em;
}
.container p a {
text-decoration: none;
color: pink;
}
.container p a:hover {
color: lightblue;
}
footer {
color: #999;
text-align: center;
height: 40px;
}
footer a {
color: #DDD;
text-decoration: none;
}
footer a:hover {
color: lightblue;
}
@media only screen and (max-width: 600px) {
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
}
footer span {
display: block;
}
}
</style>
<body>
<div class="container">
<a href="https://microsoft.com">
<img src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</p>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve
more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com">email us</a>.</p>
</div>
<footer>
<span>
Designed in
<a href="http://figma.com">Figma</a>.</span>
<span>Built in
<a href="https://code.visualstudio.com">Code</a>.</span>
<span>Open source on
<a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/docs/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
background-color: black;
color: #DDD;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container {
max-width: 600px;
min-height: calc(100vh - 80px);
margin: 0 auto;
}
.container img {
margin: 40px auto;
width: 100%;
}
.container p {
font-weight: 300;
font-size: 22px;
}
.container p a {
text-decoration: none;
color: pink;
}
.container p a:hover {
color: salmon;
}
footer {
color: #999;
text-align: center;
height: 40px;
}
footer a {
color: #DDD;
text-decoration: none;
}
@media only screen and (max-width: 600px) {
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
}
footer span {
display: block;
}
}
</style>
<body>
<div class="container">
<a href="https://microsoft.com">
<img src="msft-square.svg" alt="Microsoft logo" width="100" height="100" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</p>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve
more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com">email us</a>.</p>
</div>
<footer>
<span>
Designed in
<a href="http://figma.com">Figma</a>.</span>
<span>Built in
<a href="https://code.visualstudio.com">Code</a>.</span>
<span>Open source on
<a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/docs/css/style.css
================================================
body {
background-color: #080808;
color: #bbb;
font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.container {
max-width: 600px;
min-height: calc(100vh - 80px);
margin: 0 auto;
}
.container img {
margin: 40px auto;
width: 100%;
}
.container p {
font-size: 19px;
line-height: 1.3em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: 1.1em;
}
.container p a {
text-decoration: none;
color: pink;
}
.container p a:hover {
color: lightblue;
}
footer {
color: #999;
text-align: center;
height: 40px;
}
footer a {
color: #ddd;
text-decoration: none;
}
footer a:hover {
color: lightblue;
}
@media only screen and (max-width: 600px) {
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
}
footer span {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/docs/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<a href="https://microsoft.com">
<img src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</p>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve
more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com">email us</a>.</p>
</div>
<footer>
<span>
Designed in
<a href="http://figma.com">Figma</a>.</span>
<span>Built in
<a href="https://code.visualstudio.com">Code</a>.</span>
<span>Open source on
<a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjE5Njgz/docs/css/style.css
================================================
body {
background-color: #080808;
color: #bbb;
font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.container {
max-width: 600px;
min-height: calc(100vh - 80px);
margin: 0 auto;
}
.container img {
margin: 40px auto;
width: 100%;
}
.container p {
font-size: 19px;
line-height: 1.3em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: 1.1em;
}
.container p a {
text-decoration: none;
color: pink;
}
.container p a:hover {
color: lightblue;
}
footer {
color: #999;
text-align: center;
height: 40px;
}
footer a {
color: #ddd;
text-decoration: none;
}
footer a:hover {
color: lightblue;
}
@media only screen and (max-width: 600px) {
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
}
footer span {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjE5Njgz/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a href="https://microsoft.com">
<img src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve
more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer>
<span>
Designed in
<a href="http://figma.com">Figma</a>.</span>
<span>Built in
<a href="https://code.visualstudio.com">Code</a>.</span>
<span>Open source on
<a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMwODc0/docs/css/style.css
================================================
body {
background-color: #080808;
color: #bbb;
font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.container {
max-width: 600px;
min-height: calc(100vh - 80px);
margin: 0 auto;
}
.container img {
margin: 40px auto;
width: 100%;
}
.container p {
font-size: 19px;
line-height: 1.3em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: 1.1em;
}
.container p a {
text-decoration: none;
color: pink;
}
.container p a:hover {
color: lightblue;
}
footer {
color: #999;
text-align: center;
height: 40px;
}
footer a {
color: #ddd;
text-decoration: none;
}
footer a:hover {
color: lightblue;
}
@media only screen and (max-width: 600px) {
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
}
footer span {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMwODc0/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a href="https://microsoft.com">
<img src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services on
the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve
more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer>
<span>
Designed in
<a href="https://figma.com">Figma</a>.</span>
<span>Built in
<a href="https://code.visualstudio.com">Code</a>.</span>
<span>Open source on
<a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMyMTA4/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
@media only screen and (max-width: 40em) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer {
text-align: unset;
padding: 1rem;
}
.footer-piece {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMyMTA4/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com">Code</a>.</span>
<span class="footer-piece">Open source on
<a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjQwMTUx/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
@media only screen and (max-width: 40em) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer {
text-align: unset;
padding: 1rem;
}
.footer-piece {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjQwMTUx/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com">Code</a>.</span>
<span class="footer-piece">Open source on
<a href="https://github.com/Microsoft/join-dev-design">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjU1MzUz/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
footer [href*="figma"]:hover {
color: #8420ff;
}
footer [href*="code"]:hover {
color: #007acc;
}
footer [href*="github"]:hover {
color: #2b3137;
}
@media only screen and (max-width: 40em) {
.container {
max-width: calc(100vw - 20vw);
margin: 0 auto;
}
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
max-width: calc(100vw - 20vw);
margin: 0 auto;
}
footer span {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjU1MzUz/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open sourced on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
<script type="text/javascript">
console.log("%c\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design", "color: white; background-color: #080808; background-image: url(https://microsoft.github.io/join-dev-design/msft-square.svg); background-size: 70%; background-position: 50% 25%; background-repeat: no-repeat; padding: 3em; text-align: center;font-size: 1.25em;");
</script>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjY5NzUy/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 20px;
--move-in-animation: 0.9s both move-in;
--link-color: rgba(244, 99, 97, 1);
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: rgba(18, 18, 18, 1);
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: var(--link-color);
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
}
p {
margin: 0;
padding: 10px 0.5em;
}
header p {
animation: var(--move-in-animation);
animation-delay: 200ms;
font-size: 27px;
font-weight: bolder;
}
header hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
width: 97%;
}
main p:nth-child(1) {
animation: var(--move-in-animation);
animation-delay: 250ms;
}
main p:nth-child(2) {
animation: var(--move-in-animation);
animation-delay: 300ms;
}
main p:nth-child(3) {
animation: var(--move-in-animation);
animation-delay: 350ms;
}
main p:nth-child(4) {
animation: var(--move-in-animation);
animation-delay: 400ms;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2rem auto;
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.logo-link:hover {
transform: scale(1.1);
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
footer [href*="figma"]:hover {
color: #8420ff;
}
footer [href*="code"]:hover {
color: #007acc;
}
footer [href*="github"]:hover {
color: #2b3137;
}
@media only screen and (max-width: 40em) {
.container {
max-width: calc(100vw - 20vw);
margin: 0 auto;
}
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
max-width: calc(100vw - 20vw);
margin: 0 auto;
}
footer span {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjY5NzUy/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
<hr>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open sourced on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
<script type="text/javascript">
console.log("%c\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design", "color: white; background-color: #080808; background-image: url(https://microsoft.github.io/join-dev-design/msft-square.svg); background-size: 70%; background-position: 50% 25%; background-repeat: no-repeat; padding: 3em; text-align: center;font-size: 1.25em;");
</script>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYwMjc3/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
footer [href*="figma"]:hover {
color: #8420ff;
}
footer [href*="code"]:hover {
color: #007acc;
}
footer [href*="github"]:hover {
color: #2b3137;
}
@media only screen and (max-width: 40em) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer {
text-align: unset;
padding: 1rem;
}
.footer-piece {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYwMjc3/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open source on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYxMTY1/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
@media only screen and (max-width: 40em) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer {
text-align: unset;
padding: 1rem;
}
.footer-piece {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYxMTY1/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open source on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjg4Njky/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
footer [href*="figma"]:hover {
color: #8420ff;
}
footer [href*="code"]:hover {
color: #007acc;
}
footer [href*="github"]:hover {
color: #2b3137;
}
@media only screen and (max-width: 40em) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer {
text-align: unset;
padding: 1rem;
}
.footer-piece {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjg4Njky/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open source on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
<script type="text/javascript">
console.log("%c\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design", "color: white; background-color: #080808; background-image: url(https://microsoft.github.io/join-dev-design/msft-square.svg); background-size: 70%; background-position: 50% 25%; background-repeat: no-repeat; padding: 3em; text-align: center;font-size: 1.25em;");
</script>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMTcy/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
@media only screen and (max-width: 40em) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer {
text-align: unset;
padding: 1rem;
}
.footer-piece {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMTcy/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open source on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMjE3/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 1rem;
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: #080808;
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: white;
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
opacity: 0;
transform: translateY(var(--move-in-offset));
animation: 1500ms 500ms forwards move-in;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2.5rem auto;
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
footer [href*="figma"]:hover {
color: #8420ff;
}
footer [href*="code"]:hover {
color: #007acc;
}
footer [href*="github"]:hover {
color: #2b3137;
}
@media only screen and (max-width: 40em) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.footer {
text-align: unset;
padding: 1rem;
}
.footer-piece {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMjE3/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open source on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
<script type="text/javascript">
console.log("%c\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design", "color: white; background-color: #080808; background-image: url(https://microsoft.github.io/join-dev-design/msft-square.svg); background-size: 70%; background-position: 50% 25%; background-repeat: no-repeat; padding: 3em; text-align: center;font-size: 1.25em;");
</script>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzAyNDE3/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--move-in-offset: 20px;
--move-in-animation: 0.9s both move-in;
--link-color: rgba(244, 99, 97, 1);
}
@keyframes move-in {
from {
transform: translateY(var(--move-in-offset));
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
html {
font-size: 125%;
font-family: Inconsolata, Consolas, monospace;
line-height: 1.25;
background-color: rgba(18, 18, 18, 1);
}
body {
display: flex;
flex-flow: column nowrap;
min-height: 100vh;
margin: 0;
color: #bbb;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
color: white;
background-color: var(--blue);
}
::selection {
color: white;
background-color: var(--blue);
}
a {
color: var(--link-color);
text-decoration: none;
transition: 150ms color;
}
a:hover {
color: var(--blue);
}
.container {
max-width: 32rem;
margin: 0 auto;
flex: 1;
}
p {
margin: 0;
padding: 10px 0.5em;
}
header p {
animation: var(--move-in-animation);
animation-delay: 200ms;
font-size: 27px;
font-weight: bolder;
}
header hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
width: 97%;
animation: var(--move-in-animation);
animation-delay: 250ms;
}
main p:nth-child(1) {
animation: var(--move-in-animation);
animation-delay: 300ms;
}
main p:nth-child(2) {
animation: var(--move-in-animation);
animation-delay: 350ms;
}
main p:nth-child(3) {
animation: var(--move-in-animation);
animation-delay: 400ms;
}
main p:nth-child(4) {
animation: var(--move-in-animation);
animation-delay: 450ms;
}
.logo-link {
display: block;
width: 4rem;
height: 4rem;
margin: 2rem auto;
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.logo-link:hover {
transform: scale(1.1);
}
.logo-image {
display: block;
width: 100%;
height: auto;
}
.footer {
font-size: 80%;
text-align: center;
padding: 1rem 0;
}
footer [href*="figma"]:hover {
color: #8420ff;
}
footer [href*="code"]:hover {
color: #007acc;
}
footer [href*="github"]:hover {
color: #2b3137;
}
@media only screen and (max-width: 40em) {
.container {
max-width: calc(100vw - 20vw);
margin: 0 auto;
}
.container p {
font-size: 18px;
}
footer {
text-align: unset;
padding: 1em 0 2em;
max-width: calc(100vw - 20vw);
margin: 0 auto;
}
footer span {
display: block;
}
}
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzAyNDE3/docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Join Microsoft Developer Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<img class="logo-image" src="msft-square.svg" alt="Microsoft logo" width="80" height="80" />
</a>
<p>Microsoft is looking for designers who code to help create the most compelling developer tools & services
on the planet.
</p>
<hr>
</header>
<main>
<p>We have open positions for technical product designers & design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build
the future of software development.</p>
<p>We believe in diversity, openness, and building delightful tools that empower every person and organization to
achieve more.
</p>
<p>Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.</p>
</main>
</div>
<footer class="footer">
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is an collaborative interface design tool">Figma</a>.</span>
<span class="footer-piece">Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.</span>
<span class="footer-piece">Open sourced on
<a href="https://github.com/Microsoft/join-dev-design" title="Github repository join-dev-design by the Microsoft organization">GitHub</a>.</span>
</footer>
</body>
<script type="text/javascript">
console.log("%c\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n👋 Hi there! 👋\n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design", "color: white; background-color: #080808; background-image: url(https://microsoft.github.io/join-dev-design/msft-square.svg); background-size: 70%; background-position: 50% 25%; background-repeat: no-repeat; padding: 3em; text-align: center;font-size: 1.25em;");
</script>
</html>
================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzE2NDY5/docs/css/style.css
================================================
:root {
--blue: #05a6f0;
--link-color: rgba(244, 99, 97, 1);
--move-in-offset: 20px;
--move-in-animation: 1s both move-in;
--move-in-base-delay: 100ms;
--logo-tiles-in-animation: 1s both logo-tiles-in;
--logo-tiles-in-delay: 100ms;
}
@keyframes move-in {
from {
transform: translateY(var(--mov
gitextract_h061aw8k/
├── .editorconfig
├── .gitignore
├── .vscode/
│ └── settings.json
├── LICENSE
├── README.md
├── docs/
│ ├── css/
│ │ └── style.css
│ ├── index.html
│ ├── scripts/
│ │ └── ls.helper.js
│ ├── simon.js
│ ├── theme/
│ │ ├── msdos/
│ │ │ └── theme.css
│ │ ├── theme.css
│ │ └── theme.js
│ └── time-travel/
│ ├── history/
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── msdostheme.css
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/
│ │ │ └── docs/
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/
│ │ │ └── docs/
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjE5Njgz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjMwODc0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjMyMTA4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjQwMTUx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjU1MzUz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjY5NzUy/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjYwMjc3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjYxMTY1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjg4Njky/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjgxMTcy/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNjgxMjE3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzAyNDE3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzE2NDY5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzExMTI4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzM2NDkx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzM3Mjk4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzM3MzA0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzQ0OTM1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzQ5NzE1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzU3MjE0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTA4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTI4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzYxNjM5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzYzMDAw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODAwMDY2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODAzNzE5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODIyMDk1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODMxMTEz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyODkzMzc3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTI5OTU1/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTM2MTYw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ └── index.html
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNDA5NTQw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNTI4Nzg0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNTM1NTUw/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ ├── MDExOlB1bGxSZXF1ZXN0MjAzNTQwNTU0/
│ │ │ └── docs/
│ │ │ ├── css/
│ │ │ │ └── style.css
│ │ │ ├── index.html
│ │ │ └── theme/
│ │ │ ├── theme.css
│ │ │ └── theme.js
│ │ └── MDExOlB1bGxSZXF1ZXN0MjAzNTk4NDI2/
│ │ └── docs/
│ │ ├── css/
│ │ │ └── style.css
│ │ ├── index.html
│ │ └── theme/
│ │ ├── theme.css
│ │ └── theme.js
│ ├── index.html
│ ├── index.json
│ ├── style.css
│ ├── time-travel-compiled.js
│ └── time-travel.js
├── example.env
├── package.json
└── time-travel/
└── build.js
SYMBOL INDEX (21 symbols across 4 files)
FILE: docs/simon.js
method created (line 22) | created() {
FILE: docs/theme/theme.js
constant USER_THEME (line 1) | const USER_THEME = "ms-tt-user-theme";
FILE: docs/time-travel/time-travel-compiled.js
function defineProperties (line 4) | function defineProperties(target, props) {
function _classCallCheck (line 20) | function _classCallCheck(instance, Constructor) {
function _asyncToGenerator (line 26) | function _asyncToGenerator(fn) {
function DisplayCount (line 88) | function DisplayCount() {
FILE: docs/time-travel/time-travel.js
class Toast (line 5) | class Toast {
method constructor (line 6) | constructor(parent) {
method show (line 17) | show(msg, typeClass) {
method hide (line 26) | hide(typeClass) {
method send (line 35) | send(options) {
class DisplayCount (line 65) | class DisplayCount {
method constructor (line 66) | constructor(length = 0) {
method validate (line 70) | validate(v) {
method reset (line 80) | reset() {
method maximize (line 84) | maximize() {
method limit (line 88) | limit(v) {
method add (line 94) | add(v = 0) {
method jumpTo (line 99) | jumpTo(v) {
method isFirst (line 104) | isFirst() {
method isLast (line 107) | isLast() {
Condensed preview — 231 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (900K chars).
[
{
"path": ".editorconfig",
"chars": 266,
"preview": "# EditorConfig is awesome: https://EditorConfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ntrim_trailing_whit"
},
{
"path": ".gitignore",
"chars": 942,
"preview": "time-travel/zips\n.DS_Store\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n"
},
{
"path": ".vscode/settings.json",
"chars": 34,
"preview": "{\n \"editor.formatOnSave\": true\n}\n"
},
{
"path": "LICENSE",
"chars": 1162,
"preview": " MIT License\n\n Copyright (c) Microsoft Corporation. All rights reserved.\n\n Permission is hereby granted, free o"
},
{
"path": "README.md",
"chars": 1301,
"preview": "# Join Microsoft Developer Design\n\nMicrosoft is hiring technical product designers and design leaders. [Learn more](http"
},
{
"path": "docs/css/style.css",
"chars": 7683,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/index.html",
"chars": 5618,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content"
},
{
"path": "docs/scripts/ls.helper.js",
"chars": 893,
"preview": "let debug = false;\n\nconst setDebug = function(val) {\n debug = val;\n console.log(\"LS DEBUG: \", val);\n};\n\nconst setItem "
},
{
"path": "docs/simon.js",
"chars": 3952,
"preview": "new Vue({\n el: \"#app\",\n data: {\n colors: [\"red\", \"green\", \"yellow\", \"blue\"],\n currentSequence: [],\n colorStat"
},
{
"path": "docs/theme/msdos/theme.css",
"chars": 2276,
"preview": "@font-face {\n font-family: \"vga\";\n src: url(\"moreperfectdosvga.woff2\") format(\"woff2\"),\n url(\"moreperfectdosvga.wof"
},
{
"path": "docs/theme/theme.css",
"chars": 2079,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/theme/theme.js",
"chars": 1241,
"preview": "const USER_THEME = \"ms-tt-user-theme\";\nconst storedTheme = window.ls.getItem(USER_THEME);\n\nvar theme = {\n activeTheme: "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/css/style.css",
"chars": 6013,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/index.html",
"chars": 5267,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/theme/theme.css",
"chars": 2018,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2/docs/theme/theme.js",
"chars": 276,
"preview": "var $body = document.body;\nvar activeTheme = \"dark\";\n\ndocument.querySelector(\".theme\").onclick = function(e) {\n $body.c"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/css/style.css",
"chars": 6224,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/index.html",
"chars": 5277,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/theme/theme.css",
"chars": 1899,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1/docs/theme/theme.js",
"chars": 579,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/css/style.css",
"chars": 6642,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/index.html",
"chars": 5292,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/theme/theme.css",
"chars": 2171,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1/docs/theme/theme.js",
"chars": 276,
"preview": "var $body = document.body;\nvar activeTheme = \"dark\";\n\ndocument.querySelector(\".theme\").onclick = function(e) {\n $body.c"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/css/style.css",
"chars": 6013,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/index.html",
"chars": 5277,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/theme/theme.css",
"chars": 1886,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2/docs/theme/theme.js",
"chars": 579,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/css/style.css",
"chars": 6642,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/index.html",
"chars": 5354,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/theme/msdostheme.css",
"chars": 2276,
"preview": "@font-face {\n font-family: \"vga\";\n src: url(\"moreperfectdosvga.woff2\") format(\"woff2\"),\n url(\"moreperfectdosvga.wof"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/theme/theme.css",
"chars": 2079,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0/docs/theme/theme.js",
"chars": 1026,
"preview": "var theme = {\n activeTheme: \"dark\",\n load: function(theme, cb) {\n var id = \"theme-\" + theme;\n if (!document.getE"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/css/style.css",
"chars": 6642,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/index.html",
"chars": 5354,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/theme/theme.css",
"chars": 2171,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5/docs/theme/theme.js",
"chars": 276,
"preview": "var $body = document.body;\nvar activeTheme = \"dark\";\n\ndocument.querySelector(\".theme\").onclick = function(e) {\n $body.c"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/css/style.css",
"chars": 6642,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/index.html",
"chars": 5354,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/theme/theme.css",
"chars": 2177,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz/docs/theme/theme.js",
"chars": 276,
"preview": "var $body = document.body;\nvar activeTheme = \"dark\";\n\ndocument.querySelector(\".theme\").onclick = function(e) {\n $body.c"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/index.html",
"chars": 3005,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <link rel=\"SHORTCUT ICON\" href=\"https://c.s-microsoft.com/favicon.ico?v2\" type=\"image"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4/docs/index.html",
"chars": 2816,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <link rel=\"SHORTCUT ICON\" href=\"https://c.s-microsoft.com/favicon.ico?v2\" type=\"image"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/docs/css/style.css",
"chars": 968,
"preview": "body {\n background-color: #080808;\n color: #bbb;\n font-family: sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw/docs/index.html",
"chars": 1793,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjE5Njgz/docs/css/style.css",
"chars": 968,
"preview": "body {\n background-color: #080808;\n color: #bbb;\n font-family: sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjE5Njgz/docs/index.html",
"chars": 1928,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMwODc0/docs/css/style.css",
"chars": 968,
"preview": "body {\n background-color: #080808;\n color: #bbb;\n font-family: sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMwODc0/docs/index.html",
"chars": 1929,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMyMTA4/docs/css/style.css",
"chars": 1373,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjMyMTA4/docs/index.html",
"chars": 2143,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjQwMTUx/docs/css/style.css",
"chars": 1373,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjQwMTUx/docs/index.html",
"chars": 2143,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjU1MzUz/docs/css/style.css",
"chars": 1638,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjU1MzUz/docs/index.html",
"chars": 3053,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjY5NzUy/docs/css/style.css",
"chars": 2421,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 20px;\n --move-in-animation: 0.9s both move-in;\n --link-color: rgba(244,"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjY5NzUy/docs/index.html",
"chars": 3070,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYwMjc3/docs/css/style.css",
"chars": 1530,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYwMjc3/docs/index.html",
"chars": 2547,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYxMTY1/docs/css/style.css",
"chars": 1374,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjYxMTY1/docs/index.html",
"chars": 2547,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjg4Njky/docs/css/style.css",
"chars": 1530,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjg4Njky/docs/index.html",
"chars": 3052,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMTcy/docs/css/style.css",
"chars": 1373,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMTcy/docs/index.html",
"chars": 2547,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMjE3/docs/css/style.css",
"chars": 1530,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 1rem;\n}\n\n@keyframes move-in {\n from {\n transform: translateY(var(--mo"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNjgxMjE3/docs/index.html",
"chars": 3052,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzAyNDE3/docs/css/style.css",
"chars": 2486,
"preview": ":root {\n --blue: #05a6f0;\n --move-in-offset: 20px;\n --move-in-animation: 0.9s both move-in;\n --link-color: rgba(244,"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzAyNDE3/docs/index.html",
"chars": 3070,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzE2NDY5/docs/css/style.css",
"chars": 3862,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzE2NDY5/docs/index.html",
"chars": 3284,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzExMTI4/docs/css/style.css",
"chars": 3615,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzExMTI4/docs/index.html",
"chars": 3284,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzM2NDkx/docs/css/style.css",
"chars": 3876,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzM2NDkx/docs/index.html",
"chars": 3284,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzM3Mjk4/docs/css/style.css",
"chars": 3876,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzM3Mjk4/docs/index.html",
"chars": 3298,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzM3MzA0/docs/css/style.css",
"chars": 3876,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzM3MzA0/docs/index.html",
"chars": 3284,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzQ0OTM1/docs/css/style.css",
"chars": 3876,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzQ0OTM1/docs/index.html",
"chars": 3297,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzQ5NzE1/docs/css/style.css",
"chars": 4563,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzQ5NzE1/docs/index.html",
"chars": 4178,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzU3MjE0/docs/css/style.css",
"chars": 3971,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzU3MjE0/docs/index.html",
"chars": 3297,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTA4/docs/css/style.css",
"chars": 4499,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTA4/docs/index.html",
"chars": 3838,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTI4/docs/css/style.css",
"chars": 4547,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTI4/docs/index.html",
"chars": 4178,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYxNjM5/docs/css/style.css",
"chars": 4504,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYxNjM5/docs/index.html",
"chars": 3840,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzMDAw/docs/css/style.css",
"chars": 4564,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: rgba(244, 99, 97, 1);\n --move-in-offset: 20px;\n --move-in-animation: 1s bot"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzMDAw/docs/index.html",
"chars": 3297,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/docs/css/style.css",
"chars": 4563,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/docs/index.html",
"chars": 5527,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/docs/theme/theme.css",
"chars": 1684,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/docs/css/style.css",
"chars": 6627,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/docs/index.html",
"chars": 5354,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/docs/theme/theme.css",
"chars": 1823,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/docs/theme/theme.js",
"chars": 579,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODAwMDY2/docs/css/style.css",
"chars": 4547,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODAwMDY2/docs/index.html",
"chars": 3796,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODAzNzE5/docs/css/style.css",
"chars": 4526,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODAzNzE5/docs/index.html",
"chars": 3796,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODIyMDk1/docs/css/style.css",
"chars": 4547,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODIyMDk1/docs/index.html",
"chars": 3954,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODMxMTEz/docs/css/style.css",
"chars": 4526,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODMxMTEz/docs/index.html",
"chars": 3840,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODkzMzc3/docs/css/style.css",
"chars": 4504,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODkzMzc3/docs/index.html",
"chars": 3840,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/docs/css/style.css",
"chars": 4563,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/docs/index.html",
"chars": 5008,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/docs/theme/theme.css",
"chars": 1684,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI5OTU1/docs/css/style.css",
"chars": 4547,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI5OTU1/docs/index.html",
"chars": 3959,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTM2MTYw/docs/css/style.css",
"chars": 4563,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTM2MTYw/docs/index.html",
"chars": 4505,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/docs/css/style.css",
"chars": 4563,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/docs/index.html",
"chars": 5008,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=e"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/docs/theme/theme.css",
"chars": 1684,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/docs/css/style.css",
"chars": 4695,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/docs/index.html",
"chars": 5305,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/docs/theme/theme.css",
"chars": 1684,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/docs/css/style.css",
"chars": 4695,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/docs/index.html",
"chars": 5938,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/docs/theme/theme.css",
"chars": 1684,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/docs/css/style.css",
"chars": 4695,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/docs/index.html",
"chars": 5938,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/docs/theme/theme.css",
"chars": 1739,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/docs/css/style.css",
"chars": 4671,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/docs/index.html",
"chars": 5938,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/docs/theme/theme.css",
"chars": 1739,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/docs/css/style.css",
"chars": 4671,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/docs/index.html",
"chars": 5938,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/docs/theme/theme.css",
"chars": 1762,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/docs/css/style.css",
"chars": 4671,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/docs/index.html",
"chars": 5938,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/docs/theme/theme.css",
"chars": 1739,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/docs/css/style.css",
"chars": 4671,
"preview": ":root {\n --blue: #05a6f0;\n --link-color: #ffba08;\n --move-in-offset: 20px;\n --move-in-animation: 1s both move-in;\n "
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/docs/index.html",
"chars": 5989,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/docs/theme/theme.css",
"chars": 1762,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/docs/css/style.css",
"chars": 4607,
"preview": "@charset \"UTF-8\";\n\n/* Animations */\n\n:root {\n --blue: #05a6f0;\n --yellow: #ffba08;\n --green: #6cc644;\n --page-backgr"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/docs/index.html",
"chars": 5297,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/docs/theme/theme.css",
"chars": 1823,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/docs/css/style.css",
"chars": 4572,
"preview": "@charset \"UTF-8\";\n\n/* Animations */\n\n:root {\n --blue: #05a6f0;\n --yellow: #ffba08;\n --green: #6cc644;\n --page-backgr"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/docs/index.html",
"chars": 5737,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/docs/theme/theme.css",
"chars": 1792,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/docs/css/style.css",
"chars": 4572,
"preview": "@charset \"UTF-8\";\n\n/* Animations */\n\n:root {\n --blue: #05a6f0;\n --yellow: #ffba08;\n --green: #6cc644;\n --page-backgr"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/docs/index.html",
"chars": 5843,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/docs/theme/theme.css",
"chars": 1792,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/docs/css/style.css",
"chars": 4599,
"preview": "@charset \"UTF-8\";\n\n/* Animations */\n\n:root {\n --blue: #05a6f0;\n --yellow: #ffba08;\n --green: #6cc644;\n --page-backgr"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/docs/index.html",
"chars": 5054,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/docs/theme/theme.css",
"chars": 1823,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/docs/css/style.css",
"chars": 4606,
"preview": "@charset \"UTF-8\";\n\n/* Animations */\n\n:root {\n --blue: #05a6f0;\n --yellow: #ffba08;\n --green: #6cc644;\n --page-backgr"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/docs/index.html",
"chars": 5054,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/docs/theme/theme.css",
"chars": 1823,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/docs/css/style.css",
"chars": 4606,
"preview": "@charset \"UTF-8\";\n\n/* Animations */\n\n:root {\n --blue: #05a6f0;\n --yellow: #ffba08;\n --green: #6cc644;\n --page-backgr"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/docs/index.html",
"chars": 5054,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/docs/theme/theme.css",
"chars": 1792,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/docs/css/style.css",
"chars": 4606,
"preview": "@charset \"UTF-8\";\n\n/* Animations */\n\n:root {\n --blue: #05a6f0;\n --yellow: #ffba08;\n --green: #6cc644;\n --page-backgr"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/docs/index.html",
"chars": 5843,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/docs/theme/theme.css",
"chars": 1792,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/docs/css/style.css",
"chars": 6548,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/docs/index.html",
"chars": 5244,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/docs/theme/theme.css",
"chars": 1823,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/docs/theme/theme.js",
"chars": 579,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/docs/css/style.css",
"chars": 6705,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/docs/index.html",
"chars": 5292,
"preview": "<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/docs/theme/theme.css",
"chars": 2171,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/docs/theme/theme.js",
"chars": 276,
"preview": "var $body = document.body;\nvar activeTheme = \"dark\";\n\ndocument.querySelector(\".theme\").onclick = function(e) {\n $body.c"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/docs/css/style.css",
"chars": 6548,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/docs/index.html",
"chars": 5312,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/docs/theme/theme.css",
"chars": 1823,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/docs/css/style.css",
"chars": 6548,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/docs/index.html",
"chars": 5312,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/docs/theme/theme.css",
"chars": 1823,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/docs/theme/theme.js",
"chars": 567,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/docs/css/style.css",
"chars": 6224,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/docs/index.html",
"chars": 5362,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/docs/theme/theme.css",
"chars": 1899,
"preview": "@keyframes fade-in {\n from {\n opacity: 0;\n }\n to {\n transform: none;\n opacity: 1;\n }\n}\n\n/* UI Styling */\n\n."
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/docs/theme/theme.js",
"chars": 579,
"preview": "var $body = document.body;\nvar $themeBtns = document.querySelectorAll(\".js-theme-button\");\n\n$themeBtns[0].setAttribute(\""
},
{
"path": "docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5/docs/css/style.css",
"chars": 6627,
"preview": "@charset \"UTF-8\";\n:root {\n /* color defaults */\n --brand-blue: #05a6f0;\n --brand-yellow: #ffba08;\n --brand-red: #f35"
}
]
// ... and 31 more files (download for full content)
About this extraction
This page contains the full source code of the Microsoft/join-dev-design GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 231 files (809.8 KB), approximately 258.3k tokens, and a symbol index with 21 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.