summaryrefslogtreecommitdiff
path: root/stylesheets
diff options
context:
space:
mode:
Diffstat (limited to 'stylesheets')
-rw-r--r--stylesheets/actualités.css114
-rw-r--r--stylesheets/commun.css347
-rw-r--r--stylesheets/contact.css20
-rw-r--r--stylesheets/gallerie.css68
-rw-r--r--stylesheets/index.css35
-rw-r--r--stylesheets/membre.css26
-rw-r--r--stylesheets/programmes.css82
-rw-r--r--stylesheets/quatuor.css89
8 files changed, 781 insertions, 0 deletions
diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css
new file mode 100644
index 0000000..d8f04b8
--- /dev/null
+++ b/stylesheets/actualités.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;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-06 15:13:37 +0000