kaan/bgenc.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implement hamburger menu for mobile devices
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Kaan Barmore-Genç 2024-05-10 00:01:45 -05:00
parent 9bd3bf32fd
commit f07a19a49a
Signed by: kaan
GPG key ID: B2E280771CD62FCF
6 changed files with 108 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/_button.scss
View file

@ -1,4 +1,4 @@
@mixin button($color-bg, $color-text) {
@mixin button($color-bg, $color-text, $scale: 1) {
display: flex;
flex-direction: row;
align-items: center;
@ -9,8 +9,14 @@
text-decoration: none;
opacity: 0.8;
background-color: $color-bg;
padding: 0.5rem 1rem;
clip-path: var(--clip-path-button);
padding: calc(0.5rem * $scale) calc(1rem * $scale);
font-size: calc(1rem * $scale);
clip-path: polygon(
0px 0px,
calc(100% - 10px * $scale) 0px,
100% calc(40px * $scale),
calc(10px * $scale) calc(40px * $scale)
);
transition: all var(--animation-speed) var(--animation-type);
user-select: none;

24
src/_vars.scss
View file

@ -7,3 +7,27 @@ $min-w-supported: 370px;
$size-full-w: max(100vw, $min-w-supported);
$border: 3px solid $color-accent;
// Base colors
$color-text-h: 0;
$color-text-s: 0%;
$color-text-l: 0%;
$color-text: hsl($color-text-h, $color-text-s, $color-text-l);
$color-bg-h: 0;
$color-bg-s: 0%;
$color-bg-l: 100%;
$color-bg: hsl($color-bg-h, $color-bg-s, $color-bg-l);
// Shadows
$shadow-luminosity: 0%;
$shadow-small: 0.5px 1px 1px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 10%);
$shadow-medium:
1px 2px 2px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 20%),
2px 4px 4px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 20%),
3px 6px 6px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 20%);
$shadow-large:
1px 2px 2px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
2px 4px 4px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
4px 8px 8px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
8px 16px 16px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%),
16px 32px 32px hsla($color-bg-h, $color-bg-s, $shadow-luminosity, 30%);

32
src/app.scss
View file

@ -1,39 +1,15 @@
@import './vars';
html {
--color-text-h: 0;
--color-text-s: 0%;
--color-text-l: 0%;
--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
--color-bg-h: 0;
--color-bg-s: 0%;
--color-bg-l: 100%;
--color-bg: hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
--animation-speed: 0.2s;
--animation-type: ease-in-out;
--shadow-luminosity: calc(100% - var(--color-bg-l));
--shadow-small: 0.5px 1px 1px
hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.7);
--shadow-medium: 1px 2px 2px
hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
2px 4px 4px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333),
3px 6px 6px hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.333);
--shadow-large: 1px 2px 2px
hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
2px 4px 4px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
4px 8px 8px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
8px 16px 16px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2),
16px 32px 32px hsl(var(--color-bg-h) var(--color-bg-s) var(--shadow-luminosity) / 0.2);
--z-index-modal: 100;
--clip-path: polygon(0% 0%, 75% 0%, 100% 100%, 25% 100%);
--clip-path-button: polygon(0px 0px, calc(100% - 10px) 0px, 100% 40px, 10px 40px);
background-color: var(--color-bg);
color: var(--color-text);
background-color: $color-bg;
color: $color-text;
min-width: $min-w-supported;
}
@ -113,8 +89,8 @@ body {
.pagefind-ui__drawer {
position: absolute;
z-index: var(--z-index-modal);
background-color: var(--color-bg);
box-shadow: var(--shadow-medium);
background-color: $color-bg;
box-shadow: $shadow-medium;
padding: 2rem;
border: $border;
border-top: 0;

2
src/routes/Footer.svelte
View file

@ -40,7 +40,7 @@
.row {
margin: 0 auto;
max-width: $size-container;
background-color: var(--color-bg);
background-color: $color-bg;
padding: 1rem;
border-radius: 0.5rem;
display: flex;

76
src/routes/Header.svelte
View file

@ -6,11 +6,19 @@
import Avif from './logo.avif';
import Jpeg from './logo.avif?format=jpeg';
import WebP from './logo.avif?format=webp';
import List from 'phosphor-svelte/lib/List';
import { afterNavigate } from '$app/navigation';
onMount(() => {
// @ts-ignore
new PagefindUI({ element: '#search', showSubResults: true });
});
let expanded = false;
afterNavigate(() => {
expanded = false;
});
</script>
<header>
@ -21,18 +29,31 @@
<img
src={Jpeg}
class="circle"
alt="A stylized representation of the letters 'KBG'. The letters are intertwined with wavy lines and have a modern, digital aesthetic. The color palette consists of shades of blue, orange, and white."
alt="A vibrant and artistic representation of the letters KBG. Each letter is made out of multiple curved black lines running together, and is adorned with colorful leaves. The ends of the letters extend and narrow into thin lines capped with colorful dots."
/>
</picture>
</a>
<Spacer />
<div id="search"></div>
<Button href="/posts/">Blog</Button>
<Button href="/portfolio/">Portfolio</Button>
<div class="collapse-container">
<div class="collapse" class:expanded>
<div id="search"></div>
<Button href="/posts/">Blog</Button>
<Button href="/portfolio/">Portfolio</Button>
</div>
</div>
<button
class="hamburger"
on:click={() => {
expanded = !expanded;
}}
>
<List aria-label="menu" />
</button>
</header>
<style lang="scss">
@import '../vars';
@import '../button';
header {
display: flex;
@ -47,6 +68,50 @@
margin-bottom: unset;
}
}
.collapse-container {
position: relative;
}
.collapse {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: center;
}
.hamburger {
@include button($color-primary, $color-primary-text, 1.5);
display: none;
flex-direction: row;
}
@media (max-width: $size-container) {
header {
margin-right: 1.5rem;
}
#search {
width: 100%;
}
.collapse {
z-index: 1;
display: none;
position: absolute;
right: 0;
flex-direction: column;
align-items: end;
background-color: $color-bg;
width: calc($min-w-supported * 0.66);
box-shadow: $shadow-medium;
padding: 1.5rem;
&.expanded {
display: flex;
}
}
.hamburger {
display: flex;
}
}
.logo {
width: 12rem;
@ -56,7 +121,4 @@
min-width: 6rem;
min-height: 3rem;
}
#search {
min-width: 1rem;
}
</style>

2
src/routes/posts/[[page=integer]]/+page.svelte
View file

@ -66,7 +66,7 @@
/* Restore the color of everything under the post links, except the titles */
.posts a {
color: var(--color-text);
color: $color-text;
}
.posts a .post-title {
color: $color-primary;