fancy fresh look

mozilla · Nov 7, 2017 · 3e3cd57 · 3e3cd57
1 parent 883eeb5
commit 3e3cd57
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 16 deletions.
diff --git a/images/wordmark.svg b/images/wordmark.svg
diff --git a/index.html b/index.html
@@ -7,17 +7,15 @@
 <!--[if lt IE 9]>
     <link rel="stylesheet" href="gh-fork-ribbon.ie.css">
 <![endif]-->
+<link href="https://code.cdn.mozilla.net/fonts/fira.css" rel="stylesheet" type="text/css">
 <link href="style.css" rel="stylesheet" type="text/css">
-<link href="//fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" type="text/css">
-<link href="https://mozorg.cdn.mozilla.net/media/css/tabzilla-min.css" rel="stylesheet" />
 <script type="application/javascript" src="moment.min.js"></script>
 <script type="application/javascript" src="moment-timezone-with-data-2012-2022.js"></script>
 <script type="application/javascript" src="trains.js"></script>
-<!-- <script src="https://mozorg.cdn.mozilla.net/tabzilla/tabzilla.js"></script> -->
 <script src="https://apis.google.com/js/client.js?onload=gapi_init" async></script>
 </head>
 <body>
-<a href="https://www.mozilla.org/" id="tabzilla">mozilla</a>
+<a href="https://www.mozilla.org/" class="brand">mozilla</a>
 <h1>What train is it?</h1>
 <div class="github-fork-ribbon-wrapper right-bottom">
     <div class="github-fork-ribbon">

diff --git a/style.css b/style.css
@@ -1,11 +1,23 @@
+* {
+  box-sizing: border-box;
+}
+
 html {
   border-top: 2px solid #fff;
+  font-size: calc(1vw + 12px);
+  height: 100%;
 }
 
 body {
-  margin-top: 0;
-  background: rgb(245,241,232) url('images/background-gradient.png') repeat-x top center;
-  font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
+  background: #f7f4f1;
+  font-family: 'Fira Sans', sans-serif;
+  font-weight: normal;
+  text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
+  padding: 1em;
+  margin: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .huge, .large, h2, h3, h4 {
@@ -15,15 +27,18 @@ body {
 
 h1 {
   text-align: center;
-  clear: both;
+  font-style: italic;
+  font-weight: 800;
+  margin: .5em 0;
+  font-size: 2.5em;
 }
 
-h2 div:first-of-type {
-  font-size: xx-large;
+.vernum {
+  font-size: 1.25em;
 }
 
-h2 div:last-of-type {
-  font-size: large;
+.branch {
+  font-size: .8em;
 }
 
 #flex-container {
@@ -32,16 +47,19 @@ h2 div:last-of-type {
   display: -ms-flexbox;
   display: flex;
   flex-flow: row wrap;
-  justify-content: center;
+  justify-content: space-around;
+
+  flex: 1;
+  padding: 0 1em;
 }
 
 .version {
   background-repeat: no-repeat;
   background-position: top center;
-  background-size: 120px;
-  padding-top: 151px; /* Branch logos height */
+  background-size: 90%;;
+  padding-top: 17vw;
   text-align: center;
-  width: 19vw;
+  width: 17vw;
   min-width: 160px; /* Branch logo width */
 }
 
@@ -81,6 +99,20 @@ h2 div:last-of-type {
   color: inherit;
 }
 
+.brand {
+  display: block;
+  overflow: hidden;
+  position: absolute;
+  top: 1em;
+  left: 1em;
+  background-image: url(images/wordmark.svg);
+  background-repeat: no-repeat;
+  text-indent: -9999px;
+  width: 6em;
+  height: 2em;
+  background-size: contain;
+}
+
 .right-bottom .github-fork-ribbon {
   background-color: #333;
 }
diff --git a/trains.js b/trains.js
@@ -75,7 +75,9 @@ function appendVersionInfo(branch, version, description, h2) {
     return;
   branch = description || branch[0].toUpperCase() + branch.slice(1);
   var div_branch = document.createElement("div");
+  div_branch.classList.add('branch');
   var div_version = document.createElement("div");
+  div_version.classList.add('vernum');
   div_branch.textContent = branch;
   div_version.textContent = version;
   h2.appendChild(div_version);
@@ -99,6 +101,10 @@ function init() {
     var branch = BRANCHES[i];
     makeHeader(branch[0], branch[2]);
   }
+
+  if (window.location.search === '?tv') {
+    document.querySelector('.github-fork-ribbon-wrapper').style.display = 'none';
+  }
 }
 
 function setNextUplift(date, link, when) {