static/css/main.css

   1 a {
   2   color: darkslategrey;
   3 }
   4 a:hover,
   5 a:active {
   6   color: #1f2f2f;
   7 }
   8 h1 {
   9   text-align: center;
  10   font-size: 1.66em;
  11 }
  12 h2 {
  13   text-decoration: underline;
  14   font-size: 1.33em;
  15 }
  16 body {
  17   margin: 0;
  18   background-color: slategrey;
  19 }
  20 body > nav {
  21   position: -webkit-sticky;
  22   position: sticky;
  23   z-index: 100;
  24   top: 0;
  25 }
  26 body > header {
  27   padding: 0 0 1px 0;
  28   display: flex;
  29   justify-content: center;
  30   align-items: center;
  31   flex-flow: row wrap;
  32   background-color: darkslategrey;
  33 }
  34 body > main {
  35   margin: 0 0 0 0;
  36   padding: 0 2% 2% 2%;
  37   background-color: slategrey;
  38   font-size: 1.8rem;
  39   font-family: sans;
  40   color: #1f1f1f;
  41 }
  42 body > footer {
  43   font-size: 0.8rem;
  44   background-color: darkslategrey;
  45   height: 4rem;
  46   display: flex;
  47   flex-direction: column;
  48   text-align: center;
  49   justify-content: center;
  50   color: lightslategrey;
  51 }
  52 body > header > img {
  53   margin: 0 3px 0 0;
  54   min-width: 128px;
  55   min-height: 128px;
  56   border-radius: 50%;
  57   box-shadow: 2px 1px black;
  58   border: 1px solid black;
  59   background-color: slategrey;
  60 }
  61 body > header > div {
  62   width: 256px;
  63   font-size: 1.1rem;
  64   font-family: fantasy;
  65   box-shadow: 2px 1px black;
  66   border: 1px solid black;
  67   border-radius: 3px;
  68   padding: 3px;
  69   background-color: slategrey;
  70   color: darkslategrey;
  71   text-align: center;
  72   border: thin solid black;
  73 }
  74 body > nav svg {
  75   margin: 0 0;
  76   padding: 0 0;
  77   width: 8vh;
  78   max-width: 12.5vw;
  79   height: 8vh;
  80   max-height: 12.5vw;
  81   fill: darkslategrey;
  82 }
  83 body > nav a > summary {
  84   display: none;
  85 }
  86 body > nav a > svg:hover,
  87 body > nav a > svg:active,
  88 body > nav svg.selected {
  89   fill: #1f2f2f;
  90 }
  91 body > nav > div {
  92   display: flex;
  93   justify-content: center;
  94   flex-flow: row wrap;
  95   background-color: rgba(112, 128, 144, 0.8);
  96 }
  97 body > nav > footer {
  98   font-size: 3vh;
  99   font-family: fantasy;
 100   color: slategrey;
 101   background-color: darkslategrey;
 102   border-radius: 0 0 1.3rem 1.3rem;
 103   text-align: center;
 104 }
 105 div.speedy-cards {
 106   display: flex;
 107   justify-content: space-around;
 108   flex-flow: row wrap;
 109   font-size: 0.8em;
 110 }
 111 div.speedy-cards > a {
 112   position: relative;
 113   display: block;
 114   text-decoration: none;
 115   font-size: 5vmin;
 116   font-weight: bold;
 117   margin: 3vw;
 118   width: 33vmin;
 119   height: 33vmin;
 120   box-shadow: 2px 1px black;
 121   border: 1px solid black;
 122   border-radius: 3px;
 123   padding: 3px;
 124   overflow: hidden;
 125   background-color: lightslategrey;
 126 }
 127 div.speedy-cards > a > div {
 128   font-size: 3vmin;
 129   font-weight: normal;
 130 }
 131 div.speedy-cards > a > img {
 132   opacity: 0.2;
 133   position: absolute;
 134   top: 3vmin;
 135   right: 1vmin;
 136   width: 40%;
 137   height: 40%;
 138   background-size: 100% 100%;
 139   border-radius: 50%;
 140   border: 1px solid black;
 141 }
 142 div.speedy-cards > br {
 143   /* Linebreaks are inserted and made invisible to make text browsers and
 144    ARIA-readers break between anchors */
 145   display: none;
 146 }
 147 div.pagination {
 148 }
 149 ul.pagination {
 150   padding: 0;
 151   list-style: none;
 152   text-align: center;
 153 }
 154 ul.pagination > li {
 155   margin: 0 0.2em;
 156   display: inline;
 157 }
 158 ul.pagination > li.disabled {
 159   cursor: not-allowed;
 160   opacity: 0.5;
 161   text-decoration: none;
 162   pointer-events: none;
 163 }