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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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 &amp; services on
            the planet.
        </p>

        <p>We have open positions for technical product designers &amp; 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 &amp; services on
            the planet.
        </p>

        <p>We have open positions for technical product designers &amp; 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 &amp; services on
            the planet.
        </p>

        <p>We have open positions for technical product designers &amp; 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 &amp; services on
                the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services on
                the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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);
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #f45326),
    color-stop(0.67, #80bc07)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #f45326 33%,
    #80bc07 67%
  );
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: 99vh;
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.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/MDExOlB1bGxSZXF1ZXN0MjAyNzE2NDY5/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAyNzExMTI4/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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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);
  }
}

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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.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/MDExOlB1bGxSZXF1ZXN0MjAyNzExMTI4/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAyNzM2NDkx/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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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);
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #f45326),
    color-stop(0.67, #80bc07)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #f45326 33%,
    #80bc07 67%
  );
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.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/MDExOlB1bGxSZXF1ZXN0MjAyNzM2NDkx/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAyNzM3Mjk4/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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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);
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #f45326),
    color-stop(0.67, #80bc07)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #f45326 33%,
    #80bc07 67%
  );
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.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: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyNzM3Mjk4/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="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/MDExOlB1bGxSZXF1ZXN0MjAyNzM3MzA0/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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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);
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #f45326),
    color-stop(0.67, #80bc07)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #f45326 33%,
    #80bc07 67%
  );
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.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: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyNzM3MzA0/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAyNzQ0OTM1/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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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);
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #f45326),
    color-stop(0.67, #80bc07)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #f45326 33%,
    #80bc07 67%
  );
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.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: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyNzQ0OTM1/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <span class="footer-piece">
            Designed in
            <a href="https://figma.com" title="Figma is a 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/MDExOlB1bGxSZXF1ZXN0MjAyNzQ5NzE1/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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 {
  flex: 1;
  margin: 0 auto;
  max-width: 32rem;
  width: 32rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzQ5NzE1/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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">
            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>
    </footer>
</body>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzU3MjE0/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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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);
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #f45326),
    color-stop(0.67, #80bc07)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #f45326 33%,
    #80bc07 67%
  );
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="figma"]:hover {
  color: #8420ff;
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyNzU3MjE0/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <span class="footer-piece">
            Designed in
            <a href="https://figma.com" title="Figma is a 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/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTA4/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTA4/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <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">
            Created by
            <span id="contributors">10</span> contributors 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;");

    fetch("https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors")
        .then(function (response) {
            if (response.status !== 200) {
                console.log(
                    "Looks like there was a problem. Status Code: " + response.status
                );
                return;
            }
            response.json().then(function (data) {
                var contributors = document.getElementById("contributors");
                contributors.innerText = data.length;
            });
        })
        .catch(function (err) {
            console.log("Fetch Error :-S", err);
        });
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTI4/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTI4/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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">
            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>
    </footer>
</body>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYxNjM5/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyNzYxNjM5/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <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">
            Created by
            <span id="contributors">10</span> contributors 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;");

    fetch("https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors")
        .then(function (response) {
            if (response.status !== 200) {
                console.log(
                    "Looks like there was a problem. Status Code: " + response.status
                );
                return;
            }
            response.json().then(function (data) {
                var contributors = document.getElementById("contributors");
                contributors.innerText = data.length;
            });
        })
        .catch(function (err) {
            console.log("Fetch Error :-S", err);
        });
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzMDAw/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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #f45326),
    color-stop(0.67, #80bc07)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #f45326 33%,
    #80bc07 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="figma"]:hover {
  color: #8420ff;
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyNzYzMDAw/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <p>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </p>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <span class="footer-piece">
            Designed in
            <a href="https://figma.com" title="Figma is a 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/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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 {
  flex: 1;
  margin: 0 auto;
  max-width: 32rem;
  width: 32rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .container p {
    font-size: 18px;
  }

  footer {
    text-align: unset;
    padding: 1em 0 2em;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/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">
    <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
    <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
    <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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>, <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
            <ul class="theme__list">
                <li class="theme__item">
                    <button class="theme__button js-theme-button" value="dark">Dark</button>
                </li>
                <li class="theme__item">
                    <button class="theme__button js-theme-button" value="light">Light</button>
                </li>
            </ul>
        </div>
    </div>
    <footer class="footer" role="contentinfo">
    <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">
            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>
    </footer>
</body>
<script src="/theme/theme.js"></script>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/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;
  --medium-grey: #777;
  --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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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 var(--medium-grey);
  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/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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">
      <a href="./time-travel/" title="See past versions of this site">Time Travel</a>
    </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/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/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 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/MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2/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/MDExOlB1bGxSZXF1ZXN0MjAyODAwMDY2/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODAwMDY2/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <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">
            Created by
            <span id="contributors">10</span> contributors 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">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODAzNzE5/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyODAzNzE5/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <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">
            Created by
            <span id="contributors">10</span> contributors 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">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODIyMDk1/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODIyMDk1/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <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">
            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>
    </footer>
</body>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODMxMTEz/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyODMxMTEz/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <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">
            Created by
            <span id="contributors">10</span> contributors 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;");

    fetch("https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors")
        .then(function (response) {
            if (response.status !== 200) {
                console.log(
                    "Looks like there was a problem. Status Code: " + response.status
                );
                return;
            }
            response.json().then(function (data) {
                var contributors = document.getElementById("contributors");
                contributors.innerText = data.length;
            });
        })
        .catch(function (err) {
            console.log("Fetch Error :-S", err);
        });
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyODkzMzc3/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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/MDExOlB1bGxSZXF1ZXN0MjAyODkzMzc3/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="footer">
        <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">
            Created by
            <span id="contributors">10</span> contributors 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;");

    fetch("https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors")
        .then(function (response) {
            if (response.status !== 200) {
                console.log(
                    "Looks like there was a problem. Status Code: " + response.status
                );
                return;
            }
            response.json().then(function (data) {
                var contributors = document.getElementById("contributors");
                contributors.innerText = data.length;
            });
        })
        .catch(function (err) {
            console.log("Fetch Error :-S", err);
        });
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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 {
  flex: 1;
  margin: 0 auto;
  max-width: 32rem;
  width: 32rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .container p {
    font-size: 18px;
  }

  footer {
    text-align: unset;
    padding: 1em 0 2em;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/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="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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>, <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
            <ul class="theme__list">
                <li class="theme__item">
                    <button class="theme__button js-theme-button" value="dark">Dark</button>
                </li>
                <li class="theme__item">
                    <button class="theme__button js-theme-button" value="light">Light</button>
                </li>
            </ul>
        </div>
    </div>
    <footer class="footer" role="contentinfo">
    <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">
            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>
    </footer>
</body>
<script src="/theme/theme.js"></script>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI5OTU1/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTI5OTU1/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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" role="contentinfo">
        <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">
            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>
    </footer>
</body>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTM2MTYw/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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 {
  flex: 1;
  margin: 0 auto;
  max-width: 32rem;
  width: 32rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@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-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTM2MTYw/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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>, <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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" role="contentinfo">
    <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">
            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>
    </footer>
</body>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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(--move-in-offset));
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 125%;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -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 {
  flex: 1;
  margin: 0 auto;
  max-width: 32rem;
  width: 32rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  font-size: 80%;
  text-align: center;
  padding: 1rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .container p {
    font-size: 18px;
  }

  footer {
    text-align: unset;
    padding: 1em 0 2em;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/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="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">
              <figure class="logo-css">
                <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>
              </figure>
            </a>
            <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services
                on the planet.
            </h1>
            <hr>
        </header>
        <main>
            <p>We have open positions for technical product designers &amp; 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 <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>, <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
            <ul class="theme__list">
                <li class="theme__item">
                    <button class="theme__button js-theme-button" value="dark">Dark</button>
                </li>
                <li class="theme__item">
                    <button class="theme__button js-theme-button" value="light">Light</button>
                </li>
            </ul>
        </div>
    </div>
    <footer class="footer" role="contentinfo">
    <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">
            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>
    </footer>
</body>
<script src="/theme/theme.js"></script>
<script type="text/javascript">
var consoleStyles = [
  '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;'
].join('')

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',
  consoleStyles
)

fetch(
  'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
)
  .then(function(response) {
    if (response.status !== 200) {
      console.log(
        'Looks like there was a problem. Status Code: ' + response.status
      )
      return
    }
    response.json().then(function(data) {
      var contributors = document.getElementById('contributors')
      contributors.innerText = data.length
    })
  })
  .catch(function(err) {
    console.log('Fetch Error :-S', err)
  })
</script>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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: translate3d(0, var(--move-in-offset), 0);
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 16px;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1.25rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

::-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: 40rem;
  margin: 0 auto;
  flex: 1;
  margin: 0 auto;
  max-width: 40rem;
  width: 40rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

p {
  font-size: 1.125rem;
}

@media only screen and (min-width: 40em) {
  p {
    font-size: 1.25rem;
  }
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  font-size: 1.688rem;
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  text-align: center;
  padding: 1.25rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  footer {
    text-align: unset;
    padding: 1.25rem 0 2.5rem;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <figure class="logo-css">
          <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>
        </figure>
      </a>
      <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on the planet.
      </h1>
      <hr>
    </header>
    <main>
      <p>We have open positions for technical product designers &amp; 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
        <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>,
        <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building
        <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
      <ul class="theme__list">
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="dark">Dark</button>
        </li>
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="light">Light</button>
        </li>
      </ul>
    </div>
  </div>
  <footer class="footer" role="contentinfo">
    <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">
      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>
  </footer>
</body>
<script src="theme/theme.js"></script>
<script type="text/javascript">
  var consoleStyles = [
    '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;'
  ].join('')

  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',
    consoleStyles
  )

  fetch(
    'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
  )
    .then(function (response) {
      if (response.status !== 200) {
        console.log(
          'Looks like there was a problem. Status Code: ' + response.status
        )
        return
      }
      response.json().then(function (data) {
        var contributors = document.getElementById('contributors')
        contributors.innerText = data.length
      })
    })
    .catch(function (err) {
      console.log('Fetch Error :-S', err)
    })
</script>

</html>

================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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: translate3d(0, var(--move-in-offset), 0);
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 16px;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1.25rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

::-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: 40rem;
  margin: 0 auto;
  flex: 1;
  margin: 0 auto;
  max-width: 40rem;
  width: 40rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

p {
  font-size: 1.125rem;
}

@media only screen and (min-width: 40em) {
  p {
    font-size: 1.25rem;
  }
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  font-size: 1.688rem;
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  text-align: center;
  padding: 1.25rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  footer {
    text-align: unset;
    padding: 1.25rem 0 2.5rem;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <figure class="logo-css">
          <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>
        </figure>
      </a>
      <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on the planet.
      </h1>
      <hr>
    </header>
    <main>
      <p>We have open positions for technical product designers &amp; 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
        <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>,
        <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building
        <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
      <ul class="theme__list">
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="dark">Dark</button>
        </li>
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="light">Light</button>
        </li>
      </ul>
    </div>
  </div>
  <footer class="footer" role="contentinfo">
    <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">
      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>
  </footer>
  <script src="theme/theme.js"></script>
  <script type="text/javascript">
    function logLogo(sz) {
      var sp = 10;
      var styles = [
        "font-size: 1px",
        "display: inline-block",
        "padding-left: " + (sz * 2 + sp) + "px",
        "padding-top: " + (sz * 2 + sp) + "px",
        "background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)"
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        "background-repeat: no-repeat",
        "background-size: " + (sz * 2 + sp) + "px " + sz + "px",
        "background-position: 0 0, 0 " + (sz + sp) + "px"
      ]

      console.log('%c ', styles.join(';'));
      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);

    fetch(
      'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
    )
      .then(function (response) {
        if (response.status !== 200) {
          console.log(
            'Looks like there was a problem. Status Code: ' + response.status
          )
          return
        }
        response.json().then(function (data) {
          var contributors = document.getElementById('contributors')
          contributors.innerText = data.length
        })
      })
      .catch(function (err) {
        console.log('Fetch Error :-S', err)
      })
  </script>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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: translate3d(0, var(--move-in-offset), 0);
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 16px;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1.25rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

::-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: 40rem;
  margin: 0 auto;
  flex: 1;
  margin: 0 auto;
  max-width: 40rem;
  width: 40rem;
}

p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}

p {
  font-size: 1.125rem;
}

@media only screen and (min-width: 40em) {
  p {
    font-size: 1.25rem;
  }
}

header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  font-size: 1.688rem;
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}

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-link {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}
.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}

.footer {
  text-align: center;
  padding: 1.25rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}

footer [href*="code"]:hover {
  color: #007acc;
}

footer [href*="github"]:hover {
  color: #6cc644;
}

@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  footer {
    text-align: unset;
    padding: 1.25rem 0 2.5rem;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }

  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <figure class="logo-css">
          <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>
        </figure>
      </a>
      <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on the planet.
      </h1>
      <hr>
    </header>
    <main>
      <p>We have open positions for technical product designers &amp; 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
        <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>,
        <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building
        <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
      <ul class="theme__list">
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="dark">Dark</button>
        </li>
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="light">Light</button>
        </li>
      </ul>
    </div>
  </div>
  <footer class="footer" role="contentinfo">
    <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">
      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>
  </footer>
  <script src="theme/theme.js"></script>
  <script type="text/javascript">
    function logLogo(sz) {
      var sp = 10;
      var styles = [
        "font-size: 1px",
        "display: inline-block",
        "padding-left: " + (sz * 2 + sp) + "px",
        "padding-top: " + (sz * 2 + sp) + "px",
        "background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)"
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        "background-repeat: no-repeat",
        "background-size: " + (sz * 2 + sp) + "px " + sz + "px",
        "background-position: 0 0, 0 " + (sz + sp) + "px"
      ]

      console.log('%c ', styles.join(';'));
      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);

    fetch(
      'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
    )
      .then(function (response) {
        if (response.status !== 200) {
          console.log(
            'Looks like there was a problem. Status Code: ' + response.status
          )
          return
        }
        response.json().then(function (data) {
          var contributors = document.getElementById('contributors')
          contributors.innerText = data.length
        })
      })
      .catch(function (err) {
        console.log('Fetch Error :-S', err)
      })
  </script>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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: translate3d(0, var(--move-in-offset), 0);
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 16px;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}
html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}
body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1.25rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
::-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: 40rem;
  margin: 0 auto;
  flex: 1;
  margin: 0 auto;
  max-width: 40rem;
  width: 40rem;
}
p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}
p {
  font-size: 1.125rem;
}
@media only screen and (min-width: 40em) {
  p {
    font-size: 1.25rem;
  }
}
header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  font-size: 1.688rem;
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}
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-link {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto;
}
.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}
.logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}
.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
.footer {
  text-align: center;
  padding: 1.25rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}
