diff --git a/css/font-styles.css b/css/font-styles.css index e69de29..3bfec99 100644 --- a/css/font-styles.css +++ b/css/font-styles.css @@ -0,0 +1,69 @@ +.material-symbols-outlined { + font-family: 'Material Symbols Outlined'; + font-weight: normal; + font-style: normal; + font-size: 24px; + line-height: 1; + letter-spacing: normal; + text-transform: none; + display: inline-block; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + -webkit-font-feature-settings: 'liga'; + font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} + +.sedan-sc-regular { + font-family: "Sedan SC", serif; + font-weight: 400; + font-style: normal; +} + +/* : Use a unique and descriptive class name */ +/* : Use a value from 100 to 700 */ +/* .josefin-slab- { + font-family: "Josefin Slab", serif; + font-optical-sizing: auto; + font-weight: ; + font-style: normal; + } +*/ + +.josefin-slab-500 { + font-family: "Josefin Slab", serif; + font-optical-sizing: auto; + font-weight: 500; + font-style: normal; +} + +/* : Use a unique and descriptive class name */ +/* : Use a value from 400 to 900 */ +.playfair-display-700 { + font-family: "Playfair Display", serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} + +.playfair-display-400 { + font-family: "Playfair Display", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} + +.oswald-display-700 { + font-family: "Oswald", serif; + font-optical-sizing: auto; + font-weight: 700; + font-style: normal; +} + +.oswald-display-400 { + font-family: "Oswald", serif; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 526ef14..6925b5a 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3,12 +3,30 @@ scrollbar-color: #3b3b3b #202020; } -.body-class { +/* This class is applied while fonts are still loading. */ +html.wf-loading #hero { + opacity: 0; +} +/* This class is applied when all fonts are loaded */ +html.wf-active #hero { + opacity: 100%; +} + +body { background-color: black; color: whitesmoke; width: 95dvw; } +#hero-section { + width: 95dvw; + height: 100dvh; + vertical-align: middle; + align-content: center; + margin: 0; + padding: 0; +} + #hero { font-size: 7em; line-height: 0.85; @@ -21,14 +39,6 @@ transition-property: opacity; } -html.wf-loading #hero { - opacity: 0; -} - -html.wf-active #hero { - -} - #hero-titles { width: 100%; height: 100%; @@ -43,14 +53,16 @@ html.wf-active #hero { text-align: center; } -#viewport-portal { - width: 95dvw; - height: 101dvh; - vertical-align: middle; - align-content: center; - margin: 0; - padding: 0; - +#arrow-hint { + position: absolute; + top: 94dvh; + /*left: 50vh; */ + width: 98dvw; + text-align: center; + color: rgb(255, 255, 255); + opacity: 0%; + transition: 4s ease-in-out 13s; + transition-property: opacity, visibility; } #certifications-page { @@ -71,18 +83,6 @@ html.wf-active #hero { text-align: center; } -#arrow-hint { - position: absolute; - top: 94dvh; - /*left: 50vh; */ - width: 98dvw; - text-align: center; - color: rgb(255, 255, 255); - opacity: 0%; - transition: 4s ease-in-out 13s; - transition-property: opacity, visibility; -} - #page-content { /* opacity: 0%; visibility: hidden; */ @@ -91,73 +91,3 @@ html.wf-active #hero { padding: 10px; position: relative; } - -.material-symbols-outlined { - font-family: 'Material Symbols Outlined'; - font-weight: normal; - font-style: normal; - font-size: 24px; - line-height: 1; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-feature-settings: 'liga'; - font-feature-settings: 'liga'; - -webkit-font-smoothing: antialiased; -} - -.sedan-sc-regular { - font-family: "Sedan SC", serif; - font-weight: 400; - font-style: normal; -} - -/* : Use a unique and descriptive class name */ -/* : Use a value from 100 to 700 */ -/* .josefin-slab- { - font-family: "Josefin Slab", serif; - font-optical-sizing: auto; - font-weight: ; - font-style: normal; - } -*/ - -.josefin-slab-500 { - font-family: "Josefin Slab", serif; - font-optical-sizing: auto; - font-weight: 500; - font-style: normal; -} - -/* : Use a unique and descriptive class name */ -/* : Use a value from 400 to 900 */ -.playfair-display-700 { - font-family: "Playfair Display", serif; - font-optical-sizing: auto; - font-weight: 700; - font-style: normal; -} - -.playfair-display-400 { - font-family: "Playfair Display", serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; -} - -.oswald-display-700 { - font-family: "Oswald", serif; - font-optical-sizing: auto; - font-weight: 700; - font-style: normal; -} - -.oswald-display-400 { - font-family: "Oswald", serif; - font-optical-sizing: auto; - font-weight: 400; - font-style: normal; -} \ No newline at end of file diff --git a/index.html b/index.html index 2fab97b..7f8da59 100644 --- a/index.html +++ b/index.html @@ -15,20 +15,27 @@ + + + + + + - + + - + - +
-
+
Nathan Peckham
 
-
arrow_downward
+
expand_circle_down
Certifications
diff --git a/scripts/font-scripts.js b/scripts/font-scripts.js index 641f0f9..1168d9e 100644 --- a/scripts/font-scripts.js +++ b/scripts/font-scripts.js @@ -1,6 +1,3 @@ -// Google WebFont library for loading custom fonts. Helps to avoid FOUT. - - WebFont.load({ google: { families: ['Oswald', 'Josefin Slab', 'Playfair Display', 'Sedan SC', 'Material Symbols Outlined'] diff --git a/scripts/scripts.js b/scripts/scripts.js index 163c762..abc4cd9 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -15,10 +15,9 @@ const hero_title_rotator = () => { window.onload = function(){ console.debug("DOM Loaded"); setInterval(hero_title_rotator, HERO_TITLE_INTERVAL); + window.onscroll = clearArrowHint; }; -window.onscroll = clearArrowHint; - function clearArrowHint() { console.debug("Clearing Arrow Hint"); var arrow_hint = document.getElementById("arrow-hint");