From 3e3cd5706801131043df10291bfa2f9fa21f892b Mon Sep 17 00:00:00 2001 From: Matt Claypotch Date: Tue, 7 Nov 2017 09:33:29 -0800 Subject: [PATCH] fancy fresh look --- images/wordmark.svg | 7 ++++++ index.html | 6 ++--- style.css | 56 +++++++++++++++++++++++++++++++++++---------- trains.js | 6 +++++ 4 files changed, 59 insertions(+), 16 deletions(-) create mode 100644 images/wordmark.svg diff --git a/images/wordmark.svg b/images/wordmark.svg new file mode 100644 index 0000000..ac403a0 --- /dev/null +++ b/images/wordmark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/index.html b/index.html index adf258d..f45d5ae 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,15 @@ + - - - -mozilla +mozilla

What train is it?

diff --git a/style.css b/style.css index 9f25d01..aee283e 100644 --- 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 index 01f2e22..a6d18b2 100644 --- 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) {