quatuorbellefeuille.com

commun.css (9350B)

---

 /* TODO: use a preprocessor, if only to be able to say
    "wide-layout-threshold" instead of "50em", and
    "xwide-layout-threshold" instead of "80em". */
 body {
     --gold: #BE8B00;
 
     margin: 0;
     background-color: white;
     font-family: 'Open Sans', sans-serif;
 }
 
 a {
     color: inherit;
 }
 a.current {
     color: var(--gold);
 }
 
 header a {
     text-decoration: none;
 }
 nav a:hover, nav a:focus {
     color: var(--gold);
     background: white;
 }
 
 header.banner a {
     display: flex;
     align-items: center;
 }
 header.banner img {
     height: var(--banner-logo-height);
     margin: 0.6rem;
 }
 header.banner h1 {
     margin: 0;
     max-width: 6em;             /* Force linebreak. */
     font-size: var(--banner-name-height);
     font-weight: normal;
     font-family: 'Cormorant', serif;
 }
 
 header.banner img, .social img {
     filter: brightness(0);
 }
 header.banner a:hover img, .social a:hover img,
 header.banner a:focus img, .social a:focus img {
     filter: none;
 }
 header.banner:hover, header.banner:focus-within {
     color: var(--gold);
 }
 
 header.menu > nav a {
     font-size: 1.2rem;
     font-weight: 600;
 }
 
 nav ol, nav ul {
     list-style-type: none;
 }
 
 main {
     color: #353535;
 }
 
 main h1 {
     font-size: 1.4em;
 }
 main h2 {
     font-size: 1.2em;
 }
 
 footer.social a {
     text-decoration: none;
     font-size: 1.2rem;
     font-weight: 600;
 }
 footer.social a.contact:hover, footer.social a.contact:focus {
     color: var(--gold);
     background: white;
 }
 
 a.lang {
     border: 0.15rem solid black;
     border-radius: 50%;
 }
 a.lang:hover, a.lang:focus {
     color: white;
     background: var(--gold);
     border: 0.15rem solid var(--gold);
 }
 
 footer.social a.lang {
     display: block;
     padding: 0.5rem;
     font-size: 1rem;
 }
 
 footer.social {
     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: 50em) {
     body {
         --banner-logo-height: 8.5rem;
         --banner-name-height: 2rem;
         --menu-top-margin: calc((var(--banner-logo-height)
                                  - 2 * var(--banner-name-height))
                                 / 2);
 
         min-height: 100vh;
         display: grid;
         grid-template-columns: 2fr 1fr 4fr 2fr auto;
         grid-template-rows: auto 1fr auto;
     }
 
     header.slidingmenu {
         display: none;
     }
 
     header.banner {
         grid-column: 1;
     }
 
     header.menu {
         grid-column: 3;
     }
 
     header.menu nav {
         margin-top: var(--menu-top-margin);
     }
 
     nav > ol {
         display: grid;
         align-items: center;
         align-content: stretch;
         text-align: center;
         margin: 0;
     }
     nav ol, nav ul {
         padding-left: 0;
     }
 
     /* I'd like to make sure the grid only ever has an even number of
      * columns.  No idea how to do that with one single neat rule, so…
      * 🤖 Go Go Gadget Mediaquery 🤖 */
 
     nav > ol {
         grid-template-columns: repeat(2, minmax(8em, 1fr));
     }
 
     @media (min-width: 60em) {
         nav > ol {
             grid-template-columns: repeat(4, minmax(8em, 1fr));
         }
     }
 
     nav > ol > li > a {
         display: block;
         padding: 0.5em 0.1em;
     }
 
     nav li.dropdown {
         position: relative;
     }
     nav li.dropdown ul {
         position: absolute;
         width: 100%;
         background: #ddd8;
         z-index: 1;
 
         overflow: hidden;
         max-height: 0;
         transition: max-height 0.5s;
     }
     nav li.dropdown:hover > a, nav li.dropdown:focus-within > a {
         background: white;
         color: var(--gold);
     }
     nav li.dropdown:hover ul, nav li.dropdown:focus-within ul  {
         /* ⚠ Magic constant: must be big enough to show the whole dropdown,
            but not too big otherwise the transition will be "delayed". */
         max-height: 20rem;
     }
     nav li.dropdown > ul > li {
         list-style-type: none;
     }
     nav li.dropdown > ul > li:hover, nav li.dropdown > ul > li:focus {
         background: white;
     }
     nav li.dropdown > ul > li a {
         display: block;       /* Make link span whole containing block. */
     }
 
     main {
         grid-row: 2;
         grid-column: 1 / -2;
         font-size: 1.2rem;
         margin-left: 4em;
     }
 
     footer.social {
         grid-row: 1 / -2;
         grid-column: 5;
         margin: var(--menu-top-margin) 1em 0;
     }
 
     footer.social a {
         display: block;
         margin: 1rem;
     }
 
     footer.social a > img {
         width: 2.2rem;
     }
 
     footer.social > a.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);
         padding: 1rem 0.5rem;
         margin: 0;              /* Compensate padding. */
         /* For some reason, Chrome 89 misaligns this element if we don't
          * ropecast an align-items on it. */
         display: flex;
         align-items: center;
         /* For some reason, Chrome 89 (🤨) takes a much wider space than
          * necessary on this element if we don't ropecast a max-width
          * on it. */
         max-width: 2em;
     }
 }
 
 @media not all and (min-width: 50em) {
     body {
         --banner-logo-height: 6rem;
         --banner-name-height: 1.8rem;
 
         display: grid;
         grid-template-columns: 3rem 1fr;
         grid-template-rows: 3rem auto 1fr auto;
         min-height: 100vh;
     }
 
     header.menu, footer.social {
         display: none;
     }
 
     header.slidingmenu {
         grid-column: 1;
         grid-row: 1;
     }
     body > header.banner {
         grid-column: 2;
         grid-row: 1 / 3;
         justify-self: start;
     }
     main {
         grid-row: 3;
         grid-column: 1 / -1;
         margin: 0.8em;
     }
     footer.legal {
         grid-column: 1 / -1;
         grid-row: -1;
     }
 
     header.slidingmenu {
         position: relative;
         /* Bump this whenever the z-index arms race in <main> escalates. */
         --slidingmenu-z-index: 2;
     }
     header.slidingmenu > input {
         position: relative;
         width: 100%;
         height: 100%;
         margin: 0;
         z-index: calc(var(--slidingmenu-z-index) + 1);
         opacity: 0;
         cursor: pointer;
     }
     header.slidingmenu img.button {
         position: absolute;
         top: 0;
         left: 0;
         padding: 0.3rem;
         width: 2.4rem;
         height: 2.4rem;
     }
     header.slidingmenu img.button {
         filter: brightness(0);
     }
     header.slidingmenu > input:hover ~ img.button.open,
     header.slidingmenu > input:focus ~ img.button.open,
     header.slidingmenu > input:hover ~ .content > img.button.close,
     header.slidingmenu > input:focus ~ .content > img.button.close {
         filter: none;
     }
 
     header.slidingmenu > .content {
         position: fixed;
         overflow: auto;
         width: 100vw;
         height: 100vh;
         top: 0;
         left: 0;
         margin: 0;
 
         background: #eeee;
         color: initial;
 
         transform-origin: left;
         transform: translate(-100vw);
         transition: transform 0.5s;
         z-index: var(--slidingmenu-z-index);
 
         display: grid;
         grid-template-columns: 3rem 1fr 3.6rem;
         grid-template-rows: 3.6rem repeat(4, auto);
     }
     header.slidingmenu > .content > img.button.close {
         grid-column: 1;
         grid-row: 1;
         position: fixed;
     }
     header.slidingmenu > .content header.banner {
         grid-column: 2;
         grid-row: 1 / 3;
         justify-self: start;
     }
     header.slidingmenu > .content > a.lang {
         grid-column: -2;
         grid-row: 1;
 
         display: flex;
         align-self: center;
         justify-self: center;
         align-items: center;
         justify-content: center;
 
         padding: 0.4rem;
         font-size: 1rem;
     }
     header.slidingmenu > .content > nav.menu,
     header.slidingmenu > .content > nav.social {
         grid-column: 2;
     }
 
     header.slidingmenu > .content nav ol,
     header.slidingmenu > .content nav ul {
         margin-top: 0.2em;
         padding-left: 0;
     }
     header.slidingmenu > .content > nav.menu li > a {
         display: block;
         padding: 0.5em;
     }
     header.slidingmenu > .content > nav.menu li.dropdown > a {
         display: flex;
     }
     header.slidingmenu > .content > nav.menu li.dropdown li > a {
         padding: 0.2em;
         padding-left: 2em;
     }
 
     header.slidingmenu > .content > nav.social > ul {
         display: flex;
         padding-left: 0;
     }
     header.slidingmenu > .content > nav.social > ul > li:not(:first-child) {
         margin-left: 1em;
     }
     header.slidingmenu > .content > nav.social > ul > li > a {
         display: flex;
         align-items: center;
         padding: 0.5em;
     }
     header.slidingmenu > .content > nav.social > ul > li > a > img {
         width: 2em;
         height: 2em;
     }
 
     header.slidingmenu > input:checked {
         position: fixed;
         width: 3rem;
         height: 3rem;
     }
     header.slidingmenu > input:checked ~ .content {
         transform: none;
     }
     header.slidingmenu > input:checked ~ img.button.open {
         opacity: 0;
     }
 }