hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Footer mobile

Browse Source
This commit is contained in:
Hazem Krimi
2023-11-07 01:47:59 +01:00
parent 2ccb68d1b6
commit de4bd80df8
8 changed files with 99 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/baseof.css
+15
View File
@@ -53,6 +53,21 @@ body {
isolation: isolate; isolation: isolate;
} }
#links .linkedin,
#links .github,
#links .cv-paper-flip,
#links .mail,
#nav-toggler svg path {
stroke: var(--text);
}
#links .twitter,
#links .rss,
#links .cv,
#links .moon > path {
fill: var(--text);
}
main { main {
width: 85%; width: 85%;
min-height: 70vh; min-height: 70vh;
assets/css/partials/footer.css
+26 -14
View File
@@ -1,22 +1,34 @@
:root { :root {
--footer-light-background: #ECECEC; --footer-light-background: #ececec;
--footer-dark-background: #131212; --footer-dark-background: #131212;
} }
footer { footer {
width: 100%; width: 100%;
min-height: 25rem; padding: 3rem 8rem;
padding: 3rem 5rem; margin-top: 2.5rem;
margin-top: 2.5rem;
display: flex; display: flex;
align-items: start; align-items: center;
column-gap: 6rem; flex-direction: column;
row-gap: 5rem;
background-color: var(--footer-background); background-color: var(--footer-background);
color: var(--text); color: var(--text);
} }
footer div { footer #footer-face {
width: 20rem; display: flex;
} align-items: center;
column-gap: 0.625rem;
}
footer #links {
display: flex;
align-items: center;
column-gap: 1.5rem;
}
footer #copyright {
font-size: 0.875rem;
}
assets/css/partials/header.css
-14
View File
@@ -81,20 +81,6 @@ nav #links .theme-toggler {
margin-right: auto; margin-right: auto;
} }
#links .linkedin,
#links .github,
#links .cv-paper-flip,
#nav-toggler svg path {
stroke: var(--text);
}
#links .twitter,
#links .rss,
#links .cv,
#links .moon > path {
fill: var(--text);
}
header #nav-toggler { header #nav-toggler {
display: none; display: none;
} }
assets/icons/mail.svg
+2 -2
View File
@@ -1,4 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path class='mail' d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 6L12 13L2 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path class='mail' d="M22 6L12 13L2 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 419 B

assets/images/header-face.png → assets/images/small-face.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