footer [href*="code"]:hover {
  color: #007acc;
}
footer [href*="github"]:hover {
  color: #6cc644;
}
@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  footer {
    text-align: unset;
    padding: 1.25rem 0 2.5rem;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <figure class="logo-css">
          <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>
        </figure>
      </a>
      <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on the planet.
      </h1>
      <hr>
    </header>
    <main>
      <p>We have open positions for technical product designers &amp; 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
        <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>,
        <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building
        <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
      <ul class="theme__list">
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="dark">Dark</button>
        </li>
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="light">Light</button>
        </li>
      </ul>
    </div>
  </div>
  <footer class="footer" role="contentinfo">
    <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">
      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>
  </footer>
  <script src="theme/theme.js"></script>
  <script type="text/javascript">
    function logLogo(sz) {
      var sp = 10;
      var styles = [
        "font-size: 1px",
        "display: inline-block",
        "padding-left: " + (sz * 2 + sp) + "px",
        "padding-top: " + (sz * 2 + sp) + "px",
        "background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)"
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        "background-repeat: no-repeat",
        "background-size: " + (sz * 2 + sp) + "px " + sz + "px",
        "background-position: 0 0, 0 " + (sz + sp) + "px"
      ]

      console.log('%c ', styles.join(';'));
      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);

    fetch(
      'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
    )
      .then(function (response) {
        if (response.status !== 200) {
          console.log(
            'Looks like there was a problem. Status Code: ' + response.status
          )
          return
        }
        response.json().then(function (data) {
          var contributors = document.getElementById('contributors')
          contributors.innerText = data.length
        })
      })
      .catch(function (err) {
        console.log('Fetch Error :-S', err)
      })
  </script>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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: translate3d(0, var(--move-in-offset), 0);
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 16px;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}
html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}
body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1.25rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
::-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: 40rem;
  margin: 0 auto;
  flex: 1;
  margin: 0 auto;
  max-width: 40rem;
  width: 40rem;
}
p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}
p {
  font-size: 1.125rem;
}
@media only screen and (min-width: 40em) {
  p {
    font-size: 1.25rem;
  }
}
header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  font-size: 1.688rem;
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}
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-link {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto;
}
.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}
.logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}
.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
.footer {
  text-align: center;
  padding: 1.25rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}
footer [href*="code"]:hover {
  color: #007acc;
}
footer [href*="github"]:hover {
  color: #6cc644;
}
@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  footer {
    text-align: unset;
    padding: 1.25rem 0 2.5rem;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <figure class="logo-css">
          <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>
        </figure>
      </a>
      <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on the planet.
      </h1>
      <hr>
    </header>
    <main>
      <p>We have open positions for technical product designers &amp; 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
        <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>,
        <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building
        <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
      <ul class="theme__list">
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="dark">Dark</button>
        </li>
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="light">Light</button>
        </li>
      </ul>
    </div>
  </div>
  <footer class="footer" role="contentinfo">
    <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">
      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>
  </footer>
  <script src="theme/theme.js"></script>
  <script type="text/javascript">
    function logLogo(sz) {
      var sp = 10;
      var styles = [
        "font-size: 1px",
        "display: inline-block",
        "padding-left: " + (sz * 2 + sp) + "px",
        "padding-top: " + (sz * 2 + sp) + "px",
        "background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)"
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        "background-repeat: no-repeat",
        "background-size: " + (sz * 2 + sp) + "px " + sz + "px",
        "background-position: 0 0, 0 " + (sz + sp) + "px"
      ]

      console.log('%c ', styles.join(';'));
      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);

    fetch(
      'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
    )
      .then(function (response) {
        if (response.status !== 200) {
          console.log(
            'Looks like there was a problem. Status Code: ' + response.status
          )
          return
        }
        response.json().then(function (data) {
          var contributors = document.getElementById('contributors')
          contributors.innerText = data.length
        })
      })
      .catch(function (err) {
        console.log('Fetch Error :-S', err)
      })
  </script>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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: translate3d(0, var(--move-in-offset), 0);
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 16px;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}
html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}
body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1.25rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
::-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: 40rem;
  margin: 0 auto;
  flex: 1;
  margin: 0 auto;
  max-width: 40rem;
  width: 40rem;
}
p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}
p {
  font-size: 1.125rem;
}
@media only screen and (min-width: 40em) {
  p {
    font-size: 1.25rem;
  }
}
header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  font-size: 1.688rem;
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}
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-link {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto;
}
.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}
.logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}
.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
.footer {
  text-align: center;
  padding: 1.25rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}
footer [href*="code"]:hover {
  color: #007acc;
}
footer [href*="github"]:hover {
  color: #6cc644;
}
@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  footer {
    text-align: unset;
    padding: 1.25rem 0 2.5rem;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <figure class="logo-css">
          <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>
        </figure>
      </a>
      <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on the planet.
      </h1>
      <hr>
    </header>
    <main>
      <p>We have open positions for technical product designers &amp; 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
        <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>,
        <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building
        <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 class="theme">
      <ul class="theme__list">
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="dark">Dark</button>
        </li>
        <li class="theme__item">
          <button class="theme__button js-theme-button" value="light">Light</button>
        </li>
      </ul>
    </div>
  </div>
  <footer class="footer" role="contentinfo">
    <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">
      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>
  </footer>
  <script src="theme/theme.js"></script>
  <script type="text/javascript">
    function logLogo(sz) {
      var sp = 10;
      var styles = [
        "font-size: 1px",
        "display: inline-block",
        "padding-left: " + (sz * 2 + sp) + "px",
        "padding-top: " + (sz * 2 + sp) + "px",
        "background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)"
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        "background-repeat: no-repeat",
        "background-size: " + (sz * 2 + sp) + "px " + sz + "px",
        "background-position: 0 0, 0 " + (sz + sp) + "px"
      ]

      console.log('%c ', styles.join(';'));
      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);

    fetch(
      'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
    )
      .then(function (response) {
        if (response.status !== 200) {
          console.log(
            'Looks like there was a problem. Status Code: ' + response.status
          )
          return
        }
        response.json().then(function (data) {
          var contributors = document.getElementById('contributors')
          contributors.innerText = data.length
        })
      })
      .catch(function (err) {
        console.log('Fetch Error :-S', err)
      })
  </script>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.theme__item {
  position: relative;
  display: inline-block;
}

.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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/docs/css/style.css
================================================
:root {
  --blue: #05a6f0;
  --link-color: #ffba08;
  --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: translate3d(0, var(--move-in-offset), 0);
    opacity: 0;
  }
  to {
    transform: none;
    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;
  }
}

html {
  position: relative;
  font-size: 16px;
  font-family: Inconsolata, Consolas, monospace;
  line-height: 1.25;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #05a6f0),
    color-stop(0.67, #ffba08)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #05a6f0 33%,
    #ffba08 67%
  );
}
html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, #ffbb00),
    color-stop(0.67, #00a1f1)
  );
  background-image: -moz-linear-gradient(
    center bottom,
    #ffbb00 33%,
    #00a1f1 67%
  );
  animation: 4s both root-gradient linear infinite;
}
body {
  display: flex;
  flex-flow: column nowrap;
  min-height: calc(100vh - 10px);
  margin: 5px;
  padding: 0 1.25rem;
  color: #bbb;
  background-color: rgba(18, 18, 18, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
::-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: 40rem;
  margin: 0 auto;
  flex: 1;
  margin: 0 auto;
  max-width: 40rem;
  width: 40rem;
}
p,
h1 {
  margin: 0;
  padding: 10px 0.5em;
}
p {
  font-size: 1.125rem;
}
@media only screen and (min-width: 40em) {
  p {
    font-size: 1.25rem;
  }
}
header h1 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 4);
  font-size: 1.688rem;
  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 {
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 5);
}
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-link {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto;
}
.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}
.logo-image {
  display: block;
  width: 100%;
  height: auto;
}
.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}
.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f35325;
}
.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}
.logo-tile--yellow {
  background-color: #ffba08;
  animation-delay: calc(var(--logo-tiles-in-delay) * 3);
}
.footer {
  text-align: center;
  padding: 1.25rem 0;
  animation: var(--move-in-animation);
  animation-delay: calc(var(--move-in-base-delay) * 9);
}
footer [href*="code"]:hover {
  color: #007acc;
}
footer [href*="github"]:hover {
  color: #6cc644;
}
@media only screen and (max-width: 40em) {
  .container {
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  footer {
    text-align: unset;
    padding: 1.25rem 0 2.5rem;
    max-width: calc(100vw - 10vw);
    margin: 0 auto;
  }
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <figure class="logo-css">
          <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>
        </figure>
      </a>
      <h1>Microsoft is looking for designers who code to help create the most compelling developer tools &amp; services on the planet.
      </h1>
      <hr>
    </header>
    <main>
      <p>We have open positions for technical product designers &amp; 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
        <a href="https://www.microsoft.com/en-us/diversity/" title="Microsoft's diversity and inclusion efforts">diversity</a>,
        <a href="https://open.microsoft.com/" title="Articles and updates on Microsoft's open source contributions">openness</a>, and building
        <a href="https://www.microsoft.com/design/" title="Microsoft's design tools and Fluent Design System">delightful tools</a> 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 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>
  <footer class="footer" role="contentinfo">
    <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">
      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>
  </footer>
  <script src="theme/theme.js"></script>
  <script type="text/javascript">
    function logLogo(sz) {
      var sp = 10;
      var styles = [
        "font-size: 1px",
        "display: inline-block",
        "padding-left: " + (sz * 2 + sp) + "px",
        "padding-top: " + (sz * 2 + sp) + "px",
        "background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)"
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        "background-repeat: no-repeat",
        "background-size: " + (sz * 2 + sp) + "px " + sz + "px",
        "background-position: 0 0, 0 " + (sz + sp) + "px"
      ]

      console.log('%c ', styles.join(';'));
      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);

    fetch(
      'https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors'
    )
      .then(function (response) {
        if (response.status !== 200) {
          console.log(
            'Looks like there was a problem. Status Code: ' + response.status
          )
          return
        }
        response.json().then(function (data) {
          var contributors = document.getElementById('contributors')
          contributors.innerText = data.length
        })
      })
      .catch(function (err) {
        console.log('Fetch Error :-S', err)
      })
  </script>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/docs/theme/theme.css
================================================
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* UI Styling */

.theme {
  position: relative;
  padding: 1rem;
  font-size: 0;
  text-align: center;
  z-index: 900;
  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: 1.5s;
}

.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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/docs/css/style.css
================================================
@charset "UTF-8";

/* Animations */

:root {
  --blue: #05a6f0;
  --yellow: #ffba08;
  --green: #6cc644;
  --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;
}

@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: 125%;
  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
    "DejaVu Sans Mono", monospace;
  line-height: 1.25;
  background-color: var(--page-background);
}
html[data-loaded] {
  background: linear-gradient(to bottom, var(--blue) 33%, var(--yellow) 67%);
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: linear-gradient(to bottom, var(--yellow) 33%, var(--blue) 67%);
  animation: var(--root-gradient-animation);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: var(--page-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  color: white;
  background: var(--blue);
}

::selection {
  color: white;
  background: #05a6f0; /* Edge could not work with custom property here */
}

a {
  color: var(--yellow);
  text-decoration: none;
  transition: 400ms color;
}

a:hover,
a:focus {
  color: var(--blue);
}

p,
h1 {
  margin: 1rem 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;
  }
}

/* Logo */

.logo-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  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: #f33525;
}

.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}

.logo-tile--yellow {
  background-color: #ffba08;
  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;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

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 {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  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(--green);
}

.footer-piece--separate {
  display: block;
}

@media only screen and (max-width: 40em) {
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <div class="logo-css" 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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services
        on the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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 type="text/javascript">
    function markDocumentAsLoaded() {
      setTimeout(function() {
        document.documentElement.dataset.loaded = true
      }, 1000)
    }

    addEventListener('load', markDocumentAsLoaded);
  </script>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/docs/css/style.css
================================================
@charset "UTF-8";

/* Animations */

:root {
  --blue: #05a6f0;
  --yellow: #ffba08;
  --green: #6cc644;
  --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;
}

@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: 125%;
  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
    "DejaVu Sans Mono", monospace;
  line-height: 1.25;
  background: linear-gradient(to bottom, var(--blue) 33%, var(--yellow) 67%);
  background-color: var(--page-background);
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--yellow) 33%, var(--blue) 67%);
  animation: var(--root-gradient-animation);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: var(--page-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  color: white;
  background: var(--blue);
}

::selection {
  color: white;
  background: #05a6f0; /* Edge could not work with custom property here */
}

a {
  color: var(--yellow);
  text-decoration: none;
  transition: 400ms color;
}

a:hover,
a:focus {
  color: var(--blue);
}

p,
h1 {
  margin: 1rem 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;
  }
}

/* Logo */

.logo-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto 2.5rem;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f33525;
}

.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}

.logo-tile--yellow {
  background-color: #ffba08;
  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;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

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 {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  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(--green);
}

.footer-piece--separate {
  display: block;
}

@media only screen and (max-width: 40em) {
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/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 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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <div class="logo-css" 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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services
        on the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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(sz) {
      const sp = 10;
      const styles = [
        'font-size: 1px',
        'display: inline-block',
        'padding-left: ' + (sz * 2 + sp) + 'px',
        'padding-top: ' + (sz * 2 + sp) + 'px',
        'background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)'
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        'background-repeat: no-repeat',
        'background-size: ' + (sz * 2 + sp) + 'px ' + sz + 'px',
        'background-position: 0 0, 0 ' + (sz + sp) + 'px'
      ];
      
      console.log('%c ', styles.join(';'));
      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>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/docs/css/style.css
================================================
@charset "UTF-8";

/* Animations */

:root {
  --blue: #05a6f0;
  --yellow: #ffba08;
  --green: #6cc644;
  --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;
}

@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: 125%;
  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
    "DejaVu Sans Mono", monospace;
  line-height: 1.25;
  background: linear-gradient(to bottom, var(--blue) 33%, var(--yellow) 67%);
  background-color: var(--page-background);
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--yellow) 33%, var(--blue) 67%);
  animation: var(--root-gradient-animation);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: var(--page-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  color: white;
  background: var(--blue);
}

::selection {
  color: white;
  background: #05a6f0; /* Edge could not work with custom property here */
}

a {
  color: var(--yellow);
  text-decoration: none;
  transition: 400ms color;
}

a:hover,
a:focus {
  color: var(--blue);
}

p,
h1 {
  margin: 1rem 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;
  }
}

/* Logo */

.logo-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto 2.5rem;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  margin: 0;
}

.logo-tile {
  display: block;
  width: 45%;
  height: 45%;
  margin: 2.5%;
  animation: var(--logo-tiles-in-animation);
}

.logo-tile--red {
  background-color: #f33525;
}

.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}

.logo-tile--yellow {
  background-color: #ffba08;
  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;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

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 {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  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(--green);
}

.footer-piece--separate {
  display: block;
}

@media only screen and (max-width: 40em) {
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <div class="logo-css" 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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services
        on the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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(sz) {
      const sp = 10;
      const styles = [
        'font-size: 1px',
        'display: inline-block',
        'padding-left: ' + (sz * 2 + sp) + 'px',
        'padding-top: ' + (sz * 2 + sp) + 'px',
        'background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)'
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        'background-repeat: no-repeat',
        'background-size: ' + (sz * 2 + sp) + 'px ' + sz + 'px',
        'background-position: 0 0, 0 ' + (sz + sp) + 'px'
      ];
      
      console.log('%c ', styles.join(';'));
      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>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/docs/css/style.css
================================================
@charset "UTF-8";

/* Animations */

:root {
  --blue: #05a6f0;
  --yellow: #ffba08;
  --green: #6cc644;
  --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;
}

@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: 125%;
  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
    "DejaVu Sans Mono", monospace;
  line-height: 1.25;
  background: linear-gradient(to bottom, var(--blue) 33%, var(--yellow) 67%);
  background-color: var(--page-background);
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--yellow) 33%, var(--blue) 67%);
  animation: var(--root-gradient-animation);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: var(--page-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  color: white;
  background: var(--blue);
}

::selection {
  color: white;
  background: #05a6f0; /* Edge could not work with custom property here */
}

a {
  color: var(--yellow);
  text-decoration: none;
  transition: 400ms color;
}

a:hover,
a:focus {
  color: var(--blue);
}

p,
h1 {
  margin: 1rem 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;
  }
}

