From e0edb98571133beef76eecb33929d22da1cceb97 Mon Sep 17 00:00:00 2001 From: Lucie Anglade Date: Tue, 5 Sep 2023 17:38:35 +0200 Subject: [PATCH] Mobile style and make logo clickable --- themes/afpy/static/css/website.css | 126 ++++++++++++++++++++++++++++- themes/afpy/templates/base.html | 6 +- 2 files changed, 128 insertions(+), 4 deletions(-) diff --git a/themes/afpy/static/css/website.css b/themes/afpy/static/css/website.css index 4873013..7990f01 100644 --- a/themes/afpy/static/css/website.css +++ b/themes/afpy/static/css/website.css @@ -95,12 +95,18 @@ header { width: 100vw; } +header a:first-of-type { + display: flex; + flex-wrap: wrap; +} + header img { + display: block; margin: 0.5em 1em 0.5em 5em; } header h1 { - margin: auto 0; + margin: auto; } header a, @@ -138,17 +144,123 @@ footer ul { justify-content: center; } +@media (max-width: 920px) { + header h1 { + display: none; + } + + header img { + margin: 0.5em;; + } + + header nav { + display: block; + height: 4em; + margin-right: 0; + overflow: hidden; + transition-delay: 0.5s; + transition-property: z-index; + width: 3em; + z-index: 3; + } + + header::before, + header nav::before { + align-items: center; + background: var(--white); + color: var(--black); + display: flex; + height: 100%; + justify-content: center; + width: 100%; + } + + header::before { + content: "⨯"; + height: 1rem; + padding: 1rem; + position: absolute; + right: 0; + top: 0; + width: 1rem; + z-index: 2; + } + + header nav::before { + content: "☰"; + margin-bottom: 1em; + } + + header nav:hover { + display: flex; + flex-direction: column; + height: 100vh; + justify-content: center; + width: 100%; + z-index: 1; + } + + header nav:hover ul { + background: var(--white); + border-left: 1px solid var(--grey); + flex: 1; + flex-direction: column; + justify-content: center; + } + + header nav:hover li:last-child { + margin-left: 0; + } + + header nav:hover li { + margin: 0.75em 0; + } + + header nav:hover a { + padding: 0.5em; + } + + header nav:hover ~ * { + display: block !important; + height: 0 !important; + margin: 0 !important; + overflow: hidden; + } + + header nav:hover::before { + display: none; + } + + footer ul { + display: initial; + } + + footer ul li { + margin: 0.5em; + } +} + /* Main */ main { flex-grow: 1; - margin: 4em auto 4em auto; + margin: 4em auto; } main > section { padding: 2rem 25rem; } +@media (max-width: 920px) { + main { + margin: 2em auto 0.5em auto; + } + + main > section { + padding: 1rem; + } +} + /* Page Index */ #page-index h2 { @@ -173,6 +285,16 @@ main > section { text-align: center; } +@media (max-width: 920px) { + #introduction section { + display: block; + } + + #introduction section article { + margin: 1em auto; + } +} + /* News and Jobs */ .news-jobs > article { diff --git a/themes/afpy/templates/base.html b/themes/afpy/templates/base.html index 7e44956..78e5e9c 100644 --- a/themes/afpy/templates/base.html +++ b/themes/afpy/templates/base.html @@ -15,8 +15,10 @@ {% set name = output_file.split('/')[-1].split('.')[0] %}
- AFPy logo -

AFPy

+ + AFPy logo +

AFPy

+