diff options
Diffstat (limited to 'commun.css')
| -rw-r--r-- | commun.css | 289 |
1 files changed, 148 insertions, 141 deletions
@@ -1,22 +1,24 @@ body { - min-height: 100vh; - display: grid; - grid-template-columns: 2fr 1fr 3fr 1fr 1fr; - grid-template-rows: auto 1fr auto; margin: 0; background-color: #acf; } -header.banner { - grid-column: 1; +.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; - text-decoration: none; } - header.banner img { width: 10rem; filter: brightness(0%); @@ -34,138 +36,143 @@ header.banner:hover h1 { color: #d82; } -header.menu { - display: grid; - grid-column: 3 / -1; - 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; - padding-left: 0; - text-align: center; - list-style-type: none; -} - -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, +@media (min-width: 40em) { + .togglable > input.toggle, .togglable > img.button { + 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.menu { + grid-column: 3 / -1; + } + header.menu > div { + 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; + padding-left: 0; + text-align: center; + list-style-type: none; + } + + 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 / -2; - padding-left: 4%; -} - -footer.social { - grid-row: 2; - grid-column: 5; - - 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 { - grid-column: 1 / -1; - width: 100%; - text-align: center; - margin: auto; - font-size: 75%; -} - -header a, footer a { - color: inherit; + 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; + } + + .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 / -2; + padding-left: 4%; + } + + footer.social { + grid-row: 2; + grid-column: 5; + position: sticky; + top: 0; + } + + footer.social > div { + display: flex; + flex-direction: column; + align-items: center; + } + + .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; + } + + footer.legal { + grid-column: 1 / -1; + width: 100%; + text-align: center; + margin: auto; + font-size: 75%; + } } |