quatuorbellefeuille.com

Content, build scripts and admin scripts for the Bellefeuille Quartet website.
git clone https://git.kevinlegouguec.net/quatuorbellefeuille.com
Log | Files | Refs

membre.css (1651B)

      1 main {
      2     display: grid;
      3     grid-template-columns: 3fr 2fr;
      4     grid-template-rows: auto 1fr;
      5 }
      6 
      7 main > .bio-title {
      8     grid-column: 1;
      9     grid-row: 1;
     10 }
     11 
     12 main > .bio-title > * {
     13     margin: 0;
     14 }
     15 
     16 h1.name {
     17     text-transform: uppercase;
     18     font-size: xx-large;
     19     color: var(--emph1-color);
     20 }
     21 
     22 h2.instrument {
     23     font-weight: normal;
     24     font-size: x-large;
     25     color: var(--emph2-color);
     26 }
     27 
     28 .bio {
     29     grid-column: 1;
     30     grid-row: 2;
     31     margin-right: 0.5em;
     32 }
     33 
     34 .bio dt, .bio dd {
     35     display: inline;
     36 }
     37 
     38 .bio dt {
     39     font-weight: 600;
     40     color: var(--emph2-color);
     41 }
     42 
     43 .bio dd {
     44     margin-left: 0;
     45 }
     46 
     47 .bio dl {
     48     margin-top: 0.2em;
     49     margin-bottom: 0.2em;
     50 }
     51 
     52 main > img {
     53     display: block;
     54     grid-column: 2;
     55     grid-row: 1 / -1;
     56 
     57     width: 100%;
     58     background-size: cover;
     59 }
     60 
     61 @media (min-width: 80em)
     62 {
     63     /* CSS 2 appendix D: the vertical margin for h1 should be .67em, with
     64      * font-size 2em. */
     65     main {
     66         --main-top-margin: 1.33em;
     67     }
     68 
     69     main > .bio-title {
     70         margin: var(--main-top-margin) 0;
     71     }
     72 
     73     main > img {
     74         margin-top: var(--main-top-margin);
     75         position: sticky;
     76         top: 2em;
     77     }
     78 }
     79 
     80 @media not all and (min-width: 80em)
     81 {
     82     main {
     83         align-items: center;
     84         justify-items: center;
     85     }
     86 
     87     main > .bio-title {
     88         text-align: center;
     89     }
     90 
     91     main > img {
     92         grid-column: 2;
     93         grid-row: 1;
     94     }
     95 
     96     main > .bio {
     97         grid-column: 1 / -1;
     98         grid-row: 2;
     99     }
    100 }
    101 
    102 @media not all and (min-width: 50em)
    103 {
    104     main > .bio-title > h1 {
    105         font-size: 1.2em;
    106     }
    107     main > .bio-title > h2 {
    108         font-size: 1.2em;
    109     }
    110 }