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

Move slim layout to slim container

Browse Source
main
trivernis 3 months ago
parent 65ca568943
commit 0b1afda9aa
Signed by: Trivernis
GPG Key ID: 7E6D18B61C8D2F4B
6 changed files with 150 additions and 113 deletions
Show Stats Download Patch File Download Diff File

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

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

18
src/lib/styles/mixins.scss
Unescape Escape View File

@ -0,0 +1,18 @@
@mixin mobile() {
@media (max-width: 600px) {
@content;
}
}
@mixin landscape() {
@media (min-aspect-ratio: 16/11) {
@content;
}
}
@mixin portrait() {
@media (max-aspect-ratio: 10/16) {
@content;
}
}

13
src/routes/+layout.svelte
Unescape Escape View File

@ -30,19 +30,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content {
margin: 0 20%;
transition-duration: 1s;
display: block;
@include portrait {
margin: 0 5%;
}
@include landscape {
margin: 0 25%;
}
}
.footer-position { .footer-position {
margin: 0; margin: 0;

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

@ -1,39 +1,42 @@
<script> <script>
import "$lib/vars.scss"; import "$lib/vars.scss";
import Box from "../components/atoms/Box.svelte"; import Box from "../components/atoms/Box.svelte";
import Paragraph from "../components/atoms/Paragraph.svelte"; import ContainerSlim from "../components/atoms/ContainerSlim.svelte";
import Paragraph from "../components/atoms/Paragraph.svelte";
import Thumbnail from "../components/molecules/Thumbnail.svelte"; import Thumbnail from "../components/molecules/Thumbnail.svelte";
</script> </script>
<h1>Welcome to my website</h1> <ContainerSlim>
<Box title="About"> <h1>Welcome to my website</h1>
<div class="flex-row text-and-image"> <Box title="About">
<div class="text"> <div class="flex-row text-and-image">
<Paragraph> <div class="text">
Heyyy. I'm a software developer and tinkerer from Germany. I do a lot of <Paragraph>
stuff so this website is an attempt in providing an overview. Heyyy. I'm a software developer and tinkerer from Germany. I do a lot
<br><br> of stuff so this website is an attempt in providing an overview.
Right now it's very much a work in progress as I'm figuring out how to <br /><br />
properly design a website (lol). But there's already some content to explore. Right now it's very much a work in progress as I'm figuring out how to
</Paragraph> properly design a website (lol). But there's already some content to explore.
</Paragraph>
</div>
<div class="image">
<Thumbnail
imageData={{
altText:
"A picture of Ferris, the Rust mascot. An orange crab plushie.",
formats: [
{
name: "original",
mime: "image/jpeg",
url: "/images/profile.jpg",
},
],
}}
/>
</div>
</div> </div>
<div class="image"> </Box>
<Thumbnail </ContainerSlim>
imageData={{
altText:
"A picture of Ferris, the Rust mascot. An orange crab plushie.",
formats: [
{
name: "original",
mime: "image/jpeg",
url: "/images/profile.jpg",
},
],
}}
/>
</div>
</div>
</Box>
<style lang="scss"> <style lang="scss">
.text-and-image { .text-and-image {

17
src/routes/blog/+page.svelte
Unescape Escape View File

@ -2,16 +2,19 @@
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import Error from "../../components/molecules/Error.svelte"; import Error from "../../components/molecules/Error.svelte";
import BlogPostTeaser from "../../components/organisms/BlogPostTeaser.svelte"; import BlogPostTeaser from "../../components/organisms/BlogPostTeaser.svelte";
import ContainerSlim from "../../components/atoms/ContainerSlim.svelte";
export let data: PageData; export let data: PageData;
</script> </script>
<h1>Blog</h1> <ContainerSlim>
<h1>Blog</h1>
{#each data.posts ?? [] as post} {#each data.posts ?? [] as post}
<BlogPostTeaser {post} /> <BlogPostTeaser {post} />
{/each} {/each}
{#if data.error} {#if data.error}
<Error error={data.error} /> <Error error={data.error} />
{/if} {/if}
</ContainerSlim>

131
src/routes/blog/[slug]/+page.svelte
Unescape Escape View File

@ -7,6 +7,7 @@
import BlogPostContent from "../../../components/organisms/BlogPostContent.svelte"; import BlogPostContent from "../../../components/organisms/BlogPostContent.svelte";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import { beforeNavigate } from "$app/navigation"; import { beforeNavigate } from "$app/navigation";
import ContainerSlim from "../../../components/atoms/ContainerSlim.svelte";
export let data: PageData; export let data: PageData;
@ -29,75 +30,77 @@
}); });
</script> </script>
{#if data.post} <ContainerSlim>
{@const post = data.post} {#if data.post}
{@const author = data.post.attributes.author.data?.attributes} {@const post = data.post}
{@const teaserImage = data.post.attributes.teaserImage.data?.attributes} {@const author = data.post.attributes.author.data?.attributes}
{@const collection = data.post.attributes.collection.data?.attributes} {@const teaserImage = data.post.attributes.teaserImage.data?.attributes}
{@const collection = data.post.attributes.collection.data?.attributes}
<div class="blog-entry-head"> <div class="blog-entry-head">
<Box> <Box>
<div class="head-text"> <div class="head-text">
<h1>{post.attributes.title}</h1> <h1>{post.attributes.title}</h1>
<h3>by {author?.name}</h3> <h3>by {author?.name}</h3>
{#if collection} {#if collection}
<h4> <h4>
in <a href={`/blog/collection/${collection.slug}`} in <a href={`/blog/collection/${collection.slug}`}
>{collection?.name}</a >{collection?.name}</a
> >
</h4> </h4>
{/if} {/if}
<span>{formatDateRelative(post.attributes.publishedAt)}</span> <span>{formatDateRelative(post.attributes.publishedAt)}</span>
</div>
{#if post.attributes.teaserImage.data}
<div class="head-thumbnail">
<Thumbnail
imageData={{
altText: teaserImage.alternativeText,
formats: Object.values(teaserImage.formats),
}}
/>
</div> </div>
{/if} {#if post.attributes.teaserImage.data}
</Box> <div class="head-thumbnail">
</div> <Thumbnail
{#each post.attributes.content as contentEntry} imageData={{
<BlogPostContent content={contentEntry} /> altText: teaserImage.alternativeText,
{/each} formats: Object.values(teaserImage.formats),
{:else if !data.error} }}
<Error error={{ message: "Could not find the post" }} /> />
{/if} </div>
{/if}
</Box>
</div>
{#each post.attributes.content as contentEntry}
<BlogPostContent content={contentEntry} />
{/each}
{:else if !data.error}
<Error error={{ message: "Could not find the post" }} />
{/if}
{#if data.error} {#if data.error}
<Error error={data.error} /> <Error error={data.error} />
{/if} {/if}
<style lang="scss"> <style lang="scss">
.blog-entry-head { .blog-entry-head {
position: relative; position: relative;
margin: 0; margin: 0;
margin-bottom: 1em; margin-bottom: 1em;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
border-radius: 10px; border-radius: 10px;
.head-text { .head-text {
width: 100%; width: 100%;
z-index: 100; z-index: 100;
padding: 1em; padding: 1em;
h1 { h1 {
margin-top: 0; margin-top: 0;
}
&* {
text-align: center;
}
} }
&* { .head-thumbnail {
text-align: center; position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -100;
} }
} }
.head-thumbnail { </style>
position: absolute; </ContainerSlim>
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -100;
}
}
</style>

Write Preview
Loading…
Cancel
Save