From 2c9c4236f8e14311f6d8b259f51b5ab002b048c5 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Rapha=C3=ABl=20Gertz?= Date: Fri, 10 Nov 2023 12:35:56 +0100 Subject: [PATCH 1/1] Update css --- Resources/public/css/screen.css | 265 ++++++++++++++++++++++++-------- 1 file changed, 200 insertions(+), 65 deletions(-) diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 5e207c5..e470c63 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -10,12 +10,29 @@ a:hover { /* Default styling */ h1 { font-size: 2rem; - margin: 1.34rem 0; + line-height: 2.4rem; + font-family: 'Lemon',sans-serif; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + /*line-height: 2rem;*/ + + /*margin: 1.34rem 0;*/ + /*margin: 0 .5rem; + padding: 0; + display: flex; + flex: 1 1 auto; + align-items: center; + gap: .5rem;*/ } h2 { font-size: 1.5rem; - margin: 1.245rem 0; + line-height: 1.9rem; + font-family: 'Lemon',sans-serif; + color: #09c; + text-shadow: 1px 1px 2px #136; + /*font-size: 1.5rem; + margin: 1.245rem 0;*/ } h3 { @@ -45,105 +62,210 @@ p { body { display: flex; flex-flow: column wrap; + gap: .5rem; } /* Header */ #header { - border-top: .1rem solid #0063c9; - padding: .5rem; + /*padding: .5rem; background-color: #00c3f9; - color: #0063c9; - border-radius: 0 0 .5rem .5rem; + color: #0063c9;*/ display: flex; + flex-direction: column; + gap: .5rem; + margin: 0 .5rem; } /* hack for top menu wrapping */ -@media ( max-width: 450px ) { +/*@media ( max-width: 450px ) { #header { flex-wrap: wrap; } -} +}*/ -#header h1 { - order: 0; - font-size: 1.5rem; - margin: 0; - white-space: nowrap; -} +/*#header a { + color: #09c; +}*/ -#header h1:after { - content: "\00a0"; +#logo { + font-size: 2rem; + font-family: 'Lemon',sans-serif; + color: #09c; + text-shadow: 1.5px 1.5px 3px #136; + margin: 0 .5rem; + padding: 0; + display: flex; + flex: 1 1 auto; + align-items: center; + gap: .5rem; + line-height: 60px; } -#header h2 { - order: 1; - font-size: 1.5rem; +#nav { + display: flex; + flex-wrap: wrap; + gap: .5rem; + line-height: 2.5rem; margin: 0; - white-space: nowrap; + border: 0; + /*border-top: .1rem solid #0063c9; + background-color: #cff; + color: #09c; + border-radius: 0 0 .5rem .5rem;*/ + padding: .5rem; + background-color: #cff; + border-radius: .5rem; + border-top: .5rem solid #09c; } -#header h2:before { - content: ">\00a0"; +#nav a { + flex: 1 1 auto; + border: .1rem solid #136; + border-top: 0; + border-left: 0; + border-radius: .2rem; + background-color: #00c3f9; + color: #136; + font-weight: bold; + text-align: center; + padding: 0 .25rem; } -#header a { - color: #0063c9; +#title a { + font-size: 2rem; + line-height: 2rem; + display: block; + /*height: 2rem;*/ } -#header nav { - order: 3; - margin-left: auto; +#header div { display: flex; flex-direction: row; flex-wrap: wrap; - align-items: center; - justify-content: flex-end; -} - -#header nav h2 { - display: none; + justify-content: space-between; } -#header nav a { - text-align: center; - border-radius: .25rem; - padding: .25rem .5rem; - margin: 0 0 .1rem .5rem; - color: #00c3f9; - background-color: #0063c9; - font-weight: bold; -} /* Index */ #content { - margin: .5rem 0; + /*margin: .5rem 0; border-radius: .5rem; overflow: hidden; border: .1rem solid #00c3f9; - padding: .5rem; + padding: .5rem;*/ + + /*margin: .75rem .5rem 0 .5rem; + padding: 0;*/ + /*background-color: #cff;*/ + border-radius: .5rem; + border: .1rem solid #cff; + border-top: .5rem solid #09c; + margin: 0 .5rem; + color: #0063c9; + display: flex; + flex-direction: column; + gap: 0.5rem; } -#content h2 { - background-color: #00c3f9; - margin: -.5rem -.5rem 0 -.5rem; +article header, +section header { + background-color: #cff; + padding: 0 .5rem .5rem .5rem; + display: flex; + flex-direction: column; + row-gap: .5rem; +} + +article header p, +section header p { + text-align: justify; +} + +article section, +section section { + padding: 0 .5rem; + display: flex; + flex-direction: column; + row-gap: .5rem; +} + +article footer, +section footer { padding: .5rem; - color: #0063c9; + text-align: right; } -#content h2 a { +section article { + border-radius: .5rem; + border: .1rem solid #cff; + border-top: .5rem solid #09c; color: #0063c9; + /*margin: 0 .5rem;*/ + display: flex; + flex-direction: column; + gap: .5rem; +} + +/*section article:last-child { + margin-bottom: .5rem; +}*/ + +header h1 a, +header h2 a, +header h3 a { + color: #09c; +} + +footer nav.pager { + display: flex; + flex-direction: row; + justify-content: space-between; } -#content article { - border-bottom: .1rem solid #00c3f9; +footer nav.pager a { + flex-basis: 100%; +} + +footer nav.pager a[rel=prev] { + text-align: left; +} + +footer nav.pager a[rel=next] { + text-align: right; +} + +/*#content h2 { + *background-color: #cff; + margin: 0; + padding: .5rem; + font-weight: bold; + color: #09c;* / + / *background-color: #00c3f9; + margin: -.5rem -.5rem 0 -.5rem; padding: .5rem; + color: #0063c9;* / +}*/ + +/*#content nav, +#content p { + padding: .2rem .5rem; + / *line-height: 1.4rem;* / + text-align: justify; +} + +#content footer nav { + text-align: right; +} + +#content p { } -#content article:last-child { - border-bottom: none; +#content header p { + padding: .2rem 0; } +*/ -#content article header { +/*#content article header { margin: 1.17rem 0; } @@ -156,27 +278,31 @@ body { font-size: .75rem; display: flex; justify-content: space-between; -} +}*/ -#content article a { - color: #0063c9; -} +/*#content article a { + color: #00c3f9; +}*/ +/*#content article ul, #content article p { text-align: justify; text-justify: distribute; margin-bottom: .75rem; } -#content article nav { - text-align: right; - margin-bottom: .5rem; +#content article header p { + margin: .5rem .5rem 0 .5rem; } -#content article:last-child nav { - margin-bottom: 0; +#content article header p:last-child { + margin-bottom: .5rem; } +#content article section { + margin: 0 .5rem; +}*/ + /* Article */ #article, #contact, @@ -273,7 +399,8 @@ body { #footer { font-size: .8rem; padding: .5rem; - background-color: #00c3f9; + margin: 0 .5rem; + /*background-color: #00c3f9; color: #0063c9; border-radius: .5rem .5rem 0 0; bottom: 0; @@ -281,11 +408,19 @@ body { font-weight: bold; position: relative; left: 0; - right: 0; + right: 0;*/ + background-color: #cff; + border-radius: .5rem; + border-top: .5rem solid #09c; + color: #0063c9; display: flex; justify-content: space-between; } +#footer details { + text-align: center; +} + #footer summary:after { display: none; } -- 2.41.0