/* Logo */

.logo-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  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: #f33525;
}

.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}

.logo-tile--yellow {
  background-color: #ffba08;
  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;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

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 {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  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(--green);
}

.footer-piece--separate {
  display: block;
}

@media only screen and (max-width: 40em) {
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <div class="logo-css" 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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services
        on the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/docs/css/style.css
================================================
@charset "UTF-8";

/* Animations */

:root {
  --blue: #05a6f0;
  --yellow: #ffba08;
  --green: #6cc644;
  --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;
}

@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: 125%;
  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
    "DejaVu Sans Mono", monospace;
  line-height: 1.25;
  background: linear-gradient(to bottom, var(--blue) 33%, var(--yellow) 67%);
  background-color: var(--page-background);
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--yellow) 33%, var(--blue) 67%);
  animation: var(--root-gradient-animation);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: var(--page-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  color: white;
  background: var(--blue);
}

::selection {
  color: white;
  background: #05a6f0; /* Edge could not work with custom property here */
}

a {
  color: var(--yellow);
  text-decoration: none;
  transition: 400ms color;
}

a:hover,
a:focus {
  color: var(--blue);
}

p,
h1 {
  margin: 1rem 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;
  }
}

/* Logo */

.logo-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto 2.5rem;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  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: #f33525;
}

.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}

.logo-tile--yellow {
  background-color: #ffba08;
  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;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

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 {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  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(--green);
}

.footer-piece--separate {
  display: block;
}

@media only screen and (max-width: 40em) {
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <div class="logo-css" 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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services
        on the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/docs/css/style.css
================================================
@charset "UTF-8";

/* Animations */

:root {
  --blue: #05a6f0;
  --yellow: #ffba08;
  --green: #6cc644;
  --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;
}

@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: 125%;
  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
    "DejaVu Sans Mono", monospace;
  line-height: 1.25;
  background: linear-gradient(to bottom, var(--blue) 33%, var(--yellow) 67%);
  background-color: var(--page-background);
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--yellow) 33%, var(--blue) 67%);
  animation: var(--root-gradient-animation);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: var(--page-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  color: white;
  background: var(--blue);
}

::selection {
  color: white;
  background: #05a6f0; /* Edge could not work with custom property here */
}

a {
  color: var(--yellow);
  text-decoration: none;
  transition: 400ms color;
}

a:hover,
a:focus {
  color: var(--blue);
}

p,
h1 {
  margin: 1rem 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;
  }
}

/* Logo */

.logo-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto 2.5rem;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  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: #f33525;
}

.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}

.logo-tile--yellow {
  background-color: #ffba08;
  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;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

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 {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  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(--green);
}

.footer-piece--separate {
  display: block;
}

@media only screen and (max-width: 40em) {
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <div class="logo-css" 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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services
        on the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/docs/css/style.css
================================================
@charset "UTF-8";

/* Animations */

:root {
  --blue: #05a6f0;
  --yellow: #ffba08;
  --green: #6cc644;
  --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;
}

@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: 125%;
  font-family: Inconsolata, Consolas, "SFMono-Regular", Menlo,
    "DejaVu Sans Mono", monospace;
  line-height: 1.25;
  background: linear-gradient(to bottom, var(--blue) 33%, var(--yellow) 67%);
  background-color: var(--page-background);
}

html:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--yellow) 33%, var(--blue) 67%);
  animation: var(--root-gradient-animation);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 10px);
  margin: 5px;
  color: var(--page-color);
  background-color: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  color: white;
  background: var(--blue);
}

::selection {
  color: white;
  background: #05a6f0; /* Edge could not work with custom property here */
}

a {
  color: var(--yellow);
  text-decoration: none;
  transition: 400ms color;
}

a:hover,
a:focus {
  color: var(--blue);
}

p,
h1 {
  margin: 1rem 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;
  }
}

/* Logo */

.logo-link {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 2rem auto 2.5rem;
}

.logo-link:hover {
  animation: 1s both logo-tiles-hover linear infinite;
}

.logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.logo-css {
  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: #f33525;
}

.logo-tile--green {
  background-color: #81bc06;
  animation-delay: var(--logo-tiles-in-delay);
}

.logo-tile--blue {
  background-color: #05a6f0;
  animation-delay: calc(var(--logo-tiles-in-delay) * 2);
}

.logo-tile--yellow {
  background-color: #ffba08;
  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;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

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 {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.8rem;
  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(--green);
}

.footer-piece--separate {
  display: block;
}

@media only screen and (max-width: 40em) {
  .footer-piece {
    display: block;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
        <div class="logo-css" 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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services
        on the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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(sz) {
      const sp = 10;
      const styles = [
        'font-size: 1px',
        'display: inline-block',
        'padding-left: ' + (sz * 2 + sp) + 'px',
        'padding-top: ' + (sz * 2 + sp) + 'px',
        'background-image: linear-gradient(90deg, #F0521F 0px, #F0521F <p1>px, transparent <p1>px, transparent <p2>px, #7FCC2C <p2>px, #7FCC2C <p3>px, transparent <p3>px), linear-gradient(90deg, #00ADF0 0px, #00ADF0 <p4>px, transparent <p4>px, transparent <p5>px, #FCBA12 <p5>px, #FCBA12 <p6>px, transparent <p6>px)'
          .replace(/<p1>/g, '' + (sz))
          .replace(/<p2>/g, '' + (sz + sp))
          .replace(/<p3>/g, '' + (sz * 2 + sp))
          .replace(/<p4>/g, '' + (sz))
          .replace(/<p5>/g, '' + (sz + sp))
          .replace(/<p6>/g, '' + (sz * 2 + sp)),
        'background-repeat: no-repeat',
        'background-size: ' + (sz * 2 + sp) + 'px ' + sz + 'px',
        'background-position: 0 0, 0 ' + (sz + sp) + 'px'
      ];
      
      console.log('%c ', styles.join(';'));
      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>
</body>
</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/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 {
  border: 3px solid #444;
}

.theme__button:not([disabled]) {
  cursor: pointer;
}

@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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/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;
  --medium-grey: #777;
  --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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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 var(--medium-grey);
  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;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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>
    <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/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/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 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/MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw/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/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/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;
  }
}

@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: 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/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/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/MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2/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/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/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;
  --medium-grey: #777;
  --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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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 var(--medium-grey);
  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;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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 type="text/javascript">
    function markDocumentAsLoaded() {
      setTimeout(function () {
        document.documentElement.dataset.loaded = true
      }, 1000)
    }

    addEventListener('load', markDocumentAsLoaded);

  </script>
</body>

</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/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 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/MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/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;
  --medium-grey: #777;
  --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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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 var(--medium-grey);
  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;
  }
}


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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 role="banner">
      <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 role="main">
      <h1>
        Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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" role="contentinfo">
    <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>
    <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 type="text/javascript">
    function markDocumentAsLoaded() {
      setTimeout(function () {
        document.documentElement.dataset.loaded = true
      }, 1000)
    }

    addEventListener('load', markDocumentAsLoaded);

  </script>
</body>

</html>


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/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 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/MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx/docs/theme/theme.js
================================================
var $body = document.body;
var $themeBtns = document.querySelectorAll(".js-theme-button");

$themeBtns[0].setAttribute("disabled", true);

$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", true);
  };
});


================================================
FILE: docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/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/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/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/MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw/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/MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5/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;
  --medium-grey: #777;
  --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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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 var(--medium-grey);
  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/MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5/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 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/MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5/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/MDExOlB1bGxSZXF1ZXN0MjAzNDA5NTQw/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;
  --medium-grey: #777;
  --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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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 var(--medium-grey);
  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/MDExOlB1bGxSZXF1ZXN0MjAzNDA5NTQw/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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">
      <a href="./time-travel/" title="See past versions of this site">Time Travel</a>
    </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/MDExOlB1bGxSZXF1ZXN0MjAzNDA5NTQw/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 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/MDExOlB1bGxSZXF1ZXN0MjAzNDA5NTQw/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/MDExOlB1bGxSZXF1ZXN0MjAzNTI4Nzg0/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;
  --medium-grey: #777;
  --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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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 var(--medium-grey);
  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/MDExOlB1bGxSZXF1ZXN0MjAzNTI4Nzg0/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAzNTI4Nzg0/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 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/MDExOlB1bGxSZXF1ZXN0MjAzNTI4Nzg0/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/MDExOlB1bGxSZXF1ZXN0MjAzNTM1NTUw/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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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/MDExOlB1bGxSZXF1ZXN0MjAzNTM1NTUw/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAzNTM1NTUw/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/MDExOlB1bGxSZXF1ZXN0MjAzNTM1NTUw/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/MDExOlB1bGxSZXF1ZXN0MjAzNTQwNTU0/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: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, var(--brand-blue)),
    color-stop(0.67, var(--brand-yellow))
  );
  background: unquote(
    "-moz-linear-gradient(center bottom, var(--brand-blue) 33%, var(--brand-yellow) 67%)"
  );
  background: unquote(
    "linear-gradient(center bottom, var(--brand-blue), var(--brand-yellow))"
  );
  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/MDExOlB1bGxSZXF1ZXN0MjAzNTQwNTU0/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="https://fonts.googleapis.com/css?family=Inconsolata">
  <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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAzNTQwNTU0/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/MDExOlB1bGxSZXF1ZXN0MjAzNTQwNTU0/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/MDExOlB1bGxSZXF1ZXN0MjAzNTk4NDI2/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;
  }
}

@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: 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/MDExOlB1bGxSZXF1ZXN0MjAzNTk4NDI2/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&nbsp;&amp;&nbsp;services on
        the planet.
      </h1>
      <p>
        We have open positions for technical product designers &amp; 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/MDExOlB1bGxSZXF1ZXN0MjAzNTk4NDI2/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/MDExOlB1bGxSZXF1ZXN0MjAzNTk4NDI2/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/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">
  <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="https://microsoft.github.io/join-dev-design/microsoft-og-image.png">
  <link rel="stylesheet" href="./style.css">
  <link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
  <script src="./time-travel.js"></script>
</head>

<body>
  <div class="container">
    <main class="display-wrapper">
      <iframe id="js-display" class="display" src="" frameborder="0"></iframe>
    </main>
    <div id="js-history" class="history">
      <h2 class="history__count">
        <span id="js-history-id">1</span>
        <span class="-text--fade">/</span>
        <span id="js-history-max" class="-text-fade">-</span>
      </h2>
      <div class="history__controller">
        <button id="js-button-first"><span tabindex="-1">First</span></button>
        <button id="js-button-previous"><span tabindex="-1">Previous</span></button>
        <button id="js-button-next"><span tabindex="-1">Next</span></button>
        <button id="js-button-last"><span tabindex="-1">Latest</span></button>
      </div>
      <hr>
      <div class="pr">
        <div class="pr__people-wrapper">
          <div class="pr__people people--author">
            <img id="js-pr-author-avatar" class="pr__avatar" src="">
            <p id="js-pr-author"></p>
          </div>
          <div class="pr__people people--editor">
            <img id="js-pr-editor-avatar" class="pr__avatar" src="">
            <p id="js-pr-editor"></p>
          </div>
        </div>
        <h1 id="js-pr-title" class="pr__title" class="history__header"></h1>
        <a id="js-pr-url" class="history__link" title="See pull request" href="#" target="_blank">See pull request</a>
        <p id="js-pr-mergedAt" class="pr__mergedAt"></p>
      </div>
      <a class="history__exit" href=".." title="Exit to main page">Exit</a>
    </div>
  </div>
</body>

</html>

