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