forked from HPR/hpr_generator
Clean up font usage
Remove unused fonts. Add woff2 types for smaller downloads. Offer woff2, woff, truetype/opentype versions of the font files.
This commit is contained in:
@@ -13,23 +13,22 @@ 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");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "BebasNeue";
|
||||
src:
|
||||
local("BebasNeue"),
|
||||
url("/css/bebas/BebasNeue.woff") format("woff");
|
||||
local("BEBAS NEUE"),
|
||||
url("/css/bebas/BebasNeue.woff2") format("woff2"),
|
||||
url("/css/bebas/BebasNeue.woff") format("woff"),
|
||||
url("/css/bebas/BebasNeue.otf") format("opentype");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "PatrickHand";
|
||||
src:
|
||||
local("PatrickHand"),
|
||||
url("/css/patrickhand/PatrickHand-Regular.ttf") format("truetype");
|
||||
local("Patrick Hand"),
|
||||
url("/css/patrickhand/PatrickHand-Regular.woff2") format("woff2"),
|
||||
url("/css/patrickhand/PatrickHand-Regular.woff") format("woff"),
|
||||
url("/css/patrickhand/PatrickHand-Regular.ttf") format("truetype");
|
||||
}
|
||||
:root {
|
||||
--background-primary: #fffff7/*#fafafa#fbfbee #dfdfdf */;
|
||||
@@ -45,13 +44,23 @@ https://creativecommons.org/publicdomain/
|
||||
--link-secondary-hover: #f9e9c2;
|
||||
--link-title-color: #00003e;
|
||||
|
||||
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
|
||||
--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
|
||||
|
||||
--logo-font-family: var(--font-family-hpr);
|
||||
--logo-font-weight: bolder;
|
||||
--logo-font-size: 7.5rem;
|
||||
--logo-letter-spacing: -0.65rem;
|
||||
--logo-line-height: 0.75;
|
||||
--logo-margin: 0 0 0.25rem 0;
|
||||
|
||||
--tagline-font-family:"BebasNeue", sans-serif;
|
||||
--lane-button-font-family: "PatrickHand", var(--font-family-hpr);
|
||||
--lane-button-border: #80b4c0;
|
||||
--input-border-primary: #4d4d4d;
|
||||
|
||||
--link-spacing-horizontal: clamp(0.5rem, -0.25rem + 3vw, 2.5rem);
|
||||
|
||||
--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
|
||||
--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
|
||||
|
||||
--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
|
||||
--shadow-secondary-color: hsl(0, 0%, 30.2%);
|
||||
@@ -383,7 +392,7 @@ a.lane-button {
|
||||
|
||||
}
|
||||
a.lane-button p {
|
||||
font-family: 'PatrickHand', sans-serif;
|
||||
font-family: var(--lane-button-font-family);
|
||||
text-transform: lowercase;
|
||||
font-size: 1.4em;
|
||||
mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)), url("../images/charcoal.png");
|
||||
@@ -468,10 +477,12 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
|
||||
color: var(--link-primary-hover);
|
||||
}
|
||||
#title #site_acronym {
|
||||
font-size: 7.5rem;
|
||||
letter-spacing: -0.65rem;
|
||||
line-height: 0.75;
|
||||
margin-bottom: 0.25rem;
|
||||
font-family: var(--logo-font-family);
|
||||
font-size: var(--logo-font-size);
|
||||
font-weight: var(--logo-font-weight);
|
||||
letter-spacing: var(--logo-letter-spacing);
|
||||
line-height: var(--logo-line-height);
|
||||
margin: var(--logo-margin);
|
||||
color: transparent;
|
||||
}
|
||||
#title #site_acronym a {
|
||||
@@ -488,13 +499,13 @@ section:nth-of-type(even) .lane a:nth-of-type(4) {
|
||||
#tag_line #tag1,
|
||||
#tag_line #tag2 {
|
||||
text-transform: uppercase;
|
||||
font-family: "BebasNeue", sans-serif;
|
||||
font-family: var(--tagline-font-family);
|
||||
font-size: clamp(1.03rem, -0.25rem + 3vw, var(--default-header-4-font-size));
|
||||
font-weight: var(--default-header-x-font-weight);
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
#tag_line #tag1 {
|
||||
font-size: clamp(2.1rem, calc(100vw - 360px + 2.1rem), 2.3rem);
|
||||
font-size: clamp(2.1rem, calc(100vw - 360px + 1rem), 2.3rem);;
|
||||
}
|
||||
#tag_line #tag3 {
|
||||
text-align: center;
|
||||
@@ -767,4 +778,4 @@ fieldset > table td input[type="radio"] {
|
||||
flex: 1 1 30%;
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user