Fix image sizing & scaling on home page

This commit is contained in:
Lewis Dale 2023-02-08 08:38:59 +00:00
parent c9a21c9060
commit 5a69cde9c3
4 changed files with 10 additions and 5 deletions

View File

@ -2,4 +2,5 @@
display: flex;
flex-direction: row;
gap: var(--vertical-spacing, 1rem);
flex-wrap: wrap;
}

View File

@ -10,4 +10,10 @@
h1 {
font-size: var(--text-size-3xl);
}
picture {
max-width: clamp(8rem, calc(1.09rem + 10vw), 12rem);
margin-left: auto;
margin-right: auto;
}
}

View File

@ -1,5 +1,5 @@
body {
background-color: var(--color-blueGray-800);
background-color: var(--color-slate-800);
color: var(--color-slate-200);
font-family: var(--font-family-mono);
font-size: var(--text-size-s);

View File

@ -4,15 +4,13 @@ layout: base.njk
---
<main class="home wrapper-lg stack-2xl">
<section class="stack-md">
<section class="stack-md row">
<h1>Hi, I'm Lewis</h1>
<p class="inline-block max-w-[45ch]">
I'm a software engineer who loves building things for the web. I consider myself a generalist, but on a given day I'll probably be working with Typescript, HTML and CSS, and on occasion a touch of .NET. I work for <a href="https://triptease.com" target="_blank" rel="noreferrer">Triptease</a> as a Senior Software Engineer, and on the side I'm learning Rust by building a <a href="/blog/category/basic">Sinclair BASIC Interpreter</a>.
</p>
<div class="inline-block max-w-[10rem] ml-[2rem]">
{% image "src/images/me.jpg", "My face", "box circle" %}
</div>
<p>
When I'm not working I love cycling, reading fiction (mostly sci-fi and ghost stories), and spending time with my family & our border collie.