add more text and use inter as font

This commit is contained in:
Robin Bärtschi 2025-02-22 22:09:26 +01:00
parent b834f8a6b7
commit df7ac1680d
3 changed files with 39 additions and 8 deletions

View File

@ -14,6 +14,9 @@ function BaseDocument(props: SiteData) {
<meta charset="utf-8" />
<meta name="viewport" content='width=device-width, initial-scale=1' />
<link rel="stylesheet" href="/static/style.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<title>${props.title}</title>
</head>

View File

@ -8,10 +8,17 @@ export const Main: FC = () => {
<>
<Header />
<main class="middle-flex">
<h1>RoBaertschi</h1>
<h1>Robin rtschi</h1>
<article>
Hi 👋, my name is Robin, I am a computer scientist in apprenticeship @ <a href='https://swisscom.com'>Swisscom</a><br />
<article class="introduction">
{ /* HACK: DO NOT REMOVE THE SPACE AFTER THE CH OR ELSE THE EMOJI BREAKS FOR SOME FUCKING REASON */}
Hi 👋, my name is Robin, I am a computer scientist in apprenticeship and live in Switzerland 🇨🇭.<br />
I love to program in my freetime and play some games from time to time. I am also a huge linux nerd and use it on a daily basis.<br /><br />
Besides linux and programming, I also like playing Rogue-likes/lites (Balatro, Enter the Gungeon etc.), factory games (Factorio, Satisfactory) and Minecraft.<br />
I tend to not finish games and have a huge steam library of unfinished games, which I should finish someday. <br /><br />
I am currently working on a programming language called <a href="https://git.robaertschi.xyz/robaertschi/tt">tt</a> written in Go
</article>
</main>
<Footer />

View File

@ -11,25 +11,36 @@
--background100: rgb(var(--background));
--primary100: rgb(var(--primary));
--primary90: rgba(var(--primary), 90%);
--primary80: rgba(var(--primary), 80%);
--primary70: rgba(var(--primary), 70%);
--secondary100: rgb(var(--secondary));
--secondary90: rgba(var(--secondary), 90%);
--accent100: rgb(var(--accent));
--accent90: rgb(var(--accent), 90%);
--accent10: rgb(var(--accent), 10%);
}
body {
font-family: Arial, Helvetica, sans-serif;
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: normal;
font-style: normal;
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
color: var(--text100);
background-color: var(--background100);
font-size: 1.2em;
line-height: 1.2rem;
}
main {
height: 100%;
width: 100%;
}
.middle-flex {
@ -40,15 +51,15 @@ main {
}
a {
color: var(--text100);
color: var(--primary100);
}
a:hover {
color: var(--text90);
color: var(--accent100) !important;
}
a:visited {
color: var(--text100);
color: var(--primary70);
}
button.primary {
@ -71,13 +82,23 @@ button.primary:hover {
padding: 0.2rem;
}
.introduction {
max-width: 40%;
padding: 1.2em;
border-color: var(--secondary100);
border-style: solid;
border-radius: 0.5em;
border-width: 0.1em;
}
header {
border: 0;
padding: 1em;
border-bottom: 0.1em;
border-color: var(--secondary100);
border-style: solid;
width: 80%;
min-width: 80%;
max-width: 80%;
display: flex;
flex-direction: row;