assets/js/partials/header.js
+13 -7
View File
@@ -1,10 +1,13 @@
function loadBurger() { function loadBurger() {
navToggler.querySelector( const headerInitialLeftPosition = header.getBoundingClientRect().x;
burgerOpen ? '#burger' : '#close'
).style.display = 'none'; navToggler.querySelector(burgerOpen ? '#burger' : '#close').style.display =
navToggler.querySelector( 'none';
burgerOpen ? '#close' : '#burger' navToggler.querySelector(burgerOpen ? '#close' : '#burger').style.display =
).style.display = 'block'; 'block';
header.style.position = burgerOpen ? 'fixed' : 'initial';
header.style.top = burgerOpen ? '0px' : 'initial';
header.style.left = burgerOpen ? `${headerInitialLeftPosition}px` : 'initial';
mobileNavigation.style.display = burgerOpen ? 'flex' : 'none'; mobileNavigation.style.display = burgerOpen ? 'flex' : 'none';
mobileNavigation.style.top = burgerOpen mobileNavigation.style.top = burgerOpen
? `calc(${header.getBoundingClientRect().y}px + ${ ? `calc(${header.getBoundingClientRect().y}px + ${
@@ -12,8 +15,11 @@ function loadBurger() {
}px + 0.625rem)` }px + 0.625rem)`
: 'initial'; : 'initial';
mobileNavigation.style.left = burgerOpen mobileNavigation.style.left = burgerOpen
? `${header.getBoundingClientRect().x}px` ? `${headerInitialLeftPosition}px`
: 'initial'; : 'initial';
document.querySelector('main').style.marginTop = burgerOpen
? `calc(${header.getBoundingClientRect().height}px + 5rem)`
: '0px';
} }
function updateBurger() { function updateBurger() {
layouts/partials/footer.html
+35 -14
View File
@@ -1,18 +1,39 @@
{{ $styles := resources.Get "css/partials/footer.css" | toCSS | minify }} {{ $styles := resources.Get "css/partials/footer.css" | toCSS | minify }}
<link rel="stylesheet" href="{{ $styles.Permalink }}"> <link rel="stylesheet" href="{{ $styles.Permalink }}" />
{{ $faceImage := resources.Get "images/small-face.png" }}
{{ $cv :=resources.Get "cv.pdf" }}
<footer> <footer>
<div> <div id="footer-face">
<h3>Recent Blogs</h3> <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi" />
</div> <h3>Hazem Krimi</h3>
<div> </div>
<h3>Recent Projects</h3> <div id="links">
</div> <a href="https://www.linkedin.com/in/hazemkrimi" target="_blank">
<div> {{ readFile "assets/icons/linkedin.svg" | safeHTML }}
<h3>About</h3> </a>
</div> <a href="https://twitter.com/HazemKrimi" target="_blank">
<div> {{ readFile "assets/icons/twitter.svg" | safeHTML }}
<h3>Contact</h3> </a>
</div> <a href="https://github.com/hazemKrimi" target="_blank">
</footer> {{ readFile "assets/icons/github.svg" | safeHTML }}
</a>
<a href="/" target="_blank">
{{ readFile "assets/icons/rss.svg" | safeHTML }}
</a>
<a href="mailto:me@hazemkrimi.tech" target="_blank">
{{ readFile "assets/icons/mail.svg" | safeHTML }}
</a>
<a href="{{ $cv.Permalink }}" target="_blank">
{{ readFile "assets/icons/cv.svg" | safeHTML }}
</a>
</div>
<p id="copyright"></p>
<script>
const copyright = (document.querySelector(
'#copyright'
).innerHTML = `&copy ${new Date().getFullYear()} Hazem Krimi`);
</script>
</footer>
layouts/partials/header.html
+8 -12
View File
@@ -1,21 +1,15 @@
{{ define "styles" }} {{ $styles := resources.Get "css/partials/header.css" | toCSS | minify }}
{{ $styles := resources.Get "css/partials/header.css" | toCSS | minify }} {{ $scripts := resources.Get "js/partials/header.js" | js.Build | minify }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" />
{{ end }}
{{ define "scripts" }} <link rel="stylesheet" href="{{ $styles.Permalink }}">
{{ $scripts := resources.Get "js/partials/header.js" | js.Build | minify }} <script defer src="{{ $scripts.Permalink }}"></script>
<script defer src="{{ $scripts.Permalink }}"></script> {{ $faceImage := resources.Get "images/small-face.png" }}
{{ end }}
{{ $headerFaceImage := resources.Get "images/header-face.png" }}
{{ $cv := resources.Get "cv.pdf" }} {{ $cv := resources.Get "cv.pdf" }}
<header> <header>
<div id="header-face"> <div id="header-face">
<img src="{{ $headerFaceImage.Permalink }}" alt="Hazem Krimi" /> <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi" />
<h3>Hazem Krimi</h3> <h3>Hazem Krimi</h3>
</div> </div>
<div id="menus"> <div id="menus">
@@ -28,6 +22,7 @@
<a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a> <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>
<a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a> <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
<a href="/" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a> <a href="/" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
<a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a>
<a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a> <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
<div class="vertical-separator"></div> <div class="vertical-separator"></div>
<span <span
@@ -62,6 +57,7 @@
{{ readFile "assets/icons/sun.svg" | safeHTML }} {{ readFile "assets/icons/sun.svg" | safeHTML }}
</span> </span>
<a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a> <a href="{{ $cv.Permalink }}" target="_blank"> {{ readFile "assets/icons/cv.svg" | safeHTML }} </a>
<a href="mailto:me@hazemkrimi.tech" target="_blank"> {{ readFile "assets/icons/mail.svg" | safeHTML }} </a>
<a href="/" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a> <a href="/" target="_blank"> {{ readFile "assets/icons/rss.svg" | safeHTML }} </a>
<a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a> <a href="https://github.com/hazemKrimi" target="_blank"> {{ readFile "assets/icons/github.svg" | safeHTML }} </a>
<a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a> <a href="https://twitter.com/HazemKrimi" target="_blank"> {{ readFile "assets/icons/twitter.svg" | safeHTML }} </a>