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