add more text and use inter as font
This commit is contained in:
parent
b834f8a6b7
commit
df7ac1680d
@ -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>
|
||||
|
13
src/Main.tsx
13
src/Main.tsx
@ -8,10 +8,17 @@ export const Main: FC = () => {
|
||||
<>
|
||||
<Header />
|
||||
<main class="middle-flex">
|
||||
<h1>RoBaertschi</h1>
|
||||
<h1>Robin Bä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 />
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user