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

Compare commits

base: kaan:f07a19a49ad4788ec44e1a15be45155ffe66d152
Branches Tags
kaan:main
..
compare: kaan:b9e3be8042c84c4691cc0779778c35c2ea513145
Branches Tags
kaan:main

No commits in common. "f07a19a49ad4788ec44e1a15be45155ffe66d152" and "b9e3be8042c84c4691cc0779778c35c2ea513145" have entirely different histories.
f07a19a49a ... b9e3be8042

7 changed files with 45 additions and 117 deletions
Show stats Expand all files Collapse all files

12
src/_button.scss
View file

@ -1,4 +1,4 @@
@mixin button($color-bg, $color-text, $scale: 1) {
@mixin button($color-bg, $color-text) {
display: flex;
flex-direction: row;
align-items: center;
@ -9,14 +9,8 @@
text-decoration: none;
opacity: 0.8;
background-color: $color-bg;
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)
);
padding: 0.5rem 1rem;
clip-path: var(--clip-path-button);
transition: all var(--animation-speed) var(--animation-type);
user-select: none;

24
src/_vars.scss
View file

@ -7,27 +7,3 @@ $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,15 +1,39 @@
@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: $color-bg;
color: $color-text;
background-color: var(--color-bg);
color: var(--color-text);
min-width: $min-w-supported;
}
@ -89,8 +113,8 @@ body {
.pagefind-ui__drawer {
position: absolute;
z-index: var(--z-index-modal);
background-color: $color-bg;
box-shadow: $shadow-medium;
background-color: var(--color-bg);
box-shadow: var(--shadow-medium);
padding: 2rem;
border: $border;
border-top: 0;

2
src/lib/Button.svelte
View file

@ -21,7 +21,7 @@
}
/* Disabled */
button[disabled] {
button {
opacity: 0.6;
cursor: unset;
}

2
src/routes/Footer.svelte
View file

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

70
src/routes/Header.svelte
View file

@ -6,19 +6,11 @@
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>
@ -29,31 +21,18 @@
<img
src={Jpeg}
class="circle"
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."
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."
/>
</picture>
</a>
<Spacer />
<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;
@ -68,50 +47,6 @@
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;
@ -121,4 +56,7 @@
min-width: 6rem;
min-height: 3rem;
}
#search {
min-width: 1rem;
}
</style>

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

@ -46,18 +46,14 @@
</ul>
<div class="pagination-controls">
<Button disabled={data.page < 3} href={'/posts/'}
><ArrowLineLeft aria-label="first page" /></Button
>
<Button disabled={data.page < 3} href={'/posts/'}><ArrowLineLeft /></Button>
<Button disabled={data.page === 1} href={data.page === 2 ? '/posts/' : `/posts/${data.page - 1}`}
><ArrowLeft aria-label="previous page" /></Button
><ArrowLeft /></Button
>
<span class="current-page">{data.page}</span>
<Button disabled={!data.hasMore} href="/posts/{data.page + 1}"
><ArrowRight aria-label="next page" /></Button
>
<Button disabled={!data.hasMore} href="/posts/{data.page + 1}"><ArrowRight /></Button>
<Button disabled={data.page > data.pageCount - 2} href="/posts/{data.pageCount}"
><ArrowLineRight aria-label="last page" /></Button
><ArrowLineRight /></Button
>
</div>
@ -66,7 +62,7 @@
/* Restore the color of everything under the post links, except the titles */
.posts a {
color: $color-text;
color: var(--color-text);
}
.posts a .post-title {
color: $color-primary;