From 719c8cf49309890ad82ef0cf9b87aeed299b6777 Mon Sep 17 00:00:00 2001 From: Alex Auvolat Date: Thu, 22 Dec 2022 00:07:05 +0100 Subject: Tentative 1 for Mobile navigation menu --- sass/_text.scss | 12 +++--- sass/juice.scss | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 128 insertions(+), 16 deletions(-) (limited to 'sass') diff --git a/sass/_text.scss b/sass/_text.scss index 329017b..eb52d51 100644 --- a/sass/_text.scss +++ b/sass/_text.scss @@ -1,14 +1,16 @@ .heading-text { font-family: "Fira Sans", sans-serif; - font-size: 32px; + font-size: 2em; font-weight: 600; + line-height: 1.2em; padding: 10px 0 25px 0; color: var(--secondary-text-color); } h1, .title-text { font-family: "Fira Sans", sans-serif; - font-size: 25px; + font-size: 1.8em; + line-height: 1.2em; font-weight: 500; color: var(--secondary-text-color); border-left: var(--primary-color) 8px solid; @@ -17,7 +19,7 @@ h1, .title-text { h2, .title-text { font-family: "Fira Sans", sans-serif; - font-size: 25px; + font-size: 1.5em; font-weight: 500; color: var(--secondary-text-color); border-left: #aaa 8px solid; @@ -26,14 +28,14 @@ h2, .title-text { h3, .subtitle-text { font-family: "Fira Sans", sans-serif; - font-size: 20px; + font-size: 1.3em; font-weight: 500; color: var(--secondary-text-color); } .text { font-family: "Fira Sans", sans-serif; - font-size: 18px; + font-size: 16px; font-weight: 400; line-height: 26px; letter-spacing: 0.2px; diff --git a/sass/juice.scss b/sass/juice.scss index 04136a1..2e2d5e3 100644 --- a/sass/juice.scss +++ b/sass/juice.scss @@ -38,9 +38,20 @@ header { justify-content: space-between; } +header ul { + margin: 0px; + padding: 0px; + list-style: none; +} + +header ul li { + display: inline; + +} + .logo { font-family: Georgia, DejaVu Serif, Norasi, serif; - font-size: 32px; + font-size: 28px; color: var(--primary-text-color); font-weight: 500; display: flex; @@ -56,7 +67,6 @@ header { .nav-item { margin: 0 10px; text-decoration: none; - font-size: 18px; font-weight: bold; color: var(--primary-text-color); @@ -83,10 +93,12 @@ header { } } + main { display: flex; - padding: 50px 100px; flex-grow: 1; + padding: 50px 100px; + margin: 0; .toc { max-width: 260px; @@ -123,7 +135,6 @@ main { padding: 0 30px 5px; color: #424242; } - } .toc-sticky { @@ -156,20 +167,36 @@ footer { } } +main details#navigation-toggle summary { + display: none; +} + @media screen and (min-width: 1280px) { + .logo { + font-size: 32px; + } .content { max-width: 60%; min-width: 800px; overflow: hidden; } + .text { + font-size: 18px; + } } @media screen and (max-width: 768px) { header { - padding: 10px 30px; - flex-direction: column; - align-items: center; - justify-content: center; + padding: 10px 20px; + display: block; + } + + header nav { + display: none; + } + + header ul li { + display: block; } .logo { @@ -184,7 +211,7 @@ footer { .nav-item { margin: 0 5px; - font-size: 14px; + font-size: 1em; } .hero { @@ -192,15 +219,98 @@ footer { } main { - padding: 30px; + display: block; + padding: 0px; + } + + + main .toc { + margin: 0px; + width: 100%; + max-width: none; + border: 0px; + } + main .toc-sticky { + border: 0px; + } + + main .content { + margin: 15px; } .content { padding: 0; + display: block; } - .explore-more, .toc { + .explore-more { display: none; } + +} + + +/* *********** */ + + +.menu-button-container { + display: none; } + +#menu-toggle { + display: none; +} + +.menu-button, +.menu-button::before, +.menu-button::after { + display: block; + background-color: #fff; + position: absolute; + height: 4px; + width: 30px; + transition: transform 400ms ease; + border-radius: 2px; +} + +.menu-button::before { + content: ''; + transform: translate(0, -8px); +} + +.menu-button::after { + content: ''; + transform: translate(0, 8px); +} + +#menu-toggle:checked + .menu-button-container .menu-button::before { + margin-top: 0px; + transform: rotate(45deg); +} + +#menu-toggle:checked + .menu-button-container .menu-button { + background: transparent; +} + +#menu-toggle:checked + .menu-button-container .menu-button::after { + margin-top: 0px; + transform: rotate(-45deg); +} + +@media (max-width: 768px) { + .menu-button-container { + position: absolute; + display: block; + height: 32px; + width: 32px; + top: 40px; + right: 24px; + } + #menu-toggle ~ .toc { + display: none; + } + #menu-toggle:checked ~ .toc { + display: block; + } +} \ No newline at end of file -- cgit v1.2.3