microsoft · d4rekanguok · Jul 20, 2018 · Jul 20, 2018 · Jul 20, 2018 · Jul 20, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
+time-travel/zips
+.DS_Store
+
 # Logs
 logs
 *.log

diff --git a/README.md b/README.md
@@ -9,6 +9,20 @@ $ 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
+```
+
+---
+
 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

diff --git a/docs/css/style.css b/docs/css/style.css
@@ -2,15 +2,16 @@
 :root {
   /* color defaults */
   --brand-blue: #05a6f0;
-  --brand-yellow: #FFBA08;
-  --brand-red: #F35325;
-  --brand-green: #81BC06;
+  --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;
+  --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;
@@ -29,7 +30,7 @@
   /* spacing */
   --small-space: 1em;
   --large-space: 2em;
-  --text-block-spacing: .5em;
+  --text-block-spacing: 0.5em;
 }
 
 @keyframes move-in {
@@ -98,28 +99,50 @@ html {
   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: -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%);
+  background: linear-gradient(
+    to bottom,
+    var(--brand-blue) 33%,
+    var(--brand-yellow) 67%
+  );
 }
 
 html:before {
-  content: '';
+  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%);
+  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);
 }
 
@@ -189,15 +212,15 @@ header h1 {
 }
 
 main p:nth-child(2) {
-  animation-delay: calc(var(--move-in-base-delay) * 6)
+  animation-delay: calc(var(--move-in-base-delay) * 6);
 }
 
 main p:nth-child(3) {
-  animation-delay: calc(var(--move-in-base-delay) * 7)
+  animation-delay: calc(var(--move-in-base-delay) * 7);
 }
 
 main p:nth-child(4) {
-  animation-delay: calc(var(--move-in-base-delay) * 8)
+  animation-delay: calc(var(--move-in-base-delay) * 8);
 }
 
 /* Logo */
@@ -319,3 +342,13 @@ footer [href*="github"]:focus {
     display: block;
   }
 }
+
+.time-travel {
+  text-align: center;
+  animation: var(--move-in-animation);
+  animation-delay: calc(var(--move-in-base-delay) * 10);
+}
+
+.time-travel a {
+  cursor: pointer;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -64,6 +64,9 @@ <h1>
         </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
@@ -90,7 +93,6 @@ <h1>
         })
         .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>
@@ -99,24 +101,18 @@ <h1>
       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'
-      );
+      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>
+</html>
diff --git a/docs/time-travel/.DS_Store b/docs/time-travel/.DS_Store
diff --git a/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/index.html b/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/index.html
@@ -0,0 +1,108 @@
+<!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:[email protected]">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>
diff --git a/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/msft-square.svg b/docs/time-travel/history/MDExOlB1bGxSZXF1ZXN0MjAyNDU2ODA2/docs/msft-square.svg