graham/ghall.space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 More visual tweaks for header

Browse Source
This commit is contained in:
Graham Hall
2025-08-30 22:09:31 -04:00
parent 67e2229b82
commit 4676b8de32
7 changed files with 60 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/svg/bars.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 631 B

After

Width:  |  Height:  |  Size: 652 B

src/assets/svg/bluesky.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3.268 64 68.414" width="2232" height="2500"><path fill="#0085ff" d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805zm36.254 0C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3.268 64 68.414" width="2232" height="2500" fill="currentColor"><path d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805zm36.254 0C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 619 B

After

Width:  |  Height:  |  Size: 626 B

src/assets/svg/xmark.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 624 B

After

Width:  |  Height:  |  Size: 645 B

src/components/Header/Drawer.astro
+33 -28
View File
@@ -31,32 +31,24 @@ import { navLinks } from '../../data/nav-links';
x-transition:leave-start="visible-drawer"
x-transition:leave-end="hidden-drawer"
>
<button @click="open = !open">
<CloseIcon class="bars-icon" width={24} height={24} /></button
>
<hr />
<ul>
{
navLinks.map((link) => (
<li>
<a href={`/${link.path}`}>
<span>{link.label}</span>
</a>
</li>
))
}
</ul>
<div>
<button @click="open = !open">
<CloseIcon class="bars-icon" width={24} height={24} /></button
>
</div>
<nav>
{navLinks.map((link) => <a href={`/${link.path}`}>{link.label}</a>)}
</nav>
</div>
</div>
<style>
:root {
--transition: all 0.1s ease-in-out;
--transition: all 0.3s ease-in-out;
}
button {
background: none;
color: inherit;
padding: 2px 2px -2px;
border: none;
line-height: 1;
@@ -67,10 +59,12 @@ import { navLinks } from '../../data/nav-links';
opacity: 0.3;
}
@media screen and (min-width: 600px) {
.drawer-container {
display: none;
}
button > svg {
color: var(--text);
}
.drawer-container {
display: none;
}
.overlay {
@@ -93,22 +87,33 @@ import { navLinks } from '../../data/nav-links';
top: 0;
background-color: var(--background);
position: absolute;
width: 200px;
width: 75vw;
height: 100vh;
padding: 12px;
z-index: 3;
transition: var(--transition);
}
ul {
list-style: none;
.drawer > div {
padding: 8px 6px 4px;
border-bottom: var(--border);
}
li {
margin-bottom: 12px;
nav {
text-align: center;
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 1.2rem;
}
.hidden-drawer {
transform: translateX(220px);
transform: translateX(75vw);
}
@media screen and (max-width: 768px) {
.drawer-container {
display: block;
}
}
</style>
src/components/Header/Header.astro
+1 -1
View File
@@ -31,7 +31,7 @@ import Drawer from './Drawer.astro';
align-items: center;
max-width: var(--max-page-width);
margin: auto;
padding: 0 10px;
padding: 0 16px;
height: 100%;
}
src/components/Header/Nav.astro
+23 -6
View File
@@ -10,10 +10,12 @@ const pathComponents = pathname.split('/').slice(1);
{
navLinks.map((link) => (
<li>
<a href={`/${link.path}`}>
<span>{link.label}</span>
<a
href={`/${link.path}`}
class={pathComponents[0] === link.path ? 'selected' : null}
>
{link.label}
</a>
{pathComponents[0] === link.path ? <div class="underline" /> : null}
</li>
))
}
@@ -24,13 +26,21 @@ const pathComponents = pathname.split('/').slice(1);
display: flex;
flex-direction: row;
list-style: none;
gap: 20px;
gap: 10px;
font-size: 1.15rem;
font-weight: 600;
}
a {
color: var(--text);
padding: 5px 10px;
border-radius: var(--radius);
transition: background-color 0.2s ease-in-out;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.04);
opacity: 1;
}
.selected {
@@ -42,9 +52,16 @@ const pathComponents = pathname.split('/').slice(1);
background-color: var(--orange);
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 768px) {
nav {
display: none;
}
}
@media (prefers-color-scheme: dark) {
a:hover {
background-color: rgba(231, 237, 255, 0.1);
opacity: 1;
}
}
</style>
src/global.css
-5
View File
@@ -18,7 +18,6 @@
--text: #4c4f69;
--background: #fcfcfc;
--radius: 5px;
--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
--border: 1px solid #ced3f1;
--max-page-width: 800px;
}
@@ -70,16 +69,12 @@ main p {
article img {
border-radius: var(--radius);
box-shadow: var(--shadow);
display: block;
margin: auto;
max-width: var(--max-page-width);
height: auto;
}
.no-shadow {
box-shadow: none;
}
.footnotes {
font-size: 1rem;
}