+:root {
+ --palette0: rgb(148,26,20);
+ --palette0-t: rgb(148,26,20,0.8);
+ --palette0-d: rgb(100,5,0);
+ --palette0-l: rgb(172,78,73);
+ --palette1: rgb(227,93,36);
+ --palette1-d: rgb(170,51,0);
+ --palette1-h: rgb(242,72,0);
+ --palette1-l: rgb(243,157,121);
+ --palette1-u: rgb(255,101,36);
+ --palette2: rgb(236,222,222);
+ --palette2-d: rgb(230,198,196);
+ --palette2-l: rgb(255,250,250);
+ --palette3: rgb(13,62,86);
+ --palette3-d: rgb(2,38,56);
+ --palette3-l: rgb(5,76,111);
+ --palette-bg: var(--palette2);
+ --palette-bg-dark: var(--palette2-d);
+ --palette-text: black;
+ --palette-text-link: var(--palette3-l);
+ --palette-text-active: var(--palette3-d);
+ --palette-header: var(--palette0-t);
+ --palette-header: var(--palette0-l);
+ --palette-header-dark: var(--palette0);
+ --palette-header-contrast: var(--palette3);
+ background-color: var(--palette-bg);
+ color: black;
+}
a {
- color: darkslategrey;
+ color: var(--palette-text-link);
}
a:hover,
a:active {
- color: #1f2f2f;
+ color: var(--palette-text-active);
}
h1 {
text-align: center;
text-decoration: underline;
font-size: 1.33em;
}
-ul.pagination {
- display: flex;
- justify-content: center;
-}
-ul.pagination > li {
- margin: 0 0.2em;
- display: inline;
-}
body {
- margin: 0 0;
- display: flex;
- flex-flow: column nowrap;
- background-color: lightslategrey;
+ margin: 0;
}
body > header {
- margin: 0;
- padding: 0.93rem 1% 0 1%;
- border-radius: 9.33rem 0 0 0;
- background-color: slategrey;
+ padding: 0 0 1px 0;
display: flex;
- flex-flow: row wrap;
- align-items: start;
justify-content: center;
+ align-items: center;
+ flex-flow: row wrap;
+ background-color: var(--palette-header);
}
-body > header > figure {
- margin: 0;
- display: flex;
- border-radius: 90% 10% 1.3rem 1.3rem;
- background-color: darkslategrey;
- border: 1rem double slategrey;
-}
-body > header > figure > img {
- border-radius: 50% 3% 3% 3%;
- width: 128px;
- height: 128px;
-}
-body > header > nav {
- flex: 1 1 auto;
- text-align: center;
-}
-body > header > nav > header {
- font-size: 1.3rem;
- font-family: fantasy;
- color: slategrey;
- background-color: darkslategrey;
- border-radius: 1.3rem 1.3rem 0 0;
- border: 0.8rem double slategrey;
+body > main {
+ margin: 0 0 0 0;
+ padding: 0 2% 2% 2%;
+ font-size: calc(3pt + 1.5vw); /* 60 chars wide */
+ /* font-size: 1.8rem; */
+ font-family: sans;
}
-body > header > nav > nav {
+body > footer {
+ font-size: 0.8rem;
+ background-color: var(--palette-header);
+ height: 4rem;
display: flex;
+ flex-direction: column;
+ text-align: center;
justify-content: center;
- flex-flow: row wrap;
}
-body > header > nav > footer {
+body > header > img {
+ margin: 0 3px 0 0;
+ min-width: 128px;
+ min-height: 128px;
+ border-radius: 50%;
+ box-shadow: 2px 1px black;
+ border: 1px solid black;
+ background-color: var(--palette-header-contrast);
+}
+body > header > div {
+ min-width: 256px;
+ max-width: 50vw;
font-size: 1.1rem;
font-family: fantasy;
- color: slategrey;
- background-color: darkslategrey;
- border-radius: 0 0 1.3rem 1.3rem;
- border: 0.8rem double slategrey;
+ box-shadow: 2px 1px black;
+ border: 1px solid black;
+ border-radius: 3px;
+ padding: 3px;
+ background-color: var(--palette-header-contrast);
+ color: var(--palette-bg);
+ text-align: center;
+ border: thin solid black;
+}
+body > nav {
+ opacity: 0.8;
}
-body > header > nav svg {
+body > nav svg {
margin: 0 0;
+ padding: 0 0;
width: 3rem;
+ max-width: 12.5vw;
height: 3rem;
- fill: darkslategrey;
+ max-height: 12.5vw;
+ fill: var(--palette-text-link);
}
-body > header > nav a > summary {
+body > nav a > summary {
display: none;
}
-body > header > nav a > svg:hover,
-body > header > nav a > svg:active,
-body > header > nav svg.selected {
- fill: #1f2f2f;
+body > nav a > svg:hover,
+body > nav a > svg:active,
+body > nav svg.selected {
+ fill: var(--palette-text-active);
}
-
-body > main {
- margin: 0 0 0 0;
- padding: 0 2% 2% 2%;
- background-color: slategrey;
- font-size: 1.8rem;
- font-family: sans;
- color: #1f1f1f;
+body > nav > div {
+ display: flex;
+ justify-content: center;
+ flex-flow: row wrap;
+ background-color: var(--palette-bg);
}
-body > main > article {
- font-size: 0.8em;
- padding: 0 2% 2% 2%;
- border-radius: 1em 1em;
- background-color: lightslategrey;
- border-top: 1px solid black;
- border-bottom: 1px solid grey;
+body > nav > footer {
+ font-size: 1.3rem;
+ font-family: fantasy;
+ background-color: var(--palette-header-dark);
+ color: var(--palette-bg);
+ border-radius: 0 0 1.3rem 1.3rem;
+ text-align: center;
}
-body > footer {
- font-size: 0.8rem;
- background-color: darkslategrey;
- height: 4rem;
+@media screen and (orientation:portrait) {
+ body > nav {
+ position: -webkit-sticky;
+ position: sticky;
+ z-index: 100;
+ top: 0;
+ }
+ body > nav svg {
+ width: 6vh;
+ max-width: 3rem;
+ height: 6vh;
+ max-height: 3rem;
+ }
+ body > nav > footer {
+ font-size: 2vh;
+ }
+}
+div.speedy-cards {
display: flex;
- flex-direction: column;
+ justify-content: space-around;
+ flex-flow: row wrap;
+ font-size: 0.8em;
+}
+div.speedy-cards > a {
+ position: relative;
+ display: block;
+ text-decoration: none;
+ font-size: 5vmin;
+ font-weight: bold;
+ margin: 3vw;
+ width: 33vmin;
+ height: 33vmin;
+ box-shadow: 2px 1px black;
+ border: 1px solid black;
+ border-radius: 3px;
+ padding: 3px;
+ overflow: hidden;
+ background-color: var(--palette-bg-dark);
+}
+div.speedy-cards > a > div {
+ font-size: 3vmin;
+ font-weight: normal;
+}
+div.speedy-cards > a > img {
+ opacity: 0.2;
+ position: absolute;
+ top: 3vmin;
+ right: 1vmin;
+ width: 40%;
+ height: 40%;
+ background-size: 100% 100%;
+ border-radius: 50%;
+ border: 1px solid black;
+}
+div.speedy-cards > br {
+ /* Linebreaks are inserted and made invisible to make text browsers and
+ ARIA-readers break between anchors */
+ display: none;
+}
+div.page-nav {
+ font-size: 0.8em;
+}
+ul.pagination {
+ padding: 0;
+ list-style: none;
text-align: center;
- justify-content: center;
- color: lightslategrey;
}
-
+ul.pagination > li {
+ margin: 0 0.2em;
+ display: inline;
+}
+ul.pagination > li.disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+ text-decoration: none;
+ pointer-events: none;
+}
projects / kengrimes.com / theme.git / blobdiff