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 > article > * {
 141   overflow-y: auto;
 142 }
 143 @media screen and (orientation:portrait) {
 144   body > nav {
 145     position: -webkit-sticky;
 146     position: sticky;
 147     z-index: 100;
 148     top: 0;
 149   }
 150   body > nav svg {
 151     width: 6vh;
 152     max-width: 3rem;
 153     height: 6vh;
 154     max-height: 3rem;
 155   }
 156   body > nav > footer {
 157     font-size: 2vh;
 158   }
 159 }
 160 div.speedy-cards {
 161   display: flex;
 162   justify-content: space-around;
 163   flex-flow: row wrap;
 164   font-size: 0.8em;
 165 }
 166 div.speedy-cards > a {
 167   position: relative;
 168   display: block;
 169   text-decoration: none;
 170   font-size: 5vmin;
 171   font-weight: bold;
 172   margin: 3vw;
 173   width: 33vmin;
 174   height: 33vmin;
 175   box-shadow: 2px 1px 2px black;
 176   border: 1px solid black;
 177   border-radius: 3px;
 178   padding: 3px;
 179   overflow: hidden;
 180   background-color: var(--color-bg-dark);
 181 }
 182 div.speedy-cards > a > div {
 183   font-size: 3vmin;
 184   font-weight: normal;
 185 }
 186 div.speedy-cards > a > img {
 187   opacity: 0.2;
 188   position: absolute;
 189   top: 3vmin;
 190   right: 1vmin;
 191   width: 40%;
 192   height: 40%;
 193   background-size: 100% 100%;
 194   border-radius: 50%;
 195   border: 1px solid black;
 196 }
 197 div.speedy-cards > br {
 198   /* Linebreaks are inserted and made invisible to make text browsers and
 199    ARIA-readers break between anchors */
 200   display: none;
 201 }
 202 div.page-nav {
 203   font-size: 0.8em;
 204 }
 205 ul.pagination {
 206   padding: 0;
 207   list-style: none;
 208   text-align: center;
 209 }
 210 ul.pagination > li {
 211   margin: 0 0.2em;
 212   display: inline;
 213 }
 214 ul.pagination > li.disabled {
 215   cursor: not-allowed;
 216   opacity: 0.5;
 217   text-decoration: none;
 218   pointer-events: none;
 219 }