static/css/speedy.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(165,65,60);
   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-l);
  25   --color-header-dark: var(--palette0);
  26   --color-header-contrast: var(--palette3);
  27
  28   background-color: var(--color-bg);
  29   color: var(--color-text);
  30 }
  31 a {
  32   color: var(--color-text-link);
  33 }
  34 a:hover,
  35 a:active {
  36   color: var(--color-text-active);
  37 }
  38 h1 {
  39   text-align: center;
  40   font-size: 1.66em;
  41 }
  42 h2 {
  43   text-decoration: underline;
  44   font-size: 1.33em;
  45 }
  46 body {
  47   margin: 0;
  48 }
  49 body > header {
  50   padding: 0 0 1px 0;
  51   display: flex;
  52   justify-content: center;
  53   align-items: center;
  54   flex-flow: row wrap;
  55   background-color: var(--color-header);
  56 }
  57 body > main {
  58   margin: 0 1vw;
  59   font-size: calc(10pt + 0.25vw); /* at least 60 chars wide */
  60   /* font-size: 1.8rem; */
  61   font-family: sans;
  62 }
  63 body > footer {
  64   font-size: 0.8rem;
  65   background-color: var(--color-header);
  66   height: 4rem;
  67   display: flex;
  68   flex-direction: column;
  69   text-align: center;
  70   justify-content: center;
  71 }
  72 body > header > img {
  73   margin: 0 3px 0 0;
  74   min-width: 128px;
  75   min-height: 128px;
  76   border-radius: 50%;
  77   box-shadow: 2px 1px 2px black;
  78   border: 1px solid black;
  79   background-color: var(--color-header-contrast);
  80 }
  81 body > header > div {
  82   min-width: 256px;
  83   max-width: 50vw;
  84   font-size: 1.1rem;
  85   font-family: fantasy;
  86   box-shadow: 2px 1px 2px black;
  87   border: 1px solid black;
  88   border-radius: 3px;
  89   padding: 3px;
  90   background-color: var(--color-header-contrast);
  91   color: var(--color-bg);
  92   text-align: center;
  93   border: thin solid black;
  94 }
  95 body > nav {
  96   opacity: 0.8;
  97 }
  98 body > nav svg {
  99   margin: 0 0;
 100   padding: 0 0;
 101   width: 3rem;
 102   max-width: 12.5vw;
 103   height: 3rem;
 104   max-height: 12.5vw;
 105   fill: var(--color-text-link);
 106 }
 107 body > nav a > summary {
 108   display: none;
 109 }
 110 body > nav a > svg:hover,
 111 body > nav a > svg:active,
 112 body > nav svg.selected {
 113   fill: var(--color-text-active);
 114 }
 115 body > nav > div {
 116   display: flex;
 117   justify-content: center;
 118   flex-flow: row wrap;
 119   background-color: var(--color-bg);
 120 }
 121 body > nav > footer {
 122   font-size: 1.3rem;
 123   font-family: fantasy;
 124   background-color: var(--color-header-dark);
 125   color: var(--color-bg);
 126   border-radius: 0 0 1.3rem 1.3rem;
 127   text-align: center;
 128 }
 129 body > main {
 130   overflow-y: auto;
 131 }
 132 body > main > article > * {
 133   overflow-y: auto;
 134 }
 135 div.speedy-cards {
 136   display: flex;
 137   justify-content: space-around;
 138   flex-flow: row wrap;
 139   font-size: 0.8em;
 140 }
 141 div.speedy-cards > a {
 142   position: relative;
 143   display: block;
 144   text-decoration: none;
 145   font-size: 5vmin;
 146   font-weight: bold;
 147   margin: 3vw;
 148   width: 33vmin;
 149   height: 33vmin;
 150   box-shadow: 2px 1px 2px black;
 151   border: 1px solid black;
 152   border-radius: 3px;
 153   padding: 3px;
 154   overflow: hidden;
 155   background-color: var(--color-bg-dark);
 156 }
 157 div.speedy-cards > a > div {
 158   margin: 0;
 159   padding: 0;
 160   font-size: 3vmin;
 161   font-weight: normal;
 162 }
 163 div.speedy-cards > a > img {
 164   opacity: 0.2;
 165   position: absolute;
 166   top: 3vmin;
 167   right: 1vmin;
 168   width: 40%;
 169   height: 40%;
 170   background-size: 100% 100%;
 171   border-radius: 50%;
 172   border: 1px solid black;
 173 }
 174 div.speedy-cards > br {
 175   /* Linebreaks are inserted and made invisible to make text browsers and
 176    ARIA-readers break between anchors */
 177   display: none;
 178 }
 179 ul.speedy-list {
 180   display: flex;
 181   flex-flow: row wrap;
 182   place-content: center space-around;
 183   align-items: center;
 184   padding: 0;
 185   margin: 0;
 186 }
 187 ul.speedy-list > li {
 188   display: block;
 189 }
 190 ul.speedy-list a {
 191   display: flex;
 192   flex-flow: column nowrap;
 193   justify-content: center;
 194   text-align: center;
 195   width: 128px;
 196   height: 128px;
 197 }
 198 a.speedy-header {
 199   display: flex;
 200   flex-flow: row wrap;
 201   justify-content: center;
 202   text-decoration: none;
 203   padding: 0;
 204 }
 205 a.speedy-header h1 {
 206   min-width: 256px;
 207   max-width: 50vw;
 208   background-color: var(--color-bg);
 209   border: 1px solid black;
 210   border-radius: 3px;
 211   padding: 3px;
 212   margin: 0 0 2px 0;
 213   text-align: center;
 214   box-shadow: 2px 1px 2px black;
 215 }
 216 div.speedy-img {
 217   flex: 0 0 64px;
 218   width: 64px;
 219   height: 64px;
 220   position: relative;
 221   z-index: 100;
 222 }
 223 div.speedy-img > div {
 224   position: absolute;
 225   opacity: 0.5;
 226   top: 0;
 227   left: 0;
 228   right: 0;
 229   bottom: 0;
 230   z-index: -1;
 231   border-radius: 50%;
 232   background-size: 64px 64px;
 233   border: 1px solid black;
 234 }
 235 div.last-modified {
 236   margin: 0;
 237   padding: 0;
 238   font-size: 0.6em;
 239 }
 240 div.page-nav {
 241   font-size: 0.8em;
 242 }
 243 ul.pagination {
 244   padding: 0;
 245   list-style: none;
 246   text-align: center;
 247 }
 248 ul.pagination > li {
 249   margin: 0 0.2em;
 250   display: inline;
 251 }
 252 ul.pagination > li.disabled {
 253   cursor: not-allowed;
 254   opacity: 0.5;
 255   text-decoration: none;
 256   pointer-events: none;
 257 }
 258 .center {
 259   text-align: center;
 260 }
 261 @media screen and (orientation:landscape) {
 262   body > main > article {
 263     margin: 1vh 1vw 1vw 1vh;
 264     padding: 0 1vw;
 265     background-color: var(--color-bg-light);
 266     border: 1px solid black;
 267     border-radius: 3px;
 268     box-shadow: 2px 1px 2px black;
 269   }
 270   a.speedy-header {
 271     margin: 0 -1vw;
 272     background-color: var(--color-header-contrast);
 273   }
 274 }
 275 @media screen and (orientation:portrait) {
 276   body > main > article:after {
 277     content: "";
 278     margin: 3vh 0;
 279     display: block;
 280     width: 100%;
 281     height: 1px;
 282     background: #1f1f1f;
 283   }
 284   body > nav {
 285     position: -webkit-sticky;
 286     position: sticky;
 287     z-index: 100;
 288     top: 0;
 289   }
 290   body > nav svg {
 291     width: 6vh;
 292     max-width: 3rem;
 293     height: 6vh;
 294     max-height: 3rem;
 295   }
 296   body > nav > footer {
 297     font-size: 2vh;
 298   }
 299 }