quatuorbellefeuille.com

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

index.css (2210B)

      1 body {
      2     background: no-repeat 70% 30%/cover black url('/images/index/bg1k.jpg');
      3 }
      4 
      5 body > header.banner:hover,
      6 body > header.banner:focus-within {
      7     color: #e4b63a;
      8 }
      9 
     10 main {
     11     position: relative;
     12 }
     13 
     14 a#next-concert {
     15     display: block;
     16     position: absolute;
     17     bottom: 0;
     18     left: -2em;
     19     padding: 2em;
     20     width: 6em;
     21     height: 3em;
     22     text-align: center;
     23     text-decoration: none;
     24     background: no-repeat center/contain url('/images/calendar.svg');
     25 }
     26 a#next-concert:hover, a#next-concert:focus {
     27     color: #e4b63a;
     28     background-image: url('/images/calendar-gold.svg');
     29 }
     30 
     31 #next-concert p {
     32     position: relative;
     33     top: 1em;
     34     margin: 0;
     35     text-transform: uppercase;
     36 }
     37 
     38 #next-concert #day {
     39     font-weight: 600;
     40 }
     41 
     42 @media (min-width: 1024px), (min-height: 600px) {
     43     body {
     44         background-image: url('/images/index/bg2k.jpg');
     45     }
     46 }
     47 
     48 @media (min-width: 2048px), (min-height: 1300px) {
     49     body {
     50         background-image: url('/images/index/bg4k.jpg');
     51     }
     52 }
     53 
     54 @media (min-width: 4096px), (min-height: 2700px) {
     55     body {
     56         background-image: url('/images/index/bgmax.jpg');
     57     }
     58 }
     59 
     60 @media (max-aspect-ratio: 1/1) and (max-height: 600px),
     61        (max-aspect-ratio: 5/6) {
     62     body {
     63         background-image: url('/images/photos/PierreVaillant2.jpg');
     64         background-position: bottom;
     65     }
     66 
     67     main {
     68         display: flex;
     69         justify-content: center;
     70     }
     71 
     72     a#next-concert {
     73         bottom: auto;
     74         left: auto;
     75     }
     76 
     77     /* Try to keep calendar above the heads but below the lamp 🤕 */
     78     @media (max-aspect-ratio: 1/2) {
     79         a#next-concert {
     80             top: 30%;
     81         }
     82     }
     83     @media (min-aspect-ratio: 1/2) {
     84         a#next-concert {
     85             top: 27%;
     86         }
     87     }
     88     @media (min-aspect-ratio: 2/3) {
     89         a#next-concert {
     90             top: 26%;
     91         }
     92     }
     93     @media (min-aspect-ratio: 3/4) {
     94         a#next-concert {
     95             top: 23%;
     96         }
     97     }
     98     @media (min-aspect-ratio: 85/100) {
     99         a#next-concert {
    100             top: 0;
    101         }
    102     }
    103 }
    104 
    105 @media (min-width: 50em) {
    106     header.menu > nav {
    107         background: #0004;
    108     }
    109 
    110     nav li.dropdown ul {
    111         background: #0004;
    112     }
    113 }