static/css/main.css

   1 :root {
   2   --palette0: rgb(148,26,20);
   3   --palette0-t: rgb(148,26,20,0.8);
   4   --palette0-d: rgb(100,5,0);
   5   --palette0-l: rgb(172,78,73);
   6   --palette1: rgb(227,93,36);
   7   --palette1-d: rgb(170,51,0);
   8   --palette1-h: rgb(242,72,0);
   9   --palette1-l: rgb(243,157,121);
  10   --palette1-u: rgb(255,101,36);
  11   --palette2: rgb(236,222,222);
  12   --palette2-d: rgb(230,198,196);
  13   --palette2-l: rgb(255,250,250);
  14   --palette3: rgb(13,62,86);
  15   --palette3-d: rgb(2,38,56);
  16   --palette3-l: rgb(5,76,111);
  17
  18   --color-bg: var(--palette2);
  19   --color-bg-light: var(--palette2-l);
  20   --color-bg-dark: var(--palette2-d);
  21   --color-text: black;
  22   --color-text-link: var(--palette3-l);
  23   --color-text-active: var(--palette3-d);
  24   --color-header: var(--palette0-t);
  25   --color-header: var(--palette0-l);
  26   --color-header-dark: var(--palette0);
  27   --color-header-contrast: var(--palette3);
  28
  29   background-color: var(--color-bg);
  30   color: var(--color-text);
  31 }
  32 a {
  33   color: var(--color-text-link);
  34 }
  35 a:hover,
  36 a:active {
  37   color: var(--color-text-active);
  38 }
  39 h1 {
  40   text-align: center;
  41   font-size: 1.66em;
  42 }
  43 h2 {
  44   text-decoration: underline;
  45   font-size: 1.33em;
  46 }
  47 body {
  48   margin: 0;
  49 }
  50 body > header {
  51   padding: 0 0 1px 0;
  52   display: flex;
  53   justify-content: center;
  54   align-items: center;
  55   flex-flow: row wrap;
  56   background-color: var(--color-header);
  57 }
  58 body > main {
  59   margin: 0 1vw;
  60   font-size: calc(10pt + 0.25vw); /* at least 60 chars wide */
  61   /* font-size: 1.8rem; */
  62   font-family: sans;
  63 }
  64 body > footer {
  65   font-size: 0.8rem;
  66   background-color: var(--color-header);
  67   height: 4rem;
  68   display: flex;
  69   flex-direction: column;
  70   text-align: center;
  71   justify-content: center;
  72 }
  73 body > header > img {
  74   margin: 0 3px 0 0;
  75   min-width: 128px;
  76   min-height: 128px;
  77   border-radius: 50%;
  78   box-shadow: 2px 1px 2px black;
  79   border: 1px solid black;
  80   background-color: var(--color-header-contrast);
  81 }
  82 body > header > div {
  83   min-width: 256px;
  84   max-width: 50vw;
  85   font-size: 1.1rem;
  86   font-family: fantasy;
  87   box-shadow: 2px 1px black;
  88   border: 1px solid black;
  89   border-radius: 3px;
  90   padding: 3px;
  91   background-color: var(--color-header-contrast);
  92   color: var(--color-bg);
  93   text-align: center;
  94   border: thin solid black;
  95 }
  96 body > nav {
  97   opacity: 0.8;
  98 }
  99 body > nav svg {
 100   margin: 0 0;
 101   padding: 0 0;
 102   width: 3rem;
 103   max-width: 12.5vw;
 104   height: 3rem;
 105   max-height: 12.5vw;
 106   fill: var(--color-text-link);
 107 }
 108 body > nav a > summary {
 109   display: none;
 110 }
 111 body > nav a > svg:hover,
 112 body > nav a > svg:active,
 113 body > nav svg.selected {
 114   fill: var(--color-text-active);
 115 }
 116 body > nav > div {
 117   display: flex;
 118   justify-content: center;
 119   flex-flow: row wrap;
 120   background-color: var(--color-bg);
 121 }
 122 body > nav > footer {
 123   font-size: 1.3rem;
 124   font-family: fantasy;
 125   background-color: var(--color-header-dark);
 126   color: var(--color-bg);
 127   border-radius: 0 0 1.3rem 1.3rem;
 128   text-align: center;
 129 }
 130 @media screen and (orientation:landscape) {
 131   body > main > article {
 132     margin: 0 1vw;
 133     padding: 0 1vw;
 134     background-color: var(--color-bg-light);
 135     border: 1px solid black;
 136     border-radius: 3px;
 137     box-shadow: 2px 1px 2px black;
 138   }
 139 }
 140 body > main {
 141   overflow-y: auto;
 142 }
 143 body > main > article > * {
 144   overflow-y: auto;
 145 }
 146 @media screen and (orientation:portrait) {
 147   body > nav {
 148     position: -webkit-sticky;
 149     position: sticky;
 150     z-index: 100;
 151     top: 0;
 152   }
 153   body > nav svg {
 154     width: 6vh;
 155     max-width: 3rem;
 156     height: 6vh;
 157     max-height: 3rem;
 158   }
 159   body > nav > footer {
 160     font-size: 2vh;
 161   }
 162 }
 163 div.speedy-cards {
 164   display: flex;
 165   justify-content: space-around;
 166   flex-flow: row wrap;
 167   font-size: 0.8em;
 168 }
 169 div.speedy-cards > a {
 170   position: relative;
 171   display: block;
 172   text-decoration: none;
 173   font-size: 5vmin;
 174   font-weight: bold;
 175   margin: 3vw;
 176   width: 33vmin;
 177   height: 33vmin;
 178   box-shadow: 2px 1px 2px black;
 179   border: 1px solid black;
 180   border-radius: 3px;
 181   padding: 3px;
 182   overflow: hidden;
 183   background-color: var(--color-bg-dark);
 184 }
 185 div.speedy-cards > a > div {
 186   font-size: 3vmin;
 187   font-weight: normal;
 188 }
 189 div.speedy-cards > a > img {
 190   opacity: 0.2;
 191   position: absolute;
 192   top: 3vmin;
 193   right: 1vmin;
 194   width: 40%;
 195   height: 40%;
 196   background-size: 100% 100%;
 197   border-radius: 50%;
 198   border: 1px solid black;
 199 }
 200 div.speedy-cards > br {
 201   /* Linebreaks are inserted and made invisible to make text browsers and
 202    ARIA-readers break between anchors */
 203   display: none;
 204 }
 205 div.page-nav {
 206   font-size: 0.8em;
 207 }
 208 ul.pagination {
 209   padding: 0;
 210   list-style: none;
 211   text-align: center;
 212 }
 213 ul.pagination > li {
 214   margin: 0 0.2em;
 215   display: inline;
 216 }
 217 ul.pagination > li.disabled {
 218   cursor: not-allowed;
 219   opacity: 0.5;
 220   text-decoration: none;
 221   pointer-events: none;
 222 }