diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index cfbac13..e6faa5c 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -13,14 +13,23 @@ https://creativecommons.org/publicdomain/
* - CSS-Tricks: Linearly Scale font-size with CSS clamp() Based on the Viewport
* -- https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
*/
+@font-face {
+ font-family: "GNUTypewriter";
+ src:
+ local("GNUTypewriter"),
+ url("/css/gnutypewriter/gtw.woff") format("woff");
+}
:root {
--background-primary: #dfdfdf;
--text-primary: #4d4d4d; /* HPR Grey */
+ --banner-text-primary: #000000;
--background-secondary: #4d4d4d;
--text-secondary: #dfdfdf;
--link-primary: #247ba0;
+ --link-primary-hover: #f8961e;
--link-secondary: #7fc5e2;
+ --link-secondary-hover: #f9c74f;
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
/* screen breakpoints */
@@ -37,6 +46,7 @@ html {
margin: 0;
padding: 0;
display: flex;
+ flex-direction: column;
}
body {
display: flex;
@@ -58,6 +68,9 @@ body > nav {
body > nav a {
color: var(--link-secondary);
}
+body > nav a:hover {
+ color: var(--link-secondary-hover);
+}
body > nav ul {
background-color: inherit;
color: inherit;
@@ -80,6 +93,7 @@ body > header {
justify-content: space-between;
padding: 0.25rem;
background-image: url("/images/main-header-background.png");
+ color: var(--banner-text-primary);
}
body > header > * {
margin: 0;
@@ -93,6 +107,7 @@ body > footer {
background-color: var(--background-secondary);
color: var(--text-secondary);
padding: 0.25rem;
+ text-align: center
}
body > footer hr:first-child {
display: none;
@@ -172,6 +187,7 @@ a {
a:hover {
cursor: pointer;
+ color: var(--link-primary-hover);
}
hr {
@@ -203,6 +219,7 @@ p.meta span label {
.lane {
display: flex;
flex-direction: row;
+ flex-wrap: wrap;
}
a.lane-button {
@@ -218,9 +235,30 @@ a.lane-button {
}
+#tag_line,
+#title {
+ text-transform: uppercase;
+}
+#tag_line *,
+#title * {
+ margin: 0;
+ padding: 0;
+}
+#title h1 {
+ font-size: 7.5rem;
+ letter-spacing: -0.65rem;
+ line-height: 0.75;
+}
+#tag_line h3 {
+ text-transform: capitalize;
+}
+#site_url {
+ font-family: "GNUTypewriter", monospace;
+ text-transform: none;
+}
@media (min-width: 900px) {
- body {
- background-color: white;
+ #qr_code {
+ text-align: center;
}
#qr_code > img {
max-height: 195px;