Move images and stylesheets in subfolders

1 files changed, 347 insertions, 0 deletions

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;
+    }
+}