Improve font style

main
trivernis 5 months ago
parent ae4237577c
commit 65ca568943
WARNING! Although there is a key with this ID in the database it does not verify this commit! This commit is SUSPICIOUS.
GPG Key ID: 7E6D18B61C8D2F4B

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="%lang%">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />

@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import "$lib/vars.scss";
export let color = "primary" export let color = "primary"
export let title: string | undefined = undefined; export let title: string | undefined = undefined;
</script> </script>
@ -23,6 +21,7 @@
.box { .box {
position: relative; position: relative;
--box-border-color: color-mix(in srgb, var(--box-color), #fff 65%); --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; padding: 1em;
border: 5px solid var(--box-border-color); border: 5px solid var(--box-border-color);
@ -33,6 +32,7 @@
box-shadow: 0 0 20px var(--box-color), inset 0 0 20px var(--box-color); box-shadow: 0 0 20px var(--box-color), inset 0 0 20px var(--box-color);
&.with-title { &.with-title {
margin-top: 2em;
border-top: transparent; border-top: transparent;
padding-top: 1.25em; padding-top: 1.25em;
} }
@ -54,9 +54,9 @@
.title-label { .title-label {
transform: translateY(-1em); transform: translateY(-1em);
padding: 0.25em; padding: 0.25em;
background-color: color-mix(in srgb, var(--color-background) 50%, transparent); border-radius: 10%;
border-radius: 50%; color: var(--box-text-color);
box-shadow: 0 0 20px var(--color-background); text-shadow: 0 0 20px var(--box-color);
z-index: 99; z-index: 99;
} }

@ -0,0 +1,14 @@
<div class="paragraph">
<slot/>
</div>
<style lang="scss">
@layer component {
.paragraph {
font-family: var(--font-readable);
hyphens: auto;
text-align: justify;
cursor: text;
}
}
</style>

@ -3,6 +3,7 @@
import "$lib/vars.scss"; import "$lib/vars.scss";
import Box from "../atoms/Box.svelte"; import Box from "../atoms/Box.svelte";
import Markdown from "../atoms/Markdown.svelte"; import Markdown from "../atoms/Markdown.svelte";
import Paragraph from "../atoms/Paragraph.svelte";
import Image from "../molecules/Image.svelte"; import Image from "../molecules/Image.svelte";
export let content: BlogPostContentEntry; export let content: BlogPostContentEntry;
@ -11,11 +12,16 @@
<div class="post-content"> <div class="post-content">
{#if content.__component === "content.text-markdown"} {#if content.__component === "content.text-markdown"}
{#if content.type === "paragraph"} {#if content.type === "paragraph"}
<Markdown markdown={content.value} /> <Box>
<Paragraph>
<Markdown markdown={content.value} />
</Paragraph>
</Box>
{:else if content.type === "infobox"} {:else if content.type === "infobox"}
<Box color="cyan"> <Box color="cyan" title="Info">
<b class="info-label">Info</b> <Paragraph>
<Markdown markdown={content.value} /> <Markdown markdown={content.value} />
</Paragraph>
</Box> </Box>
{/if} {/if}
{:else if content.__component === "content.image"} {:else if content.__component === "content.image"}

@ -1,9 +1,59 @@
@import url(sanitize.css); @import url(sanitize.css);
@import "$lib/vars.scss"; @import "$lib/vars.scss";
@font-face {
font-family: "Filo";
font-style: normal;
font-weight: 500;
src: local(""), url("/fonts/Filo/Filo.otf"), url("/fonts/Filo/Filo.ttf");
}
@font-face {
font-family: "GradientVector";
font-style: normal;
font-weight: 500;
src: local(""), url("/fonts/GradientVector/GradientVector.otf");
}
@font-face {
font-family: "Manifold";
font-style: normal;
font-weight: 500;
src: local(""), url("/fonts/Manifold/manifold.otf"), url("/fonts/Manifold/manifold.ttf");
}
@font-face {
font-family: "3270";
font-style: normal;
font-weight: 500;
src: local(""), url("/fonts/3270/3270SemiCondensed-Regular.otf"), url("/fonts/3270/3270SemiCondensed-Regular.ttf");
}
:root {
--color-background: #2B1C3D;
--color-background-light: #3A2A4D;
--color-foreground: #ffffff;
--color-foreground-tint: #ffd1f8;
--color-foreground-dim: #acbacd;
--color-primary: #ff79c6;
--color-purple: #bd93f9;
--color-cyan: #8be9fd;
--color-green: #50fa7b;
--color-red: #ff5555;
--color-orange: #ffb86c;
--color-yellow: #f1fa8c;
--color-image-frame: #fff;
--color-image-frame-text: #204;
--font-primary: Manifold, Lexend, Arial, Helvetica, sans-serif;
--font-readable: "3270", Lexend, Arial, Helvetica, sans-serif;
}
@layer default { @layer default {
body { body {
font-family: Lexend, Arial, Helvetica, sans-serif; font-family: var(--font-primary);
color: var(--color-foreground); color: var(--color-foreground);
background-color: var(--color-background); background-color: var(--color-background);
font-size: 14pt; font-size: 14pt;
@ -36,10 +86,3 @@
color: inherit; color: inherit;
} }
} }
@font-face {
font-family: "Filo";
font-style: normal;
font-weight: 500;
src: local(""), url("/fonts/Filo/Filo.ttf"), url("/fonts/Filo/Filo.otf");
}

@ -0,0 +1,8 @@
import type { Handle } from "@sveltejs/kit";
export const handle = (async ({ event, resolve }) => {
const lang = event.url.searchParams.get("lang") ?? "en";
return resolve(event, {
transformPageChunk: ({ html }) => html.replace("%lang%", lang),
});
}) satisfies Handle;

@ -4,6 +4,7 @@ import fetchApi from "./client";
export type BlogPostTeaser = { export type BlogPostTeaser = {
id: number; id: number;
attributes: { attributes: {
locale: string;
title: string; title: string;
createdAt: string; createdAt: string;
updatedAt: string; updatedAt: string;

@ -1,19 +1,3 @@
:root {
--color-background: #2B1C3D;
--color-background-light: #3A2A4D;
--color-foreground: #ffffff;
--color-foreground-tint: #ffd1f8;
--color-foreground-dim: #acbacd;
--color-primary: #ff79c6;
--color-purple: #bd93f9;
--color-cyan: #8be9fd;
--color-green: #50fa7b;
--color-red: #ff5555;
--color-orange: #ffb86c;
--color-yellow: #f1fa8c;
--color-image-frame: #fff;
--color-image-frame-text: #204;
}
@mixin mobile() { @mixin mobile() {
@media (max-width: 600px) { @media (max-width: 600px) {

@ -1,6 +1,7 @@
<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 Thumbnail from "../components/molecules/Thumbnail.svelte"; import Thumbnail from "../components/molecules/Thumbnail.svelte";
</script> </script>
@ -8,10 +9,13 @@
<Box title="About"> <Box title="About">
<div class="flex-row text-and-image"> <div class="flex-row text-and-image">
<div class="text"> <div class="text">
<p> <Paragraph>
Heyyy. I'm a software developer and tinkerer from Germany. I do a lot of 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. stuff so this website is an attempt in providing an overview.
</p> <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>
<div class="image"> <div class="image">
<Thumbnail <Thumbnail

@ -1,10 +1,8 @@
import { getPost, getPosts } from "$lib/cms/blog"; import { getPost, getPosts } from "$lib/cms/blog";
import { error } from "@sveltejs/kit"; import { error, redirect } from "@sveltejs/kit";
import type { PageLoad } from "./$types"; import type { PageServerLoad } from "./$types";
export const load: PageLoad = async ({ export const load: PageServerLoad = async ({ params }) => {
params,
}: { params: { slug: string } }) => {
try { try {
const slug = params.slug; const slug = params.slug;
const post = await getPost(slug); const post = await getPost(slug);
@ -16,7 +14,7 @@ export const load: PageLoad = async ({
} catch (err: any) { } catch (err: any) {
console.error(err); console.error(err);
return { return {
posts: [], post: undefined,
error: { error: {
message: "Could not load blog post :(", message: "Could not load blog post :(",
code: 500, code: 500,

@ -1,12 +1,32 @@
<script lang="ts"> <script lang="ts">
import { formatDateRelative } from "$lib"; import { formatDateRelative } from "$lib";
import { onMount } from "svelte";
import Box from "../../../components/atoms/Box.svelte"; import Box from "../../../components/atoms/Box.svelte";
import Error from "../../../components/molecules/Error.svelte"; import Error from "../../../components/molecules/Error.svelte";
import Thumbnail from "../../../components/molecules/Thumbnail.svelte"; import Thumbnail from "../../../components/molecules/Thumbnail.svelte";
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";
export let data: PageData; export let data: PageData;
onMount(() => {
if (!data.post) {
return;
}
const url = new URL(window.location.href);
const lang = url.searchParams.get("lang");
if (data.post.attributes.locale !== lang) {
document
.querySelector("html")
?.setAttribute("lang", data.post.attributes.locale);
}
});
beforeNavigate(() => {
document.querySelector("html")?.setAttribute("lang", "en");
});
</script> </script>
{#if data.post} {#if data.post}
@ -21,7 +41,11 @@
<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>in <a href={`/blog/collection/${collection.slug}`}>{collection?.name}</a></h4> <h4>
in <a href={`/blog/collection/${collection.slug}`}
>{collection?.name}</a
>
</h4>
{/if} {/if}
<span>{formatDateRelative(post.attributes.publishedAt)}</span> <span>{formatDateRelative(post.attributes.publishedAt)}</span>
</div> </div>
@ -37,12 +61,10 @@
{/if} {/if}
</Box> </Box>
</div> </div>
<Box> {#each post.attributes.content as contentEntry}
{#each post.attributes.content as contentEntry} <BlogPostContent content={contentEntry} />
<BlogPostContent content={contentEntry} /> {/each}
{/each} {:else if !data.error}
</Box>
{:else}
<Error error={{ message: "Could not find the post" }} /> <Error error={{ message: "Could not find the post" }} />
{/if} {/if}

@ -0,0 +1,49 @@
Copyright (c) 2011-2017, Ricardo Banffy.
Copyright (c) 1993-2011, Paul Mattes.
Copyright (c) 2004-2005, Don Russell.
Copyright (c) 2004, Dick Altenbern.
Copyright (c) 1990, Jeff Sparkes.
Copyright (c) 1989, Georgia Tech Research Corporation (GTRC), Atlanta, GA 30332.
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright notice,
this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* Neither the name of Ricardo Banffy, Paul Mattes, Don Russell,
Dick Altenbern, Jeff Sparkes, GTRC nor the names of their contributors
may be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
IN NO EVENT SHALL RICARDO BANFFY, PAUL MATTES, DON RUSSELL, DICK ALTENBERN, JEFF
SPARKES OR GTRC BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
The Debian Logo glyph is based on the Debian Open Use Logo and is
Copyright (c) 1999 Software in the Public Interest, Inc., and it is
incorporated here under the terms of the Creative Commons
Attribution-ShareAlike 3.0 Unported License. The logo is released
under the terms of the GNU Lesser General Public License, version 3 or
any later version, or, at your option, of the Creative Commons
Attribution-ShareAlike 3.0 Unported License.
Ubuntu, the Ubuntu logo and the Circle of Friends symbol are
registered trademarks of Canonical Ltd.
The Fontforge SFD font description file is optionally licensed under
the SIL Open Font License v1.1 with no Reserved Font Name. This
license is available with a FAQ at http://scripts.sil.org/OFL.

@ -0,0 +1,90 @@
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

@ -0,0 +1,93 @@
Copyright (c) 2024, George Arnold
(https://fontstruct.com/fontstructors/148542/bufb)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Loading…
Cancel
Save