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   height: 128px;
  55   border-radius: 50%;
  56   box-shadow: 2px 1px black;
  57   border: 1px solid black;
  58   background-color: slategrey;
  59 }
  60 body > header > div {
  61   width: 256px;
  62   font-size: 1.1rem;
  63   font-family: fantasy;
  64   box-shadow: 2px 1px black;
  65   border: 1px solid black;
  66   border-radius: 3px;
  67   padding: 3px;
  68   background-color: slategrey;
  69   color: darkslategrey;
  70   text-align: center;
  71   border: thin solid black;
  72 }
  73 body > nav svg {
  74   margin: 0 0;
  75   padding: 0 0;
  76   width: 8vh;
  77   max-width: 12.5vw;
  78   height: 8vh;
  79   max-height: 12.5vw;
  80   fill: darkslategrey;
  81 }
  82 body > nav a > summary {
  83   display: none;
  84 }
  85 body > nav a > svg:hover,
  86 body > nav a > svg:active,
  87 body > nav svg.selected {
  88   fill: #1f2f2f;
  89 }
  90 body > nav > div {
  91   display: flex;
  92   justify-content: center;
  93   flex-flow: row wrap;
  94   background-color: rgba(112, 128, 144, 0.8);
  95 }
  96 body > nav > footer {
  97   font-size: 3vh;
  98   font-family: fantasy;
  99   color: slategrey;
 100   background-color: darkslategrey;
 101   border-radius: 0 0 1.3rem 1.3rem;
 102   text-align: center;
 103 }
 104 div.speedy-cards {
 105   display: flex;
 106   justify-content: space-around;
 107   flex-flow: row wrap;
 108   font-size: 0.8em;
 109 }
 110 div.speedy-cards > a {
 111   position: relative;
 112   display: block;
 113   text-decoration: none;
 114   font-size: 5vmin;
 115   font-weight: bold;
 116   margin: 3vw;
 117   width: 33vmin;
 118   height: 33vmin;
 119   box-shadow: 2px 1px black;
 120   border: 1px solid black;
 121   border-radius: 3px;
 122   padding: 3px;
 123   overflow: hidden;
 124   background-color: lightslategrey;
 125 }
 126 div.speedy-cards > a > div {
 127   font-size: 3vmin;
 128   font-weight: normal;
 129 }
 130 div.speedy-cards > a > img {
 131   opacity: 0.2;
 132   position: absolute;
 133   top: 3vmin;
 134   right: 1vmin;
 135   width: 40%;
 136   height: 40%;
 137   background-size: 100% 100%;
 138   border-radius: 50%;
 139   border: 1px solid black;
 140 }
 141 div.speedy-cards > br {
 142   /* Linebreaks are inserted and made invisible to make text browsers and
 143    ARIA-readers break between anchors */
 144   display: none;
 145 }
 146 div.pagination {
 147 }
 148 ul.pagination {
 149   padding: 0;
 150   list-style: none;
 151   text-align: center;
 152 }
 153 ul.pagination > li {
 154   margin: 0 0.2em;
 155   display: inline;
 156 }
 157 ul.pagination > li.disabled {
 158   cursor: not-allowed;
 159   opacity: 0.5;
 160   text-decoration: none;
 161   pointer-events: none;
 162 }