quatuorbellefeuille.com

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

quatuor.css (1616B)

      1 #bio .emph1 {
      2     font-weight: 600;
      3     color: #467d20;
      4 }
      5 
      6 #bio .emph2 {
      7     font-weight: 600;
      8     color: var(--gold);
      9 }
     10 
     11 #bio .emph3 {
     12     font-weight: 600;
     13     color: #404040;
     14 }
     15 
     16 #photos p.name {
     17     font-weight: 600;
     18 }
     19 
     20 #photos p.instrument {
     21     color: #483200;
     22 }
     23 
     24 @media (min-width: 50em) {
     25     main {
     26         max-width: 55em;
     27         justify-self: center;
     28     }
     29 
     30     main #photos {
     31         display: grid;
     32         grid-template-columns: repeat(4, auto);
     33         justify-content: space-between;
     34         width: 100%;
     35     }
     36 
     37     #photos > a.member {
     38         display: block;
     39         height: 100%;
     40         text-decoration: none;
     41     }
     42 
     43     #photos img.portrait {
     44         /* Center portraits horizontally within a.member.  Alternative: set
     45          * a.member to display: flex, flex-direction: column. */
     46         display: block;
     47         margin-left: auto;
     48         margin-right: auto;
     49         max-height: 60vh;
     50         transition: filter 1s, transform 1s;
     51     }
     52 
     53     #photos a:hover img.portrait, #photos a:focus img.portrait {
     54         transform: scale(1.05);
     55     }
     56 
     57     #photos p {
     58         margin: 0;
     59     }
     60 }
     61 
     62 @media not all and (min-width: 50em) {
     63     #photos {
     64         display: grid;
     65         grid-template-columns: repeat(auto-fit, minmax(20%, 50%));
     66         justify-content: space-evenly;
     67         width: 100%;
     68     }
     69 
     70     #photos > a.member {
     71         display: block;
     72         text-decoration: none;
     73     }
     74 
     75     #photos img.portrait {
     76         display: block;
     77         margin-left: auto;
     78         margin-right: auto;
     79         max-height: 60vh;
     80     }
     81 
     82     #photos p {
     83         margin: 0;
     84         text-align: center;
     85     }
     86 }