================================================
FILE: docs/time-travel/index.json
================================================
{
  "data": {
    "repository": {
      "pullRequests": {
        "edges": [
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2",
              "title": "Visual suggestions",
              "url": "https://github.com/Microsoft/join-dev-design/pull/2",
              "mergedAt": "2018-07-19T15:01:19Z",
              "author": {
                "login": "adrianmg",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/589285?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T15:01:18Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmFjNDE4N2E0NzlhY2M5OWQ5NmE3NmY2ZDBmNGMyMWRiNjllNzA1OTQ=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/ac4187a479acc99d96a76f6d0f4c21db69e70594"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNDU4Mzc4",
              "title": "Remove overridden color CSS property",
              "url": "https://github.com/Microsoft/join-dev-design/pull/3",
              "mergedAt": "2018-07-19T06:38:59Z",
              "author": {
                "login": "JMPerez",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/416456?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T06:38:58Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjkzNTk0NzI0ZjdkYTI1YTJjMGI5ZWZmMGVmZDc4M2I2NDU2OTkzYWU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/93594724f7da25a2c0b9eff0efd783b6456993ae"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNTk0MzQw",
              "title": "Moved styles to a css file",
              "url": "https://github.com/Microsoft/join-dev-design/pull/5",
              "mergedAt": "2018-07-19T15:29:41Z",
              "author": {
                "login": "damidina",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/2275314?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T15:29:40Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjE3MDAzZTlhNDY0ZGZlZDRlODYzYzk0NTg5MGIyM2ZiNmNmZGMyNDg=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/17003e9a464dfed4e863c945890b23fb6cfdc248"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjE5Njgz",
              "title": "A few basic a11y fixes",
              "url": "https://github.com/Microsoft/join-dev-design/pull/6",
              "mergedAt": "2018-07-19T16:47:33Z",
              "author": {
                "login": "SteveALee",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/618922?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T16:47:33Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjhmN2M5OWE5NmY1MjQwOThjMTY5ODNhZjUyMmE5ZThlMTk2NjBiOWY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/8f7c99a96f524098c16983af522a9e8e19660b9f"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjMwODc0",
              "title": "Use HTTPS for Figma URL",
              "url": "https://github.com/Microsoft/join-dev-design/pull/8",
              "mergedAt": "2018-07-19T17:36:36Z",
              "author": {
                "login": "fiveshotsofespresso",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/26778612?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T17:36:36Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmU0MWJkNzlmMGU1N2VlYjFmYmQ3OTQxZjY5YTkzYTkzMzVhZDVkZGY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/e41bd79f0e57eeb1fbd7941f69a93a9335ad5ddf"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjMyMTA4",
              "title":
                "Visual improvements: monospaced font and load animation",
              "url": "https://github.com/Microsoft/join-dev-design/pull/9",
              "mergedAt": "2018-07-19T17:57:09Z",
              "author": {
                "login": "vladmoroz",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/8441036?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T17:57:08Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmMyMjA0OGM5YTcxMjVjYmU0OWQwNTc1YmNjZmE3MGU4YTEzZWJhZGE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/c22048c9a7125cbe49d0575bccfa70e8a13ebada"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjQwMTUx",
              "title": "trim extra space",
              "url": "https://github.com/Microsoft/join-dev-design/pull/10",
              "mergedAt": "2018-07-19T18:37:07Z",
              "author": {
                "login": "unluisco",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/6332263?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T18:37:07Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjY5OGM1OGJmMmE4OGJhMWY1YThjZjc0ZTA0ZDAwMDQwNmQzZjljNzI=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/698c58bf2a88ba1f5a8cf74e04d000406d3f9c72"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjU1MzUz",
              "title": "added margins for <600px screen width",
              "url": "https://github.com/Microsoft/join-dev-design/pull/13",
              "mergedAt": "2018-07-19T21:34:31Z",
              "author": {
                "login": "notjaril",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/15959269?v=4"
              },
              "editor": {
                "login": "notjaril",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/15959269?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-19T21:34:30Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjRhNmVhMjViODk0NDg2MjcwM2VlZmFhYWRhNDg4YjEwMjczZTFjYmQ=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/4a6ea25b8944862703eefaaada488b10273e1cbd"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjYwMjc3",
              "title":
                "indent svg file using spaces, remove fill property & add little design detail",
              "url": "https://github.com/Microsoft/join-dev-design/pull/15",
              "mergedAt": "2018-07-19T21:17:49Z",
              "author": {
                "login": "unluisco",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/6332263?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T21:17:48Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmUyMTVlMTg0OTg4NmY1ZWEyMjBjYmRiMTY0NzgxNWNmY2FjNzM2ZGY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/e215e1849886f5ea220cbdb1647815cfcac736df"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjYxMTY1",
              "title": "prevent scrollbar from flickering",
              "url": "https://github.com/Microsoft/join-dev-design/pull/17",
              "mergedAt": "2018-07-19T21:17:10Z",
              "author": {
                "login": "orouz",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/20814186?v=4"
              },
              "editor": {
                "login": "orouz",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/20814186?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-19T21:17:09Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmVjZTE2NDllNTU4N2M0YTM4YjFlMmExMmI5YzRhNWY2OGMyZDE5YWY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/ece1649e5587c4a38b1e2a12b9c4a5f68c2d19af"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjY5NzUy",
              "title":
                "Improved Animations, Content Hierarchy, Readable Links, Logo",
              "url": "https://github.com/Microsoft/join-dev-design/pull/20",
              "mergedAt": "2018-07-19T21:55:26Z",
              "author": {
                "login": "benjvmin",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/19807584?v=4"
              },
              "editor": {
                "login": "benjvmin",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/19807584?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-19T21:55:25Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjk3ODFmODUxM2U3OTVkZjgwYTU1MDI5N2MxMTVlNDc3MmQxZDE1MTg=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/9781f8513e795df80a550297c115e4772d1d1518"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjgxMTcy",
              "title":
                "Improve accessibility by add descriptive title to links",
              "url": "https://github.com/Microsoft/join-dev-design/pull/22",
              "mergedAt": "2018-07-19T21:13:54Z",
              "author": {
                "login": "reimertz",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/625287?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T21:13:53Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjdmZGQ4NTUyZWYyNjY2MWE0ZmZhNGUzZTVmN2E3NmQ4NzkyMjk5NDY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/7fdd8552ef26661a4ffa4e3e5f7a76d879229946"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjgxMjE3",
              "title": "add yarn.lock 🙃",
              "url": "https://github.com/Microsoft/join-dev-design/pull/23",
              "mergedAt": "2018-07-19T21:31:37Z",
              "author": {
                "login": "reimertz",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/625287?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T21:31:36Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjI0OGI1MTRjMDQwNDRlMTdlODliMTY3NmI5M2M1NzdhYjQyN2VlYTE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/248b514c04044e17e89b1676b93c577ab427eea1"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNjg4Njky",
              "title":
                "adds a fun little easter egg if you open the debugger tools.",
              "url": "https://github.com/Microsoft/join-dev-design/pull/25",
              "mergedAt": "2018-07-19T21:30:45Z",
              "author": {
                "login": "reimertz",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/625287?v=4"
              },
              "editor": {
                "login": "reimertz",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/625287?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-19T21:30:44Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjMxMmI1ZTMwYTBkZTAyMTEwMWIxZmFmZmExMTM5NGE2YmIyNjI3MTQ=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/312b5e30a0de021101b1faffa11394a6bb262714"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzAyNDE3",
              "title": "Added hr below header to onload animation",
              "url": "https://github.com/Microsoft/join-dev-design/pull/28",
              "mergedAt": "2018-07-19T22:55:43Z",
              "author": {
                "login": "faebser",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/333862?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-19T22:55:43Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjQyOGJmYTdmYWYzYjAxNDQ3MmEwOGEzYTZjNDk4NmUyOGJhZTQwZTU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/428bfa7faf3b014472a08a3a6c4986e28bae40e5"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzExMTI4",
              "title": "Add animations on the logo and fine-tune animations",
              "url": "https://github.com/Microsoft/join-dev-design/pull/29",
              "mergedAt": "2018-07-20T01:39:35Z",
              "author": {
                "login": "tristanlabbe",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/417203?v=4"
              },
              "editor": {
                "login": "tristanlabbe",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/417203?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-20T01:39:34Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjA3ZjI4YmI3NjUzNzZjOGE4NmY4M2VhY2I3NjA5NTFhMzU5MGVkYjk=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/07f28bb765376c8a86f83eacb760951a3590edb9"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzE2NDY5",
              "title": "Add colour transition box for visual appeal",
              "url": "https://github.com/Microsoft/join-dev-design/pull/30",
              "mergedAt": "2018-07-20T01:44:54Z",
              "author": {
                "login": "MehediH",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/10274434?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T01:44:53Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjNhZmEyZjBiMTBmMjE2MDFhN2M1ZWIzMDQ3MzY1N2UwMzMzZDFmOWY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/3afa2f0b10f21601a7c5eb30473657e0333d1f9f"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzM2NDkx",
              "title": "Fix vertical scrollbar appearing below 1000px",
              "url": "https://github.com/Microsoft/join-dev-design/pull/34",
              "mergedAt": "2018-07-20T03:23:05Z",
              "author": {
                "login": "chris-morgan",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/392868?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T03:23:04Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjAxMjY3MjlhMDYxNzEyOTEwM2E5NGYyNmNhMGY4OWEzZDg1MjJjOTU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/0126729a0617129103a94f26ca0f89a3d8522c95"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzM3Mjk4",
              "title": "Aria Accessibility",
              "url": "https://github.com/Microsoft/join-dev-design/pull/35",
              "mergedAt": "2018-07-20T03:43:41Z",
              "author": {
                "login": "Immortalin",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/7126128?v=4"
              },
              "editor": {
                "login": "Immortalin",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/7126128?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-20T03:43:40Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjZjOTI3MWQ0Y2Y4OWQ0YWUyMWMzMzJlMWU5MWJkYTc5MjI0YjFkY2E=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/6c9271d4cf89d4ae21c332e1e91bda79224b1dca"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzM3MzA0",
              "title":
                "Increase contrast of GitHub link when in hover state for accessibility",
              "url": "https://github.com/Microsoft/join-dev-design/pull/36",
              "mergedAt": "2018-07-20T03:42:48Z",
              "author": {
                "login": "mattmazzola",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/2856501?v=4"
              },
              "editor": {
                "login": "mattmazzola",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/2856501?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-20T03:42:47Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmViYTBiYzI0NjM0OGU2ZjQwZTRjODg4MWZhOTM4YmQwZTQyMGE2Mjc=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/eba0bc246348e6f40e4c8881fa938bd0e420a627"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzQ0OTM1",
              "title": "Fix spelling in GitHub and Figma <a> tag titles",
              "url": "https://github.com/Microsoft/join-dev-design/pull/38",
              "mergedAt": "2018-07-20T06:51:24Z",
              "author": {
                "login": "HunterMeyer",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/4690516?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T06:51:23Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjdhMjc0YWY3MDZmZjM3OWZkNWY2YzIxODE4ZTQ1ZmI4NDUxNGI3MmI=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/7a274af706ff379fd5f6c21818e45fb84514b72b"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzQ5NzE1",
              "title": "Centre container on IE",
              "url": "https://github.com/Microsoft/join-dev-design/pull/39",
              "mergedAt": "2018-07-20T19:15:16Z",
              "author": {
                "login": "mikekreuzer",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/7643644?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T19:15:15Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmZkNTgyNDBjODFlNTM2NjZiMWM4MGEyYzY2N2ZiNWMwMTg0NTA2ODI=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/fd58240c81e53666b1c80a2c667fb5c018450682"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzU3MjE0",
              "title": "Add the footer to the animation flow",
              "url": "https://github.com/Microsoft/join-dev-design/pull/42",
              "mergedAt": "2018-07-20T06:52:10Z",
              "author": {
                "login": "rudeayelo",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/140042?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T06:52:09Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjg0YzAwOTJmYTczYjY3MzNjMzc1YmRmZjdmNjQ3ODQzYjllZDdlYjU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/84c0092fa73b6733c375bdff7f647843b9ed7eb5"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzYxNjM5",
              "title": "Semantic Heading: H1 for semantic html & SEO purposes",
              "url": "https://github.com/Microsoft/join-dev-design/pull/45",
              "mergedAt": "2018-07-20T07:30:24Z",
              "author": {
                "login": "georgewritescode",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/8780812?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T07:30:23Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmI4NTU2YmIyMTVhNDcwODNjZDBhYzg4MTI3ZTYzY2Y1NTNkNjg2ZmY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/b8556bb215a47083cd0ac88127e63cf553d686ff"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzYzMDAw",
              "title": "Animate root gradient \"border\"",
              "url": "https://github.com/Microsoft/join-dev-design/pull/46",
              "mergedAt": "2018-07-20T07:10:38Z",
              "author": {
                "login": "crislin2046",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/22254235?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T07:10:38Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmI4NDI2ZWNlYmEyZTg0MmYyODc3MzFlMmNhMWE2MmY3ZDg1MmQzZDY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/b8426eceba2e842f287731e2ca1a62f7d852d3d6"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzYzNDU3",
              "title": "Added open graph meta tags",
              "url": "https://github.com/Microsoft/join-dev-design/pull/47",
              "mergedAt": "2018-07-20T20:44:00Z",
              "author": {
                "login": "vikaskyadav",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/12607959?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T20:44:00Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjc2ODBiN2Y0NGI2NzNlYzM2MzhjZGZkYWZlMDQyZDNkYzBjZmRiMjg=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/7680b7f44b673ec3638cdfdafe042d3dc0cfdb28"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTA4",
              "title":
                "tweaked colors to achieve greater contrast for color blind users",
              "url": "https://github.com/Microsoft/join-dev-design/pull/50",
              "mergedAt": "2018-07-20T07:26:50Z",
              "author": {
                "login": "yangwen2",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/2554783?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T07:26:49Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjQyNzViZjQzM2ZhZGMwZTAyZmUwODJmMmNiMTRjZWRlZTczZmFmYTE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/4275bf433fadc0e02fe082f2cb14cedee73fafa1"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzY3MTI4",
              "title": "Add live server for development",
              "url": "https://github.com/Microsoft/join-dev-design/pull/51",
              "mergedAt": "2018-07-20T19:09:11Z",
              "author": {
                "login": "pubudu-ranasinghe",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/3397619?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T19:09:10Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmMzZTgyMzI3MDVmZmU4N2ZhYjIzOGI5YzA2ZTZhMzFhZmY3YTc1MTk=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/c3e8232705ffe87fab238b9c06e6a31aff7a7519"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyNzgxMDc2",
              "title": "Added Time Travel Functionality",
              "url": "https://github.com/Microsoft/join-dev-design/pull/55",
              "mergedAt": "2018-07-24T03:23:53Z",
              "author": {
                "login": "georgewritescode",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/8780812?v=4"
              },
              "editor": {
                "login": "georgewritescode",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/8780812?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-24T03:23:52Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjkxZDU2MzM2ODM1NTRjOTVjZTU2NmI5ZmZhYzVmNGY4OGQ0ZDhiOTU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/91d5633683554c95ce566b9ffac5f4f88d4d8b95"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyODAwMDY2",
              "title": "Minor spacing fixes",
              "url": "https://github.com/Microsoft/join-dev-design/pull/58",
              "mergedAt": "2018-07-20T16:19:44Z",
              "author": {
                "login": "awfulaxolotl",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/711652?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T16:19:44Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjhiOTVlOWI1OWYyMzRmZmJmZTk5NTU4NjdiZjEyYTUxMmI3MDU2YmU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/8b95e9b59f234ffbfe9955867bf12a512b7056be"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyODAzNzE5",
              "title": "Split devtools css statements into lines",
              "url": "https://github.com/Microsoft/join-dev-design/pull/59",
              "mergedAt": "2018-07-20T16:17:14Z",
              "author": {
                "login": "bryanwtan",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/8355536?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T16:17:13Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjcwNWVhMjFjZTJlNjRiYzQwYWJjZmJlNjExYWYwNGY3MjY2YzVkZDc=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/705ea21ce2e64bc40abcfbe611af04f7266c5dd7"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyODIyMDk1",
              "title": "Add link to GitHub contributors",
              "url": "https://github.com/Microsoft/join-dev-design/pull/64",
              "mergedAt": "2018-07-20T16:26:41Z",
              "author": {
                "login": "ankit-m",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/9019878?v=4"
              },
              "editor": {
                "login": "ankit-m",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/9019878?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-20T16:26:41Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjczNGRhYmNhYjBjYjVmNzljZDdjOTUzOWNiMDRiNTk3ODliYTE0NzI=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/734dabcab0cb5f79cd7c9539cb04b59789ba1472"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyODMxMTEz",
              "title": "Gradient fixes",
              "url": "https://github.com/Microsoft/join-dev-design/pull/65",
              "mergedAt": "2018-07-20T16:15:52Z",
              "author": {
                "login": "crislin2046",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/22254235?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T16:15:51Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmRjYTQxNTExYzhjZmRkMWU1ZWViYTgyNTQ5ODcwZGYwYmUzMzhjYTU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/dca41511c8cfdd1e5eeba82549870df0be338ca5"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyODkzMzc3",
              "title": "Updating serve to most recent version",
              "url": "https://github.com/Microsoft/join-dev-design/pull/68",
              "mergedAt": "2018-07-20T16:13:38Z",
              "author": {
                "login": "MattPetitt",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/928396?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T16:13:38Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmY3MmZlMDljY2RjYjRkMmNjZGU1Njc5MWZiYWYwZmUzZWQyYmJjZjU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/f72fe09ccdcb4d2ccde56791fbaf0fe3ed2bbcf5"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTI1OTA0",
              "title": "Add themes",
              "url": "https://github.com/Microsoft/join-dev-design/pull/73",
              "mergedAt": "2018-07-20T20:41:21Z",
              "author": {
                "login": "d4rekanguok",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/3383539?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T20:41:20Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjJiMTY4NWZmOTI2NWY0ZGFmNDFjNDc2ZWU2ZDhkMmQwNjhkOTM2Mzc=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/2b1685ff9265f4daf41c476ee6d8d2d068d93637"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTI5OTU1",
              "title":
                "footer: change role from 'footer' to 'contentinfo' as 'footer' is an invalid value",
              "url": "https://github.com/Microsoft/join-dev-design/pull/75",
              "mergedAt": "2018-07-20T18:57:46Z",
              "author": {
                "login": "mkivikoski",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/607813?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T18:57:45Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjg0M2RlNzc4NmI5ODhmZDk0OTdhZGUwZjA0MDgxMGVlOThkNWRmYzY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/843de7786b988fd9497ade0f040810ee98d5dfc6"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTM2MTYw",
              "title":
                "content: add links to microsoft sites for diversity and openess resources",
              "url": "https://github.com/Microsoft/join-dev-design/pull/76",
              "mergedAt": "2018-07-20T19:50:42Z",
              "author": {
                "login": "mkivikoski",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/607813?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T19:50:41Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmFmZWMzOWRhM2Q0ZDZlZTc1MDIxN2QxNTNkMTFlN2FiNWZiZDZiZDY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/afec39da3d4d6ee750217d153d11e7ab5fbd6bd6"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTQxNTcx",
              "title": "Add editor config",
              "url": "https://github.com/Microsoft/join-dev-design/pull/77",
              "mergedAt": "2018-07-20T20:42:10Z",
              "author": {
                "login": "isthisnagee",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/4813262?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T20:42:09Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjljMTY1OTRiYTYyZDM5ZTdlYThhZmVkYTdlYWU3Y2FkMTc0OTVhOGE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/9c16594ba62d39e7ea8afeda7eae7cad17495a8a"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTU0Njkw",
              "title":
                "Some updates for font-sizing, accessibility, and animation performance ",
              "url": "https://github.com/Microsoft/join-dev-design/pull/78",
              "mergedAt": "2018-07-20T21:00:37Z",
              "author": {
                "login": "danielroot",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/513795?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T21:00:36Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmE2MDUxMDk4MjQ0YTQ0NThlZWZhMTZlNDkwZjA1NDljM2E0NjgwMzY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/a6051098244a4458eefa16e490f0549c3a468036"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTY2NTYw",
              "title": "MSFT logo on console using gradients",
              "url": "https://github.com/Microsoft/join-dev-design/pull/79",
              "mergedAt": "2018-07-20T22:29:27Z",
              "author": {
                "login": "sangeeth96",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/2759499?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T22:29:27Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjJmNDI1ODk5NDNmMDBlYTg5OTBlOWM5NzAyZjcwYzg1MGMwZTI2YTA=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/2f42589943f00ea8990e9c9702f70c850c0e26a0"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTc2Njc5",
              "title": "show pointer on hover over theme buttons for better ux",
              "url": "https://github.com/Microsoft/join-dev-design/pull/82",
              "mergedAt": "2018-07-20T23:52:33Z",
              "author": {
                "login": "pubudu-ranasinghe",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/3397619?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-20T23:52:33Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjkxZGIxMjlkNjc3OGMyYjU5YWQzMGQ0OGNkYzk2OWQ5NDIwMTk4Nzk=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/91db129d6778c2b59ad30d48cdc969d942019879"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTg1MjM4",
              "title": "Prettier code formatting added... need more tooling?",
              "url": "https://github.com/Microsoft/join-dev-design/pull/84",
              "mergedAt": "2018-07-21T01:58:35Z",
              "author": {
                "login": "sangeeth96",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/2759499?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-21T01:58:34Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjZkODhmNDc3MTM4Zjk1YTJmNzdjNzc0NzM4ODkyNDE0MjIwZDRhY2M=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/6d88f477138f95a2f77c774738892414220d4acc"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTkyNzEz",
              "title": "Improve tooltips",
              "url": "https://github.com/Microsoft/join-dev-design/pull/85",
              "mergedAt": "2018-07-21T08:00:59Z",
              "author": {
                "login": "hmnd",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/12853597?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-21T08:00:58Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmU3YzIzNDVkOGI3YTcyMmZlOTQ5ZGE0YjRiNmE2NDE5MjlmNjhkYmQ=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/e7c2345d8b7a722fe949da4b4b6a641929f68dbd"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTk1MzQ4",
              "title": "Corrected theme item off-by-1 pixel error",
              "url": "https://github.com/Microsoft/join-dev-design/pull/87",
              "mergedAt": "2018-07-21T07:58:58Z",
              "author": {
                "login": "crislin2046",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/22254235?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-21T07:58:57Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjNhODEwODExMmUyZDdmMGMzMzliZDliODI0Y2MyYjdmODAxMWZkZjY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/3a8108112e2d7f0c339bd9b824cc2b7f8011fdf6"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAyOTk1NzUw",
              "title": "README self-consistency",
              "url": "https://github.com/Microsoft/join-dev-design/pull/88",
              "mergedAt": "2018-07-21T07:58:31Z",
              "author": {
                "login": "crislin2046",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/22254235?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-21T07:58:31Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjU4ZmExYmVhMDhiNjc3OWZlZmM4MDhiNDkwNWZmYzdkNjEwMzE5MWM=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/58fa1bea08b6779fefc808b4905ffc7d6103191c"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDA3MjAy",
              "title": "Fix FOUC issue with root gradient",
              "url": "https://github.com/Microsoft/join-dev-design/pull/91",
              "mergedAt": "2018-07-22T17:24:36Z",
              "author": {
                "login": "crislin2046",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/22254235?v=4"
              },
              "editor": {
                "login": "crislin2046",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/22254235?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-22T17:24:36Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmIyMTI2NTM4ZjMxNjQwN2IxZDRiNmEwNDk5NWQ4NjhmYjJjNDJiYjE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/b2126538f316407b1d4b6a04995d868fb2c42bb1"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDE2MDc2",
              "title":
                "Minor design tweaks for footer, CSS improvements, HTML structure improvemetns, a11y",
              "url": "https://github.com/Microsoft/join-dev-design/pull/92",
              "mergedAt": "2018-07-21T17:18:17Z",
              "author": {
                "login": "dimanech",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/1180050?v=4"
              },
              "editor": {
                "login": "dimanech",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/1180050?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-21T17:18:17Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjUxZGZiN2M5ZWM4YzQzMDI3ZTcwYTY0YTFkNDI4ZGM0YjhhMmQ1MmI=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/51dfb7c9ec8c43027e70a64a1d428dc4b8a2d52b"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDI4ODU4",
              "title":
                "FIX: Add meta description for 100% on Lighthouse SEO audit",
              "url": "https://github.com/Microsoft/join-dev-design/pull/95",
              "mergedAt": "2018-07-22T03:14:36Z",
              "author": {
                "login": "plainspace",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/24152?v=4"
              },
              "editor": {
                "login": "plainspace",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/24152?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-22T03:14:35Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjMwMzkyNDM4OTU2YmRmNjE1NTIwOWYxMjEzOTg4MGM0NTcyMWY4ZGI=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/30392438956bdf6155209f12139880c45721f8db"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDI5MzU3",
              "title": "As above, so below (the logo)",
              "url": "https://github.com/Microsoft/join-dev-design/pull/96",
              "mergedAt": "2018-07-22T17:23:07Z",
              "author": {
                "login": "plainspace",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/24152?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-22T17:23:06Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmZkNTljODA2YWI4ZTBkNDkwZmUwZDQ5YTJmMTlmMzkxMjIzN2M3ZDE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/fd59c806ab8e0d490fe0d49a2f19f3912237c7d1"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDQ5NDA4",
              "title": "Theme selector improved",
              "url": "https://github.com/Microsoft/join-dev-design/pull/99",
              "mergedAt": "2018-07-22T17:19:29Z",
              "author": {
                "login": "kohterai",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/5862751?v=4"
              },
              "editor": {
                "login": "kohterai",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/5862751?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-22T17:19:29Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmQwOTI4YjAyZWU3ZGY2NDhhM2NkM2M3ZjQ4MjJiODM5ZWZmNjBmYmQ=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/d0928b02ee7df648a3cd3c7f4822b839eff60fbd"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDU4MTMx",
              "title": "Log logo on console using text-shadow",
              "url": "https://github.com/Microsoft/join-dev-design/pull/101",
              "mergedAt": "2018-07-22T17:17:13Z",
              "author": {
                "login": "RayPS",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/1941540?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-22T17:17:12Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjUzNzVjODFkZTA2ZTQxNjQ2NWNjMGFjNTAzNDc5Zjk2YmU0YTViMzg=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/5375c81de06e416465cc0ac503479f96be4a5b38"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDYzOTg4",
              "title":
                "[A11y] [High Contrast] Added transparent outline to the logo",
              "url": "https://github.com/Microsoft/join-dev-design/pull/102",
              "mergedAt": "2018-07-22T17:15:17Z",
              "author": {
                "login": "amitse",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/2761516?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-22T17:15:17Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmIxZDNmOTdhOWQ5YzZlZjQ4ZDNmNTkwMWNkZmNjZjIxZmRhMjE0MzY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/b1d3f97a9d9c6ef48d3f5901cdfccf21fda21436"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMDcyNjQw",
              "title": "Improve HTML markup quality",
              "url": "https://github.com/Microsoft/join-dev-design/pull/103",
              "mergedAt": "2018-07-24T01:34:07Z",
              "author": {
                "login": "karol-majewski",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/20233319?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-24T01:34:07Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmY4NGEwMjI3NzA0YjI5YWIyZjYxMmY3OTlkZWNkYTdiN2M5OWI4M2Q=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/f84a0227704b29ab2f612f799decda7b7c99b83d"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMTYyNzE2",
              "title": "Animated gradient text hover",
              "url": "https://github.com/Microsoft/join-dev-design/pull/105",
              "mergedAt": "2018-07-26T20:44:27Z",
              "author": {
                "login": "ergum",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/3108788?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-26T20:44:27Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmIyZTczOTNmMjM2MjNjNzU5ZTg5NTkyYjQ2ZTg0YWU2Y2U1MjhiOGQ=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/b2e7393f23623c759e89592b46e84ae6ce528b8d"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMjQ4ODAz",
              "title": "Make lock files consistent",
              "url": "https://github.com/Microsoft/join-dev-design/pull/107",
              "mergedAt": "2018-07-24T01:28:05Z",
              "author": {
                "login": "prichodko",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/14926950?v=4"
              },
              "editor": {
                "login": "prichodko",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/14926950?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-24T01:28:05Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjIzM2IxYWQ1NDAwYjllZTY0YjUwN2U4MjBlMjRjYWU2NWFhYjY2MTM=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/233b1ad5400b9ee64b507e820e24cae65aab6613"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzMjU1ODAx",
              "title": "Creates a pattern of style guides",
              "url": "https://github.com/Microsoft/join-dev-design/pull/108",
              "mergedAt": "2018-07-24T01:25:00Z",
              "author": {
                "login": "LadyCarni",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/6787230?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-24T01:25:00Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmIwZjUyMjliNmRjOWE3NzIzMDA5ZjYxZDQ0OGNkODU5YzI2YWY3NzU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/b0f5229b6dc9a7723009f61d448cd859c26af775"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzNDA3NTgw",
              "title": "The FOUC is back. This fixes it.",
              "url": "https://github.com/Microsoft/join-dev-design/pull/111",
              "mergedAt": "2018-07-25T17:43:05Z",
              "author": {
                "login": "crislin2046",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/22254235?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-25T17:43:05Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjAwNmVlZDMxMjFlOWZjODE3YTdkZTI4Y2ZhNzEzMGM5OWM0M2VjOTY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/006eed3121e9fc817a7de28cfa7130c99c43ec96"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzNDA4NDY5",
              "title": "Time travel travels too",
              "url": "https://github.com/Microsoft/join-dev-design/pull/112",
              "mergedAt": "2018-07-24T06:12:24Z",
              "author": {
                "login": "plainspace",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/24152?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-24T06:12:24Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmI4ODgyYmJkYjlmZTMyYTJjZDY4ZTg3ZGNlYWZkMDdlOTEyOGRmYjY=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/b8882bbdb9fe32a2cd68e87dceafd07e9128dfb6"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzNDA5NTQw",
              "title": "Fix link that exits time travel to top page",
              "url": "https://github.com/Microsoft/join-dev-design/pull/113",
              "mergedAt": "2018-07-24T04:53:53Z",
              "author": {
                "login": "dvdsgl",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/108197?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-24T04:53:52Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjY4NTVhMGEyY2NhOWM4ZjJkZjZhZGMxNmI3NmMwOGRkMTNjZWYwYmU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/6855a0a2cca9c8f2df6adc16b76c08dd13cef0be"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzNTI4Nzg0",
              "title": "used \"_blank\" as target for links to PR",
              "url": "https://github.com/Microsoft/join-dev-design/pull/117",
              "mergedAt": "2018-07-24T14:35:20Z",
              "author": {
                "login": "nuthinking",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/163635?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-24T14:35:19Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjE0NmI1NzU5MDNiNTg2M2JlMzYwMDE3NGQ1YzU2Mzg3Y2Y3ZWEyNzc=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/146b575903b5863be3600174d5c56387cf7ea277"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzNTM1NTUw",
              "title": "Keyboard nav and avoid reload when not needed",
              "url": "https://github.com/Microsoft/join-dev-design/pull/118",
              "mergedAt": "2018-07-24T16:45:50Z",
              "author": {
                "login": "nuthinking",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/163635?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-24T16:45:49Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmJhN2QzOTk2ZTk5NDMzZDVmMGU3ZGMyNzAyZDFkZWExN2M2Mzk5NzE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/ba7d3996e99433d5f0e7dc2702d1dea17c639971"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzNTQwNTU0",
              "title": "made HR (h1 bottom border) more subtle",
              "url": "https://github.com/Microsoft/join-dev-design/pull/119",
              "mergedAt": "2018-07-24T16:45:11Z",
              "author": {
                "login": "nuthinking",
                "avatarUrl":
                  "https://avatars0.githubusercontent.com/u/163635?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-24T16:45:10Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjBjNjJhZTY1Zjg1ZmE2ZDM3YTUyZjEzODcyNTQ2ZmQ4ZDgwNjA0MDA=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/0c62ae65f85fa6d37a52f13872546fd8d8060400"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjAzNTk4NDI2",
              "title": "adds hover state to time travel buttons",
              "url": "https://github.com/Microsoft/join-dev-design/pull/120",
              "mergedAt": "2018-07-26T21:23:01Z",
              "author": {
                "login": "dabutvin",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/5168796?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-26T21:23:00Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjE3OWNhMWQ4MDI3ZDIyZmUyNjFlNWI5YTAxNWMyNTc4ZDhjYzdkMmM=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/179ca1d8027d22fe261e5b9a015c2578d8cc7d2c"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjA0MDczMTU2",
              "title": "Improved UX of the theme switcher",
              "url": "https://github.com/Microsoft/join-dev-design/pull/124",
              "mergedAt": "2018-07-26T18:31:45Z",
              "author": {
                "login": "cpietsch",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/129529?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-26T18:31:44Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjU0NTkwMTYzZDE5MTNiZTU4NDMyM2Q2ZmRkNDI4MGUxNDYyMDhmMzE=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/54590163d1913be584323d6fdd4280e146208f31"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjA0MDk0NjM1",
              "title": "Remove unused font family",
              "url": "https://github.com/Microsoft/join-dev-design/pull/125",
              "mergedAt": "2018-07-26T18:29:10Z",
              "author": {
                "login": "alex-page",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/19199063?v=4"
              },
              "editor": {
                "login": "alex-page",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/19199063?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-07-26T18:29:09Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjRiNWI4MjQ4ZmFjMzFkMGNmNDU1OTY0ODk4Y2IxNTcwM2YzZGI1YjM=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/4b5b8248fac31d0cf455964898cb15703f3db5b3"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjA0MTAzMjM2",
              "title": "Remove unused css, .theme_item and header h1",
              "url": "https://github.com/Microsoft/join-dev-design/pull/127",
              "mergedAt": "2018-07-26T18:29:48Z",
              "author": {
                "login": "alex-page",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/19199063?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-26T18:29:47Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjE4ZTZmY2ZlZDAyMDMxMzczNmY0YjQ4MDBiZjg3M2NkY2VlZDNjMTg=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/18e6fcfed020313736f4b4800bf873cdceed3c18"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjA0MTA4Nzg1",
              "title": "Adjusting variables, removing unused vars",
              "url": "https://github.com/Microsoft/join-dev-design/pull/128",
              "mergedAt": "2018-07-26T21:25:04Z",
              "author": {
                "login": "alex-page",
                "avatarUrl":
                  "https://avatars1.githubusercontent.com/u/19199063?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-26T21:25:03Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjhlZWRmMWM4ODE5ZjI1Mzk2OTlkZGQ2ZTFjZTg3MDBkYWU4NWVjOTI=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/8eedf1c8819f2539699ddd6e1ce8700dae85ec92"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjA0NDc0MTI0",
              "title": "Theme easter egg",
              "url": "https://github.com/Microsoft/join-dev-design/pull/133",
              "mergedAt": "2018-08-06T17:19:03Z",
              "author": {
                "login": "d4rekanguok",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/3383539?v=4"
              },
              "editor": {
                "login": "d4rekanguok",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/3383539?v=4"
              },
              "mergeCommit": {
                "committedDate": "2018-08-06T17:19:02Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmUwOGZkOTcxZDJiMGU2MTcwYTMxYjk2NzQ4Zjc4NzQ4NzQxM2ZlMmQ=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/e08fd971d2b0e6170a31b96748f787487413fe2d"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjA0NDk0NTU5",
              "title": "seo keywords",
              "url": "https://github.com/Microsoft/join-dev-design/pull/135",
              "mergedAt": "2018-07-31T04:32:53Z",
              "author": {
                "login": "adhavalboy",
                "avatarUrl":
                  "https://avatars3.githubusercontent.com/u/16662228?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-07-31T04:32:53Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOmU0YTg4MGJhM2I5ZmU5NjczNDA3NzA4MTFhOWY0YTRmZDhmMjM3NWU=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/e4a880ba3b9fe967340770811a9f4a4fd8f2375e"
              }
            }
          },
          {
            "node": {
              "id": "MDExOlB1bGxSZXF1ZXN0MjA1OTA3ODAz",
              "title": "Fix incorrect link color in light theme",
              "url": "https://github.com/Microsoft/join-dev-design/pull/147",
              "mergedAt": "2018-08-03T11:02:30Z",
              "author": {
                "login": "cfrank",
                "avatarUrl":
                  "https://avatars2.githubusercontent.com/u/2308484?v=4"
              },
              "editor": null,
              "mergeCommit": {
                "committedDate": "2018-08-03T11:02:30Z",
                "id":
                  "MDY6Q29tbWl0MTQxNTAzNjgzOjQxMzgyYzdiODc2YjI2MTViNzZiZGM3NDM1NGRkN2IzMTk0YTAyMTc=",
                "tarballUrl":
                  "https://codeload.github.com/Microsoft/join-dev-design/legacy.tar.gz/41382c7b876b2615b76bdc74354dd7b3194a0217"
              }
            }
          }
        ]
      }
    }
  }
}


================================================
FILE: docs/time-travel/style.css
================================================
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

html {
  background-color: rgba(18, 18, 18, 1);
}

body {
  font-size: 16px;
  font-family: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica, Tahoma,
    Arial, sans-serif;
  line-height: 1.25;
  color: #bbb;
}

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%;
  margin-bottom: 1rem;
}

/* utils  */

.-text--fade {
  opacity: 0.4;
}

/* components */

.toast {
  position: absolute;
  bottom: 1rem;
  right: 2rem;
  font-size: 1rem;
  padding: 0.75em 1em;
  max-width: calc(100% - 4rem);
  border-radius: 0.25rem;
  color: #bbb;
  background: #2e2e2e;
  opacity: 0;
  transform: translateY(4rem);
  transition: all 0.3s ease;
}

.toast.js-inactive {
  display: none;
}

.toast--warning {
  background: #2e2e2e;
  color: #ffba08;
}

.toast.js-active {
  opacity: 1;
  transform: translateY(0);
}

.container {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
}

.display-wrapper {
  flex: 5;
}

.display {
  width: 100%;
  height: 100%;
}

.history {
  position: relative;
  flex: 1 1 10rem;
  padding: 2rem;
  background: rgba(18, 18, 18, 1);
  color: #bbb;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.history > a {
  color: #ffba08;
  text-decoration: none;
}

.history > a:hover {
  color: #05a6f0;
}

.history__header {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.history__controller {
  position: relative;
  margin-bottom: 0.5rem;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
}

.history__controller > button {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.2rem;
  border: 1px solid transparent;
  color: #bbb;
  cursor: pointer;
  display: inline-block;
  padding: 0.25em 0.75em;
  position: relative;
  transition: all 0.3s ease;
  transform: translateY(0);
}

.history__controller > button > span {
  outline: none;
  padding: 4px 9px;
  margin: -4px -9px;
}

.history__controller > button:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 2px 3px #000;
  transform: translateY(-1px);
}

.history__controller > button:active {
  box-shadow: none;
  transform: translateY(0);
}

.pr__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.pr__people-wrapper {
  position: relative;
  padding: 0.5rem 0;
}

.pr__people {
  position: relative;
  display: block;
  margin-bottom: 0.5rem;
}

.pr__people > * {
  display: inline-block;
  vertical-align: middle;
}

.pr__avatar {
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  overflow: hidden;
}

.pr__avatar:before {
  content: "/";
  position: absolute;
  display: block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.4);
  top: 0;
  left: 0;
  background: black;
  text-align: center;
}

.pr__mergedAt {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
}

.history__link,
.history__exit {
  color: #ffba08;
  text-decoration: none;
}

.history__link:hover,
.history__exit:hover {
  color: #05a6f0;
}

.history__exit {
  position: absolute;
  font-size: 1rem;
  padding: 0.25rem 0.75rem;
  top: 2.1rem;
  right: 1.5rem;
}

@media only screen and (max-width: 640px) {
  .container {
    flex-flow: column nowrap;
  }
  .display-wrapper {
    height: calc(100%-5.5rem);
    overflow-y: scroll;
  }
  .history__count {
    font-size: 1rem;
  }
  .pr__title {
    font-size: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .people--editor {
    display: none;
  }
}


================================================
FILE: docs/time-travel/time-travel-compiled.js
================================================
"use strict";

var _createClass = (function() {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function(Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
})();

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}

var timeTravel = (function() {
  var _ref = _asyncToGenerator(
    /*#__PURE__*/ regeneratorRuntime.mark(function _callee() {
      var DisplayCount,
        getPullRequests,
        getEl,
        $buttonFirst,
        $buttonNext,
        $buttonPrevious,
        $buttonLast,
        $display,
        $historyId,
        $historyMax,
        $prTitle,
        $prAuthor,
        $prAuthorAvatar,
        $prEditor,
        $prEditorAvatar,
        $prMergedAt,
        $prUrl,
        updateDisplay,
        updateHashURL,
        updateView,
        pullRequests,
        count,
        getHashCount;
      return regeneratorRuntime.wrap(
        function _callee$(_context) {
          while (1) {
            switch ((_context.prev = _context.next)) {
              case 0:
                DisplayCount = (function() {
                  function DisplayCount() {
                    var length =
                      arguments.length > 0 && arguments[0] !== undefined
                        ? arguments[0]
                        : 0;

                    _classCallCheck(this, DisplayCount);

                    this.max = length - 1;
                    this.count = this.max;
                  }

                  _createClass(DisplayCount, [
                    {
                      key: "validate",
                      value: function validate(v) {
                        var parsedV = parseInt(v, 10);
                        if (isNaN(parsedV)) {
                          console.warn(
                            "DisplayCount: invalid value (" +
                              v +
                              " has to be a finite number.)"
                          );
                          return this.max;
                        }
                        return parsedV;
                      }
                    },
                    {
                      key: "reset",
                      value: function reset() {
                        this.count = 0;
                        return this.count;
                      }
                    },
                    {
                      key: "maximize",
                      value: function maximize() {
                        this.count = this.max;
                        return this.count;
                      }
                    },
                    {
                      key: "limit",
                      value: function limit(v) {
                        v = this.validate(v);
                        if (v > this.max) v = this.max;
                        if (v < 0) v = 0;
                        return v;
                      }
                    },
                    {
                      key: "add",
                      value: function add() {
                        var v =
                          arguments.length > 0 && arguments[0] !== undefined
                            ? arguments[0]
                            : 0;

                        v = this.validate(v);
                        this.count = this.limit(this.count + v);
                        return this.count;
                      }
                    },
                    {
                      key: "jumpTo",
                      value: function jumpTo(v) {
                        v = this.validate(v);
                        this.count = this.limit(v);
                        return this.count;
                      }
                    }
                  ]);

                  return DisplayCount;
                })();

                getPullRequests = function getPullRequests() {
                  return fetch("./index.json")
                    .then(function(res) {
                      return res.json();
                    })
                    .then(function(res) {
                      return res.data.repository.pullRequests.edges;
                    })
                    .catch(function(err) {
                      return console.warn(err);
                    });
                };

                getEl = function getEl(id) {
                  return document.getElementById(id);
                };

                $buttonFirst = getEl("js-button-first");
                $buttonNext = getEl("js-button-next");
                $buttonPrevious = getEl("js-button-previous");
                $buttonLast = getEl("js-button-last");
                $display = getEl("js-display");
                $historyId = getEl("js-history-id");
                $historyMax = getEl("js-history-max");
                $prTitle = getEl("js-pr-title");
                $prAuthor = getEl("js-pr-author");
                $prAuthorAvatar = getEl("js-pr-author-avatar");
                $prEditor = getEl("js-pr-editor");
                $prEditorAvatar = getEl("js-pr-editor-avatar");
                $prMergedAt = getEl("js-pr-mergedAt");
                $prUrl = getEl("js-pr-url");

                updateDisplay = function updateDisplay(count) {
                  var pr = pullRequests[count];
                  var _pr$node = pr.node,
                    id = _pr$node.id,
                    title = _pr$node.title,
                    author = _pr$node.author,
                    editor = _pr$node.editor,
                    mergedAt = _pr$node.mergedAt,
                    url = _pr$node.url;

                  // https://stackoverflow.com/a/2257295

                  $display.contentWindow.location.replace(
                    "./history/" + id + "/docs/"
                  );

                  $historyId.textContent = count + 1;
                  $prTitle.textContent = title;

                  $prAuthor.textContent = author.login;
                  $prAuthorAvatar.src = author.avatarUrl;
                  $prAuthorAvatar.setAttribute(
                    "alt",
                    "Author: " + author.login
                  );

                  if (editor) {
                    $prEditor.textContent = editor && editor.login;
                    $prEditorAvatar.src = editor.avatarUrl;
                    $prAuthorAvatar.setAttribute(
                      "alt",
                      "Author: " + author.login
                    );
                  } else {
                    $prEditor.textContent = "No editor";
                    $prEditorAvatar.src = "";
                    $prAuthorAvatar.setAttribute("alt", "No editor");
                  }

                  $prMergedAt.textContent = "Merged at " + mergedAt;
                  $prUrl.href = url;
                };

                updateHashURL = function updateHashURL(hash) {
                  window.history.pushState(null, null, "#" + (hash + 1));
                };

                updateView = function updateView(currentCount) {
                  updateHashURL(currentCount);
                  updateDisplay(currentCount);
                };

                _context.next = 22;
                return getPullRequests();

              case 22:
                pullRequests = _context.sent;
                count = new DisplayCount(pullRequests.length);

                // get hash link

                getHashCount = function getHashCount() {
                  if (window.location.hash)
                    return window.location.hash.split("#")[1];
                  return null;
                };
                // pop back

                window.onpopstate = function() {
                  console.log("state popped: " + window.location.hash);
                  updateDisplay(count.jumpTo(getHashCount()));
                };

                // start
                $historyMax.textContent = count.max + 1;
                updateView(count.jumpTo(getHashCount()));

                // button control
                $buttonFirst.onclick = function() {
                  updateView(count.reset());
                };
                $buttonNext.onclick = function() {
                  updateView(count.add(1));
                };
                $buttonPrevious.onclick = function() {
                  updateView(count.add(-1));
                };
                $buttonLast.onclick = function() {
                  updateView(count.maximize());
                };

              case 32:
              case "end":
                return _context.stop();
            }
          }
        },
        _callee,
        undefined
      );
    })
  );

  return function timeTravel() {
    return _ref.apply(this, arguments);
  };
})();

window.onload = timeTravel;

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRpbWUtdHJhdmVsLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUEsSUFBTTtBQUFBLHFFQUFhO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNYLHdCQURXO0FBRWYsc0NBQXdCO0FBQUEsb0JBQVosTUFBWSx1RUFBSCxDQUFHOztBQUFBOztBQUN0QixxQkFBSyxHQUFMLEdBQVcsU0FBUyxDQUFwQjtBQUNBLHFCQUFLLEtBQUwsR0FBYSxLQUFLLEdBQWxCO0FBQ0Q7O0FBTGM7QUFBQTtBQUFBLHlDQU1OLENBTk0sRUFNSDtBQUNWLHNCQUFNLFVBQVUsU0FBUyxDQUFULEVBQVksRUFBWixDQUFoQjtBQUNBLHNCQUFJLE1BQU0sT0FBTixDQUFKLEVBQW9CO0FBQ2xCLDRCQUFRLElBQVIsbUNBQ2tDLENBRGxDO0FBR0EsMkJBQU8sS0FBSyxHQUFaO0FBQ0Q7QUFDRCx5QkFBTyxPQUFQO0FBQ0Q7QUFmYztBQUFBO0FBQUEsd0NBZ0JQO0FBQ04sdUJBQUssS0FBTCxHQUFhLENBQWI7QUFDQSx5QkFBTyxLQUFLLEtBQVo7QUFDRDtBQW5CYztBQUFBO0FBQUEsMkNBb0JKO0FBQ1QsdUJBQUssS0FBTCxHQUFhLEtBQUssR0FBbEI7QUFDQSx5QkFBTyxLQUFLLEtBQVo7QUFDRDtBQXZCYztBQUFBO0FBQUEsc0NBd0JULENBeEJTLEVBd0JOO0FBQ1Asc0JBQUksS0FBSyxRQUFMLENBQWMsQ0FBZCxDQUFKO0FBQ0Esc0JBQUksSUFBSSxLQUFLLEdBQWIsRUFBa0IsSUFBSSxLQUFLLEdBQVQ7QUFDbEIsc0JBQUksSUFBSSxDQUFSLEVBQVcsSUFBSSxDQUFKO0FBQ1gseUJBQU8sQ0FBUDtBQUNEO0FBN0JjO0FBQUE7QUFBQSxzQ0E4Qko7QUFBQSxzQkFBUCxDQUFPLHVFQUFILENBQUc7O0FBQ1Qsc0JBQUksS0FBSyxRQUFMLENBQWMsQ0FBZCxDQUFKO0FBQ0EsdUJBQUssS0FBTCxHQUFhLEtBQUssS0FBTCxDQUFXLEtBQUssS0FBTCxHQUFhLENBQXhCLENBQWI7QUFDQSx5QkFBTyxLQUFLLEtBQVo7QUFDRDtBQWxDYztBQUFBO0FBQUEsdUNBbUNSLENBbkNRLEVBbUNMO0FBQ1Isc0JBQUksS0FBSyxRQUFMLENBQWMsQ0FBZCxDQUFKO0FBQ0EsdUJBQUssS0FBTCxHQUFhLEtBQUssS0FBTCxDQUFXLENBQVgsQ0FBYjtBQUNBLHlCQUFPLEtBQUssS0FBWjtBQUNEO0FBdkNjOztBQUFBO0FBQUE7O0FBMENYLDJCQTFDVyxHQTBDTyxTQUFsQixlQUFrQjtBQUFBLHFCQUN0QixNQUFNLGNBQU4sRUFDRyxJQURILENBQ1E7QUFBQSx1QkFBTyxJQUFJLElBQUosRUFBUDtBQUFBLGVBRFIsRUFFRyxJQUZILENBRVE7QUFBQSx1QkFBTyxJQUFJLElBQUosQ0FBUyxVQUFULENBQW9CLFlBQXBCLENBQWlDLEtBQXhDO0FBQUEsZUFGUixFQUdHLEtBSEgsQ0FHUztBQUFBLHVCQUFPLFFBQVEsSUFBUixDQUFhLEdBQWIsQ0FBUDtBQUFBLGVBSFQsQ0FEc0I7QUFBQSxhQTFDUDs7QUFnRFgsaUJBaERXLEdBZ0RILFNBQVIsS0FBUTtBQUFBLHFCQUFNLFNBQVMsY0FBVCxDQUF3QixFQUF4QixDQUFOO0FBQUEsYUFoREc7O0FBa0RYLHdCQWxEVyxHQWtESSxNQUFNLGlCQUFOLENBbERKO0FBbURYLHVCQW5EVyxHQW1ERyxNQUFNLGdCQUFOLENBbkRIO0FBb0RYLDJCQXBEVyxHQW9ETyxNQUFNLG9CQUFOLENBcERQO0FBcURYLHVCQXJEVyxHQXFERyxNQUFNLGdCQUFOLENBckRIO0FBdURYLG9CQXZEVyxHQXVEQSxNQUFNLFlBQU4sQ0F2REE7QUF3RFgsc0JBeERXLEdBd0RFLE1BQU0sZUFBTixDQXhERjtBQXlEWCx1QkF6RFcsR0F5REcsTUFBTSxnQkFBTixDQXpESDtBQTJEWCxvQkEzRFcsR0EyREEsTUFBTSxhQUFOLENBM0RBO0FBNERYLHFCQTVEVyxHQTREQyxNQUFNLGNBQU4sQ0E1REQ7QUE2RFgsMkJBN0RXLEdBNkRPLE1BQU0scUJBQU4sQ0E3RFA7QUE4RFgscUJBOURXLEdBOERDLE1BQU0sY0FBTixDQTlERDtBQStEWCwyQkEvRFcsR0ErRE8sTUFBTSxxQkFBTixDQS9EUDtBQWdFWCx1QkFoRVcsR0FnRUcsTUFBTSxnQkFBTixDQWhFSDtBQWlFWCxrQkFqRVcsR0FpRUYsTUFBTSxXQUFOLENBakVFOztBQW1FWCx5QkFuRVcsR0FtRUssU0FBaEIsYUFBZ0IsUUFBUztBQUM3QixrQkFBTSxLQUFLLGFBQWEsS0FBYixDQUFYO0FBRDZCLDZCQUV3QixHQUFHLElBRjNCO0FBQUEsa0JBRXJCLEVBRnFCLFlBRXJCLEVBRnFCO0FBQUEsa0JBRWpCLEtBRmlCLFlBRWpCLEtBRmlCO0FBQUEsa0JBRVYsTUFGVSxZQUVWLE1BRlU7QUFBQSxrQkFFRixNQUZFLFlBRUYsTUFGRTtBQUFBLGtCQUVNLFFBRk4sWUFFTSxRQUZOO0FBQUEsa0JBRWdCLEdBRmhCLFlBRWdCLEdBRmhCOztBQUk3Qjs7QUFDQSx1QkFBUyxhQUFULENBQXVCLFFBQXZCLENBQWdDLE9BQWhDLGdCQUFxRCxFQUFyRDs7QUFFQSx5QkFBVyxXQUFYLEdBQXlCLFFBQVEsQ0FBakM7QUFDQSx1QkFBUyxXQUFULEdBQXVCLEtBQXZCOztBQUVBLHdCQUFVLFdBQVYsR0FBd0IsT0FBTyxLQUEvQjtBQUNBLDhCQUFnQixHQUFoQixHQUFzQixPQUFPLFNBQTdCO0FBQ0EsOEJBQWdCLFlBQWhCLENBQTZCLEtBQTdCLGVBQStDLE9BQU8sS0FBdEQ7O0FBRUEsa0JBQUksTUFBSixFQUFZO0FBQ1YsMEJBQVUsV0FBVixHQUF3QixVQUFVLE9BQU8sS0FBekM7QUFDQSxnQ0FBZ0IsR0FBaEIsR0FBc0IsT0FBTyxTQUE3QjtBQUNBLGdDQUFnQixZQUFoQixDQUE2QixLQUE3QixlQUErQyxPQUFPLEtBQXREO0FBQ0QsZUFKRCxNQUlPO0FBQ0wsMEJBQVUsV0FBVixHQUF3QixXQUF4QjtBQUNBLGdDQUFnQixHQUFoQixHQUFzQixFQUF0QjtBQUNBLGdDQUFnQixZQUFoQixDQUE2QixLQUE3QjtBQUNEOztBQUVELDBCQUFZLFdBQVosa0JBQXVDLFFBQXZDO0FBQ0EscUJBQU8sSUFBUCxHQUFjLEdBQWQ7QUFDRCxhQTdGZ0I7O0FBK0ZYLHlCQS9GVyxHQStGSyxTQUFoQixhQUFnQixPQUFRO0FBQzVCLHFCQUFPLE9BQVAsQ0FBZSxTQUFmLENBQXlCLElBQXpCLEVBQStCLElBQS9CLFNBQXlDLE9BQU8sQ0FBaEQ7QUFDRCxhQWpHZ0I7O0FBbUdYLHNCQW5HVyxHQW1HRSxTQUFiLFVBQWEsZUFBZ0I7QUFDakMsNEJBQWMsWUFBZDtBQUNBLDRCQUFjLFlBQWQ7QUFDRCxhQXRHZ0I7O0FBQUE7QUFBQSxtQkF3R1UsaUJBeEdWOztBQUFBO0FBd0dYLHdCQXhHVztBQXlHWCxpQkF6R1csR0F5R0gsSUFBSSxZQUFKLENBQWlCLGFBQWEsTUFBOUIsQ0F6R0c7O0FBMkdqQjs7QUFDTSx3QkE1R1csR0E0R0ksU0FBZixZQUFlLEdBQU07QUFDekIsa0JBQUksT0FBTyxRQUFQLENBQWdCLElBQXBCLEVBQTBCLE9BQU8sT0FBTyxRQUFQLENBQWdCLElBQWhCLENBQXFCLEtBQXJCLENBQTJCLEdBQTNCLEVBQWdDLENBQWhDLENBQVA7QUFDMUIscUJBQU8sSUFBUDtBQUNELGFBL0dnQjtBQWdIakI7OztBQUNBLG1CQUFPLFVBQVAsR0FBb0IsWUFBTTtBQUN4QixzQkFBUSxHQUFSLG9CQUE2QixPQUFPLFFBQVAsQ0FBZ0IsSUFBN0M7QUFDQSw0QkFBYyxNQUFNLE1BQU4sQ0FBYSxjQUFiLENBQWQ7QUFDRCxhQUhEOztBQUtBO0FBQ0Esd0JBQVksV0FBWixHQUEwQixNQUFNLEdBQU4sR0FBWSxDQUF0QztBQUNBLHVCQUFXLE1BQU0sTUFBTixDQUFhLGNBQWIsQ0FBWDs7QUFFQTtBQUNBLHlCQUFhLE9BQWIsR0FBdUIsWUFBTTtBQUMzQix5QkFBVyxNQUFNLEtBQU4sRUFBWDtBQUNELGFBRkQ7QUFHQSx3QkFBWSxPQUFaLEdBQXNCLFlBQU07QUFDMUIseUJBQVcsTUFBTSxHQUFOLENBQVUsQ0FBVixDQUFYO0FBQ0QsYUFGRDtBQUdBLDRCQUFnQixPQUFoQixHQUEwQixZQUFNO0FBQzlCLHlCQUFXLE1BQU0sR0FBTixDQUFVLENBQUMsQ0FBWCxDQUFYO0FBQ0QsYUFGRDtBQUdBLHdCQUFZLE9BQVosR0FBc0IsWUFBTTtBQUMxQix5QkFBVyxNQUFNLFFBQU4sRUFBWDtBQUNELGFBRkQ7O0FBcElpQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxHQUFiOztBQUFBO0FBQUE7QUFBQTtBQUFBLEdBQU47O0FBeUlBLE9BQU8sTUFBUCxHQUFnQixVQUFoQiIsImZpbGUiOiJ0aW1lLXRyYXZlbC1jb21waWxlZC5qcyIsInNvdXJjZXNDb250ZW50IjpbImNvbnN0IHRpbWVUcmF2ZWwgPSBhc3luYyAoKSA9PiB7XG4gIGNsYXNzIERpc3BsYXlDb3VudCB7XG4gICAgY29uc3RydWN0b3IobGVuZ3RoID0gMCkge1xuICAgICAgdGhpcy5tYXggPSBsZW5ndGggLSAxO1xuICAgICAgdGhpcy5jb3VudCA9IHRoaXMubWF4O1xuICAgIH1cbiAgICB2YWxpZGF0ZSh2KSB7XG4gICAgICBjb25zdCBwYXJzZWRWID0gcGFyc2VJbnQodiwgMTApO1xuICAgICAgaWYgKGlzTmFOKHBhcnNlZFYpKSB7XG4gICAgICAgIGNvbnNvbGUud2FybihcbiAgICAgICAgICBgRGlzcGxheUNvdW50OiBpbnZhbGlkIHZhbHVlICgke3Z9IGhhcyB0byBiZSBhIGZpbml0ZSBudW1iZXIuKWBcbiAgICAgICAgKTtcbiAgICAgICAgcmV0dXJuIHRoaXMubWF4O1xuICAgICAgfVxuICAgICAgcmV0dXJuIHBhcnNlZFY7XG4gICAgfVxuICAgIHJlc2V0KCkge1xuICAgICAgdGhpcy5jb3VudCA9IDA7XG4gICAgICByZXR1cm4gdGhpcy5jb3VudDtcbiAgICB9XG4gICAgbWF4aW1pemUoKSB7XG4gICAgICB0aGlzLmNvdW50ID0gdGhpcy5tYXg7XG4gICAgICByZXR1cm4gdGhpcy5jb3VudDtcbiAgICB9XG4gICAgbGltaXQodikge1xuICAgICAgdiA9IHRoaXMudmFsaWRhdGUodik7XG4gICAgICBpZiAodiA+IHRoaXMubWF4KSB2ID0gdGhpcy5tYXg7XG4gICAgICBpZiAodiA8IDApIHYgPSAwO1xuICAgICAgcmV0dXJuIHY7XG4gICAgfVxuICAgIGFkZCh2ID0gMCkge1xuICAgICAgdiA9IHRoaXMudmFsaWRhdGUodik7XG4gICAgICB0aGlzLmNvdW50ID0gdGhpcy5saW1pdCh0aGlzLmNvdW50ICsgdik7XG4gICAgICByZXR1cm4gdGhpcy5jb3VudDtcbiAgICB9XG4gICAganVtcFRvKHYpIHtcbiAgICAgIHYgPSB0aGlzLnZhbGlkYXRlKHYpO1xuICAgICAgdGhpcy5jb3VudCA9IHRoaXMubGltaXQodik7XG4gICAgICByZXR1cm4gdGhpcy5jb3VudDtcbiAgICB9XG4gIH1cblxuICBjb25zdCBnZXRQdWxsUmVxdWVzdHMgPSAoKSA9PlxuICAgIGZldGNoKFwiLi9pbmRleC5qc29uXCIpXG4gICAgICAudGhlbihyZXMgPT4gcmVzLmpzb24oKSlcbiAgICAgIC50aGVuKHJlcyA9PiByZXMuZGF0YS5yZXBvc2l0b3J5LnB1bGxSZXF1ZXN0cy5lZGdlcylcbiAgICAgIC5jYXRjaChlcnIgPT4gY29uc29sZS53YXJuKGVycikpO1xuXG4gIGNvbnN0IGdldEVsID0gaWQgPT4gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaWQpO1xuXG4gIGNvbnN0ICRidXR0b25GaXJzdCA9IGdldEVsKFwianMtYnV0dG9uLWZpcnN0XCIpO1xuICBjb25zdCAkYnV0dG9uTmV4dCA9IGdldEVsKFwianMtYnV0dG9uLW5leHRcIik7XG4gIGNvbnN0ICRidXR0b25QcmV2aW91cyA9IGdldEVsKFwianMtYnV0dG9uLXByZXZpb3VzXCIpO1xuICBjb25zdCAkYnV0dG9uTGFzdCA9IGdldEVsKFwianMtYnV0dG9uLWxhc3RcIik7XG5cbiAgY29uc3QgJGRpc3BsYXkgPSBnZXRFbChcImpzLWRpc3BsYXlcIik7XG4gIGNvbnN0ICRoaXN0b3J5SWQgPSBnZXRFbChcImpzLWhpc3RvcnktaWRcIik7XG4gIGNvbnN0ICRoaXN0b3J5TWF4ID0gZ2V0RWwoXCJqcy1oaXN0b3J5LW1heFwiKTtcblxuICBjb25zdCAkcHJUaXRsZSA9IGdldEVsKFwianMtcHItdGl0bGVcIik7XG4gIGNvbnN0ICRwckF1dGhvciA9IGdldEVsKFwianMtcHItYXV0aG9yXCIpO1xuICBjb25zdCAkcHJBdXRob3JBdmF0YXIgPSBnZXRFbChcImpzLXByLWF1dGhvci1hdmF0YXJcIik7XG4gIGNvbnN0ICRwckVkaXRvciA9IGdldEVsKFwianMtcHItZWRpdG9yXCIpO1xuICBjb25zdCAkcHJFZGl0b3JBdmF0YXIgPSBnZXRFbChcImpzLXByLWVkaXRvci1hdmF0YXJcIik7XG4gIGNvbnN0ICRwck1lcmdlZEF0ID0gZ2V0RWwoXCJqcy1wci1tZXJnZWRBdFwiKTtcbiAgY29uc3QgJHByVXJsID0gZ2V0RWwoXCJqcy1wci11cmxcIik7XG5cbiAgY29uc3QgdXBkYXRlRGlzcGxheSA9IGNvdW50ID0+IHtcbiAgICBjb25zdCBwciA9IHB1bGxSZXF1ZXN0c1tjb3VudF07XG4gICAgY29uc3QgeyBpZCwgdGl0bGUsIGF1dGhvciwgZWRpdG9yLCBtZXJnZWRBdCwgdXJsIH0gPSBwci5ub2RlO1xuXG4gICAgLy8gaHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9hLzIyNTcyOTVcbiAgICAkZGlzcGxheS5jb250ZW50V2luZG93LmxvY2F0aW9uLnJlcGxhY2UoYC4vaGlzdG9yeS8ke2lkfS9kb2NzL2ApO1xuXG4gICAgJGhpc3RvcnlJZC50ZXh0Q29udGVudCA9IGNvdW50ICsgMTtcbiAgICAkcHJUaXRsZS50ZXh0Q29udGVudCA9IHRpdGxlO1xuXG4gICAgJHByQXV0aG9yLnRleHRDb250ZW50ID0gYXV0aG9yLmxvZ2luO1xuICAgICRwckF1dGhvckF2YXRhci5zcmMgPSBhdXRob3IuYXZhdGFyVXJsO1xuICAgICRwckF1dGhvckF2YXRhci5zZXRBdHRyaWJ1dGUoXCJhbHRcIiwgYEF1dGhvcjogJHthdXRob3IubG9naW59YCk7XG5cbiAgICBpZiAoZWRpdG9yKSB7XG4gICAgICAkcHJFZGl0b3IudGV4dENvbnRlbnQgPSBlZGl0b3IgJiYgZWRpdG9yLmxvZ2luO1xuICAgICAgJHByRWRpdG9yQXZhdGFyLnNyYyA9IGVkaXRvci5hdmF0YXJVcmw7XG4gICAgICAkcHJBdXRob3JBdmF0YXIuc2V0QXR0cmlidXRlKFwiYWx0XCIsIGBBdXRob3I6ICR7YXV0aG9yLmxvZ2lufWApO1xuICAgIH0gZWxzZSB7XG4gICAgICAkcHJFZGl0b3IudGV4dENvbnRlbnQgPSBcIk5vIGVkaXRvclwiO1xuICAgICAgJHByRWRpdG9yQXZhdGFyLnNyYyA9IFwiXCI7XG4gICAgICAkcHJBdXRob3JBdmF0YXIuc2V0QXR0cmlidXRlKFwiYWx0XCIsIGBObyBlZGl0b3JgKTtcbiAgICB9XG5cbiAgICAkcHJNZXJnZWRBdC50ZXh0Q29udGVudCA9IGBNZXJnZWQgYXQgJHttZXJnZWRBdH1gO1xuICAgICRwclVybC5ocmVmID0gdXJsO1xuICB9O1xuXG4gIGNvbnN0IHVwZGF0ZUhhc2hVUkwgPSBoYXNoID0+IHtcbiAgICB3aW5kb3cuaGlzdG9yeS5wdXNoU3RhdGUobnVsbCwgbnVsbCwgYCMke2hhc2ggKyAxfWApO1xuICB9O1xuXG4gIGNvbnN0IHVwZGF0ZVZpZXcgPSBjdXJyZW50Q291bnQgPT4ge1xuICAgIHVwZGF0ZUhhc2hVUkwoY3VycmVudENvdW50KTtcbiAgICB1cGRhdGVEaXNwbGF5KGN1cnJlbnRDb3VudCk7XG4gIH07XG5cbiAgY29uc3QgcHVsbFJlcXVlc3RzID0gYXdhaXQgZ2V0UHVsbFJlcXVlc3RzKCk7XG4gIGNvbnN0IGNvdW50ID0gbmV3IERpc3BsYXlDb3VudChwdWxsUmVxdWVzdHMubGVuZ3RoKTtcblxuICAvLyBnZXQgaGFzaCBsaW5rXG4gIGNvbnN0IGdldEhhc2hDb3VudCA9ICgpID0+IHtcbiAgICBpZiAod2luZG93LmxvY2F0aW9uLmhhc2gpIHJldHVybiB3aW5kb3cubG9jYXRpb24uaGFzaC5zcGxpdChcIiNcIilbMV07XG4gICAgcmV0dXJuIG51bGw7XG4gIH07XG4gIC8vIHBvcCBiYWNrXG4gIHdpbmRvdy5vbnBvcHN0YXRlID0gKCkgPT4ge1xuICAgIGNvbnNvbGUubG9nKGBzdGF0ZSBwb3BwZWQ6ICR7d2luZG93LmxvY2F0aW9uLmhhc2h9YCk7XG4gICAgdXBkYXRlRGlzcGxheShjb3VudC5qdW1wVG8oZ2V0SGFzaENvdW50KCkpKTtcbiAgfTtcblxuICAvLyBzdGFydFxuICAkaGlzdG9yeU1heC50ZXh0Q29udGVudCA9IGNvdW50Lm1heCArIDE7XG4gIHVwZGF0ZVZpZXcoY291bnQuanVtcFRvKGdldEhhc2hDb3VudCgpKSk7XG5cbiAgLy8gYnV0dG9uIGNvbnRyb2xcbiAgJGJ1dHRvbkZpcnN0Lm9uY2xpY2sgPSAoKSA9PiB7XG4gICAgdXBkYXRlVmlldyhjb3VudC5yZXNldCgpKTtcbiAgfTtcbiAgJGJ1dHRvbk5leHQub25jbGljayA9ICgpID0+IHtcbiAgICB1cGRhdGVWaWV3KGNvdW50LmFkZCgxKSk7XG4gIH07XG4gICRidXR0b25QcmV2aW91cy5vbmNsaWNrID0gKCkgPT4ge1xuICAgIHVwZGF0ZVZpZXcoY291bnQuYWRkKC0xKSk7XG4gIH07XG4gICRidXR0b25MYXN0Lm9uY2xpY2sgPSAoKSA9PiB7XG4gICAgdXBkYXRlVmlldyhjb3VudC5tYXhpbWl6ZSgpKTtcbiAgfTtcbn07XG5cbndpbmRvdy5vbmxvYWQgPSB0aW1lVHJhdmVsO1xuIl19


================================================
FILE: docs/time-travel/time-travel.js
================================================
/**
 * compile with `babel`, sourcemap inline & preset `babel-preset-env`.
 */
const timeTravel = async () => {
  class Toast {
    constructor(parent) {
      const $parent = parent || document.body;
      const $toast = document.createElement("div");

      $toast.classList.add("toast", "js-inactive");
      $toast.id = "js-toast";
      $parent.appendChild($toast);

      this.toast = $toast;
      this.currentTimer = null;
    }
    show(msg, typeClass) {
      const $toast = this.toast;
      $toast.classList.remove("js-inactive");

      setTimeout(() => {
        $toast.textContent = msg;
        $toast.classList.add(typeClass, "js-active");
      }, 16);
    }
    hide(typeClass) {
      const $toast = this.toast;
      $toast.classList.remove(typeClass, "js-active");

      setTimeout(() => {
        $toast.classList.add("js-inactive");
        $toast.textContent = "";
      }, 300);
    }
    send(options) {
      if (!!this.currentTimer) clearTimeout(this.currentTimer);

      const _options = Object.assign(
        { duration: 2000, type: "default" },
        options
      );
      const { msg, type, duration } = _options;
      if (typeof msg !== "string") {
        console.error(
          `Error: in \`sendToast({msg, duration})\`,\`msg\` has to be a string. Got ${msg} instead`
        );
        return;
      }
      if (typeof duration !== "number") {
        console.error(
          `Error: in \`sendToast({msg, duration})\`,\`duration\` has to be a number. Got ${duration} instead`
        );
        return;
      }

      const typeClass = `toast--${type}`;
      this.show(msg, typeClass);

      this.currentTimer = setTimeout(() => {
        this.hide(typeClass);
      }, duration);
    }
  }

  class DisplayCount {
    constructor(length = 0) {
      this.max = length - 1;
      this.count = this.max;
    }
    validate(v) {
      const parsedV = parseInt(v, 10);
      if (isNaN(parsedV)) {
        console.warn(
          `DisplayCount: invalid value (${v} has to be a finite number.)`
        );
        return this.max;
      }
      return parsedV;
    }
    reset() {
      this.count = 0;
      return this.count;
    }
    maximize() {
      this.count = this.max;
      return this.count;
    }
    limit(v) {
      v = this.validate(v);
      if (v > this.max) v = this.max;
      if (v < 0) v = 0;
      return v;
    }
    add(v = 0) {
      v = this.validate(v);
      this.count = this.limit(this.count + v);
      return this.count;
    }
    jumpTo(v) {
      v = this.validate(v);
      this.count = this.limit(v);
      return this.count;
    }
    isFirst() {
      return this.count === 0;
    }
    isLast() {
      return this.count === this.max;
    }
  }

  const getPullRequests = () =>
    fetch("./index.json")
      .then(res => res.json())
      .then(res => res.data.repository.pullRequests.edges)
      .catch(err => console.warn(err));

  const getEl = id => document.getElementById(id);

  const $buttonFirst = getEl("js-button-first");
  const $buttonNext = getEl("js-button-next");
  const $buttonPrevious = getEl("js-button-previous");
  const $buttonLast = getEl("js-button-last");

  const $display = getEl("js-display");
  const $history = getEl("js-history");
  const $historyId = getEl("js-history-id");
  const $historyMax = getEl("js-history-max");

  const $prTitle = getEl("js-pr-title");
  const $prAuthor = getEl("js-pr-author");
  const $prAuthorAvatar = getEl("js-pr-author-avatar");
  const $prEditor = getEl("js-pr-editor");
  const $prEditorAvatar = getEl("js-pr-editor-avatar");
  const $prMergedAt = getEl("js-pr-mergedAt");
  const $prUrl = getEl("js-pr-url");

  const onKeyPress = (key, callback) => {
    window.addEventListener("keyup", e => {
      if (e.key === key) {
        callback();
      }
    });
    return callback;
  };

  // handle links inside iframe
  const handleInnerLinks = iframe => {
    iframe.onload = () => {
      const iframeDoc = iframe.contentWindow.document || iframe.contentDocument;
      const innerLinks = Array.from(iframeDoc.querySelectorAll("a"));

      if (innerLinks.length === 0) return;

      innerLinks.forEach($link => {
        // disable time travel
        if ($link.href.includes("time-travel")) {
          $link.onclick = e => {
            e.preventDefault();

            toast.send({
              msg: `⚠️ Can't time travel while traveling time.`,
              type: `warning`,
              duration: 3000
            });
          };
        }
        // open external link in a new browser window
        if ($link.href.includes("http")) {
          $link.setAttribute("target", "_blank");
        }
      });
    };
  };

  const updateDisplay = count => {
    const pr = pullRequests[count];
    const { id, title, author, editor, mergedAt, url } = pr.node;

    // https://stackoverflow.com/a/2257295
    $display.contentWindow.location.replace(`./history/${id}/docs/`);
    handleInnerLinks($display);

    $historyId.textContent = count + 1;
    $prTitle.textContent = title;

    $prAuthor.textContent = author.login;
    $prAuthorAvatar.src = author.avatarUrl;
    $prAuthorAvatar.setAttribute("alt", `Author: ${author.login}`);

    if (editor) {
      $prEditor.textContent = editor && editor.login;
      $prEditorAvatar.src = editor.avatarUrl;
      $prAuthorAvatar.setAttribute("alt", `Author: ${author.login}`);
    } else {
      $prEditor.textContent = "No editor";
      $prEditorAvatar.src = "";
      $prAuthorAvatar.setAttribute("alt", `No editor`);
    }

    $prMergedAt.textContent = `Merged at ${mergedAt}`;
    $prUrl.href = url;
  };

  const updateHashURL = hash => {
    window.history.pushState(null, null, `#${hash + 1}`);
  };

  const updateView = currentCount => {
    updateHashURL(currentCount);
    updateDisplay(currentCount);
  };

  const pullRequests = await getPullRequests();
  const count = new DisplayCount(pullRequests.length);

  // get hash link
  const getHashCount = () => {
    if (window.location.hash) return window.location.hash.split("#")[1];
    return null;
  };
  // pop back
  window.onpopstate = () => {
    console.log(`state popped: ${window.location.hash}`);
    updateDisplay(count.jumpTo(getHashCount()));
  };

  // start
  $historyMax.textContent = count.max + 1;
  updateView(count.jumpTo(getHashCount()));

  // placeholder for toast
  toast = new Toast($history);

  // button control
  $buttonFirst.onclick = () => {
    if (!count.isFirst()) {
      updateView(count.reset());
    }
  };
  $buttonPrevious.onclick = onKeyPress("ArrowLeft", () => {
    if (!count.isFirst()) {
      updateView(count.add(-1));
    }
  });
  $buttonNext.onclick = onKeyPress("ArrowRight", () => {
    if (!count.isLast()) {
      updateView(count.add(1));
    }
  });
  $buttonLast.onclick = () => {
    if (!count.isLast()) {
      updateView(count.maximize());
    }
  };
};

window.onload = timeTravel;


================================================
FILE: example.env
================================================
# Github access token https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/
ACCESS_TOKEN=***************************

================================================
FILE: package.json
================================================
{
  "name": "join-dev-design",
  "version": "1.0.0",
  "description": "This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.",
  "main": "index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "start": "live-server docs",
    "precommit": "pretty-quick --staged",
    "prettier": "prettier",
    "build-timetravel": "node time-travel/build.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Microsoft/join-dev-design.git"
  },
  "author": "David Siegel <dasiege@microsoft.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Microsoft/join-dev-design/issues"
  },
  "homepage": "https://github.com/Microsoft/join-dev-design#readme",
  "devDependencies": {
    "serve": "^9.2.0",
    "unzip": "^0.1.11"
  },
  "dependencies": {
    "dotenv": "^6.0.0",
    "fs-extra": "^7.0.0",
    "gunzip-maybe": "^1.4.1",
    "husky": "^0.14.3",
    "live-server": "^1.2.0",
    "node-fetch": "^2.1.2",
    "prettier": "^1.13.7",
    "pretty-quick": "^1.6.0",
    "tar": "^4.4.4",
    "tar-stream": "^1.6.1",
    "unzipper": "github:ZJONSSON/node-unzipper#bad-zip-working"
  }
}


================================================
FILE: time-travel/build.js
================================================
require("dotenv").config();

const fs = require("fs-extra");
const path = require("path");
const fetch = require("node-fetch");
// const unzip = require("unzipper");
// const extract = require('tar-stream').extract();
const tar = require("tar");
// const gunzip = require('gunzip-maybe');

const accessToken = process.env.ACCESS_TOKEN;
const query = `
{
  repository(owner:"Microsoft", name:"join-dev-design"){
    pullRequests(first: 100, states: MERGED) {
      edges {
        node {
          id
          title
          url
          mergedAt
          author {
            login
            avatarUrl
          }
          editor {
            login
            avatarUrl
          }
          mergeCommit {
            committedDate
            id
            tarballUrl
          }
          id
        }
      }
    }
  }
}`;

const historyFolderPath = path.resolve(
  __dirname,
  `../docs/time-travel/history`
);

/**
 * - Flush `.docs/time-travel/history` folder.
 */
const flushFolders = async data => {
  try {
    await fs.remove(historyFolderPath);
    await fs.ensureDir(historyFolderPath);
    console.log("`docs/time-travel/history` is flushed.");
    return data;
  } catch (err) {
    console.error(err);
  }
};

/**
 * getData from github
 * @return {Promise} A Promise that resolves to response
 */
const getDataFromGithub = () =>
  fetch("https://api.github.com/graphql", {
    method: "POST",
    body: JSON.stringify({ query }),
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`
    }
  })
    .then(res => res.json())
    .catch(console.error);

/**
 * Write github response to a json so the front end can use it later.
 * @param {Object} data
 * @return {Object} same data object
 */
const writeJSONToDocs = data => {
  return fs
    .writeFile(
      path.resolve(__dirname, `../docs/time-travel/index.json`),
      JSON.stringify(data)
    )
    .then(() => data)
    .catch(console.error);
};

/**
 * Parse tar, keep 'docs/', remove 'docs/time-travel' and everything else
 * @param {String} options.url tarball url
 * @param {String} oprions.id id of merged pull request
 */
const parseTarball = async options => {
  const { url, id } = options;
  const tarball = await fetch(url);
  const tarballStream = tarball.body;
  const unzipPath = path.join(historyFolderPath, id);
  const parse = new tar.Parse();

  tarballStream
    .on("error", console.error)
    .pipe(parse)
    .on("entry", async function(entry) {
      const type = entry.type;
      const tpath = entry.path;
      const [root, subDir1, subDir2, ...rest] = tpath.split(path.sep);
      console.log(type, tpath);

      if (subDir1 === "docs" && subDir2 !== "time-travel" && type === "File") {
        const docsPath = path.join(unzipPath, subDir1, subDir2, rest.join(""));

        try {
          await fs.ensureFile(docsPath);
        } catch (err) {
          console.error(err);
        }

        entry.pipe(fs.createWriteStream(docsPath));
      } else {
        entry.resume();
      }

      // entry.on('end', () => { console.log(`${tpath} is written`) });
      entry.on("error", console.error);
    })
    .on("error", console.error);

  return new Promise(function(resolve, reject) {
    tarballStream.on("finish", () => {
      resolve(unzipPath);
    });
    tarballStream.on("error", reject);
  });
};

getDataFromGithub()
  .then(flushFolders)
  .then(writeJSONToDocs)
  .then(res => {
    const tarPromises = res.data.repository.pullRequests.edges.map(edge => {
      const url = edge.node.mergeCommit.tarballUrl;
      const id = edge.node.id;

      return parseTarball({
        id,
        url
      });
    });

    return Promise.all(tarPromises);
  })
  .then(paths => {
    console.log(
      `build complete. ${
        paths.length
      } folders has been written to ${historyFolderPath}.`
    );
  });