website

Le code pour générer le site web du duché perché.
Log | Files | Refs

duper.css (3565B)

      1 :root {
      2     --bg-0: #fbf3db;
      3     --bg-1: #ece3cc;
      4     --bg-2: #d5cdb6;
      5     --dim-0: #909995;
      6     --fg-0: #53676d;
      7     --fg-1: #3a4d53;
      8 
      9     --red: #d2212d;
     10     --green: #489100;
     11     --yellow: #ad8900;
     12     --blue: #0072d4;
     13     --magenta: #ca4898;
     14     --cyan: #009c8f;
     15     --orange: #c25d1e;
     16     --violet: #8762c6;
     17 
     18     --br-red: #cc1729;
     19     --br-green: #428b00;
     20     --br-yellow: #a78300;
     21     --br-blue: #006dce;
     22     --br-magenta: #c44392;
     23     --br-cyan: #00978a;
     24     --br-orange: #bc5819;
     25     --br-violet: #825dc0;
     26 
     27     --article-width: 40rem;
     28     --page-padding: 0.5rem;
     29     --code-padding: 0.5rem;
     30     --paragraph-padding: 1rem;
     31     --logo-height: 4rem;
     32     --tab-spacing: 0.5rem;
     33     --rounded: 0.5rem;
     34 }
     35 
     36 
     37 
     38 /* Display theme colors for urls */
     39 
     40 
     41 a:link { color: var(--blue); }
     42 a:visited { color: var(--magenta); }
     43 a:focus { color: var(--br-magenta); }
     44 a:hover { color: var(--cyan); }
     45 a:active { color: var(--red); }
     46 
     47 header a { text-decoration: none; }
     48 header a:link { color: var(--fg-1); }
     49 header a:visited { color: var(--fg-1); }
     50 header a:focus { color: var(--fg-1); }
     51 header a:hover { color: var(--fg-1); }
     52 header a:active { color: var(--fg-1); }
     53 
     54 sup { font-size: 80%; }
     55 
     56 ::selection { background-color: var(--bg-2); }
     57 
     58 /* Main layout */
     59 
     60 
     61 html {
     62     color: var(--fg-0);
     63     background-color: var(--bg-0);
     64     font-family: Dejavu sans;
     65     font-size: 1.0rem;
     66     height: 100%;
     67     margin: 0;
     68     text-align: justify;
     69 }
     70 
     71 body {
     72     display: flex;
     73     flex-flow: column;
     74     height: 100%;
     75     margin: 0;
     76 }
     77 
     78 .logo {
     79     height: var(--logo-height);
     80 }
     81 
     82 a:has(.logo) {
     83     margin-right: var(--page-padding)
     84 }
     85 
     86 header nav {
     87     display: flex;
     88     flex-flow: row;
     89     padding: var(--page-padding);
     90     padding-bottom: 0;
     91 }
     92 
     93 header nav ul {
     94     display: flex;
     95     flex-flow: row wrap;
     96     gap: var(--tab-spacing);
     97     justify-content: space-between;
     98     flex: 1 1 auto;
     99     margin: 0;
    100     padding: 0;
    101     list-style-type: none;
    102 }
    103 
    104 header nav li {
    105     display: flex;
    106     flex: 1 1 auto;
    107     justify-content: center;
    108     align-items: center;
    109 }
    110 
    111 header li > a {
    112     width: 100%;
    113     height: 100%;
    114     max-height: 3rem;
    115     display: flex;
    116     justify-content: center;
    117     align-items: center;
    118     background-color: var(--bg-1);
    119     border-radius: var(--rounded);
    120 }
    121 
    122 article, footer {
    123     margin: auto;
    124     flex: 1 1 auto;
    125 }
    126 
    127 article, footer, img {
    128     max-width: var(--article-width);
    129     width: calc(100vw - var(--page-padding));
    130 }
    131 
    132 pre {
    133     display: inline-block;
    134     width: inherit;
    135     background-color: var(--bg-1);
    136     padding: var(--code-padding);
    137     margin: 0;
    138     text-align: left;
    139     overflow: scroll;
    140 }
    141 
    142 footer {
    143     text-align: center;
    144     flex: 0 1 auto;
    145     display: flex;
    146     flex-direction: column;
    147     width: 100%;
    148 }
    149 
    150 hr {
    151     width: 100%;
    152     margin: 3rem auto auto auto;
    153     border: none;
    154     border-top: 1px solid var(--fg-1);
    155 }
    156 
    157 footer ul {
    158     text-align: start;
    159     margin: auto;
    160     padding: 0;
    161 }
    162 
    163 figure {
    164     display: flex;
    165     flex-direction: column;
    166     gap: 0;
    167     margin: 0;
    168     padding-bottom: var(--paragraph-padding);
    169 }
    170 
    171 figcaption {
    172     font-style: italic;
    173     background-color: var(--bg-1);
    174     padding: var(--page-padding) var(--page-padding);
    175     border-bottom-left-radius: var(--rounded);
    176     border-bottom-right-radius: var(--rounded);
    177 }
    178 
    179 .media-container {
    180     display: flex;
    181     flex-flow: row nowrap;
    182     align-items: center;
    183     padding: 0;
    184     list-style-type: none;
    185     overflow-x: auto;
    186     scroll-snap-type: x mandatory;
    187 }
    188 
    189 .media-container li {
    190     scroll-snap-align: start;
    191 }
    192 
    193 .media-container a {
    194     display: flex;
    195 }