From 1f21e4416397a6d2f59b4ac1be9235aff62331d6 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sun, 28 Feb 2021 15:24:12 +0100 Subject: Make some CSS rules more precise So that e.g. a .social div in our future sliding menu is not affected. --- stylesheets/dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'stylesheets/dark.css') diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 297b27a..0234077 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -12,6 +12,6 @@ footer.social a.lang:hover { border-color: white; } -header.banner img, .social a img { +header.banner img, footer.social a img { filter: brightness(10); } -- cgit v1.2.3 From 1aa961dcbf14e58d33b7175f42218bd0da66a970 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Mon, 1 Mar 2021 22:48:34 +0100 Subject: Add logo to mobile menu, lay nav.menu out a bit better --- stylesheets/commun.css | 25 +++++++++++++++++++------ stylesheets/dark.css | 2 +- template.html | 7 +++++++ 3 files changed, 27 insertions(+), 7 deletions(-) (limited to 'stylesheets/dark.css') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 8aca71f..c6c665b 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -240,7 +240,7 @@ footer.legal { grid-column: 1; grid-row: 1; } - header.banner { + body > header.banner { grid-column: 2; grid-row: 1 / 3; justify-self: start; @@ -282,7 +282,10 @@ footer.legal { top: 0; left: 0; margin: 0; + background: #eeee; + color: initial; + transform-origin: left; transform: translate(-100vw); transition: transform 0.5s; @@ -290,12 +293,18 @@ footer.legal { display: grid; grid-template-columns: 3rem 1fr 3rem; - grid-template-rows: 3rem auto auto auto; + grid-template-rows: 3rem repeat(4, auto); + justify-items: center; + text-align: center; } header.slidingmenu > .content > img.button.close { grid-column: 1; grid-row: 1; } + header.slidingmenu > .content header.banner { + grid-column: 2; + grid-row: 1 / 3; + } header.slidingmenu > .content > a.lang { grid-column: -2; grid-row: 1; @@ -315,24 +324,28 @@ footer.legal { header.slidingmenu > .content > nav.social, header.slidingmenu > .content > a.contact { grid-column: 1 / -1; + width: 100%; } header.slidingmenu > .content ul, header.slidingmenu > .content ol { list-style: none; padding-left: 0; + width: 100%; } - header.slidingmenu > .content > nav.menu ol > li > ul > li { - width: 100%; + header.slidingmenu > .content > nav.menu > ol > li > ul { + display: flex; + justify-content: space-evenly; } - header.slidingmenu > .content > nav.menu ol > li > ul > li > a { + header.slidingmenu > .content > nav.menu > ol > li > ul > li > a { display: block; - padding-left: 2em; + padding: 0.5em; } header.slidingmenu > .content > nav.social > ul { display: flex; + justify-content: space-evenly; } header.slidingmenu > .content > nav.social > ul > li > a { display: block; diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 0234077..0b96216 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -12,6 +12,6 @@ footer.social a.lang:hover { border-color: white; } -header.banner img, footer.social a img { +body > header.banner img, footer.social a img { filter: brightness(10); } diff --git a/template.html b/template.html index aef42ea..6bebb8f 100644 --- a/template.html +++ b/template.html @@ -18,6 +18,13 @@
+ EN -- cgit v1.2.3 From 60394bb4e1833ae58f60885099eb72c0b15530e4 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Mon, 1 Mar 2021 23:07:53 +0100 Subject: Make menu elements easier to recognize --- images/close.svg | 2 +- images/menu.svg | 2 +- images/share.svg | 1 - stylesheets/commun.css | 11 +++++++++++ stylesheets/dark.css | 6 ++++++ 5 files changed, 19 insertions(+), 3 deletions(-) delete mode 100644 images/share.svg (limited to 'stylesheets/dark.css') diff --git a/images/close.svg b/images/close.svg index 7d5875c..184843d 100644 --- a/images/close.svg +++ b/images/close.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/images/menu.svg b/images/menu.svg index e8a84a9..eec9988 100644 --- a/images/menu.svg +++ b/images/menu.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/images/share.svg b/images/share.svg deleted file mode 100644 index 09b1c7b..0000000 --- a/images/share.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/stylesheets/commun.css b/stylesheets/commun.css index c6c665b..acda5e8 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -265,6 +265,7 @@ footer.legal { margin: 0; z-index: 3; opacity: 0; + cursor: pointer; } header.slidingmenu img.button { position: absolute; @@ -274,6 +275,16 @@ footer.legal { width: 2.4rem; height: 2.4rem; } + header.slidingmenu img.button { + filter: brightness(0); + } + header.slidingmenu > input:hover ~ img.button.open, + header.slidingmenu > input:focus ~ img.button.open, + header.slidingmenu > input:hover ~ .content > img.button.close, + header.slidingmenu > input:focus ~ .content > img.button.close { + filter: none; + } + header.slidingmenu > .content { position: fixed; overflow: auto; diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 0b96216..654d2e0 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -15,3 +15,9 @@ footer.social a.lang:hover { body > header.banner img, footer.social a img { filter: brightness(10); } + +@media (max-width: 40em) { + header.slidingmenu > img.button.open { + filter: brightness(10); + } +} -- cgit v1.2.3