hugo/hugo/public/css/speedy.css

   1 /**
   2 * @file      speedy.css
   3 * @author    Ken Grimes
   4 * @license   AGPL-3.0
   5 * @copyright 2018 - Ken Grimes
   6 * @summmary  Speedy Theme stylings for very fast rendering across many devices.
   7 */
   8
   9 /* Color Definitions */
  10 :root {
  11   --palette0: rgb(148,26,20);
  12   --palette0-t: rgb(148,26,20,0.8);
  13   --palette0-d: rgb(100,5,0);
  14   --palette0-l: rgb(165,65,60);
  15   --palette1: rgb(227,93,36);
  16   --palette1-d: rgb(170,51,0);
  17   --palette1-h: rgb(242,72,0);
  18   --palette1-l: rgb(243,157,121);
  19   --palette1-u: rgb(255,101,36);
  20   --palette2: rgb(236,222,222);
  21   --palette2-d: rgb(230,198,196);
  22   --palette2-l: rgb(255,250,250);
  23   --palette3: rgb(13,62,86);
  24   --palette3-d: rgb(2,38,56);
  25   --palette3-l: rgb(5,76,111);
  26
  27   /*
  28   --color-bg: var(--palette2);
  29   --color-bg-light: var(--palette2-l);
  30   --color-bg-dark: var(--palette2-d);
  31   --color-text: black;
  32   --color-text-link: var(--palette3-l);
  33   --color-text-active: var(--palette3-d);
  34   --color-header: var(--palette0-l);
  35   --color-header-dark: var(--palette0);
  36   --color-header-contrast: var(--palette3);
  37   */
  38
  39   --color-bg: #fefefe;
  40   --color-bg-light: #eaeaea;
  41   --color-bg-dark: #e0e0e0;
  42   --color-text: black;
  43   --color-text-link: var(--palette3-l);
  44   --color-text-active: var(--palette3-d);
  45   --color-header: var(--palette0-l);
  46   --color-header-dark: var(--palette0);
  47   --color-header-contrast: var(--palette3);
  48
  49   background-color: var(--color-bg);
  50   color: var(--color-text);
  51 }
  52
  53 /* Common Components */
  54 a { color: var(--color-text-link) }
  55 a:hover,
  56 a:active { color: var(--color-text-active) }
  57 h1 { font-size: 1.66em }
  58 h2 { text-decoration: underline; font-size: 1.48em }
  59 h3 { font-size: 1.32em }
  60 h4 { font-size: 1.24em }
  61 .center { text-align: center }
  62 .center-justify { display: flex; justify-content: center }
  63 .float-right { float: right }
  64 .float-left { float: left }
  65 pre { display: block; border-radius: 3px; background-color: var(--color-bg-light); box-shadow: 1px 1px 1px black; 100%; line-height: 1.18; }
  66 code /* Fix safari code view on IPhone */ { -webkit-text-size-adjust: 100%; overflow-wrap: break-word }
  67 table { display: block }
  68 section > code,
  69 section > p > code,
  70 section > ol > li > code,
  71 section > ul > li > code { border-radius: 3px; background-color: var(--color-bg-light); box-shadow: 1px 1px 1px black }
  72
  73 /* Structure */
  74 body { margin: 0 }
  75 body > header {
  76   padding: 0 0 1px 0;
  77   display: flex;
  78   justify-content: center;
  79   align-items: center;
  80   flex-flow: row wrap;
  81   background-color: var(--color-header);
  82 }
  83 body > nav {
  84   opacity: 0.8;
  85 }
  86 body > article {
  87   font-size: calc(12pt + 0.2vw);
  88   font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  89   line-height: 1.55;
  90   letter-spacing: -.003em;
  91   overflow: hidden;
  92 }
  93 body > footer {
  94   font-size: 0.8rem;
  95   height: 4rem;
  96   display: flex;
  97   flex-direction: column;
  98   text-align: center;
  99   justify-content: center;
 100 }
 101
 102 /* Header Structure */
 103 body > header > img {
 104   margin: 0 3px 0 0;
 105   min-width: 128px;
 106   min-height: 128px;
 107   border-radius: 50%;
 108   box-shadow: 2px 1px 2px black;
 109   border: 1px solid black;
 110   background-color: var(--color-header-contrast);
 111 }
 112 body > header > div {
 113   padding: 3px;
 114   min-width: 256px;
 115   max-width: 50vw;
 116   height: 4em;
 117   display: flex;
 118   flex-direction: column;
 119   text-align: center;
 120   justify-content: center;
 121   font-size: 1.1rem;
 122   font-family: Impact, Arial, sans-serif;
 123   font-variant: small-caps;
 124   box-shadow: 2px 1px 2px black;
 125   border: 1px solid black;
 126   border-radius: 3px;
 127   border: thin solid black;
 128   background-color: var(--color-header-contrast);
 129   color: var(--color-bg);
 130 }
 131 body > header > div > p {
 132   margin: 0;
 133   padding: 0;
 134 }
 135
 136 /* Nav Structure */
 137 body > nav svg {
 138   margin: 0 0;
 139   padding: 0 0;
 140   width: 3rem;
 141   max-width: 12.5vw;
 142   height: 3rem;
 143   max-height: 12.5vw;
 144   fill: var(--color-text-link);
 145 }
 146 body > nav a > summary {
 147   display: none;
 148 }
 149 body > nav a > svg:hover,
 150 body > nav a > svg:active,
 151 body > nav svg.selected {
 152   fill: var(--color-text-active);
 153 }
 154 body > nav > div {
 155   display: flex;
 156   justify-content: center;
 157   flex-flow: row wrap;
 158   background-color: var(--color-bg-dark);
 159 }
 160 body > nav > footer {
 161   font-size: 1.3rem;
 162   font-family: Impact, Arial, sans-serif;
 163   font-variant: small-caps;
 164   background-color: var(--color-header-dark);
 165   color: var(--color-bg);
 166   border-radius: 0 0 1.3rem 1.3rem;
 167   text-align: center;
 168 }
 169 body > article > section {
 170   padding: 0 1vw;
 171   margin: 1vh 0;
 172 }
 173 body > article > section:after {
 174   content: "";
 175   margin: 3vh 0;
 176   display: block;
 177   width: 100%;
 178   height: 1px;
 179   background: #1f1f1f;
 180 }
 181
 182 body > article > section > * {
 183   overflow-y: auto;
 184 }
 185
 186 /* Speedy Cards */
 187 div.speedy-cards {
 188   display: flex;
 189   justify-content: space-around;
 190   flex-flow: row wrap;
 191   font-size: 0.8em;
 192 }
 193 div.speedy-cards > a {
 194   position: relative;
 195   display: block;
 196   text-decoration: none;
 197   font-size: 1.2em;
 198   font-weight: bold;
 199   margin: 2vw;
 200   padding: 2px;
 201   min-width: 128px;
 202   width: 14vw;
 203   min-height: 128px;
 204   height: 14vw;
 205   box-shadow: 2px 1px 2px black;
 206   border: 1px solid black;
 207   border-radius: 3px;
 208   padding: 3px;
 209   overflow: hidden;
 210   background-color: var(--color-bg-dark);
 211 }
 212 div.speedy-cards > a > div {
 213   margin: 0;
 214   padding: 0;
 215   font-size: 0.9em;
 216   font-weight: normal;
 217 }
 218 div.speedy-cards > a > img {
 219   opacity: 0.2;
 220   position: absolute;
 221   top: 3vmin;
 222   right: 1vmin;
 223   width: 40%;
 224   height: 40%;
 225   background-size: 100% 100%;
 226   border-radius: 50%;
 227   border: 1px solid black;
 228 }
 229 div.speedy-cards > br {
 230   /* Linebreaks are inserted and made invisible to make text browsers and
 231    ARIA-readers break between anchors */
 232   display: none;
 233 }
 234
 235 /* Speedy List */
 236 ul.speedy-list {
 237   display: flex;
 238   flex-flow: row wrap;
 239   place-content: center space-around;
 240   align-items: center;
 241   padding: 0;
 242   margin: 0;
 243 }
 244 ul.speedy-list > li {
 245   display: block;
 246 }
 247 ul.speedy-list a {
 248   display: flex;
 249   flex-flow: column nowrap;
 250   justify-content: center;
 251   text-align: center;
 252   width: 128px;
 253   height: 128px;
 254 }
 255 a.speedy-header {
 256   display: flex;
 257   flex-flow: row wrap;
 258   justify-content: center;
 259   text-decoration: none;
 260   padding: 0;
 261 }
 262 a.speedy-header > h1 {
 263   display: block;
 264   position: relative;
 265   min-width: 256px;
 266   max-width: 33vw;
 267   background-color: var(--color-bg);
 268   border: 1px solid black;
 269   border-radius: 3px;
 270   padding: 3px;
 271   margin: 0 0 2px 0;
 272   text-align: center;
 273 }
 274 a.speedy-header > h1 > img {
 275   position: absolute;
 276   left: 0;
 277   opacity: 0.2;
 278   width: 64px;
 279   height: 64px;
 280   border-radius: 50%;
 281   background-size: 64px 64px;
 282   border: 1px solid black;
 283 }
 284
 285 /* Single-Page Footer Info */
 286 div.last-modified {
 287   margin: 0 0 0 3px;
 288   padding: 0;
 289   font-size: 0.6em;
 290 }
 291 div.page-nav {
 292   font-size: 0.8em;
 293 }
 294
 295 /* List-Page Footer Info & Pagination */
 296 ul.pagination {
 297   padding: 0;
 298   list-style: none;
 299   text-align: center;
 300 }
 301 ul.pagination > li {
 302   margin: 0 0.2em;
 303   display: inline;
 304 }
 305 ul.pagination > li.disabled {
 306   cursor: not-allowed;
 307   opacity: 0.5;
 308   text-decoration: none;
 309   pointer-events: none;
 310 }
 311
 312 /* Media Queries */
 313 /* Landscape with large width */
 314 /* Header and Nav are fixed to top-left with 192px static width */
 315 /* Sections are decorated with borders */
 316 /* Box Shadows provide an abomination for flat-design purists */
 317 @media screen and (orientation: landscape) and (min-width: 768px) {
 318   body > header {
 319     width: 192px;
 320     position: fixed;
 321     top: 2px;
 322     left: 48px;
 323     border-right: 1px solid black;
 324     border-left: 1px solid black;
 325     box-shadow: 0px 0px 2px black;
 326     z-index: 100;
 327     border-radius: 1.3rem 1.3rem 0 0;
 328   }
 329   body > header > div {
 330     min-width: 190px;
 331     max-width: 190px;
 332     width: 190px;
 333     border-right: 1px solid black;
 334     box-shadow: 1px 0px 1px black;
 335   }
 336   body > nav {
 337     width: 192px;
 338     position: fixed;
 339     left: 48px;
 340     margin-top: 211px;
 341   }
 342   body > nav > div {
 343     max-height: 256px;
 344     flex-flow: column wrap;
 345     place-content: center flex-start;
 346     align-items: center;
 347     border-right: 1px solid black;
 348     border-left: 1px solid black;
 349     box-shadow: 0px 0px 2px black;
 350   }
 351   body > nav > footer {
 352     border-left: 1px solid black;
 353     border-right: 1px solid black;
 354     box-shadow: 0px 0px 2px black;
 355   }
 356   body > article {
 357     width: calc(100vw - 192px - 192px - 16vw);
 358     margin-left: calc(192px + 8vw);
 359     margin-right: calc(192px + 8vw);
 360     padding: 0 1vw;
 361   }
 362   a.speedy-header {
 363     margin: 0 -1vw;
 364     /* background-color: var(--color-header-contrast); */
 365     border-radius: 3px;
 366   }
 367 }
 368 /* Portrait View */
 369 /* Header and Nav aligned at top with 100% width */
 370 /* Nav is sticky - top alignment changed on scroll by JS */
 371 /* Sections have no decorations. Instead, section:after pseudo-element makes a
 372    horizontal rule between sections */
 373 /* Nav SVGs are smaller */
 374 @media screen and (orientation:portrait) {
 375   body > header {
 376     padding: 0 0 1px 0;
 377     display: flex;
 378     justify-content: center;
 379     align-items: center;
 380     flex-flow: row wrap;
 381     background-color: var(--color-header);
 382   }
 383   body > nav {
 384     opacity: 0.8;
 385     position: -webkit-sticky;
 386     position: sticky;
 387     z-index: 100;
 388     top: 0;
 389   }
 390   body > nav svg {
 391     width: 6vh;
 392     max-width: 3rem;
 393     height: 6vh;
 394     max-height: 3rem;
 395   }
 396   body > nav > footer {
 397     font-size: 2vh;
 398   }
 399 }