diff --git a/public_html/css/bebas/BebasNeue.otf b/public_html/css/bebas/BebasNeue.otf new file mode 100644 index 0000000..214e007 Binary files /dev/null and b/public_html/css/bebas/BebasNeue.otf differ diff --git a/public_html/css/bebas/BebasNeue.woff b/public_html/css/bebas/BebasNeue.woff new file mode 100644 index 0000000..ff28949 Binary files /dev/null and b/public_html/css/bebas/BebasNeue.woff differ diff --git a/public_html/css/bebas/BebasNeueLight.otf b/public_html/css/bebas/BebasNeueLight.otf new file mode 100644 index 0000000..01429c4 Binary files /dev/null and b/public_html/css/bebas/BebasNeueLight.otf differ diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css index f34e183..42177ae 100644 --- a/public_html/css/hpr.css +++ b/public_html/css/hpr.css @@ -19,7 +19,12 @@ https://creativecommons.org/publicdomain/ local("GNUTypewriter"), url("/css/gnutypewriter/gtw.woff") format("woff"); } - +@font-face { + font-family: "BebasNeue"; + src: + local("BebasNeue"), + url("/css/bebas/BebasNeue.woff") format("woff"); +} :root { --background-primary: #dfdfdf; --text-primary: #4d4d4d; /* HPR Grey */ @@ -42,8 +47,6 @@ https://creativecommons.org/publicdomain/ --for-tablet-landscape-up: 900px; --for-desktop-up: 1200px; --for-big-desktop-up: 1800px; - - } html { @@ -63,6 +66,7 @@ body { font-family: var(--font-family-hpr); margin: 0; padding: 0; + min-height: 100vh; } body > nav { @@ -109,9 +113,11 @@ body > header > * { padding: 1.5rem; } body > main { + flex: 1 0 auto; padding: 0.25rem; } body > footer { + flex: 0 1 auto; background-color: var(--background-secondary); color: var(--text-secondary); padding: 0.25rem; @@ -255,6 +261,9 @@ a.lane-button img { #title { text-transform: uppercase; } +#tag_line { + line-height: 1; +} #tag_line *, #title * { margin: 0; @@ -265,14 +274,43 @@ a.lane-button img { letter-spacing: -0.65rem; line-height: 0.75; } +#tag_line h2 { + text-transform: uppercase; + font-family: "BebasNeue", sans-serif; + font-size: 1.15rem; + letter-spacing: 0.05rem; +} +#tag_line h2:first-child { + font-size: 2rem; +} #tag_line h3 { text-transform: capitalize; + font-size: 1.15rem; } #site_url { font-family: "GNUTypewriter", monospace; text-transform: none; } @media (min-width: 900px) { + #tag_line { + text-align: center; + } + #title h1 { + font-size: 7.5rem; + letter-spacing: -0.65rem; + line-height: 0.75; + } + #tag_line h2 { + font-size: 1.82rem; + letter-spacing: 0.05rem; + } + #tag_line h2:first-child { + font-size: 4rem; + } + #tag_line h3 { + font-size: 1.85rem; + margin-left: 5rem; + } #qr_code { text-align: center; }