Refactor

docs/css/style.css

@@ -1,21 +1,25 @@
 @charset "UTF-8";
 :root {
   /* color defaults */
+  --blue: #0050c7;
   --brand-blue: #05a6f0;
   --brand-yellow: #ffba08;
   --brand-red: #f35325;
   --brand-green: #81bc06;
   --white: #ffffff;
-  --off-white: #bbb;
+  --off-white: #dddddd;
   --dark-grey: #121212;
   /* typeface defaults */
   --primary-typeface: Segoe UI, SegoeUI, Segoe WP, Helvetica Neue, Helvetica,
     Tahoma, Arial, sans-serif;
-  --title-font-size: 1.3rem;
+  --title-font-size: 1.5rem;
+  --title-font-line-height: 1.7rem;
   --base-font-size: 20px;
   --base-font-line-height: 28px;
   --small-font-size: 12px;
   --small-font-line-height: 14px;
+  --medium-font-size: 16px;
+  --medium-font-line-height: 18px;
   /* animations */
   --root-gradient-animation: 4s both root-gradient linear infinite;
   --move-in-offset: 20px;
@@ -24,6 +28,7 @@
   --logo-tiles-in-animation: 1s both logo-tiles-in;
   --logo-tiles-in-delay: 100ms;
   /* spacing */
+  --xsmall-space: 0.7em;
   --small-space: 1em;
   --large-space: 2em;
   --text-block-spacing: 0.5em;
@@ -285,10 +290,12 @@ main 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-font-line-height);
   font-weight: bold;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  margin-bottom: var(--small-space);
+  margin-bottom: var(--xsmall-space);
   padding-bottom: var(--small-space);
+  color: var(--white);
 }
 
 main p {
@@ -347,9 +354,16 @@ footer [href*="github"]:focus {
 }
 
 .time-travel {
-  text-align: center;
+  text-align: left;
+  font-size: var(--medium-font-size);
+  margin-bottom: var(--small-space);
 }
 
 .time-travel a {
   cursor: pointer;
 }
+
+.sep {
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}

docs/index.html

@@ -32,9 +32,18 @@
     </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.
+        Microsoft is looking for
+        <span style="text-decoration: underline">designers who code</span> to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on the planet.
       </h1>
+      <div class="time-travel">
+        <p>
+          <span style="margin-right: -3px;">🤲</span>
+          <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> contributions so far...
+          <span>&nbsp;</span>
+          <a href="./time-travel/" title="See past versions of this site">
+            <span>👾</span>Open the Time Travel</a>
+        </p>
+      </div>
       <p>
         We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
       </p>
@@ -63,11 +72,6 @@ <h1>
         </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
@@ -77,11 +81,6 @@ <h1>
         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')

docs/theme/theme.css

@@ -96,11 +96,12 @@ body {
 }
 
 body.js-theme-light {
-  color: #222;
+  color: var(--dark-grey);
   background-color: #fdfdfd;
 }
 
 .js-theme-light main h1 {
+  color: var(--);
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }