5 * @copyright 2018 - Ken Grimes
6 * @summmary Speedy Theme stylings for very fast rendering across many devices.
9 /* Color Definitions */
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;
22 font-size: calc
(12pt + 0.2vw);
23 font-family: Georgia
, Cambria
, "Times New Roman", Times
, serif
;
25 letter-spacing: -.003em;
27 background-color: var
(--color-bg
);
28 color: var
(--color-text
);
31 /* Common Components */
32 a
{ color: var
(--color-text-link
) }
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% }
54 border-bottom: 1px solid var
(--color-header
);
55 background: var
(--color-bg-darker
);
57 padding-right: calc
(20vw - 50px);
68 .cbox-hidden:checked ~ .nav-menu {
71 .nav-menu li:last-child {
78 .cbox-hidden:checked ~ .nav-menu li:last-child {
82 .nav-menu li:last-child > label:after {
90 border-width: 5px 5px 0 5px;
91 border-color: #fff transparent transparent transparent
;
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
;
97 .cbox-hidden:checked ~ .nav-menu {
111 .cbox-hidden:checked ~ .nav-menu ul {
114 .nav-menu
li:last-child
> label
,
115 .nav-menu > ul > li > a {
120 text-decoration: none
;
121 color: var
(--color-header
);
124 .nav-menu > ul > li > a:hover {
125 background: var
(--color-header
);
126 color: var
(--color-text
);
131 color: var
(--color-header
);
132 background: var
(--color-bg-darker
);
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
);
142 color: var
(--color-text
);
143 background: var
(--color-header
);
144 font-family: sans-serif
;
151 justify-content: space-around
;
165 .footer-info > ul > li {
168 .footer-info > ul i {
169 display: inline-block
;
173 transition: all
0.3s ease-in-out
;
174 border: 2px solid var
(--color-header
);
177 .footer-info > ul i:hover {
178 background: var
(--color-text
);
179 color: var
(--color-header
);
180 transition: all
0.3s ease-in-out
;
185 border-left: 1vw solid var
(--color-bg-darker
);
186 border-right: 1vw solid var
(--color-bg-darker
);
187 background: var
(--color-bg-dark
);
190 background: var
(--color-bg-darker
);
195 main
> article
> section
{
199 main
> article
> section:after
{
204 border-width: 1px 3em;
205 border-color: var
(--color-header
) transparent transparent transparent
;
207 main
> article
> section
> * {
211 /* horizontal rule deco */
215 border-width: 1px 20px;
216 border-color: var
(--color-header
) transparent
;
221 display: inline-block
;
235 ul
.slideshow-border
> li
{
236 border: 3px solid var
(--color-header
);
239 ul
.slideshow
> li img
{
242 ul
.slideshow
> li:first-child
{
250 justify-content: space-around
;
254 div
.speedy-cards
> a
{
257 text-decoration: none
;
266 box-shadow: 2px 1px 2px black
;
267 border: 1px solid black
;
271 background-color: var
(--color-bg-dark
);
273 div
.speedy-cards
> a
> div
{
279 div
.speedy-cards
> a
> img
{
286 background-size: 100% 100%;
288 border: 1px solid black
;
290 div
.speedy-cards
> br
{
291 /* Linebreaks are inserted and made invisible to make text browsers and
292 ARIA-readers break between anchors */
300 place-content: center space-around
;
305 ul
.speedy-list
> li
{
310 flex-flow: column nowrap
;
311 justify-content: center
;
319 justify-content: center
;
320 text-decoration: none
;
323 a
.speedy-header
> h1
{
328 background-color: var
(--color-bg
);
329 border: 1px solid black
;
335 a
.speedy-header
> h1
> img
{
342 background-size: 64px 64px;
343 border: 1px solid black
;
346 /* Single-Page Footer Info */
356 /* List-Page Footer Info & Pagination */
366 ul
.pagination
> li
.disabled
{
369 text-decoration: none
;
370 pointer-events: none
;
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) {
386 /* background-color: var(--color-header-contrast); */
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
) {
398 position: -webkit-sticky
;
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% } }