Trivernis
/
website-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add socials and links

Browse Source
main
trivernis 3 months ago
parent 0b1afda9aa
commit 9fd6e9e1a6
Signed by: Trivernis
GPG Key ID: 7E6D18B61C8D2F4B
5 changed files with 234 additions and 92 deletions
Show Stats Download Patch File Download Diff File

149
src/components/atoms/Box.svelte
Unescape Escape View File

@ -1,9 +1,15 @@
<script lang="ts">
export let color = "primary"
export let color = "primary";
export let title: string | undefined = undefined;
export let margin: "slim" | "medium" | "wide" = "medium";
</script>
<div class="box" class:with-title={title} style={`--box-color: var(--color-${color})`}>
<div
class={["box", `margin-${margin}`].join(" ")}
class:with-title={title}
style={`--box-color: var(--color-${color})`}
>
{#if title}
<div class="box-title">
<div class="border-left"></div>
@ -13,77 +19,100 @@
<div class="border-right"></div>
</div>
{/if}
<slot/>
<slot />
</div>
<style lang="scss">
@layer component {
.box {
position: relative;
--box-border-color: color-mix(in srgb, var(--box-color), #fff 65%);
--box-text-color: color-mix(in srgb, var(--box-color), var(--color-foreground) 90%);
padding: 1em;
border: 5px solid var(--box-border-color);
border-radius: 10px;
margin: auto;
height: auto;
width: 100%;
box-shadow: 0 0 20px var(--box-color), inset 0 0 20px var(--box-color);
&.with-title {
margin-top: 2em;
border-top: transparent;
padding-top: 1.25em;
}
@layer component {
.box {
position: relative;
--box-border-color: color-mix(in srgb, var(--box-color), #fff 65%);
--box-text-color: color-mix(
in srgb,
var(--box-color),
var(--color-foreground) 90%
);
.box-title {
display: flex;
width: calc(100% + 10px);
flex-direction: row;
position: absolute;
top: 0;
left: -5px;
height: 1.5em;
font-size: 1.5em;
border: 5px solid var(--box-border-color);
border-radius: 10px;
margin: auto;
height: auto;
width: 100%;
box-shadow:
0 0 20px var(--box-color),
inset 0 0 20px var(--box-color);
&.with-title {
border-top: transparent;
margin-top: 2em;
.title-label {
transform: translateY(-1em);
padding: 0.25em;
border-radius: 10%;
color: var(--box-text-color);
text-shadow: 0 0 20px var(--box-color);
z-index: 99;
&.margin-slim {
padding-top: 1.25em;
}
&.margin-medium {
padding-top: 1.75em;
}
&.margin-wide {
padding-top: 2.25em;
}
}
.border-left {
width: 1.2em;
border-top-left-radius: 10px;
border-left: 5px solid var(--box-border-color);
&.margin-slim {
padding: 1em;
}
.border-right {
width: 100%;
border-top-right-radius: 10px;
border-right: 5px solid var(--box-border-color);
&.margin-medium {
padding: 1.5em;
}
.border-right, .border-left {
border-top: 5px solid var(--box-border-color);
&.margin-wide {
padding: 2em;
}
.left-end-cap, .right-end-cap {
width: 10px;
height: 7px;
transform: translateY(-1px);
background: var(--color-foreground);
z-index: 100;
.box-title {
display: flex;
width: calc(100% + 10px);
flex-direction: row;
position: absolute;
top: 0;
left: -5px;
height: 1.5em;
font-size: 1.5em;
border-radius: 10px;
.title-label {
transform: translateY(-1em);
padding: 0.25em;
border-radius: 10%;
color: var(--box-text-color);
text-shadow: 0 0 20px var(--box-color);
z-index: 99;
}
.border-left {
width: 1.2em;
border-top-left-radius: 10px;
border-left: 5px solid var(--box-border-color);
}
.border-right {
width: 100%;
border-top-right-radius: 10px;
border-right: 5px solid var(--box-border-color);
}
.border-right,
.border-left {
border-top: 5px solid var(--box-border-color);
}
.left-end-cap,
.right-end-cap {
width: 10px;
height: 7px;
transform: translateY(-1px);
background: var(--color-foreground);
z-index: 100;
}
}
}
}
}
</style>

58
src/components/atoms/ContainerDualColumn.svelte
Unescape Escape View File

@ -0,0 +1,58 @@
<script lang="ts">
export let leftWidth = "50%";
export let rightWidth = "50%";
</script>
<div
class="container"
style={`--column-left-width: ${leftWidth}; --column-right-width: ${rightWidth}`}
>
<div class="column-left">
<slot name="left" />
</div>
<div class="column-spacer" />
<div class="column-right">
<slot name="right" />
</div>
</div>
<style lang="scss">
@import "$lib/styles/mixins.scss";
@layer component {
.container {
transition-duration: 1s;
display: flex;
flex-direction: row;
@include portrait {
margin: 0 5%;
flex-direction: column;
}
.column-left {
width: var(--column-left-width);
@include portrait {
width: 100%;
}
}
.column-spacer {
width: 2em;
@include portrait {
display: none;
}
}
.column-right {
width: var(--column-right-width);
@include portrait {
width: 100%;
}
}
}
}
</style>

23
src/components/atoms/ContainerMedium.svelte
Unescape Escape View File

@ -0,0 +1,23 @@
<div class="container-medium">
<slot />
</div>
<style lang="scss">
@import "$lib/styles/mixins.scss";
@layer component {
.container-medium {
margin: 0 10%;
transition-duration: 1s;
display: block;
@include portrait {
margin: 0 5%;
}
@include landscape {
margin: 0 15%;
}
}
}
</style>

2
src/components/organisms/Header.svelte
Unescape Escape View File

@ -5,7 +5,7 @@
</script>
<div class="header">
<Box color="purple">
<Box color="purple" margin="slim">
<Navigation/>
</Box>
</div>

94
src/routes/+page.svelte
Unescape Escape View File

@ -1,26 +1,19 @@
<script>
import "$lib/vars.scss";
import Box from "../components/atoms/Box.svelte";
import ContainerSlim from "../components/atoms/ContainerSlim.svelte";
import ContainerDualColumn from "../components/atoms/ContainerDualColumn.svelte";
import ContainerMedium from "../components/atoms/ContainerMedium.svelte";
import Paragraph from "../components/atoms/Paragraph.svelte";
import Thumbnail from "../components/molecules/Thumbnail.svelte";
</script>
<ContainerSlim>
<ContainerMedium>
<h1>Welcome to my website</h1>
<Box title="About">
<div class="flex-row text-and-image">
<div class="text">
<Paragraph>
Heyyy. I'm a software developer and tinkerer from Germany. I do a lot
of stuff so this website is an attempt in providing an overview.
<br /><br />
Right now it's very much a work in progress as I'm figuring out how to
properly design a website (lol). But there's already some content to explore.
</Paragraph>
</div>
<div class="image">
<ContainerDualColumn leftWidth="65%" rightWidth="35%">
<Box slot="left" title="About">
<ContainerDualColumn leftWidth="34%" rightWidth="63%">
<Thumbnail
slot="left"
imageData={{
altText:
"A picture of Ferris, the Rust mascot. An orange crab plushie.",
@ -33,22 +26,61 @@
],
}}
/>
</div>
</div>
</Box>
</ContainerSlim>
<Paragraph slot="right">
Heyyy. I'm a software developer and tinkerer from Germany. I do a lot
of stuff so this website is an attempt in providing an overview.
<br /><br />
Right now it's very much a work in progress as I'm figuring out how to
properly design a website (lol). But there's already some content to explore.
</Paragraph>
</ContainerDualColumn>
</Box>
<div slot="right">
<Box title="Socials" color="green">
Fediverse: <code>@trivernis@social.funkyfish.cool</code>
<br>
Matrix: <code>@trivernis:trivernis.net</code>
Email: <code>me@trivernis.net</code>
</Box>
<Box title="Links" color="cyan">
<h3>My other Websites</h3>
<ul>
<li>
<a href="https://plantwiki.trivernis.net">Plantwiki</a>
(<a href="https://plantwiki.trivernis.dev">Dev</a>)
</li>
<li>
<a href="https://no-chromium.org">No Chromium</a>
</li>
</ul>
<style lang="scss">
.text-and-image {
.text {
display: box;
width: 63%;
margin-right: 3%;
}
<h3>Me on other Platforms</h3>
<ul>
<li>
<a href="https://github.com/trivernis">GitHub</a>
</li>
<li>
<a href="https://codeberg.org/trivernis">Codeberg</a>
</li>
</ul>
.image {
display: box;
width: 34%;
}
}
</style>
<h3>My selfhosted stuff</h3>
<ul>
<li>
<a href="https://git.trivernis.net">Forgejo</a>
</li>
<li>
<a href="https://social.funkyfish.cool">Sharkey (Fediverse)</a>
</li>
<li>
<a href="https://lychee.trivernis.net">Lychee</a>
</li>
<li>
<a href="https://search.trivernis.net">SearchXNG</a>
</li>
</ul>
</Box>
</div>
</ContainerDualColumn>
</ContainerMedium>

Write Preview
Loading…
Cancel
Save