summaryrefslogtreecommitdiff
path: root/commun.css
diff options
context:
space:
mode:
Diffstat (limited to 'commun.css')
-rw-r--r--commun.css416
1 files changed, 294 insertions, 122 deletions
diff --git a/commun.css b/commun.css
index f2bbc27..7d7c5a4 100644
--- a/commun.css
+++ b/commun.css
@@ -1,164 +1,63 @@
body {
- min-height: 100vh;
- display: grid;
- grid-template-columns: 7fr 1fr;
- grid-template-rows: auto 1fr auto;
margin: 0;
background-color: #acf;
}
-header.banner {
- grid-column: 1 / -1;
- display: grid;
- grid-template-columns: 2fr 1fr 3fr 1fr 1fr;
+.current {
+ background-color: white;
}
-header.banner .brand {
- grid-column: 1;
+header a, .contact a {
+ text-decoration: none;
}
-header.banner .brand a {
+header a, footer a {
+ color: inherit;
+}
+
+header.banner a {
display: flex;
align-items: center;
- text-decoration: none;
}
-
-header.banner .brand img {
+header.banner img {
+ filter: brightness(0%);
transition: filter 1s;
}
-header.banner .brand h1 {
- transition: color 1s;
-}
-header.banner .brand:hover img {
+header.banner:hover img {
filter: brightness(100%) sepia(100%);
}
-header.banner .brand:hover h1 {
- color: #d82;
-}
-
-.brand h1 {
+header.banner h1 {
margin: 0;
- font-size: 1.5rem;
-}
-
-.brand img {
- width: 10rem;
- filter: brightness(0%);
+ transition: color 1s;
}
-
-nav {
- grid-column: 3;
- margin-top: 2rem;
+header.banner:hover h1 {
+ color: #d82;
}
-nav > ol {
- display: flex;
- align-items: center;
- align-content: stretch;
- flex-wrap: wrap;
- padding-left: 0;
- text-align: center;
+nav > ol, nav li.dropdown > ul {
list-style-type: none;
+ padding-left: 0;
}
-
-nav > ol > li {
- flex: 1;
-}
-
nav > ol > li > a {
display: block;
padding: 0.5em 0.1em;
}
-
-nav li.dropdown {
- position: relative;
-}
-nav li.dropdown ul {
- position: absolute;
- padding-left: 0;
- 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%;
-}
nav li.dropdown > ul > li a img {
width: 1em;
height: 1em;
}
-.current {
- background-color: white;
-}
-
-nav li a {
- text-decoration: none;
-}
-
.lang {
- grid-column: 5;
background-color: black;
border-radius: 50% 50% 50% 0;
color: white;
padding: 0.5em;
- margin: auto;
- margin-top: 3rem;
}
-main {
- grid-row: 2;
- grid-column: 1;
- padding-left: 4%;
-}
-
-footer.social {
- grid-row: 2;
- grid-column: 2;
-
+footer.social > .content {
display: flex;
flex-direction: column;
align-items: center;
- 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;
-}
-
-.contact a {
- text-decoration: none;
}
footer.legal {
@@ -169,6 +68,279 @@ footer.legal {
font-size: 75%;
}
-header a, footer a {
- color: inherit;
+@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;
+ }
+
+ 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;
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-06 11:58:50 +0000