diff options
| -rw-r--r-- | Makefile | 2 | ||||
| -rwxr-xr-x | build-member.sh | 1 | ||||
| -rw-r--r-- | contact.sh | 3 | ||||
| -rw-r--r-- | images/close.svg | 2 | ||||
| -rw-r--r-- | images/menu.svg | 2 | ||||
| -rw-r--r-- | images/share.svg | 1 | ||||
| -rw-r--r-- | quatuor.sh | 3 | ||||
| -rw-r--r-- | stylesheets/commun.css | 291 | ||||
| -rw-r--r-- | stylesheets/dark.css | 8 | ||||
| -rw-r--r-- | template.html | 120 |
10 files changed, 241 insertions, 192 deletions
@@ -40,7 +40,7 @@ $(stylesheets): $(OUTDIR)/%: % | $(stylesheets_folders) $(pages): $(OUTDIR)/%.html: %.html %.sh template.html | $(OUTDIR) ./build.sh $< $*.sh $@ -$(members_pages): $(OUTDIR)/%.html: %.in template.html | $(OUTDIR) +$(members_pages): $(OUTDIR)/%.html: %.in build-member.sh template.html | $(OUTDIR) ./build-member.sh $< $@ $(OUTDIR)/quatuor.html: quatuor.md diff --git a/build-member.sh b/build-member.sh index 329be0e..ed74909 100755 --- a/build-member.sh +++ b/build-member.sh @@ -20,6 +20,7 @@ generate-parameters () title='${fullname}' stylesheets=(membre) transforms=("\$(transform-li-dropdown-current-a quatuor)" + "\$(transform-li-current-a quatuor)" "\$(transform-li-current-a $(firstname "${fullname}"))") EOF } @@ -1,3 +1,4 @@ title=Contact stylesheets=(contact) -transforms=('s/class="contact"/class="contact current"/') +transforms=('s/class="contact"/class="contact current"/' # Desktop. + "$(transform-li-current-a contact)") # Mobile. diff --git a/images/close.svg b/images/close.svg index 7d5875c..184843d 100644 --- a/images/close.svg +++ b/images/close.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e4b63a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> diff --git a/images/menu.svg b/images/menu.svg index e8a84a9..eec9988 100644 --- a/images/menu.svg +++ b/images/menu.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e4b63a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> 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 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
\ No newline at end of file @@ -8,5 +8,6 @@ add-bio () title=Biographie stylesheets=quatuor -transforms=("$(transform-li-dropdown-current-a quatuor)") +transforms=("$(transform-li-dropdown-current-a quatuor)" # Desktop. + "$(transform-li-current-a quatuor)") # Mobile. postprocess=add-bio diff --git a/stylesheets/commun.css b/stylesheets/commun.css index 3c8439e..b30d130 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; @@ -31,14 +26,18 @@ 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; } -header.banner img, .social a img { +header.banner img, .social img { filter: brightness(0); } header.banner:hover img, .social a:hover img { @@ -48,18 +47,13 @@ header.banner:hover { color: var(--gold); } -nav a { +header.menu > nav a { font-size: 1.2rem; font-weight: 600; } -nav > ol, nav li.dropdown > ul { +nav ol, nav ul { list-style-type: none; - padding-left: 0; -} -nav > ol > li > a { - display: block; - padding: 0.5em 0.1em; } footer.social a { @@ -72,21 +66,23 @@ footer.social a.contact:hover { background: white; } -footer.social a.lang { - display: block; - padding: 0.5rem; - border-radius: 50%; - font-size: 1rem; - +a.lang { border: 0.15rem solid black; + border-radius: 50%; } -footer.social a.lang:hover { +a.lang:hover { color: white; background: var(--gold); border: 0.15rem solid var(--gold); } -footer.social > .content { +footer.social a.lang { + display: block; + padding: 0.5rem; + font-size: 1rem; +} + +footer.social { display: flex; flex-direction: column; align-items: center; @@ -101,35 +97,29 @@ 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; 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; - } - header.menu > .content { display: grid; grid-template-columns: 3fr 1fr; } @@ -146,6 +136,9 @@ footer.legal { text-align: center; margin: 0; } + nav ol, nav ul { + padding-left: 0; + } /* I'd like to make sure the grid only ever has 1/2/4 columns. * No idea how to do that with one single neat rule, so… @@ -163,6 +156,11 @@ footer.legal { } } + nav > ol > li > a { + display: block; + padding: 0.5em 0.1em; + } + nav li.dropdown { position: relative; } @@ -208,16 +206,16 @@ 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; } - a.contact { + footer.social > a.contact { /* Ideally should be just: */ /* writing-mode: sideways-lr; */ /* but of course We Can't Have Nice Things. */ @@ -230,99 +228,67 @@ footer.legal { @media (max-width: 40em) { body { + --banner-logo-height: 6rem; + --banner-name-height: 1.8rem; + display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: auto auto 1fr auto; + grid-template-columns: 3rem 1fr; + grid-template-rows: 3rem auto 1fr auto; min-height: 100vh; } - header.banner { - grid-row: 1 / 3; - grid-column: 1; + header.menu, footer.social { + display: none; } - header.menu { + + header.slidingmenu { + grid-column: 1; grid-row: 1; - grid-column: 2; } - footer.social { - grid-row: 2; + body > header.banner { grid-column: 2; - } - footer.legal { - grid-row: 4; + grid-row: 1 / 3; + justify-self: start; } main { grid-row: 3; grid-column: 1 / -1; 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; + footer.legal { + grid-column: 1 / -1; + grid-row: -1; } - /* 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; + header.slidingmenu { 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; + header.slidingmenu > input { + position: relative; + width: 100%; + height: 100%; margin: 0; - margin-left: calc(var(--open-button-max-size) - var(--open-button-size)); - width: var(--open-button-size); - height: var(--open-button-size); + z-index: 3; 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; + header.slidingmenu img.button { + position: absolute; + top: 0; + left: 0; + padding: 0.3rem; + width: 2.4rem; + height: 2.4rem; } - .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; + header.slidingmenu img.button { + filter: brightness(0); } - .togglable > label { - position: absolute; - left: calc(1.2 * var(--open-button-max-size)); - cursor: pointer; + header.slidingmenu > input:hover ~ img.button.open, + header.slidingmenu > input:hover ~ .content > img.button.close { + filter: none; } - .togglable > .content { - display: block; + + header.slidingmenu > .content { position: fixed; overflow: auto; width: 100vw; @@ -330,59 +296,90 @@ footer.legal { top: 0; left: 0; margin: 0; - background: #dddd; - transform-origin: var(--togglable-origin); - transform: var(--togglable-transform); + + background: #eeee; + color: initial; + + transform-origin: left; + transform: translate(-100vw); transition: transform 0.5s; - z-index: 3; + z-index: 1; + + display: grid; + grid-template-columns: 3rem 1fr 3.6rem; + grid-template-rows: 3.6rem repeat(4, auto); } - .togglable > input.toggle:checked { - display: block; + header.slidingmenu > .content > img.button.close { + grid-column: 1; + grid-row: 1; 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; + header.slidingmenu > .content header.banner { + grid-column: 2; + grid-row: 1 / 3; + justify-self: start; } - .togglable > input.toggle:checked ~ .content { - transform: none; + 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: 1rem; + } + header.slidingmenu > .content > nav.menu, + header.slidingmenu > .content > nav.social { + grid-column: 2; } - header.banner img { - width: 4rem; - height: 4rem; + header.slidingmenu > .content nav ol, + header.slidingmenu > .content nav ul { + margin-top: 0.2em; + padding-left: 0; + } + header.slidingmenu > .content > nav.menu li > a { + display: block; + padding: 0.5em; + } + header.slidingmenu > .content > nav.menu li.dropdown > a { + display: flex; } - header.banner h1 { - font-size: 1.6rem; + header.slidingmenu > .content > nav.menu li.dropdown li > a { + padding: 0.2em; + padding-left: 2em; } - 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.slidingmenu > .content > nav.social > ul { + display: flex; + padding-left: 0; } - header.menu .content nav { - grid-row: 1 / -1; - grid-column: 1; - padding: 2rem; + header.slidingmenu > .content > nav.social > ul > li:not(:first-child) { + margin-left: 1em; } - header.menu .content .lang { - grid-row: 2; - grid-column: 2; - margin: auto; + header.slidingmenu > .content > nav.social > ul > li > a { + display: flex; + align-items: center; + padding: 0.5em; + } + header.slidingmenu > .content > nav.social > ul > li > a > img { + width: 2em; + height: 2em; } - .social > .content img { - width: 3em; - margin-top: 0.5em; - margin-bottom: 0.5em; + header.slidingmenu > input:checked { + position: fixed; + width: 3rem; + height: 3rem; } - .contact { - padding: 1em; + header.slidingmenu > input:checked ~ .content { + transform: none; + } + header.slidingmenu > input:checked ~ img.button.open { + opacity: 0; } } diff --git a/stylesheets/dark.css b/stylesheets/dark.css index 297b27a..654d2e0 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -12,6 +12,12 @@ footer.social a.lang:hover { border-color: white; } -header.banner img, .social a img { +body > header.banner img, footer.social a img { filter: brightness(10); } + +@media (max-width: 40em) { + header.slidingmenu > img.button.open { + filter: brightness(10); + } +} diff --git a/template.html b/template.html index 0e2fe48..91dea2f 100644 --- a/template.html +++ b/template.html @@ -13,21 +13,22 @@ <link rel="alternate" type="application/rss+xml" href="feed.xml"> </head> <body> - <header class="banner"> - <a href="index.html"> - <img src="images/logo.svg" - alt="logo"> - <h1>Quatuor Bellefeuille</h1> - </a> - </header> - - <header class="menu togglable"> - <input type="checkbox" class="toggle" id="menu"> + <header class="slidingmenu"> + <input type="checkbox"> <img class="button open" src="images/menu.svg"> - <img class="button close" src="images/close.svg"> - <label for="menu">Menu</label> <div class="content"> - <nav> + <img class="button close" src="images/close.svg"> + <header class="banner"> + <a href="index.html"> + <img src="images/logo.svg" + alt="logo"> + <h1>Quatuor Bellefeuille</h1> + </a> + </header> + <a class="lang" href=""> + EN + </a> + <nav class="menu"> <ol> <li class="dropdown"><a href="quatuor.html">le quatuor</a> <ul> @@ -40,38 +41,81 @@ <li><a href="actualités.html">actualités</a></li> <li><a href="programmes.html">programmes</a></li> <li><a href="galerie.html">galerie</a></li> + <li><a href="contact.html">contact</a></li> </ol> </nav> + <nav class="social"> + <ul> + <li> + <a href="https://www.facebook.com/quatuorbellefeuille/" + target="_blank" rel="noreferrer noopener"> + <img src="images/facebook-logo.svg"> + </a> + </li> + <li> + <a href="https://www.instagram.com/quatuor.bellefeuille/" + target="_blank" rel="noreferrer noopener"> + <img src="images/instagram-logo.svg"> + </a> + </li> + <li> + <a href="" + target="_blank" rel="noreferrer noopener"> + <img src="images/youtube-logo.svg"> + </a> + </li> + </ul> + </nav> </div> </header> + <header class="banner"> + <a href="index.html"> + <img src="images/logo.svg" + alt="logo"> + <h1>Quatuor Bellefeuille</h1> + </a> + </header> + + <header class="menu"> + <nav> + <ol> + <li class="dropdown"><a href="quatuor.html">le quatuor</a> + <ul> + <li><a href="sophie.html">Sophie</a></li> + <li><a href="david.html">David</a></li> + <li><a href="hervé.html">Hervé</a></li> + <li><a href="enguerrand.html">Enguerrand</a></li> + </ul> + </li> + <li><a href="actualités.html">actualités</a></li> + <li><a href="programmes.html">programmes</a></li> + <li><a href="galerie.html">galerie</a></li> + </ol> + </nav> + </header> + {MAIN} - <footer class="social togglable"> - <input type="checkbox" class="toggle" id="social"> - <img class="button open" src="images/share.svg"> - <img class="button close" src="images/close.svg"> - <label for="social">Nous contacter</label> - <div class="content"> - <a class="lang" href=""> - EN - </a> - <a href="https://www.facebook.com/quatuorbellefeuille/" - target="_blank" rel="noreferrer noopener"> - <img src="images/facebook-logo.svg"> - </a> - <a href="https://www.instagram.com/quatuor.bellefeuille/" - target="_blank" rel="noreferrer noopener"> - <img src="images/instagram-logo.svg"> - </a> - <a href="" - target="_blank" rel="noreferrer noopener"> - <img src="images/youtube-logo.svg"> - </a> - <a class="contact" href="contact.html"> - contact - </a> - </div> + <footer class="social"> + <a class="lang" href=""> + EN + </a> + <a href="https://www.facebook.com/quatuorbellefeuille/" + target="_blank" rel="noreferrer noopener"> + <img src="images/facebook-logo.svg"> + </a> + <a href="https://www.instagram.com/quatuor.bellefeuille/" + target="_blank" rel="noreferrer noopener"> + <img src="images/instagram-logo.svg"> + </a> + <a href="" + target="_blank" rel="noreferrer noopener"> + <img src="images/youtube-logo.svg"> + </a> + <a class="contact" href="contact.html"> + contact + </a> </footer> <footer class="legal"> |
