From 40d193b330443ea074f42674ed18f463fc8e422e Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Sun, 7 Feb 2021 19:20:16 +0100 Subject: Move images and stylesheets in subfolders --- Makefile | 22 ++- "actualit\303\251s.css" | 114 ------------ build.sh | 3 +- calendar.svg | 2 - close.svg | 1 - commun.css | 347 ------------------------------------ contact.css | 20 --- gallerie.css | 68 ------- images/calendar.svg | 2 + images/close.svg | 1 + images/menu.svg | 1 + images/share.svg | 1 + index.css | 35 ---- membre.css | 26 --- menu.svg | 1 - programmes.css | 82 --------- quatuor.css | 89 --------- share.svg | 1 - "stylesheets/actualit\303\251s.css" | 114 ++++++++++++ stylesheets/commun.css | 347 ++++++++++++++++++++++++++++++++++++ stylesheets/contact.css | 20 +++ stylesheets/gallerie.css | 68 +++++++ stylesheets/index.css | 35 ++++ stylesheets/membre.css | 26 +++ stylesheets/programmes.css | 82 +++++++++ stylesheets/quatuor.css | 89 +++++++++ template.html | 10 +- 27 files changed, 810 insertions(+), 797 deletions(-) delete mode 100644 "actualit\303\251s.css" delete mode 100644 calendar.svg delete mode 100644 close.svg delete mode 100644 commun.css delete mode 100644 contact.css delete mode 100644 gallerie.css create mode 100644 images/calendar.svg create mode 100644 images/close.svg create mode 100644 images/menu.svg create mode 100644 images/share.svg delete mode 100644 index.css delete mode 100644 membre.css delete mode 100644 menu.svg delete mode 100644 programmes.css delete mode 100644 quatuor.css delete mode 100644 share.svg create mode 100644 "stylesheets/actualit\303\251s.css" create mode 100644 stylesheets/commun.css create mode 100644 stylesheets/contact.css create mode 100644 stylesheets/gallerie.css create mode 100644 stylesheets/index.css create mode 100644 stylesheets/membre.css create mode 100644 stylesheets/programmes.css create mode 100644 stylesheets/quatuor.css diff --git a/Makefile b/Makefile index 811ceab..af585b7 100644 --- a/Makefile +++ b/Makefile @@ -1,27 +1,39 @@ OUTDIR = public +dirname = $(patsubst %/,%,$(dir $(1))) +dirnames = $(sort $(call dirname,$(1))) + pages_src = $(filter-out template.html,$(wildcard *.html)) pages = $(foreach p,$(pages_src),$(OUTDIR)/$(p)) -sheets = $(wildcard *.css) -images = $(wildcard *.svg) feeds = $(wildcard *.xml) -resources_src = $(sheets) $(images) $(feeds) +resources_src = $(feeds) resources = $(foreach f,$(resources_src),$(OUTDIR)/$(f)) +images = $(foreach img,$(shell find images -type f),$(OUTDIR)/$(img)) +images_folders = $(call dirnames,$(images)) + +stylesheets = $(foreach img,$(shell find stylesheets -type f),$(OUTDIR)/$(img)) +stylesheets_folders = $(call dirnames,$(stylesheets)) .PHONY: all clean site all: site -site: $(pages) $(resources) +site: $(pages) $(resources) $(images) $(stylesheets) -$(OUTDIR): +$(OUTDIR) $(images_folders) $(stylesheets_folders): mkdir $@ $(resources): $(OUTDIR)/%: % | $(OUTDIR) cp $< $@ +$(images): $(OUTDIR)/%: % | $(images_folders) + cp $< $@ + +$(stylesheets): $(OUTDIR)/%: % | $(stylesheets_folders) + cp $< $@ + # TODO: optional dependency to .sh template parameters. $(pages): $(OUTDIR)/%.html: %.html template.html | $(OUTDIR) ./build.sh $< $@ diff --git "a/actualit\303\251s.css" "b/actualit\303\251s.css" deleted file mode 100644 index d8f04b8..0000000 --- "a/actualit\303\251s.css" +++ /dev/null @@ -1,114 +0,0 @@ -#event-list { - max-height: 60vh; - overflow: auto; - scrollbar-width: thin; - scrollbar-color: darkblue #8ad; -} - -#event-list::-webkit-scrollbar { - width: 0.25em; - height: 0.25em; -} - -#event-list::-webkit-scrollbar-track { - background: #8ad; -} - -#event-list::-webkit-scrollbar-thumb { - background: darkblue; -} - -.events { - display: grid; - grid-auto-rows: var(--cell-height); - grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); - grid-gap: 0.8em; -} - -.event a { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - text-decoration: none; -} - -.event .summary { - font-weight: bold; - color: white; -} - -@media (min-width: 40em) { - main { - display: grid; - grid-template-columns: 60% 40%; - } - - main > div { - padding: 1em; - } - - .events { - --cell-width: 14em; - --cell-height: 12em; - } - - .event a { - position: relative; - } - - .event img { - position: absolute; - object-position: center; - object-fit: cover; - height: 100%; - width: 100%; - transition: 0.5s; - } - - .event:hover img { - filter: grayscale(0.8) brightness(0.4); - } - - .event .summary { - opacity: 0; - z-index: 1; - transition: 0.5s; - } - - .event:hover .summary { - opacity: 1; - } - - .details.active > *:first-child { - margin-top: 0; - } -} - -@media (max-width: 40em) { - .events { - --cell-width: 10em; - --cell-height: 8em; - } - - .event { - position: relative; - } - - .event img { - object-position: center; - object-fit: cover; - height: 100%; - width: 100%; - } - - .event .summary { - position: absolute; - text-align: center; - bottom: 0; - margin: 0; - width: 100%; - background: #0008; - } -} diff --git a/build.sh b/build.sh index b4fc8f8..617645c 100755 --- a/build.sh +++ b/build.sh @@ -38,7 +38,8 @@ sed -i s/'{TITLE}'/"${title}"/ ${output} link_stylesheets='' for s in "${stylesheets[@]}" do - link_stylesheets+=$(printf '\n' "${s}") + link_template='\n' + link_stylesheets+=$(printf "${link_template}" "${s}") done sed -i /'{STYLESHEETS}'/'c\'"${link_stylesheets}" ${output} diff --git a/calendar.svg b/calendar.svg deleted file mode 100644 index 1c2ec99..0000000 --- a/calendar.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/close.svg b/close.svg deleted file mode 100644 index 7d5875c..0000000 --- a/close.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/commun.css b/commun.css deleted file mode 100644 index b432aab..0000000 --- a/commun.css +++ /dev/null @@ -1,347 +0,0 @@ -body { - margin: 0; - background-color: #acf; -} - -.current { - background-color: white; -} - -header a, .contact a { - text-decoration: none; -} - -header a, footer a { - color: inherit; -} - -header.banner a { - display: flex; - align-items: center; -} -header.banner img { - filter: brightness(0%); - transition: filter 1s; -} -header.banner:hover img { - filter: brightness(100%) sepia(100%); -} -header.banner h1 { - margin: 0; - transition: color 1s; -} -header.banner:hover h1 { - color: #d82; -} - -nav > ol, nav li.dropdown > ul { - list-style-type: none; - padding-left: 0; -} -nav > ol > li > a { - display: block; - padding: 0.5em 0.1em; -} -nav li.dropdown > ul > li a img { - width: 1em; - height: 1em; -} - -.lang { - background-color: black; - border-radius: 50% 50% 50% 0; - color: white; - padding: 0.5em; -} - -footer.social > .content { - display: flex; - flex-direction: column; - align-items: center; -} - -footer.legal { - grid-column: 1 / -1; - width: 100%; - text-align: center; - margin: auto; - font-size: 75%; -} - -@media (min-width: 40em) { - .togglable > input.toggle, - .togglable > img.button, - .togglable > label { - display: none; - } - - body { - min-height: 100vh; - display: grid; - grid-template-columns: 2fr 1fr 3fr 1fr 1fr; - grid-template-rows: auto 1fr auto; - } - - header.banner { - grid-column: 1; - } - header.banner img { - width: 10rem; - } - header.banner h1 { - font-size: 1.5rem; - } - - header.menu { - grid-column: 3 / -1; - } - header.menu > .content { - display: grid; - grid-template-columns: 3fr 1fr 1fr; - } - - header.menu nav { - grid-column: 1; - margin-top: 2rem; - } - header.menu .lang { - grid-column: 3; - } - - nav > ol { - display: flex; - align-items: center; - align-content: stretch; - flex-wrap: wrap; - text-align: center; - } - - nav > ol > li { - flex: 1; - } - - nav li.dropdown { - position: relative; - } - nav li.dropdown ul { - position: absolute; - width: 100%; - text-align: left; - background: lightgrey; - z-index: 1; - - overflow: hidden; - max-height: 0; - transition: max-height 0.5s; - } - nav li.dropdown:hover ul { - /* ⚠ Magic constant: must be big enough to show the whole dropdown, - but not too big otherwise the transition will be "delayed". */ - max-height: 5em; - } - nav li.dropdown > ul > li { - list-style-type: none; - } - nav li.dropdown > ul > li:hover { - background: white; - } - nav li.dropdown > ul > li a { - display: block; /* Make link span whole containing block. */ - padding-inline-start: 10%; - } - - .lang { - grid-column: 5; - margin: auto; - margin-top: 3rem; - } - - main { - grid-row: 2; - grid-column: 1 / -2; - padding-left: 4%; - } - - footer.social { - grid-row: 2; - grid-column: 5; - position: sticky; - top: 0; - } - - .social img { - width: 2em; - margin-top: 0.5em; - margin-bottom: 0.5em; - } - - .contact { - /* Ideally should be just: */ - /* writing-mode: sideways-lr; */ - /* but of course We Can't Have Nice Things. */ - writing-mode: vertical-rl; - transform: rotate(180deg); - - margin: 0; - padding: 1em 0.5em; - } -} - -@media (max-width: 40em) { - body { - display: grid; - grid-template-columns: 2fr 1fr; - grid-template-rows: auto 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; - } - footer.legal { - grid-row: 4; - } - main { - grid-row: 3; - grid-column: 1 / -1; - padding: 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; - } - 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; - } -} diff --git a/contact.css b/contact.css deleted file mode 100644 index 6bd68ec..0000000 --- a/contact.css +++ /dev/null @@ -1,20 +0,0 @@ -@media (min-width: 40em) { - main { - display: grid; - grid-template-columns: 60% 40%; - padding-right: 4%; - } - - main > div { - padding: 2%; - } - - #contact-us dl { - display: grid; - grid-template-columns: 1fr 2fr; - } - - #contact-us dd { - margin-left: inherit; - } -} diff --git a/gallerie.css b/gallerie.css deleted file mode 100644 index a75faf7..0000000 --- a/gallerie.css +++ /dev/null @@ -1,68 +0,0 @@ -.mosaic { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr)); - grid-gap: 0.8em; -} - -.mosaic .photo { - position: relative; - width: 100%; - height: 0; - padding-bottom: 100%; -} -.mosaic .photo > * { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} -.mosaic img { - object-position: center; - object-fit: cover; - height: 100%; - width: 100%; - transition: filter 0.5s; - filter: grayscale(0.8) brightness(0.4); -} -.mosaic img:hover { - filter: none; -} - -.mosaic .video { - position: relative; - width: 100%; - height: 0; - padding-bottom: 56.25%; /* 9/16 */ -} -.mosaic .video .yt { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -@media (min-width: 40em) { - main { - padding-top: 2%; - padding-bottom: 2%; - padding-right: 2%; - } - - .mosaic.photos { - --mosaic-side: 14em; - } - .mosaic.videos { - --mosaic-side: 25em; - } -} - -@media (max-width: 40em) { - .mosaic.photos { - --mosaic-side: 8em; - } - .mosaic.videos { - --mosaic-side: 10em; - } -} diff --git a/images/calendar.svg b/images/calendar.svg new file mode 100644 index 0000000..1c2ec99 --- /dev/null +++ b/images/calendar.svg @@ -0,0 +1,2 @@ + + diff --git a/images/close.svg b/images/close.svg new file mode 100644 index 0000000..7d5875c --- /dev/null +++ b/images/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/menu.svg b/images/menu.svg new file mode 100644 index 0000000..e8a84a9 --- /dev/null +++ b/images/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/share.svg b/images/share.svg new file mode 100644 index 0000000..09b1c7b --- /dev/null +++ b/images/share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.css b/index.css deleted file mode 100644 index 56c94ba..0000000 --- a/index.css +++ /dev/null @@ -1,35 +0,0 @@ -body { - background-color: #a33; -} - -main { - position: relative; -} - -#next-concert { - position: absolute; - bottom: 4%; - height: 20ex; - width: 10em; - text-align: center; - background: no-repeat center/contain url('calendar.svg'); -} - -#next-concert a { - display: inline-block; - width: 100%; - height: 100%; - text-decoration: none; -} - -#next-concert p { - position: relative; - top: 48%; - margin: 0; - color: #eee; -} - -#next-concert #day { - font-size: 180%; - font-weight: bold; -} diff --git a/membre.css b/membre.css deleted file mode 100644 index 86d370b..0000000 --- a/membre.css +++ /dev/null @@ -1,26 +0,0 @@ -main { - display: grid; - grid-template-columns: 60% 40%; - padding-right: 4%; -} - -main > div { - padding: 2%; -} - -#bio dl { - display: grid; - grid-template-columns: 1fr 2fr; - align-items: center; -} - -#photo { - height: 90%; - align-self: center; -} - -#photo img { - width: 100%; - height: 100%; - object-fit: cover; -} diff --git a/menu.svg b/menu.svg deleted file mode 100644 index e8a84a9..0000000 --- a/menu.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/programmes.css b/programmes.css deleted file mode 100644 index 98a1a4f..0000000 --- a/programmes.css +++ /dev/null @@ -1,82 +0,0 @@ -#program-list { - max-height: 60vh; - overflow: auto; - scrollbar-width: thin; - scrollbar-color: darkblue #8ad; -} - -#program-list::-webkit-scrollbar { - width: 0.25em; - height: 0.25em; -} - -#program-list::-webkit-scrollbar-track { - background: #8ad; -} - -#program-list::-webkit-scrollbar-thumb { - background: darkblue; -} - -.programs { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); - grid-auto-rows: var(--cell-height); - grid-gap: 0.8em; -} - -.program { - background-color: #099; -} - -.program a { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - color: inherit; - text-decoration: none; -} - -.program .summary { - font-weight: bold; -} - -details summary .duration { - font-family: monospace; -} - -@media (min-width: 40em) { - main { - display: grid; - grid-template-columns: 50% 50%; - } - - main > div { - padding: 1em; - } - - .programs { - --cell-width: 10em; - --cell-height: 10em; - } - - .program a { - transition: color 0.5s; - } - .program:hover a { - color: white; - } - - .details.active > *:first-child { - margin-top: 0; - } -} - -@media (max-width: 40em) { - .programs { - --cell-width: 8em; - --cell-height: 4em; - } -} diff --git a/quatuor.css b/quatuor.css deleted file mode 100644 index f72c9af..0000000 --- a/quatuor.css +++ /dev/null @@ -1,89 +0,0 @@ -@media (min-width: 40em) { - main { - display: flex; - } - - main div { - padding: 2%; - } - - main #photos { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - - position: sticky; - top: 0; - max-height: 80vh; - } - - #photos > * { - position: relative; - width: 6em; - height: 100%; - background-color: #ddd; /* Workaround for chromium bug#377847. */ - border-color: #ddd; - border-width: 0.3em; - border-style: solid; - border-radius: 0.3em; - overflow: hidden; - } - - #photos img.portrait { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - filter: grayscale(1); - transition: filter 1s, transform 1s; - } - - #photos img.portrait:hover { - filter: none; - transform: scale(1.05); - } - - #photos > *:nth-of-type(1) { - top: -0.4em; - } - - #photos > *:nth-of-type(2) { - left: -1.6em; - top: 1.2em; - } - - #photos > *:nth-of-type(3) { - left: 1.6em; - top: -1.2em; - } - - #photos > *:nth-of-type(4) { - top: 0.4em; - } - - #bio > *:first-child { - margin-top: 0; - } -} - -@media (max-width: 40em) { - #photos { - display: grid; - grid-template-columns: repeat(4, 20%); - justify-content: space-evenly; - width: 100%; - } - - #photos > * { - width: 100%; - height: 50vh; - } - - #photos img.portrait { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - } -} diff --git a/share.svg b/share.svg deleted file mode 100644 index 09b1c7b..0000000 --- a/share.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" new file mode 100644 index 0000000..d8f04b8 --- /dev/null +++ "b/stylesheets/actualit\303\251s.css" @@ -0,0 +1,114 @@ +#event-list { + max-height: 60vh; + overflow: auto; + scrollbar-width: thin; + scrollbar-color: darkblue #8ad; +} + +#event-list::-webkit-scrollbar { + width: 0.25em; + height: 0.25em; +} + +#event-list::-webkit-scrollbar-track { + background: #8ad; +} + +#event-list::-webkit-scrollbar-thumb { + background: darkblue; +} + +.events { + display: grid; + grid-auto-rows: var(--cell-height); + grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); + grid-gap: 0.8em; +} + +.event a { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + text-decoration: none; +} + +.event .summary { + font-weight: bold; + color: white; +} + +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 60% 40%; + } + + main > div { + padding: 1em; + } + + .events { + --cell-width: 14em; + --cell-height: 12em; + } + + .event a { + position: relative; + } + + .event img { + position: absolute; + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; + transition: 0.5s; + } + + .event:hover img { + filter: grayscale(0.8) brightness(0.4); + } + + .event .summary { + opacity: 0; + z-index: 1; + transition: 0.5s; + } + + .event:hover .summary { + opacity: 1; + } + + .details.active > *:first-child { + margin-top: 0; + } +} + +@media (max-width: 40em) { + .events { + --cell-width: 10em; + --cell-height: 8em; + } + + .event { + position: relative; + } + + .event img { + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; + } + + .event .summary { + position: absolute; + text-align: center; + bottom: 0; + margin: 0; + width: 100%; + background: #0008; + } +} diff --git a/stylesheets/commun.css b/stylesheets/commun.css new file mode 100644 index 0000000..b432aab --- /dev/null +++ b/stylesheets/commun.css @@ -0,0 +1,347 @@ +body { + margin: 0; + background-color: #acf; +} + +.current { + background-color: white; +} + +header a, .contact a { + text-decoration: none; +} + +header a, footer a { + color: inherit; +} + +header.banner a { + display: flex; + align-items: center; +} +header.banner img { + filter: brightness(0%); + transition: filter 1s; +} +header.banner:hover img { + filter: brightness(100%) sepia(100%); +} +header.banner h1 { + margin: 0; + transition: color 1s; +} +header.banner:hover h1 { + color: #d82; +} + +nav > ol, nav li.dropdown > ul { + list-style-type: none; + padding-left: 0; +} +nav > ol > li > a { + display: block; + padding: 0.5em 0.1em; +} +nav li.dropdown > ul > li a img { + width: 1em; + height: 1em; +} + +.lang { + background-color: black; + border-radius: 50% 50% 50% 0; + color: white; + padding: 0.5em; +} + +footer.social > .content { + display: flex; + flex-direction: column; + align-items: center; +} + +footer.legal { + grid-column: 1 / -1; + width: 100%; + text-align: center; + margin: auto; + font-size: 75%; +} + +@media (min-width: 40em) { + .togglable > input.toggle, + .togglable > img.button, + .togglable > label { + display: none; + } + + body { + min-height: 100vh; + display: grid; + grid-template-columns: 2fr 1fr 3fr 1fr 1fr; + grid-template-rows: auto 1fr auto; + } + + header.banner { + grid-column: 1; + } + header.banner img { + width: 10rem; + } + header.banner h1 { + font-size: 1.5rem; + } + + header.menu { + grid-column: 3 / -1; + } + header.menu > .content { + display: grid; + grid-template-columns: 3fr 1fr 1fr; + } + + header.menu nav { + grid-column: 1; + margin-top: 2rem; + } + header.menu .lang { + grid-column: 3; + } + + nav > ol { + display: flex; + align-items: center; + align-content: stretch; + flex-wrap: wrap; + text-align: center; + } + + nav > ol > li { + flex: 1; + } + + nav li.dropdown { + position: relative; + } + nav li.dropdown ul { + position: absolute; + width: 100%; + text-align: left; + background: lightgrey; + z-index: 1; + + overflow: hidden; + max-height: 0; + transition: max-height 0.5s; + } + nav li.dropdown:hover ul { + /* ⚠ Magic constant: must be big enough to show the whole dropdown, + but not too big otherwise the transition will be "delayed". */ + max-height: 5em; + } + nav li.dropdown > ul > li { + list-style-type: none; + } + nav li.dropdown > ul > li:hover { + background: white; + } + nav li.dropdown > ul > li a { + display: block; /* Make link span whole containing block. */ + padding-inline-start: 10%; + } + + .lang { + grid-column: 5; + margin: auto; + margin-top: 3rem; + } + + main { + grid-row: 2; + grid-column: 1 / -2; + padding-left: 4%; + } + + footer.social { + grid-row: 2; + grid-column: 5; + position: sticky; + top: 0; + } + + .social img { + width: 2em; + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .contact { + /* Ideally should be just: */ + /* writing-mode: sideways-lr; */ + /* but of course We Can't Have Nice Things. */ + writing-mode: vertical-rl; + transform: rotate(180deg); + + margin: 0; + padding: 1em 0.5em; + } +} + +@media (max-width: 40em) { + body { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: auto 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; + } + footer.legal { + grid-row: 4; + } + main { + grid-row: 3; + grid-column: 1 / -1; + padding: 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; + } + 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; + } +} diff --git a/stylesheets/contact.css b/stylesheets/contact.css new file mode 100644 index 0000000..6bd68ec --- /dev/null +++ b/stylesheets/contact.css @@ -0,0 +1,20 @@ +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 60% 40%; + padding-right: 4%; + } + + main > div { + padding: 2%; + } + + #contact-us dl { + display: grid; + grid-template-columns: 1fr 2fr; + } + + #contact-us dd { + margin-left: inherit; + } +} diff --git a/stylesheets/gallerie.css b/stylesheets/gallerie.css new file mode 100644 index 0000000..a75faf7 --- /dev/null +++ b/stylesheets/gallerie.css @@ -0,0 +1,68 @@ +.mosaic { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--mosaic-side), 1fr)); + grid-gap: 0.8em; +} + +.mosaic .photo { + position: relative; + width: 100%; + height: 0; + padding-bottom: 100%; +} +.mosaic .photo > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.mosaic img { + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; + transition: filter 0.5s; + filter: grayscale(0.8) brightness(0.4); +} +.mosaic img:hover { + filter: none; +} + +.mosaic .video { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; /* 9/16 */ +} +.mosaic .video .yt { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +@media (min-width: 40em) { + main { + padding-top: 2%; + padding-bottom: 2%; + padding-right: 2%; + } + + .mosaic.photos { + --mosaic-side: 14em; + } + .mosaic.videos { + --mosaic-side: 25em; + } +} + +@media (max-width: 40em) { + .mosaic.photos { + --mosaic-side: 8em; + } + .mosaic.videos { + --mosaic-side: 10em; + } +} diff --git a/stylesheets/index.css b/stylesheets/index.css new file mode 100644 index 0000000..94e2d57 --- /dev/null +++ b/stylesheets/index.css @@ -0,0 +1,35 @@ +body { + background-color: #a33; +} + +main { + position: relative; +} + +#next-concert { + position: absolute; + bottom: 4%; + height: 20ex; + width: 10em; + text-align: center; + background: no-repeat center/contain url('/images/calendar.svg'); +} + +#next-concert a { + display: inline-block; + width: 100%; + height: 100%; + text-decoration: none; +} + +#next-concert p { + position: relative; + top: 48%; + margin: 0; + color: #eee; +} + +#next-concert #day { + font-size: 180%; + font-weight: bold; +} diff --git a/stylesheets/membre.css b/stylesheets/membre.css new file mode 100644 index 0000000..86d370b --- /dev/null +++ b/stylesheets/membre.css @@ -0,0 +1,26 @@ +main { + display: grid; + grid-template-columns: 60% 40%; + padding-right: 4%; +} + +main > div { + padding: 2%; +} + +#bio dl { + display: grid; + grid-template-columns: 1fr 2fr; + align-items: center; +} + +#photo { + height: 90%; + align-self: center; +} + +#photo img { + width: 100%; + height: 100%; + object-fit: cover; +} diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css new file mode 100644 index 0000000..98a1a4f --- /dev/null +++ b/stylesheets/programmes.css @@ -0,0 +1,82 @@ +#program-list { + max-height: 60vh; + overflow: auto; + scrollbar-width: thin; + scrollbar-color: darkblue #8ad; +} + +#program-list::-webkit-scrollbar { + width: 0.25em; + height: 0.25em; +} + +#program-list::-webkit-scrollbar-track { + background: #8ad; +} + +#program-list::-webkit-scrollbar-thumb { + background: darkblue; +} + +.programs { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr)); + grid-auto-rows: var(--cell-height); + grid-gap: 0.8em; +} + +.program { + background-color: #099; +} + +.program a { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + color: inherit; + text-decoration: none; +} + +.program .summary { + font-weight: bold; +} + +details summary .duration { + font-family: monospace; +} + +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 50% 50%; + } + + main > div { + padding: 1em; + } + + .programs { + --cell-width: 10em; + --cell-height: 10em; + } + + .program a { + transition: color 0.5s; + } + .program:hover a { + color: white; + } + + .details.active > *:first-child { + margin-top: 0; + } +} + +@media (max-width: 40em) { + .programs { + --cell-width: 8em; + --cell-height: 4em; + } +} diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css new file mode 100644 index 0000000..f72c9af --- /dev/null +++ b/stylesheets/quatuor.css @@ -0,0 +1,89 @@ +@media (min-width: 40em) { + main { + display: flex; + } + + main div { + padding: 2%; + } + + main #photos { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + + position: sticky; + top: 0; + max-height: 80vh; + } + + #photos > * { + position: relative; + width: 6em; + height: 100%; + background-color: #ddd; /* Workaround for chromium bug#377847. */ + border-color: #ddd; + border-width: 0.3em; + border-style: solid; + border-radius: 0.3em; + overflow: hidden; + } + + #photos img.portrait { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + filter: grayscale(1); + transition: filter 1s, transform 1s; + } + + #photos img.portrait:hover { + filter: none; + transform: scale(1.05); + } + + #photos > *:nth-of-type(1) { + top: -0.4em; + } + + #photos > *:nth-of-type(2) { + left: -1.6em; + top: 1.2em; + } + + #photos > *:nth-of-type(3) { + left: 1.6em; + top: -1.2em; + } + + #photos > *:nth-of-type(4) { + top: 0.4em; + } + + #bio > *:first-child { + margin-top: 0; + } +} + +@media (max-width: 40em) { + #photos { + display: grid; + grid-template-columns: repeat(4, 20%); + justify-content: space-evenly; + width: 100%; + } + + #photos > * { + width: 100%; + height: 50vh; + } + + #photos img.portrait { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } +} diff --git a/template.html b/template.html index 59b9996..e9b9080 100644 --- a/template.html +++ b/template.html @@ -4,7 +4,7 @@ {TITLE} - Quatuor Camelot - + {STYLESHEETS} @@ -19,8 +19,8 @@
- - + +