From 51296d548935712e9735be1f41de4ce7886e2659 Mon Sep 17 00:00:00 2001 From: John Gruen Date: Fri, 3 May 2019 18:26:10 +0200 Subject: [PATCH] tweak some styles for trailhead --- app/main.css | 20 +++++++++--- app/ui/archiveTile.js | 2 +- app/ui/blank.js | 2 +- app/ui/download.js | 4 ++- app/ui/error.js | 2 +- app/ui/footer.js | 2 +- app/ui/header.js | 2 +- app/ui/home.js | 4 +-- app/ui/intro.js | 4 +-- app/ui/modal.js | 2 +- app/ui/notFound.js | 2 +- assets/logo.svg | 75 +------------------------------------------ package-lock.json | 2 +- tailwind.js | 4 ++- 14 files changed, 35 insertions(+), 92 deletions(-) diff --git a/app/main.css b/app/main.css index d916ce90..6027dce3 100644 --- a/app/main.css +++ b/app/main.css @@ -31,6 +31,7 @@ body { @apply cursor-pointer; @apply py-4; @apply px-6; + @apply font-semibold; } .btn:hover { @@ -139,6 +140,11 @@ footer li:hover { white-space: nowrap; } +.main-header img { + height: 32px; + width: 170px; +} + .intro { max-width: 100%; height: unset; @@ -159,7 +165,7 @@ footer li:hover { .mozilla-logo { background-image: url('../assets/mozilla-logo.svg'); background-repeat: no-repeat; - background-size: 100px, 32px; + background-size: 100px, 48px; overflow: hidden; text-indent: 120%; white-space: nowrap; @@ -246,6 +252,11 @@ select { } @screen md { + .main-header img { + height: 48px; + width: auto; + } + .intro { max-width: unset; height: unset; @@ -261,7 +272,7 @@ select { @apply py-8; min-height: 36rem; - max-height: 40rem; + max-height: 42rem; width: calc(100% - 3rem); } } @@ -274,8 +285,9 @@ select { } .shadow-big { - box-shadow: 0 0 32px 0 rgba(12, 12, 13, 0.1), - 0 2px 16px 0 rgba(12, 12, 13, 0.05); + box-shadow: 0 12px 18px 2px rgba(34, 0, 51, 0.04), + 0 6px 22px 4px rgba(7, 48, 114, 0.12), + 0 6px 10px -4px rgba(14, 13, 26, 0.12); } } diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js index f9d43d0f..31df9e17 100644 --- a/app/ui/archiveTile.js +++ b/app/ui/archiveTile.js @@ -430,7 +430,7 @@ module.exports.empty = function(state, emit) { `; return html`
diff --git a/app/ui/download.js b/app/ui/download.js index d384d773..15c3c208 100644 --- a/app/ui/download.js +++ b/app/ui/download.js @@ -76,7 +76,9 @@ module.exports = function(state, emit) { return html`
${state.modal && modal(state, emit)} -
+
${content}
diff --git a/app/ui/error.js b/app/ui/error.js index 4d64b196..5f2ed59f 100644 --- a/app/ui/error.js +++ b/app/ui/error.js @@ -7,7 +7,7 @@ module.exports = function(state, emit) {
${state.modal && modal(state, emit)}

${state.translate('errorPageHeader')} diff --git a/app/ui/footer.js b/app/ui/footer.js index a6d1e7ca..8a5fba21 100644 --- a/app/ui/footer.js +++ b/app/ui/footer.js @@ -19,7 +19,7 @@ class Footer extends Component { const feedbackUrl = `https://qsurvey.mozilla.com/s3/Firefox-Send-Product-Feedback?ver=${version}&browser=${browser}`; return html`