--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;
+
+ --color-bg: var(--palette2);
+ --color-bg-light: var(--palette2-l);
+ --color-bg-dark: var(--palette2-d);
+ --color-text: black;
+ --color-text-link: var(--palette3-l);
+ --color-text-active: var(--palette3-d);
+ --color-header: var(--palette0-t);
+ --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(--palette-text-link);
+ color: var(--color-text-link);
}
a:hover,
a:active {
- color: var(--palette-text-active);
+ color: var(--color-text-active);
}
h1 {
text-align: center;
justify-content: center;
align-items: center;
flex-flow: row wrap;
- background-color: var(--palette-header);
+ background-color: var(--color-header);
}
body > main {
- margin: 0 0 0 0;
- padding: 0 2% 2% 2%;
- font-size: calc(3pt + 1.5vw); /* 60 chars wide */
+ margin: 0 1vw;
+ font-size: calc(10pt + 0.25vw); /* at least 60 chars wide */
/* font-size: 1.8rem; */
font-family: sans;
}
body > footer {
font-size: 0.8rem;
- background-color: var(--palette-header);
+ background-color: var(--color-header);
height: 4rem;
display: flex;
flex-direction: column;
min-width: 128px;
min-height: 128px;
border-radius: 50%;
- box-shadow: 2px 1px black;
+ box-shadow: 2px 1px 2px black;
border: 1px solid black;
- background-color: var(--palette-header-contrast);
+ background-color: var(--color-header-contrast);
}
body > header > div {
min-width: 256px;
border: 1px solid black;
border-radius: 3px;
padding: 3px;
- background-color: var(--palette-header-contrast);
- color: var(--palette-bg);
+ background-color: var(--color-header-contrast);
+ color: var(--color-bg);
text-align: center;
border: thin solid black;
}
max-width: 12.5vw;
height: 3rem;
max-height: 12.5vw;
- fill: var(--palette-text-link);
+ fill: var(--color-text-link);
}
body > nav a > summary {
display: none;
body > nav a > svg:hover,
body > nav a > svg:active,
body > nav svg.selected {
- fill: var(--palette-text-active);
+ fill: var(--color-text-active);
}
body > nav > div {
display: flex;
justify-content: center;
flex-flow: row wrap;
- background-color: var(--palette-bg);
+ background-color: var(--color-bg);
}
body > nav > footer {
font-size: 1.3rem;
font-family: fantasy;
- background-color: var(--palette-header-dark);
- color: var(--palette-bg);
+ background-color: var(--color-header-dark);
+ color: var(--color-bg);
border-radius: 0 0 1.3rem 1.3rem;
text-align: center;
}
+@media screen and (orientation:landscape) {
+ body > main > article {
+ margin: 0 1vw;
+ padding: 0 1vw;
+ background-color: var(--color-bg-light);
+ border: 1px solid black;
+ border-radius: 3px;
+ box-shadow: 2px 1px 2px black;
+ }
+}
+body > main > article > * {
+ overflow-y: auto;
+}
@media screen and (orientation:portrait) {
body > nav {
position: -webkit-sticky;
margin: 3vw;
width: 33vmin;
height: 33vmin;
- box-shadow: 2px 1px black;
+ box-shadow: 2px 1px 2px black;
border: 1px solid black;
border-radius: 3px;
padding: 3px;
overflow: hidden;
- background-color: var(--palette-bg-dark);
+ background-color: var(--color-bg-dark);
}
div.speedy-cards > a > div {
font-size: 3vmin;