From a741f9b5c32f51b334d7173685eb04d8b2a678e5 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sun, 28 Feb 2021 12:18:50 +0100 Subject: Remove "togglable" menus We will add a dedicated menu for mobile, that will be display: none on large screens. That will cause some duplication in the HTML, but it will make it easier to iterate on large and narrow layouts independently. --- stylesheets/commun.css | 161 ++++--------------------------------------------- 1 file changed, 13 insertions(+), 148 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 3c8439e..174ab7d 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -1,10 +1,5 @@ body { --gold: #E4B63A; - --banner-logo-height: 11rem; - --banner-name-height: 2.4rem; - --menu-top-margin: calc((var(--banner-logo-height) - - 2 * var(--banner-name-height)) - / 2); margin: 0; background-color: white; @@ -86,7 +81,7 @@ footer.social a.lang:hover { border: 0.15rem solid var(--gold); } -footer.social > .content { +footer.social { display: flex; flex-direction: column; align-items: center; @@ -101,13 +96,13 @@ footer.legal { } @media (min-width: 40em) { - .togglable > input.toggle, - .togglable > img.button, - .togglable > label { - display: none; - } - body { + --banner-logo-height: 11rem; + --banner-name-height: 2.4rem; + --menu-top-margin: calc((var(--banner-logo-height) + - 2 * var(--banner-name-height)) + / 2); + min-height: 100vh; display: grid; grid-template-columns: 2fr 1fr 4fr 1fr auto; @@ -128,8 +123,6 @@ footer.legal { header.menu { grid-column: 3 / -2; - } - header.menu > .content { display: grid; grid-template-columns: 3fr 1fr; } @@ -231,127 +224,25 @@ footer.legal { @media (max-width: 40em) { body { display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: auto auto 1fr auto; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; min-height: 100vh; } header.banner { - grid-row: 1 / 3; - grid-column: 1; - } - header.menu { grid-row: 1; - grid-column: 2; } - footer.social { - grid-row: 2; - grid-column: 2; + header.menu, footer.social { + display: none; } footer.legal { - grid-row: 4; + grid-row: 3; } main { - grid-row: 3; - grid-column: 1 / -1; + grid-row: 2; margin: 0.8em; } - header.menu { - --open-button-size: 2.4rem; - } - header.menu > label { - font-size: 1.2rem; - } - footer.social { - --open-button-size: 1.8rem; - } - footer.social > label { - font-size: 0.8rem; - } - - /* Ideally, we'd use display: grid to have labels aligned. - * Unfortunately, afaict on mobile Safari brainfarts and fails to - * move the input to its fixed top-right position when it is - * checked; instead it moves it… somewhere… - * - * Use display: flex, absolute positions, and margins instead. - */ - .togglable { - display: flex; - position: relative; - align-items: center; - --open-button-max-size: 2.4rem; - --close-button-size: 2rem; - --togglable-origin: left; - --togglable-transform: translate(-100vw); - } - .togglable > input.toggle { - position: absolute; - margin: 0; - margin-left: calc(var(--open-button-max-size) - var(--open-button-size)); - width: var(--open-button-size); - height: var(--open-button-size); - opacity: 0; - cursor: pointer; - } - .togglable > img.button.open { - margin-left: calc(var(--open-button-max-size) - var(--open-button-size)); - padding: calc(0.1 * var(--open-button-size)); - width: calc(0.8 * var(--open-button-size)); - height: calc(0.8 * var(--open-button-size)); - object-fit: contain; - object-position: center; - } - .togglable > img.button.close { - display: block; - position: fixed; - top: calc(var(--close-button-size) / 2); - right: calc(var(--close-button-size) / 2); - width: var(--close-button-size); - height: var(--close-button-size); - margin: 0; - transform-origin: var(--togglable-origin); - transform: var(--togglable-transform); - transition: transform 0.5s; - z-index: 4; - } - .togglable > label { - position: absolute; - left: calc(1.2 * var(--open-button-max-size)); - cursor: pointer; - } - .togglable > .content { - display: block; - position: fixed; - overflow: auto; - width: 100vw; - height: 100vh; - top: 0; - left: 0; - margin: 0; - background: #dddd; - transform-origin: var(--togglable-origin); - transform: var(--togglable-transform); - transition: transform 0.5s; - z-index: 3; - } - .togglable > input.toggle:checked { - display: block; - position: fixed; - top: calc(var(--close-button-size) / 2); - right: calc(var(--close-button-size) / 2); - width: var(--close-button-size); - height: var(--close-button-size); - z-index: 5; - } - .togglable > input.toggle:checked ~ img.button.close { - transform: none; - } - .togglable > input.toggle:checked ~ .content { - transform: none; - } - header.banner img { width: 4rem; height: 4rem; @@ -359,30 +250,4 @@ footer.legal { header.banner h1 { font-size: 1.6rem; } - - header.menu .content { - display: grid; - --cell-size: calc(var(--close-button-size) * 2); - grid-template-columns: auto var(--cell-size); - grid-template-rows: var(--cell-size) var(--cell-size) auto; - } - header.menu .content nav { - grid-row: 1 / -1; - grid-column: 1; - padding: 2rem; - } - header.menu .content .lang { - grid-row: 2; - grid-column: 2; - margin: auto; - } - - .social > .content img { - width: 3em; - margin-top: 0.5em; - margin-bottom: 0.5em; - } - .contact { - padding: 1em; - } } -- cgit v1.2.3 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/commun.css | 8 ++++---- stylesheets/dark.css | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 174ab7d..76a1db7 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -33,10 +33,10 @@ header.banner h1 { font-family: 'Cormorant', serif; } -header.banner img, .social a img { +header.banner img, footer.social img { filter: brightness(0); } -header.banner:hover img, .social a:hover img { +header.banner:hover img, footer.social img:hover { filter: none; } header.banner:hover { @@ -201,12 +201,12 @@ footer.legal { padding: var(--menu-top-margin) 1em 0; } - .social a { + footer.social a { display: block; margin: 1rem; } - .social a > img { + footer.social a > img { width: 2.2rem; } 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 a8d565349c2f133ea1cb63ea7abe182c1574d6b4 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Mon, 1 Mar 2021 00:17:22 +0100 Subject: Add new sliding menu Still very rough. --- stylesheets/commun.css | 93 ++++++++++++++++++++++++++++++++++++++------------ template.html | 45 ++++++++++++++++++++++++ 2 files changed, 117 insertions(+), 21 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 76a1db7..01f6911 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -26,10 +26,14 @@ header.banner a { align-items: center; } header.banner img { + height: var(--banner-logo-height); margin: 0.6rem; } header.banner h1 { margin: 0; + max-width: 6em; /* Force linebreak. */ + font-size: var(--banner-name-height); + font-weight: normal; font-family: 'Cormorant', serif; } @@ -109,17 +113,13 @@ footer.legal { grid-template-rows: auto 1fr auto; } + header.slidingmenu { + display: none; + } + header.banner { grid-column: 1; } - header.banner img { - height: var(--banner-logo-height); - } - header.banner h1 { - font-size: var(--banner-name-height); - font-weight: normal; - max-width: 6em; /* Force linebreak. */ - } header.menu { grid-column: 3 / -2; @@ -223,31 +223,82 @@ footer.legal { @media (max-width: 40em) { body { + --banner-logo-height: 6rem; + --banner-name-height: 1.8rem; + display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr auto; + grid-template-columns: 3rem 1fr; + grid-template-rows: 3rem auto 1fr auto; min-height: 100vh; } - header.banner { - grid-row: 1; - } header.menu, footer.social { display: none; } - footer.legal { - grid-row: 3; + + header.slidingmenu { + grid-column: 1; + grid-row: 1; + } + header.banner { + grid-column: 2; + grid-row: 1 / 3; + justify-self: start; } main { - grid-row: 2; + grid-row: 3; + grid-column: 1 / -1; margin: 0.8em; } + footer.legal { + grid-column: 1 / -1; + grid-row: -1; + } - header.banner img { - width: 4rem; - height: 4rem; + header.slidingmenu { + position: relative; + } + header.slidingmenu > input { + position: relative; + width: 100%; + height: 100%; + margin: 0; + z-index: 3; + opacity: 0; + } + header.slidingmenu > img.button { + position: absolute; + top: 0; + left: 0; + padding: 0.3rem; + width: 2.4rem; + height: 2.4rem; + } + header.slidingmenu > img.button.close { + transform-origin: left; + transform: translate(-100vw); + transition: transform 0.5s; + z-index: 2; + } + header.slidingmenu > .content { + position: fixed; + overflow: auto; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + margin: 0; + background: #dddd; + transform-origin: left; + transform: translate(-100vw); + transition: transform 0.5s; + z-index: 1; + } + header.slidingmenu > input:checked ~ .content, + header.slidingmenu > input:checked ~ img.button.close { + transform: none; } - header.banner h1 { - font-size: 1.6rem; + header.slidingmenu > input:checked ~ img.button.open { + opacity: 0; } } diff --git a/template.html b/template.html index 865a1e2..10dd002 100644 --- a/template.html +++ b/template.html @@ -13,6 +13,51 @@ +
+ + + +
+ + EN + + + + + contact + +
+
+ - - EN - + + EN + -- cgit v1.2.3 From 9101c491153a5016888d05314cebbd67a8bf3322 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Wed, 3 Mar 2021 23:52:35 +0100 Subject: Revert "Move lang button at the bottom of the menu" This reverts commit aaef34f4d967888e4249b8c72f025ed24c4da8bf. Layout is reportedly broken on actual phones. --- stylesheets/commun.css | 31 ++++++++++++++++++------------- template.html | 6 +++--- 2 files changed, 21 insertions(+), 16 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 9fed430..58160d9 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -306,7 +306,7 @@ footer.legal { z-index: 1; display: grid; - grid-template-columns: 3rem 1fr; + grid-template-columns: 3rem 1fr 3rem; grid-template-rows: 3rem repeat(4, auto); } header.slidingmenu > .content > img.button.close { @@ -318,9 +318,22 @@ footer.legal { grid-row: 1 / 3; justify-self: start; } + header.slidingmenu > .content > a.lang { + grid-column: -2; + grid-row: 1; + + display: flex; + align-self: center; + justify-self: center; + align-items: center; + justify-content: center; + + padding: 0.4rem; + font-size: 0.8rem; + } header.slidingmenu > .content > nav.menu, header.slidingmenu > .content > nav.social { - grid-column: 2; + grid-column: 1 / -1; } header.slidingmenu > .content nav ol, @@ -331,18 +344,20 @@ footer.legal { header.slidingmenu > .content > nav.menu li > a { display: block; padding: 0.5em; + padding-left: 2em; } header.slidingmenu > .content > nav.menu li.dropdown > a { display: flex; } header.slidingmenu > .content > nav.menu li.dropdown li > a { padding: 0.2em; - padding-left: 2em; + padding-left: 4em; } header.slidingmenu > .content > nav.social > ul { display: flex; padding-left: 0; + margin-left: 2em; } header.slidingmenu > .content > nav.social > ul > li:not(:first-child) { margin-left: 1em; @@ -357,16 +372,6 @@ footer.legal { height: 2em; } - header.slidingmenu > .content > a.lang { - grid-column: 2; - - justify-self: start; - - margin-left: 0.5em; - padding: 0.4rem; - font-size: 0.8rem; - } - header.slidingmenu > input:checked ~ .content { transform: none; } diff --git a/template.html b/template.html index 3925651..91dea2f 100644 --- a/template.html +++ b/template.html @@ -25,6 +25,9 @@

Quatuor Bellefeuille

+ + EN + - - EN - -- cgit v1.2.3 From 5b5748bd0a796ffe3ad6506398e3c651d6fecc57 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Thu, 4 Mar 2021 00:06:09 +0100 Subject: Fix desync between mobile menu "close" image and button --- stylesheets/commun.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 58160d9..6b8dc3e 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -312,6 +312,7 @@ footer.legal { header.slidingmenu > .content > img.button.close { grid-column: 1; grid-row: 1; + position: fixed; } header.slidingmenu > .content header.banner { grid-column: 2; @@ -372,6 +373,11 @@ footer.legal { height: 2em; } + header.slidingmenu > input:checked { + position: fixed; + width: 3rem; + height: 3rem; + } header.slidingmenu > input:checked ~ .content { transform: none; } -- cgit v1.2.3 From e3844d7ca7fc0e620076bd285661a23cb7d0dc28 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Thu, 4 Mar 2021 00:07:51 +0100 Subject: Make sure menu links are not covered by close button --- stylesheets/commun.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 6b8dc3e..874d7bc 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -334,7 +334,7 @@ footer.legal { } header.slidingmenu > .content > nav.menu, header.slidingmenu > .content > nav.social { - grid-column: 1 / -1; + grid-column: 2; } header.slidingmenu > .content nav ol, @@ -345,20 +345,18 @@ footer.legal { header.slidingmenu > .content > nav.menu li > a { display: block; padding: 0.5em; - padding-left: 2em; } header.slidingmenu > .content > nav.menu li.dropdown > a { display: flex; } header.slidingmenu > .content > nav.menu li.dropdown li > a { padding: 0.2em; - padding-left: 4em; + padding-left: 2em; } header.slidingmenu > .content > nav.social > ul { display: flex; padding-left: 0; - margin-left: 2em; } header.slidingmenu > .content > nav.social > ul > li:not(:first-child) { margin-left: 1em; -- cgit v1.2.3 From a8a88e379ee4138aa7003bd9d8a3f6bafc13b6ed Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Thu, 4 Mar 2021 00:11:13 +0100 Subject: Make EN button slightly bigger --- stylesheets/commun.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 874d7bc..e55414e 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -306,7 +306,7 @@ footer.legal { z-index: 1; display: grid; - grid-template-columns: 3rem 1fr 3rem; + grid-template-columns: 3rem 1fr 3.2rem; grid-template-rows: 3rem repeat(4, auto); } header.slidingmenu > .content > img.button.close { @@ -330,7 +330,7 @@ footer.legal { justify-content: center; padding: 0.4rem; - font-size: 0.8rem; + font-size: 1rem; } header.slidingmenu > .content > nav.menu, header.slidingmenu > .content > nav.social { -- cgit v1.2.3 From bb323265493d7400a2b19b181fe9e1f420f67bd5 Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Thu, 4 Mar 2021 00:15:39 +0100 Subject: Move EN button away from edges --- stylesheets/commun.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'stylesheets') diff --git a/stylesheets/commun.css b/stylesheets/commun.css index e55414e..b30d130 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -306,8 +306,8 @@ footer.legal { z-index: 1; display: grid; - grid-template-columns: 3rem 1fr 3.2rem; - grid-template-rows: 3rem repeat(4, auto); + grid-template-columns: 3rem 1fr 3.6rem; + grid-template-rows: 3.6rem repeat(4, auto); } header.slidingmenu > .content > img.button.close { grid-column: 1; -- cgit v1.2.3