:root {
/* Standard colors for text. */
--text-fg-color: #333738;
+ --text-fg-color-max-contrast: black;
--text-bg-color: white;
--outside-page-bg-color: #333738;
/*\
|*|
-|*| Core elements: Sizing and padding
+|*| Core elements: Sizing, padding, and application of theme colors
|*|
\*/
body {
line-height: 1.25;
font-family: sans-serif;
+ color: var(--text-fg-color-max-contrast);
+}
+
+h1,h2 {
+ color: var(--text-fg-color);
+ font-weight: bold;
}
h1 {
font-size: 150%;
- font-weight: bold;
}
h2 {
font-size: 110%;
- font-weight: bold;
+}
+
+p,dl,dd,form {
+ margin-bottom: 1em;
+}
+
+ul li {
+ margin-left: 1em;
+ list-style-type: disc;
+ margin-bottom: 0.5em;
+}
+
+a:link {
+ color: var(--accent-color);
+}
+a:visited {
+ color: var(--accent-color);
+}
+a:hover {
+ color: var(--accent-color-bright);
+}
+a:active {
+ color: var(--accent-color-bright);
}
/*\
margin-left: auto;
margin-right: auto;
padding-top: 0;
- padding-bottom: 0;
+ padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
}
-@media screen and (min-width: 620px) and (max-width: 820px) {
+@media screen and (min-width: 720px) and (max-width: 820px) {
#page {
- padding-left: calc(1em + (100% - 820px)/2);
- padding-right: calc(1em + (100% - 820px)/2);
+ padding-left: calc(1em + (100% - 720px)/2);
+ padding-right: calc(1em + (100% - 720px)/2);
}
}
input {
box-sizing: border-box;
font-size: 125%;
+ height: 40px;
padding: 0.5em;
width: 100%;
border: 1px solid var(--accent-color);
padding-top: 0.25em;
padding-bottom: 0.25em;
width: 200px;
+ cursor: pointer;
+}
+
+button.inline {
+ font-size: 72%;
+ font-weight: bold;
+ width: auto;
}
button:hover {