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

Home page content, some more styling for headings & the page nav

Browse Source
This commit is contained in:
Lewis Dale 2023-02-07 09:29:01 +00:00
parent d1e7085089
commit 422dfebe5d
9 changed files with 79 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_includes/base.njk
View File

@ -8,7 +8,7 @@
</head>
<body>
<header class="wrapper-lg row space-between">
<a href="/">L.D</a>
<a href="/" class="site-title">LD</a>
<nav>
<ul class="row">

8
src/_includes/post.njk Normal file
View File

@ -0,0 +1,8 @@
---
layout: base.njk
---
<article class="wrapper-lg stack-md">
<h1><a href="{{ post.url }}">{{ title }}</a></h1>
{{ content | safe }}
</article>

4
src/blog/index.html Normal file
View File

@ -0,0 +1,4 @@
---
title: Blog
layout: base.njk
---

11
src/blog/posts/first-post.md Normal file
View File

@ -0,0 +1,11 @@
---
title: My first post
---
Something something something
## Something else
Some content in here
### A sub-subheading

7
src/blog/posts/posts.11tydata.json Normal file
View File

@ -0,0 +1,7 @@
{
"tags": [
"posts"
],
"permalink": "post/{{ title | slugify }}/",
"layout": "post.njk"
}

16
src/css/compositions/stack.css
View File

@ -1,15 +1,23 @@
[class*="stack"] > * + * {
margin-block-start: var(--vertical-spacing, 1.5rem);
margin-block-start: var(--vertical-spacing, 1.5rem);
}
.stack-sm {
--vertical-spacing: var(--space-size-s);
--vertical-spacing: var(--space-size-s);
}
.stack-md {
--vertical-spacing: var(--space-size-m);
--vertical-spacing: var(--space-size-m);
}
.stack-lg {
--vertical-spacing: var(--space-size-l);
--vertical-spacing: var(--space-size-l);
}
.stack-xl {
--vertical-spacing: var(--space-size-xl);
}
.stack-2xl {
--vertical-spacing: var(--space-size-2xl);
}

6
src/css/exceptions/site-title.css Normal file
View File

@ -0,0 +1,6 @@
.site-title {
font-size: var(--text-size-xl);
letter-spacing: -0.5rem;
line-height: 1;
text-decoration: none;
}

19
src/css/globals.css
View File

@ -14,21 +14,24 @@ h5 {
display: flex;
font-weight: bold;
gap: 1ch;
line-height: 1.2;
line-height: 1;
margin: 0;
}
h1 {
font-size: var(--text-size-2xl);
word-wrap: normal;
text-underline-offset: var(--space-size-2xs);
}
h2 {
font-size: var(--text-size-xl);
text-underline-offset: var(--space-size-3xs);
}
h3 {
font-size: var(--text-size-l);
text-underline-offset: var(--space-size-3xs);
}
a {
@ -50,10 +53,24 @@ nav {
}
header {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: var(--space-size-s);
padding-bottom: var(--space-size-s);
}
p {
line-height: 1.4;
max-width: 50ch;
}
footer {
padding-top: var(--space-size-l);
width: 100vw;
}
@media (min-width: 50em) {
h1::before {
content: "#";

18
src/index.html
View File

@ -3,14 +3,18 @@ title: Home
layout: base.njk
---
<main class="home wrapper-lg stack-md">
<section>
<main class="home wrapper-lg stack-2xl">
<section class="stack-md">
<h1>Hi, I'm Lewis</h1>
<ul>
<li>Software engineer</li>
<li>Cyclist</li>
<li>Dad</li>
</ul>
<p>
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>
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.
</p>
<p>
You can find also find me on <a href="https://dapchat.online/@lewisdaleuk" rel="me" target="blank">Mastodon</a>, follow my reading on <a href="https://bookrastinating.com/user/lewisdaleuk">Bookwyrm</a>, subscribe to my <a href="/feed.xml">RSS feed</a>, or email me at <a href="mailto:hello@lewiswrites.software">hello@lewiswrites.software</a>.
</p>
</section>
<section>
<h2>Recent Posts</h2>