lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix image sizing & scaling on home page

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/css/compositions/row.css
View File

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

6
src/css/exceptions/home.css
View File

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

2
src/css/globals.css
View File

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

4
src/index.html
View File

@ -4,15 +4,13 @@ layout: base.njk
--- ---
<main class="home wrapper-lg stack-2xl"> <main class="home wrapper-lg stack-2xl">
<section class="stack-md"> <section class="stack-md row">
<h1>Hi, I'm Lewis</h1> <h1>Hi, I'm Lewis</h1>
<p class="inline-block max-w-[45ch]"> <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>. 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> </p>
<div class="inline-block max-w-[10rem] ml-[2rem]">
{% image "src/images/me.jpg", "My face", "box circle" %} {% image "src/images/me.jpg", "My face", "box circle" %}
</div>
<p> <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. 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.