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