Home page content, some more styling for headings & the page nav
This commit is contained in:
Lewis Dale
parent
d1e7085089
commit
422dfebe5d
@ -8,7 +8,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="wrapper-lg row space-between">
|
<header class="wrapper-lg row space-between">
|
||||||
<a href="/">L.D</a>
|
<a href="/" class="site-title">LD</a>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="row">
|
<ul class="row">
|
||||||
|
|||||||
8
src/_includes/post.njk
Normal file
8
src/_includes/post.njk
Normal 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
4
src/blog/index.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
---
|
||||||
|
title: Blog
|
||||||
|
layout: base.njk
|
||||||
|
---
|
||||||
11
src/blog/posts/first-post.md
Normal file
11
src/blog/posts/first-post.md
Normal 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
7
src/blog/posts/posts.11tydata.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"tags": [
|
||||||
|
"posts"
|
||||||
|
],
|
||||||
|
"permalink": "post/{{ title | slugify }}/",
|
||||||
|
"layout": "post.njk"
|
||||||
|
}
|
||||||
@ -1,15 +1,23 @@
|
|||||||
[class*="stack"] > * + * {
|
[class*="stack"] > * + * {
|
||||||
margin-block-start: var(--vertical-spacing, 1.5rem);
|
margin-block-start: var(--vertical-spacing, 1.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stack-sm {
|
.stack-sm {
|
||||||
--vertical-spacing: var(--space-size-s);
|
--vertical-spacing: var(--space-size-s);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stack-md {
|
.stack-md {
|
||||||
--vertical-spacing: var(--space-size-m);
|
--vertical-spacing: var(--space-size-m);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stack-lg {
|
.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
6
src/css/exceptions/site-title.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.site-title {
|
||||||
|
font-size: var(--text-size-xl);
|
||||||
|
letter-spacing: -0.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
@ -14,21 +14,24 @@ h5 {
|
|||||||
display: flex;
|
display: flex;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
gap: 1ch;
|
gap: 1ch;
|
||||||
line-height: 1.2;
|
line-height: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: var(--text-size-2xl);
|
font-size: var(--text-size-2xl);
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
|
text-underline-offset: var(--space-size-2xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: var(--text-size-xl);
|
font-size: var(--text-size-xl);
|
||||||
|
text-underline-offset: var(--space-size-3xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: var(--text-size-l);
|
font-size: var(--text-size-l);
|
||||||
|
text-underline-offset: var(--space-size-3xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@ -50,10 +53,24 @@ nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
padding-top: var(--space-size-s);
|
padding-top: var(--space-size-s);
|
||||||
padding-bottom: 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) {
|
@media (min-width: 50em) {
|
||||||
h1::before {
|
h1::before {
|
||||||
content: "#";
|
content: "#";
|
||||||
|
|||||||
@ -3,14 +3,18 @@ title: Home
|
|||||||
layout: base.njk
|
layout: base.njk
|
||||||
---
|
---
|
||||||
|
|
||||||
<main class="home wrapper-lg stack-md">
|
<main class="home wrapper-lg stack-2xl">
|
||||||
<section>
|
<section class="stack-md">
|
||||||
<h1>Hi, I'm Lewis</h1>
|
<h1>Hi, I'm Lewis</h1>
|
||||||
<ul>
|
<p>
|
||||||
<li>Software engineer</li>
|
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>.
|
||||||
<li>Cyclist</li>
|
</p>
|
||||||
<li>Dad</li>
|
<p>
|
||||||
</ul>
|
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>
|
||||||
<section>
|
<section>
|
||||||
<h2>Recent Posts</h2>
|
<h2>Recent Posts</h2>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user