fix: headline sizes
This commit is contained in:
parent
a31e367ef5
commit
a331872c79
5 changed files with 155 additions and 124 deletions
|
|
@ -13,64 +13,67 @@ const { title, description, pubDate, updatedDate, heroImage, readingTime } =
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title={title} description={description}>
|
<BaseLayout title={title} description={description}>
|
||||||
<article>
|
<article class="max-w-3xl mx-auto">
|
||||||
<div class="hero-image">
|
{
|
||||||
{heroImage && <Picture src={heroImage} alt="" width={752} />}
|
heroImage && (
|
||||||
</div>
|
<div class="mb-12">
|
||||||
<div class="prose">
|
<Picture
|
||||||
<div class="title">
|
src={heroImage}
|
||||||
<div class="date">
|
alt=""
|
||||||
<FormattedDate date={pubDate} />
|
width={752}
|
||||||
|
class="rounded-lg shadow-lg w-full object-cover aspect-[16/9] dark:shadow-gray-800/30 transition-transform hover:scale-[1.02]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="prose dark:prose-invert max-w-none">
|
||||||
|
<div class="space-y-2 text-center mb-12">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<time class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<FormattedDate date={pubDate} />
|
||||||
|
</time>
|
||||||
|
|
||||||
{
|
{
|
||||||
updatedDate && (
|
updatedDate && (
|
||||||
<div class="last-updated-on">
|
<div class="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||||
Last updated on <FormattedDate date={updatedDate} />
|
Last updated on <FormattedDate date={updatedDate} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<h1>{title}</h1>
|
|
||||||
<p>{readingTime}</p>
|
<h1 class="font-bold tracking-tight text-gray-900 dark:text-white">
|
||||||
<hr />
|
{title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center space-x-4 text-sm text-gray-600 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<span class="flex items-center">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-4 h-4 mr-1"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||||
|
</svg>
|
||||||
|
{readingTime} min read
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="w-32 mx-auto border-gray-200 dark:border-gray-800" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 text-gray-800 dark:text-gray-200">
|
||||||
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<slot />
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
||||||
<style>
|
|
||||||
main {
|
|
||||||
width: calc(100% - 2em);
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.hero-image {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.hero-image img {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
}
|
|
||||||
.prose {
|
|
||||||
color: rgb(var(--gray-dark));
|
|
||||||
text-wrap: pretty;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
padding: 1em 0;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.title h1 {
|
|
||||||
margin: 0 0 0.5em 0;
|
|
||||||
}
|
|
||||||
.date {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
color: rgb(var(--gray));
|
|
||||||
}
|
|
||||||
.last-updated-on {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -4,55 +4,54 @@ import BaseLayout from "../layouts/BaseLayout.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout>
|
<BaseLayout>
|
||||||
<h1 class="text-4xl sm:text-5xl">Hi, my name is Alex!</h1>
|
<h1 class="">Hi, my name is Alex!</h1>
|
||||||
<p>
|
<p>
|
||||||
I am a software engineer, Linux enthusiast and a friend of lightweight,
|
I am a software engineer, Linux enthusiast and a friend of lightweight,
|
||||||
resilient systems.
|
resilient systems.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
My journey in the tech world has been a dynamic one. I've immersed
|
My journey in the tech world has been a dynamic one. I've immersed myself in
|
||||||
myself in countless projects spanning various video games and, for the
|
countless projects spanning various video games and, for the past few years,
|
||||||
past few years, have been maintaining a small homelab, which ignited my
|
have been maintaining a small homelab, which ignited a passion for
|
||||||
passion for DevOps / SRE. I am a privacy enthusiast and advocate for
|
automating infrastructure. I am a privacy enthusiast and advocate for
|
||||||
non-invasive software. Occasionally, I channel my creativity into
|
non-invasive software. Occasionally, I channel my creativity into building
|
||||||
building sleek web applications that prioritize efficiency and adhere to
|
sleek web applications that prioritize efficiency and adhere to web
|
||||||
web standards and best practices.
|
standards and best practices.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
I currently work as a software engineer at <Link href="https://tv1.eu"
|
I currently work as a software engineer at <Link href="https://tv1.eu"
|
||||||
>TV1 GmbH</Link
|
>TV1 GmbH</Link
|
||||||
>, a company that provides innovative live streaming and communication
|
>, a company that provides innovative live streaming and communication
|
||||||
solutions. In my free time, I am pursuing my Master's degree in computer
|
solutions. Soon, I will have finished a Master's degree in computer science
|
||||||
science at <Link href="https://www.tum.de/">TUM</Link>, where I
|
at <Link href="https://www.tum.de/">TUM</Link>, where I contribute to
|
||||||
contribute to various research papers.
|
various research papers.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<h2 class="my-8">Skills</h2>
|
<h2 class="mt-16">Skills</h2>
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
<div class="flex flex-wrap gap-4">
|
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
||||||
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
<strong>Core stack:</strong><br />
|
||||||
<strong>Core stack:</strong><br />
|
Typescript/Node.js, Python, Rust, SQL, vanilla HTML/css
|
||||||
Typescript/Node.js, Python, Rust, SQL, vanilla HTML/css
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
|
||||||
<strong>Frontend:</strong><br />
|
|
||||||
NextJS, SvelteKit, Astro, Tailwind
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
|
||||||
<strong>Ops:</strong><br />
|
|
||||||
Prometheus, Docker, Kubernetes, AWS, Github/lab actions
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
|
||||||
<strong>Misc:</strong><br />
|
|
||||||
git, agile, REST, GraphQL, web performance, Linux sysadmin, Vitest
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
|
||||||
<strong>Languages:</strong><br />
|
|
||||||
German (native), English
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
||||||
|
<strong>Frontend:</strong><br />
|
||||||
|
NextJS, SvelteKit, Astro, Tailwind
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
||||||
|
<strong>Ops:</strong><br />
|
||||||
|
Prometheus, Docker, Kubernetes, AWS, Github/lab actions
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
||||||
|
<strong>Misc:</strong><br />
|
||||||
|
git, agile, REST, GraphQL, web performance, Linux sysadmin, Vitest
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
||||||
|
<strong>Languages:</strong><br />
|
||||||
|
German (native), English
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|
|
||||||
0
src/pages/projects/index.astro
Normal file
0
src/pages/projects/index.astro
Normal file
|
|
@ -1,3 +1,40 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
h1 {
|
||||||
|
@apply text-h1-mobile md:text-h1;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@apply text-h2-mobile md:text-h2;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
@apply text-h3-mobile md:text-h3;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
@apply text-h4-mobile md:text-h4;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
@apply text-h5-mobile md:text-h5;
|
||||||
|
}
|
||||||
|
h6 {
|
||||||
|
@apply text-h6-mobile md:text-h6;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
@apply mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply text-lg md:text-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
The CSS in this style tag is based off of Bear Blog's default CSS.
|
The CSS in this style tag is based off of Bear Blog's default CSS.
|
||||||
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
||||||
|
|
@ -12,34 +49,9 @@ body {
|
||||||
background-size: 100% 600px;
|
background-size: 100% 600px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
font-size: 20px;
|
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin: 0.5rem 0 0.5rem 0;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3.052em;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 2.441em;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 1.953em;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size: 1.563em;
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
strong,
|
strong,
|
||||||
b {
|
b {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,23 @@ export default {
|
||||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
|
fontSize: {
|
||||||
|
// Mobile sizes
|
||||||
|
"h1-mobile": ["2rem", { lineHeight: "1.2" }], // 32px
|
||||||
|
"h2-mobile": ["1.75rem", { lineHeight: "1.2" }], // 28px
|
||||||
|
"h3-mobile": ["1.5rem", { lineHeight: "1.2" }], // 24px
|
||||||
|
"h4-mobile": ["1.25rem", { lineHeight: "1.2" }], // 20px
|
||||||
|
"h5-mobile": ["1.1rem", { lineHeight: "1.2" }], // 17.6px
|
||||||
|
"h6-mobile": ["1rem", { lineHeight: "1.2" }], // 16px
|
||||||
|
|
||||||
|
// Desktop sizes
|
||||||
|
h1: ["3rem", { lineHeight: "1.2" }],
|
||||||
|
h2: ["2.7rem", { lineHeight: "1.2" }],
|
||||||
|
h3: ["2.25rem", { lineHeight: "1.2" }],
|
||||||
|
h4: ["2rem", { lineHeight: "1.2" }],
|
||||||
|
h5: ["1.75rem", { lineHeight: "1.2" }],
|
||||||
|
h6: ["1.5rem", { lineHeight: "1.2" }],
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
mytheme: {
|
mytheme: {
|
||||||
50: "#ecfcfb",
|
50: "#ecfcfb",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue