summaryrefslogtreecommitdiff
path: root/commun.css
diff options
context:
space:
mode:
Diffstat (limited to 'commun.css')
-rw-r--r--commun.css347
1 files changed, 0 insertions, 347 deletions
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;
- }
-}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 22:05:14 +0000