joakim/jnss-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New copy and linkcards

Browse Source
This commit is contained in:
Joakim
2025-12-23 18:16:22 +01:00
parent aa50bbc062
commit f352fed7fd
9 changed files with 90 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app.css
View File

@@ -1,3 +1,17 @@
:root {
--text-color-primary: black;
--border-radius: 8px;
--border-color: black;
--border-size: 2px;
--spacing30: 0.5rem;
--spacing40: 0.75rem;
--spacing50: 1rem;
--spacing60: 1.25rem;
--spacing70: 1.5rem;
}
*,
*::before,
*::after {

1
src/lib/assets/chart.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M96 96C113.7 96 128 110.3 128 128L128 464C128 472.8 135.2 480 144 480L544 480C561.7 480 576 494.3 576 512C576 529.7 561.7 544 544 544L144 544C99.8 544 64 508.2 64 464L64 128C64 110.3 78.3 96 96 96zM304 160C310.7 160 317.1 162.8 321.7 167.8L392.8 245.3L439 199C448.4 189.6 463.6 189.6 472.9 199L536.9 263C541.4 267.5 543.9 273.6 543.9 280L543.9 392C543.9 405.3 533.2 416 519.9 416L215.9 416C202.6 416 191.9 405.3 191.9 392L191.9 280C191.9 274 194.2 268.2 198.2 263.8L286.2 167.8C290.7 162.8 297.2 160 303.9 160z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 763 B

1
src/lib/assets/git-branch.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M176 168C189.3 168 200 157.3 200 144C200 130.7 189.3 120 176 120C162.7 120 152 130.7 152 144C152 157.3 162.7 168 176 168zM256 144C256 176.8 236.3 205 208 217.3L208 288L384 288C410.5 288 432 266.5 432 240L432 217.3C403.7 205 384 176.8 384 144C384 99.8 419.8 64 464 64C508.2 64 544 99.8 544 144C544 176.8 524.3 205 496 217.3L496 240C496 301.9 445.9 352 384 352L208 352L208 422.7C236.3 435 256 463.2 256 496C256 540.2 220.2 576 176 576C131.8 576 96 540.2 96 496C96 463.2 115.7 435 144 422.7L144 217.4C115.7 205 96 176.8 96 144C96 99.8 131.8 64 176 64C220.2 64 256 99.8 256 144zM488 144C488 130.7 477.3 120 464 120C450.7 120 440 130.7 440 144C440 157.3 450.7 168 464 168C477.3 168 488 157.3 488 144zM176 520C189.3 520 200 509.3 200 496C200 482.7 189.3 472 176 472C162.7 472 152 482.7 152 496C152 509.3 162.7 520 176 520z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
src/lib/assets/vault.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M128 96C92.7 96 64 124.7 64 160L64 480C64 515.3 92.7 544 128 544C128 561.7 142.3 576 160 576C177.7 576 192 561.7 192 544L448 544C448 561.7 462.3 576 480 576C497.7 576 512 561.7 512 544C547.3 544 576 515.3 576 480L576 160C576 124.7 547.3 96 512 96L128 96zM320 320C320 284.7 291.3 256 256 256C220.7 256 192 284.7 192 320C192 355.3 220.7 384 256 384C291.3 384 320 355.3 320 320zM128 320C128 249.3 185.3 192 256 192C326.7 192 384 249.3 384 320C384 390.7 326.7 448 256 448C185.3 448 128 390.7 128 320zM512 272C512 289.8 502.3 305.3 488 313.6L488 392C488 405.3 477.3 416 464 416C450.7 416 440 405.3 440 392L440 313.6C425.7 305.3 416 289.8 416 272C416 245.5 437.5 224 464 224C490.5 224 512 245.5 512 272z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 950 B

45
src/lib/components/LinkCards.svelte Normal file
View File

@@ -0,0 +1,45 @@
<script>
import Cloud from "$lib/assets/cloud.svg?component";
import Vault from "$lib/assets/vault.svg?component";
import GitBranch from "$lib/assets/git-branch.svg?component";
import Metrics from "$lib/assets/chart.svg?component";
</script>
<div >
<a href="https://cloud.jnss.me"><Cloud /><span>Cloud</span></a>
<a href="https://git.jnss.me"><GitBranch /><span>Git</span></a>
<a href="https://vault.jnss.me"><Vault /><span>Vault</span></a>
<a href="https://metrics.jnss.me"><Metrics /><span>Metrics</span></a>
</div>
<style>
div {
--card-size: 150px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing50);
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing50);
gap: var(--spacing30);
width: var(--card-size);
height: var(--card-size);
color: var(--text-color-primary);
border: var(--border-size) solid var(--border-color);
border-radius: var(--border-radius);
span {
font-size: 1.25rem;
}
}
}
</style>

4
src/routes/+layout.svelte
View File

@@ -19,7 +19,9 @@
:global {
body {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-columns:
minmax(var(--spacing50), auto) minmax(auto, 800px)
minmax(var(--spacing50), auto);
}
}
</style>

45
src/routes/+page.svelte
View File

@@ -1,47 +1,30 @@
<script>
// svelte-ignore
import Cloud from "$lib/assets/cloud.svg?component";
import LinkCards from "$lib/components/LinkCards.svelte";
</script>
<div class="hero">
<h1>Joakim N. S. Schäffer</h1>
<p>Privat, personlig og sikker sky.</p>
</div>
<div class="nav">
<div class="cloud"><Cloud /> <span>Cloud</span></div>
<div class="git"><span>Git</span></div>
<div class="vault"><span>Vault</span></div>
<h1>Privat &amp sikker sky</h1>
<div>
<blockquote>Så dere himmelen i dag? Snakker om blå!</blockquote>
<p class="attr">- Kronk, <cite>Kongerike for en lama</cite></p>
</div>
<p>Internet slik det burde være; privat, personlig og sikkert. Ditt!</p>
</div>
<LinkCards />
<style>
.hero {
text-align: center;
padding-block: var(--spacing60);
margin-block: var(--spacing70);
h1 {
text-align: center;
margin-block: var(--spacing50);
}
}
.nav {
--card-min-size: 100px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing50);
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing40);
min-width: var(--card-min-size);
min-height: var(--card-min-size);
border: var(--border-size) solid var(--border-color);
border-radius: var(--border-radius);
text-align: center;
font-size: 1.25rem;
margin-block: var(--spacing40);
}
}
</style>