+/**
+* @file speedy.css
+* @author Ken Grimes
+* @license AGPL-3.0
+* @copyright 2018 - Ken Grimes
+* @summmary Speedy Theme stylings for very fast rendering across many devices.
+*/
+
+/* Color Definitions */
:root {
--palette0: rgb(148,26,20);
--palette0-t: rgb(148,26,20,0.8);
--palette3-d: rgb(2,38,56);
--palette3-l: rgb(5,76,111);
+ /*
--color-bg: var(--palette2);
--color-bg-light: var(--palette2-l);
--color-bg-dark: var(--palette2-d);
--color-header: var(--palette0-l);
--color-header-dark: var(--palette0);
--color-header-contrast: var(--palette3);
+ */
+ --color-bg: #fefefe;
+ --color-bg-light: #eaeaea;
+ --color-bg-dark: #e0e0e0;
+ --color-text: black;
+ --color-text-link: var(--palette3-l);
+ --color-text-active: var(--palette3-d);
+ --color-header: var(--palette0-l);
+ --color-header-dark: var(--palette0);
+ --color-header-contrast: var(--palette3);
+
background-color: var(--color-bg);
color: var(--color-text);
}
-a {
- color: var(--color-text-link);
-}
+
+/* Common Components */
+a { color: var(--color-text-link) }
a:hover,
-a:active {
- color: var(--color-text-active);
-}
-h1 {
- text-align: center;
- font-size: 1.66em;
-}
-h2 {
- text-align: center;
- text-decoration: underline;
- font-size: 1.48em;
-}
-h3 {
- text-align: center;
- font-size: 1.32em;
-}
-h4 {
- text-align: center;
- font-size: 1.24em;
-}
-body {
- margin: 0;
-}
+a:active { color: var(--color-text-active) }
+h1 { font-size: 1.66em }
+h2 { text-decoration: underline; font-size: 1.48em }
+h3 { font-size: 1.32em }
+h4 { font-size: 1.24em }
+.center { text-align: center }
+.center-justify { display: flex; justify-content: center }
+.float-right { float: right }
+.float-left { float: left }
+pre { display: block; border-radius: 3px; background-color: var(--color-bg-light); box-shadow: 1px 1px 1px black; 100%; line-height: 1.18; }
+code /* Fix safari code view on IPhone */ { -webkit-text-size-adjust: 100%; overflow-wrap: break-word }
+table { display: block }
+section > code,
+section > p > code,
+section > ol > li > code,
+section > ul > li > code { border-radius: 3px; background-color: var(--color-bg-light); box-shadow: 1px 1px 1px black }
+
+/* Structure */
+body { margin: 0 }
body > header {
padding: 0 0 1px 0;
display: flex;
flex-flow: row wrap;
background-color: var(--color-header);
}
-body > main {
- margin: 0 1vw;
- font-size: calc(11pt + 0.22vw);
- font-family: sans-serif;
+body > nav {
+ opacity: 0.8;
+}
+body > article {
+ font-size: calc(12pt + 0.2vw);
+ font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+ line-height: 1.55;
+ letter-spacing: -.003em;
overflow: hidden;
}
body > footer {
font-size: 0.8rem;
- background-color: var(--color-header);
height: 4rem;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
}
+
+/* Header Structure */
body > header > img {
margin: 0 3px 0 0;
min-width: 128px;
background-color: var(--color-header-contrast);
}
body > header > div {
+ padding: 3px;
min-width: 256px;
max-width: 50vw;
+ height: 4em;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ justify-content: center;
font-size: 1.1rem;
- font-family: fantasy;
+ font-family: Impact, Arial, sans-serif;
+ font-variant: small-caps;
box-shadow: 2px 1px 2px black;
border: 1px solid black;
border-radius: 3px;
- padding: 3px;
+ border: thin solid black;
background-color: var(--color-header-contrast);
color: var(--color-bg);
- text-align: center;
- border: thin solid black;
}
-body > nav {
- opacity: 0.8;
+body > header > div > p {
+ margin: 0;
+ padding: 0;
}
+
+/* Nav Structure */
body > nav svg {
margin: 0 0;
padding: 0 0;
display: flex;
justify-content: center;
flex-flow: row wrap;
- background-color: var(--color-bg);
+ background-color: var(--color-bg-dark);
}
body > nav > footer {
font-size: 1.3rem;
- font-family: fantasy;
+ font-family: Impact, Arial, sans-serif;
+ font-variant: small-caps;
background-color: var(--color-header-dark);
color: var(--color-bg);
border-radius: 0 0 1.3rem 1.3rem;
text-align: center;
}
-body > main {
- overflow-y: auto;
+body > article > section {
+ padding: 0 1vw;
+ margin: 1vh 0;
+}
+body > article > section:after {
+ content: "";
+ margin: 3vh 0;
+ display: block;
+ width: 100%;
+ height: 1px;
+ background: #1f1f1f;
}
-body > main > article > * {
+
+body > article > section > * {
overflow-y: auto;
}
+
+/* Speedy Cards */
div.speedy-cards {
display: flex;
justify-content: space-around;
position: relative;
display: block;
text-decoration: none;
- font-size: 5vmin;
+ font-size: 1.2em;
font-weight: bold;
- margin: 3vw;
- width: 33vmin;
- height: 33vmin;
+ margin: 2vw;
+ padding: 2px;
+ min-width: 128px;
+ width: 14vw;
+ min-height: 128px;
+ height: 14vw;
box-shadow: 2px 1px 2px black;
border: 1px solid black;
border-radius: 3px;
div.speedy-cards > a > div {
margin: 0;
padding: 0;
- font-size: 3vmin;
+ font-size: 0.9em;
font-weight: normal;
}
div.speedy-cards > a > img {
ARIA-readers break between anchors */
display: none;
}
+
+/* Speedy List */
ul.speedy-list {
display: flex;
flex-flow: row wrap;
text-decoration: none;
padding: 0;
}
-a.speedy-header h1 {
+a.speedy-header > h1 {
+ display: block;
+ position: relative;
min-width: 256px;
- max-width: 50vw;
+ max-width: 33vw;
background-color: var(--color-bg);
border: 1px solid black;
border-radius: 3px;
padding: 3px;
margin: 0 0 2px 0;
text-align: center;
- box-shadow: 2px 1px 2px black;
-}
-div.speedy-img {
- flex: 0 0 64px;
- width: 64px;
- height: 64px;
- position: relative;
- z-index: 100;
}
-div.speedy-img > div {
+a.speedy-header > h1 > img {
position: absolute;
- opacity: 0.5;
- top: 0;
left: 0;
- right: 0;
- bottom: 0;
- z-index: -1;
+ opacity: 0.2;
+ width: 64px;
+ height: 64px;
border-radius: 50%;
background-size: 64px 64px;
border: 1px solid black;
}
+
+/* Single-Page Footer Info */
div.last-modified {
- margin: 0;
+ margin: 0 0 0 3px;
padding: 0;
font-size: 0.6em;
}
div.page-nav {
font-size: 0.8em;
}
+
+/* List-Page Footer Info & Pagination */
ul.pagination {
padding: 0;
list-style: none;
text-decoration: none;
pointer-events: none;
}
-.center {
- text-align: center;
-}
-.center-justify {
- display: flex;
- justify-content: center;
-}
-.float-right {
- float: right;
-}
-.float-left {
- float: left;
-}
-pre {
- display: block;
- border-radius: 3px;
- background-color: white;
- box-shadow: 1px 1px 1px black;
-}
-article > code,
-article > p > code,
-article > ol > li > code,
-article > ul > li > code {
- border-radius: 3px;
- background-color: white;
- box-shadow: 1px 1px 1px black;
-}
-table {
- display: block;
-}
-@media screen and (orientation:landscape) {
- body > main > article {
- margin: 1vh 1vw 1vw 1vh;
+
+/* Media Queries */
+/* Landscape with large width */
+/* Header and Nav are fixed to top-left with 192px static width */
+/* Sections are decorated with borders */
+/* Box Shadows provide an abomination for flat-design purists */
+@media screen and (orientation: landscape) and (min-width: 768px) {
+ body > header {
+ width: 192px;
+ position: fixed;
+ top: 2px;
+ left: 48px;
+ border-right: 1px solid black;
+ border-left: 1px solid black;
+ box-shadow: 0px 0px 2px black;
+ z-index: 100;
+ border-radius: 1.3rem 1.3rem 0 0;
+ }
+ body > header > div {
+ min-width: 190px;
+ max-width: 190px;
+ width: 190px;
+ border-right: 1px solid black;
+ box-shadow: 1px 0px 1px black;
+ }
+ body > nav {
+ width: 192px;
+ position: fixed;
+ left: 48px;
+ margin-top: 211px;
+ }
+ body > nav > div {
+ max-height: 256px;
+ flex-flow: column wrap;
+ place-content: center flex-start;
+ align-items: center;
+ border-right: 1px solid black;
+ border-left: 1px solid black;
+ box-shadow: 0px 0px 2px black;
+ }
+ body > nav > footer {
+ border-left: 1px solid black;
+ border-right: 1px solid black;
+ box-shadow: 0px 0px 2px black;
+ }
+ body > article {
+ width: calc(100vw - 192px - 192px - 16vw);
+ margin-left: calc(192px + 8vw);
+ margin-right: calc(192px + 8vw);
padding: 0 1vw;
- background-color: var(--color-bg-light);
- border: 1px solid black;
- border-radius: 3px;
- box-shadow: 2px 1px 2px black;
}
a.speedy-header {
margin: 0 -1vw;
- background-color: var(--color-header-contrast);
+ /* background-color: var(--color-header-contrast); */
+ border-radius: 3px;
}
}
+/* Portrait View */
+/* Header and Nav aligned at top with 100% width */
+/* Nav is sticky - top alignment changed on scroll by JS */
+/* Sections have no decorations. Instead, section:after pseudo-element makes a
+ horizontal rule between sections */
+/* Nav SVGs are smaller */
@media screen and (orientation:portrait) {
- body > main > article:after {
- content: "";
- margin: 3vh 0;
- display: block;
- width: 100%;
- height: 1px;
- background: #1f1f1f;
+ body > header {
+ padding: 0 0 1px 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-flow: row wrap;
+ background-color: var(--color-header);
}
body > nav {
+ opacity: 0.8;
position: -webkit-sticky;
position: sticky;
z-index: 100;
projects / kengrimes.com / theme.git / blobdiff