From 3f8f491da078406921d12ad7327dc7c90802253f Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Thu, 2 Nov 2023 19:33:35 +0100 Subject: [PATCH] Header partial --- assets/css/baseof.css | 10 +++++ assets/css/partials/header.css | 72 ++++++++++++++++++++++++---------- assets/js/baseof.js | 36 +++++++++++------ assets/js/partials/header.js | 57 +++++++++++++++++++++++++++ content/_index.md | 4 +- layouts/_default/baseof.html | 3 +- layouts/partials/header.html | 43 ++++++++++++++++++-- 7 files changed, 186 insertions(+), 39 deletions(-) create mode 100644 assets/js/partials/header.js diff --git a/assets/css/baseof.css b/assets/css/baseof.css index 907fba5..cd9296a 100644 --- a/assets/css/baseof.css +++ b/assets/css/baseof.css @@ -53,6 +53,11 @@ body { isolation: isolate; } +main { + width: 85%; + margin: auto; +} + img, picture, video, @@ -88,3 +93,8 @@ a { height: 24px; opacity: .25; } + +hr { + color: var(--text); + opacity: .25; +} diff --git a/assets/css/partials/header.css b/assets/css/partials/header.css index 8ea4605..bc4d6ae 100644 --- a/assets/css/partials/header.css +++ b/assets/css/partials/header.css @@ -1,26 +1,35 @@ :root { --header-light-background: var(--white); --header-dark-background: #676666; + --nav-light-background: var(--white); + --nav-dark-background: #121212; +} + +header, nav { + width: 85%; + border-radius: 0.75rem; + text-transform: uppercase; } header { - width: 85%; margin: 2.5rem auto; padding: 0.938rem 2.188rem; - border-radius: 0.75rem; - box-shadow: var(--header-shadow); - background-color: var(--header-background); color: var(--text); - text-transform: uppercase; - display: flex; align-items: center; justify-content: space-between; } +nav { + background-color: var(--nav-background); + display: none; + position: fixed; + flex-direction: column; +} + header #header-face { display: flex; align-items: center; @@ -31,16 +40,29 @@ header #header-face h3 { font-weight: 600; } +header #menus a, nav #menus a { + text-decoration: none; + font-weight: 600; + font-size: 15px; +} + header #menus { display: flex; align-items: center; column-gap: 1.563rem; } -header #menus a { - text-decoration: none; - font-weight: 600; - font-size: 15px; +nav #menus { + display: flex; + flex-direction: column; + align-items: end; + justify-content: center; + row-gap: 3.125rem; +} + +nav hr { + margin-top: 3.125rem; + margin-bottom: 1.25rem; } header #links { @@ -49,17 +71,27 @@ header #links { column-gap: 1.5rem; } -header #links .linkedin, -header #links .github, -header #links .cv-paper-flip, -header #burger svg path { +nav #links { + display: flex; + justify-content: end; + column-gap: 1.5rem; +} + +nav #links .theme-toggler { + margin-right: auto; +} + +#links .linkedin, +#links .github, +#links .cv-paper-flip, +#burger svg path { stroke: var(--text); } -header #links .twitter, -header #links .rss, -header #links .cv, -header #links .moon { +#links .twitter, +#links .rss, +#links .cv, +#links .moon { fill: var(--text); } @@ -67,12 +99,12 @@ header #burger { display: none; } -header #links #theme-toggle, header #burger { +.theme-toggler, #burger { cursor: pointer; } @media only screen and (max-width: 768px) { - header { + header, nav { padding: 0.938rem 1.25rem; } diff --git a/assets/js/baseof.js b/assets/js/baseof.js index 606cf1d..8710898 100644 --- a/assets/js/baseof.js +++ b/assets/js/baseof.js @@ -1,4 +1,4 @@ -function getInitialTheme() { +function initTheme() { const persistedColorPreference = window.localStorage.getItem('theme'); const hasPersistedPreference = typeof persistedColorPreference === 'string'; @@ -16,7 +16,7 @@ function getInitialTheme() { return 'light'; } -function updateTheme(theme) { +function loadTheme() { root.style.setProperty('--theme', theme); root.style.setProperty( '--background', @@ -28,6 +28,12 @@ function updateTheme(theme) { ? 'var(--header-light-background)' : 'var(--header-dark-background)' ); + root.style.setProperty( + '--nav-background', + theme === 'light' + ? 'var(--nav-light-background)' + : 'var(--nav-dark-background)' + ); root.style.setProperty( '--header-shadow', theme === 'light' ? 'var(--shadow)' : 'none' @@ -38,20 +44,24 @@ function updateTheme(theme) { fetch(`../icons/${theme === 'light' ? 'sun' : 'moon'}.svg`) .then((response) => response.text()) .then((svg) => { - document.querySelector('#theme-toggle').innerHTML = svg; + themeTogglers.forEach(themeToggler => { + themeToggler.innerHTML = svg; + }); }) - .catch(() => {}) + .catch(() => {}); +} + +function updateTheme() { + theme = theme === 'light' ? 'dark' : 'light'; + window.localStorage.setItem('theme', theme); + loadTheme(); } const root = document.documentElement; -let theme = getInitialTheme(); +const themeTogglers = document.querySelectorAll('.theme-toggler'); -document.addEventListener('DOMContentLoaded', () => { - updateTheme(theme); -}); +let theme = initTheme(); -document.querySelector('#theme-toggle').addEventListener('click', () => { - theme = theme === 'light' ? 'dark' : 'light'; - window.localStorage.setItem('theme', theme); - updateTheme(theme); -}); +document.addEventListener('DOMContentLoaded', loadTheme); + +themeTogglers.forEach(themerToggler => themerToggler.addEventListener('click', updateTheme)); diff --git a/assets/js/partials/header.js b/assets/js/partials/header.js new file mode 100644 index 0000000..414a250 --- /dev/null +++ b/assets/js/partials/header.js @@ -0,0 +1,57 @@ +function loadBurger() { + fetch(`../icons/${burgerOpen ? 'close' : 'burger'}.svg`) + .then((response) => response.text()) + .then((svg) => { + burgerPlaceholder.innerHTML = svg; + mobileNavigation.style.display = burgerOpen ? 'flex' : 'none'; + mobileNavigation.style.top = burgerOpen + ? `calc(${header.getBoundingClientRect().y}px + ${ + header.getBoundingClientRect().height + }px + 0.625rem)` + : 'initial'; + mobileNavigation.style.left = burgerOpen + ? `${header.getBoundingClientRect().x}px` + : 'initial'; + }) + .catch(() => {}); +} + +function updateBurger() { + burgerOpen = !burgerOpen; + loadBurger(); +} + +function resetBurger() { + burgerOpen = false; + loadBurger(); +} + +function resetBurgerWhenWindowResized() { + if (window.innerWidth > 768) { + resetBurger(); + } +} + +function resetBurgerWhenClickedOutside(event) { + if ( + mobileNavigation.style.display === 'flex' && + event.target !== header && + event.target !== mobileNavigation && + !mobileNavigation.contains(event.target) + ) { + resetBurger(); + } +} + +const burgerPlaceholder = document.querySelector('#burger'); +const header = document.querySelector('header'); +const mobileNavigation = document.querySelector('nav'); +let burgerOpen = false; + +window.addEventListener('resize', resetBurgerWhenWindowResized); + +document.addEventListener('DOMContentLoaded', loadBurger); + +document.addEventListener('click', resetBurgerWhenClickedOutside); + +burgerPlaceholder.addEventListener('click', updateBurger); diff --git a/content/_index.md b/content/_index.md index 212df70..eaf888b 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,5 +3,7 @@ title: "Hazem Krimi" date: 2023-10-18T20:03:43+01:00 --- -*Hi!* +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta magna eu turpis aliquet aliquet. Sed ut laoreet sapien, in fermentum diam. Suspendisse potenti. Integer sit amet felis tincidunt, fermentum risus ut, fringilla quam. In eu lorem ante. Aliquam nunc ligula, iaculis at viverra at, rutrum vitae lorem. Vestibulum sit amet velit nisi. Nullam quis varius lorem. Morbi ac risus ac odio sodales bibendum id sed diam. Fusce sagittis est rhoncus enim rutrum bibendum. + +Proin vitae imperdiet tortor. Maecenas non enim tempor, egestas risus eget, malesuada felis. Vestibulum eu eleifend velit. Nullam ut eleifend tortor, sit amet pretium ipsum. In placerat hendrerit quam, quis mollis libero. Morbi rutrum ex nec dictum consectetur. Sed vestibulum blandit placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque rhoncus cursus mi non pulvinar. Aliquam sed suscipit urna. diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8920ce8..520017b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -15,7 +15,8 @@ {{ end }} - + + {{ block "scripts" . }}{{ end }} {{ partial "header.html" . }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 7382703..11ee293 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -5,9 +5,17 @@ {{ end }} +{{ define "scripts" }} + {{ $scripts := resources.Get "js/partials/header.js" | js.Build | minify }} + + +{{ end }} + {{ $headerFaceImage := resources.Get "images/header-face.png" }} {{ $sun := resources.Get "icons/sun.svg" }} {{ $moon := resources.Get "icons/moon.svg" }} +{{ $burger := resources.Get "icons/burger.svg" }} +{{ $close := resources.Get "icons/close.svg" }} {{ $cv := resources.Get "cv.pdf" }}
@@ -30,10 +38,37 @@ {{ readFile "assets/icons/cv.svg" | safeHTML }}
- {{ readFile "assets/icons/burger.svg" | safeHTML }} +
+ +