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}>
|
||||
<article>
|
||||
<div class="hero-image">
|
||||
{heroImage && <Picture src={heroImage} alt="" width={752} />}
|
||||
</div>
|
||||
<div class="prose">
|
||||
<div class="title">
|
||||
<div class="date">
|
||||
<FormattedDate date={pubDate} />
|
||||
<article class="max-w-3xl mx-auto">
|
||||
{
|
||||
heroImage && (
|
||||
<div class="mb-12">
|
||||
<Picture
|
||||
src={heroImage}
|
||||
alt=""
|
||||
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 && (
|
||||
<div class="last-updated-on">
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||
Last updated on <FormattedDate date={updatedDate} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<h1>{title}</h1>
|
||||
<p>{readingTime}</p>
|
||||
<hr />
|
||||
|
||||
<h1 class="font-bold tracking-tight text-gray-900 dark:text-white">
|
||||
{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>
|
||||
<slot />
|
||||
</div>
|
||||
</article>
|
||||
</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>
|
||||
<h1 class="text-4xl sm:text-5xl">Hi, my name is Alex!</h1>
|
||||
<p>
|
||||
I am a software engineer, Linux enthusiast and a friend of lightweight,
|
||||
resilient systems.
|
||||
</p>
|
||||
<p>
|
||||
My journey in the tech world has been a dynamic one. I've immersed
|
||||
myself in countless projects spanning various video games and, for the
|
||||
past few years, have been maintaining a small homelab, which ignited my
|
||||
passion for DevOps / SRE. I am a privacy enthusiast and advocate for
|
||||
non-invasive software. Occasionally, I channel my creativity into
|
||||
building sleek web applications that prioritize efficiency and adhere to
|
||||
web standards and best practices.
|
||||
</p>
|
||||
<p>
|
||||
I currently work as a software engineer at <Link href="https://tv1.eu"
|
||||
>TV1 GmbH</Link
|
||||
>, a company that provides innovative live streaming and communication
|
||||
solutions. In my free time, I am pursuing my Master's degree in computer
|
||||
science at <Link href="https://www.tum.de/">TUM</Link>, where I
|
||||
contribute to various research papers.
|
||||
</p>
|
||||
<h1 class="">Hi, my name is Alex!</h1>
|
||||
<p>
|
||||
I am a software engineer, Linux enthusiast and a friend of lightweight,
|
||||
resilient systems.
|
||||
</p>
|
||||
<p>
|
||||
My journey in the tech world has been a dynamic one. I've immersed myself in
|
||||
countless projects spanning various video games and, for the past few years,
|
||||
have been maintaining a small homelab, which ignited a passion for
|
||||
automating infrastructure. I am a privacy enthusiast and advocate for
|
||||
non-invasive software. Occasionally, I channel my creativity into building
|
||||
sleek web applications that prioritize efficiency and adhere to web
|
||||
standards and best practices.
|
||||
</p>
|
||||
<p>
|
||||
I currently work as a software engineer at <Link href="https://tv1.eu"
|
||||
>TV1 GmbH</Link
|
||||
>, a company that provides innovative live streaming and communication
|
||||
solutions. Soon, I will have finished a Master's degree in computer science
|
||||
at <Link href="https://www.tum.de/">TUM</Link>, where I contribute to
|
||||
various research papers.
|
||||
</p>
|
||||
|
||||
<h2 class="my-8">Skills</h2>
|
||||
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
||||
<strong>Core stack:</strong><br />
|
||||
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>
|
||||
<h2 class="mt-16">Skills</h2>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex-[0_1_calc(50%-0.5rem)]">
|
||||
<strong>Core stack:</strong><br />
|
||||
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>
|
||||
</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.
|
||||
https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
|
||||
|
|
@ -12,34 +49,9 @@ body {
|
|||
background-size: 100% 600px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 20px;
|
||||
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,
|
||||
b {
|
||||
font-weight: 700;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue