From d55136d37de733a6b3b65b71f1e907d6bfe9e2be Mon Sep 17 00:00:00 2001 From: lostinlight Date: Tue, 28 Jan 2020 19:40:46 +0300 Subject: [PATCH] Fix links on hover, make About CSS-only --- themes/starter/layout/_partial/buttons.ejs | 2 +- themes/starter/layout/_partial/navbar.ejs | 9 +- themes/starter/source/assets/scripts/main.js | 11 --- .../source/assets/scss/modules/_navbar.scss | 86 ++++++++++++++++--- .../source/assets/scss/partials/_colors.scss | 2 +- .../source/assets/scss/partials/_utils.scss | 8 +- 6 files changed, 82 insertions(+), 36 deletions(-) diff --git a/themes/starter/layout/_partial/buttons.ejs b/themes/starter/layout/_partial/buttons.ejs index 84a165e..0427e1a 100644 --- a/themes/starter/layout/_partial/buttons.ejs +++ b/themes/starter/layout/_partial/buttons.ejs @@ -1,7 +1,7 @@
-
+
diff --git a/themes/starter/source/assets/scripts/main.js b/themes/starter/source/assets/scripts/main.js index a2d0222..ba75f86 100644 --- a/themes/starter/source/assets/scripts/main.js +++ b/themes/starter/source/assets/scripts/main.js @@ -30,17 +30,6 @@ overlay.checked = true; } - /**** Reveal about info ****/ - - const about = document.getElementById('pulse'); - - about.addEventListener('click', toggleInfo); - - function toggleInfo(e) { // to separate func-helpers file - const content = e.currentTarget.previousElementSibling; - content.classList.toggle('open'); - } - /**** Close share button input on click outside input ****/ const serverForm = document.getElementsByClassName('hidden'); diff --git a/themes/starter/source/assets/scss/modules/_navbar.scss b/themes/starter/source/assets/scss/modules/_navbar.scss index f19f5a2..b28e901 100644 --- a/themes/starter/source/assets/scss/modules/_navbar.scss +++ b/themes/starter/source/assets/scss/modules/_navbar.scss @@ -42,7 +42,7 @@ .navbar a { border-bottom: none; display: block; - padding: 0 0 .1em 1em; + padding: 0 0 .1em 2.2em; } .navbar a:hover, @@ -67,7 +67,7 @@ right: 0; width: 200px; height: 100vh; - padding: 8em 0 1em 20px; + padding: 8em 0 1em 0; background-color: $white; display: inline-block; transform: matrix(1, 0, 0, 1, 220, 0); @@ -149,34 +149,88 @@ display: block; } -.source { +.revealer { position: absolute; bottom: 1.8em; width: 100%; - margin: 0 -20px; text-align: center; font-size: .85rem; } -.source a { +.revealer__toggle { display: block; + position: absolute; + font-size: 0; + z-index: 4; + cursor: pointer; + border: none; + background: transparent; + height: 34px; + width: 100%; } -.source__toggle button { +.revealer__toggle:focus { + outline: 0; +} + +.revealer__text { + position: absolute; font-family: $font-secondary; cursor: pointer; background: none; - color: $golden; + color: $black; border: 0; - border-bottom: 1px solid transparent; - &:hover, - &:focus, - &:active { - outline: none; - border-bottom: 1px solid $golden; - } + width: 100%; } +.revealer__toggle, +.revealer__text { + bottom: 0; +} + +.revealer__toggle:hover ~ .revealer__text > span { + outline: none; + border-bottom: 1px solid $golden; +} + +// .u-hidden { +// visibility: hidden; +// opacity: 0; +// transform: matrix(1, 0, 0, 1, 0, 0); +// transition: .25s ease; +// margin-bottom: .5em; +// } + +// .u-hidden.open { +// visibility: visible; +// opacity: 1; +// transform: matrix(1, 0, 0, 1, 0, -3); +// } + +.u-hidden.source { + transform: matrix(1, 0, 0, 1, 0, -30); +} + +.u-hidden.source > a { + padding: 0; +} + +.revealer__toggle:focus ~ .revealer__text { + z-index: 5; +} + +.revealer__toggle:focus ~ .revealer__text > span { + outline: none; + border-bottom: 1px solid $golden; +} + +.revealer__toggle:focus ~ .u-hidden { + opacity: 1; + visibility:visible; + transform: matrix(1, 0, 0, 1, 0, -35); +} + + @media screen and (max-width: $mq-small) { .hamburger { width: 170px; @@ -196,4 +250,8 @@ .navbar li:not(:last-child) { line-height: 2.5; } + + .revealer { + display: none; + } } diff --git a/themes/starter/source/assets/scss/partials/_colors.scss b/themes/starter/source/assets/scss/partials/_colors.scss index 7bbb852..69923b7 100644 --- a/themes/starter/source/assets/scss/partials/_colors.scss +++ b/themes/starter/source/assets/scss/partials/_colors.scss @@ -22,4 +22,4 @@ $peertube: #f1680d; $misskey: #fb4e4e; $osada: #008000; $pixelfed: #6736dd; -$funkwhale: #009FE3; +$funkwhale: #009fe3; diff --git a/themes/starter/source/assets/scss/partials/_utils.scss b/themes/starter/source/assets/scss/partials/_utils.scss index f26fba9..8145644 100644 --- a/themes/starter/source/assets/scss/partials/_utils.scss +++ b/themes/starter/source/assets/scss/partials/_utils.scss @@ -1,19 +1,19 @@ -.u-extra { +.u-hidden { visibility: hidden; opacity: 0; transform: matrix(1, 0, 0, 1, 0, 0); - transition: .2s ease-in; + transition: .25s ease; margin-bottom: .5em; } -.u-extra.open { +.u-hidden.open { visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, -3); } -.contents .u-extra { +.contents .u-hidden { visibility: visible; opacity: 1; margin-bottom: 2em;