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