151 lines
3.2 KiB
Svelte
151 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import Latest from '$lib/posts/PostsSummary.svelte';
|
|
import Header from '$lib/header.svelte';
|
|
import Emphasis from '$lib/highlights/emphasis.svelte';
|
|
import LatestPosts from '$lib/card-collections/LatestPosts.svelte';
|
|
import TagsCard from '$lib/card-collections/cards/TagsCard.svelte';
|
|
import Projects from '$lib/card-collections/Projects.svelte';
|
|
import Pixelfed from "$lib/feeds/pixelfed.svelte";
|
|
import type { PageData } from "../$types";
|
|
|
|
export let data: PageData;
|
|
|
|
const title: string = "Hi, I'm Fred";
|
|
const columnLength = 7;
|
|
</script>
|
|
|
|
<Header {title} />
|
|
<section id="welcome">
|
|
<div id="header-text">
|
|
<div id="text-content">
|
|
<p>
|
|
I enjoy creating websites and web applications, capturing landscapes through photography, and indulging in the world of model railways. Alongside these passions, I actively participate within the RMT Union.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div id="header-visual">
|
|
<picture>
|
|
<source srcset="/me/face-200.jxl" type="image/jxl" />
|
|
<source srcset="/me/face-200.webp" type="image/webp" />
|
|
<img src="/me/face-200.webp" alt="Just me" />
|
|
</picture>
|
|
</div>
|
|
</section>
|
|
<section id="meta-links">
|
|
<div id="pixelfed" class="col">
|
|
<h1>Photos</h1>
|
|
<Pixelfed pixelfedFeed={data.xml} />
|
|
</div>
|
|
<div id="posts" class="col">
|
|
<h1>Posts</h1>
|
|
<LatestPosts length={columnLength} />
|
|
</div>
|
|
<div id="tags" class="col">
|
|
<h1>Tags</h1>
|
|
<TagsCard />
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
#welcome {
|
|
display: flex;
|
|
flex-direction: column; /* Start with column layout for mobile */
|
|
align-items: center;
|
|
width: 100%;
|
|
background-color: var(--island-bg-color);
|
|
color: var(--island-txt-color);
|
|
margin: 0; /* Reset margin to ensure full width */
|
|
padding: 0; /* Reset padding to ensure full width */
|
|
box-sizing: border-box; /* Include padding and border in width calculation */
|
|
box-shadow: 0px 3px 2px rgba(0,0,0,0.19);
|
|
}
|
|
|
|
#header-text {
|
|
flex: 1;
|
|
max-width: 100%;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
#text-content {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#text-content p {
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#header-visual {
|
|
order: -1;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
margin: auto;
|
|
margin-top: 10px;
|
|
border-radius: 100px;
|
|
border: none;
|
|
max-height: 150px;
|
|
height: 30vw;
|
|
box-shadow: 1px 1px 5px rgba(0,0,0,0.19);
|
|
}
|
|
|
|
/* Media query for larger screens */
|
|
@media (min-width: 768px) {
|
|
#welcome {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#header-visual {
|
|
order: 1;
|
|
flex: 0 0 30%;
|
|
display: flex;
|
|
align-items: center; /* Vertically center the content */
|
|
justify-content: center;
|
|
}
|
|
|
|
#header-text {
|
|
flex: 0 0 70%;
|
|
}
|
|
|
|
#text-content {
|
|
margin-left: 25px;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
img {
|
|
margin: 0; /* Remove any margin */
|
|
padding: 0; /* Remove any padding */
|
|
max-height: 150px;
|
|
height: 100%; /* Fill the height of the #header-visual container */
|
|
}
|
|
}
|
|
|
|
#meta-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
#meta-links {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
}
|
|
.col {
|
|
width: 30%;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-family: caprasimo;
|
|
font-weight: normal;
|
|
color: var(--main-heading-color);
|
|
}
|
|
</style>
|