Some more style changes for essays
This commit is contained in:
parent
459569ecf7
commit
63ab56d0b3
6 changed files with 40 additions and 39 deletions
|
|
@ -10,7 +10,7 @@
|
|||
<main>
|
||||
<article class="essay">
|
||||
<header>
|
||||
<h1 class="title">{{ page.data.title }}</h1>
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<span>Posted on {{ page.date | formatDate }}</span>
|
||||
</header>
|
||||
<div class="content">
|
||||
|
|
|
|||
|
|
@ -11,21 +11,19 @@
|
|||
|
||||
<main>
|
||||
{%- for post in collections.essays | reverse -%}
|
||||
<section class="thought">
|
||||
<div class="essay">
|
||||
<header>
|
||||
<img class="hash" src="/assets/document.svg" type="image/svg+xml">
|
||||
<span>{{ post.data.title }}</span>
|
||||
<a href="{{ post.url }}" class="link">
|
||||
<img src="/assets/link.svg" type="image/svg+xml">
|
||||
</a>
|
||||
<a class="title" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||
</header>
|
||||
<div class="content">
|
||||
{{ post.page.excerpt | safe }}
|
||||
<a class="read-more" href="{{ post.url }}">Read more...</a>
|
||||
</div>
|
||||
<footer>
|
||||
Posted on {{ post.date | formatDate }}
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</main>
|
||||
{%- endblock -%}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
---
|
||||
title: Hacking a TTRPG
|
||||
---
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet ante turpis. Pellentesque vitae diam euismod, venenatis magna eget, gravida eros. Suspendisse scelerisque justo sit amet magna tincidunt facilisis. Duis facilisis ligula et libero cursus, malesuada sollicitudin ex congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent lobortis consequat consequat. Nam ac lacus in ipsum volutpat laoreet. Pellentesque pellentesque risus sit amet mi aliquam consequat. Curabitur dignissim urna tellus, sit amet porttitor sem scelerisque finibus. Etiam tortor velit, consectetur a libero ut, pretium porta quam. Curabitur et risus id leo pharetra elementum nec sit amet diam.
|
||||
I like to think of myself as a hacker by the old-school definition: I like to take things apart, figure out how they work, and put it all back together in new and interesting ways. (Maybe that just makes me a tinkerer, or a pain-in-the-ass, I don't know...) Take this blog, for example! I could have used an off-the-shelf static-site generator to create this blog, but instead I felt compelled to build it from scratch using EleventyJS. And in that spirit I have been thinking about creating my own table-top RPG. Not for commercial success—though wouldn't that be nice—but to scratch the itch of curiosity.
|
||||
|
||||
<!-- excerpt -->
|
||||
|
||||
Nam suscipit dui non urna venenatis dignissim. Aliquam malesuada sollicitudin leo sit amet tempus. Aenean elit mi, rutrum in cursus at, laoreet eget ex. Donec mollis dui neque, ut efficitur risus rutrum nec. Nullam et tellus libero. In blandit consectetur nisl id rhoncus. Curabitur nec orci et magna vestibulum hendrerit sit amet quis arcu. Nunc eget suscipit risus. Etiam ipsum erat, vestibulum quis est quis, pharetra tincidunt est. Vestibulum vitae mauris erat. Mauris non magna id neque consequat bibendum. Proin sodales rutrum felis. Vivamus laoreet nunc a sodales rutrum.
|
||||
|
||||
Suspendisse fermentum sit amet nibh sed suscipit. Aliquam erat volutpat. Donec massa arcu, aliquam gravida euismod a, ultrices ac elit. Morbi consequat lectus quis vehicula pharetra. Proin maximus maximus elit ac porta. Nam gravida, quam nec maximus maximus, odio risus ullamcorper felis, vitae malesuada dui massa ut enim. Nulla scelerisque sagittis posuere. Praesent varius magna sed odio fringilla semper. Aliquam ligula massa, gravida at pulvinar vitae, hendrerit non lacus. Curabitur imperdiet turpis condimentum, viverra odio ac, venenatis justo. Nam sed accumsan tortor, vitae dictum velit. Ut vehicula urna tincidunt, lobortis tellus at, blandit eros. Proin risus elit, consectetur at ex id, lacinia malesuada justo.
|
||||
|
||||
Donec ornare felis id pretium varius. Ut venenatis orci in risus facilisis varius. Ut urna quam, porttitor vitae malesuada at, tempor quis libero. Suspendisse lacinia, lectus imperdiet malesuada fermentum, quam urna volutpat lacus, in dapibus justo turpis pharetra orci. Nullam vel sem risus. Mauris ultrices accumsan magna, ac tempus quam pretium vitae. Duis risus justo, tincidunt vestibulum aliquet ut, condimentum vitae sapien. Maecenas iaculis et urna quis consectetur.
|
||||
|
||||
Suspendisse non ullamcorper lorem, a mattis justo. Aenean aliquam condimentum gravida. Pellentesque nec vehicula sapien. Duis posuere massa vel hendrerit congue. Fusce fringilla sollicitudin mauris in dictum. Cras faucibus tellus at dictum dictum. Etiam eu egestas elit, a porttitor quam. Integer sit amet dignissim diam. Curabitur quis mauris consequat, tristique tellus quis, sagittis tellus. Praesent sed porttitor nisl. Quisque nisi ipsum, interdum sit amet tempor ut, tincidunt ac arcu. Fusce efficitur ullamcorper pharetra. Nullam vitae pharetra nisi.
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<main>
|
||||
{%- for post in collections.all | reverse -%}
|
||||
{%- if post.data.type == "thought" -%}
|
||||
<section class="thought">
|
||||
<div class="thought">
|
||||
<header>
|
||||
<img class="hash" src="/assets/hash.svg" type="image/svg+xml">
|
||||
<span>An errant thought...</span>
|
||||
|
|
@ -26,23 +26,21 @@
|
|||
<footer>
|
||||
Posted on {{ post.date | formatDate }}
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
{%- elif post.data.type == "essay" -%}
|
||||
<section class="thought">
|
||||
<div class="essay">
|
||||
<header>
|
||||
<img class="hash" src="/assets/document.svg" type="image/svg+xml">
|
||||
<span>{{ post.data.title }}</span>
|
||||
<a href="{{ post.url }}" class="link">
|
||||
<img src="/assets/link.svg" type="image/svg+xml">
|
||||
</a>
|
||||
<a class="title" href="{{ post.url }}">{{ post.data.title }}</a>
|
||||
</header>
|
||||
<div class="content">
|
||||
{{ post.page.excerpt | safe }}
|
||||
<a class="read-more" href="{{ post.url }}">Read more...</a>
|
||||
</div>
|
||||
<footer>
|
||||
Posted on {{ post.date | formatDate }}
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -64,16 +64,16 @@ main {
|
|||
grid-area: content;
|
||||
}
|
||||
|
||||
main > .thought {
|
||||
main > div, main > article.thought {
|
||||
border: 2px solid var(--color-black);
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
main > .thought:not(:last-child) {
|
||||
main > div:not(:last-child) {
|
||||
margin-bottom: var(--size-2x);
|
||||
}
|
||||
|
||||
main > .thought > header {
|
||||
main > div > header {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
font-size: var(--font-post-header);
|
||||
|
|
@ -81,53 +81,66 @@ main > .thought > header {
|
|||
padding: var(--size-md) var(--size-md) 0 var(--size-md);
|
||||
}
|
||||
|
||||
main > .thought > header img {
|
||||
main > div > header img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
main > .thought > header > .hash {
|
||||
main > div > header > .hash {
|
||||
margin-right: var(--size-sm);
|
||||
}
|
||||
|
||||
main > .thought > header > .link {
|
||||
main > div > header > a.title {
|
||||
color: var(--color-black);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main > div:hover > header > a.title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main > div > header > .link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
main > .thought:hover > header > .link {
|
||||
main > div:hover > header > .link {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
main > .thought > .content {
|
||||
main > div > .content, main > article.thought > .content {
|
||||
border-top: 2px solid var(--color-black);
|
||||
margin-top: var(--size-md);
|
||||
padding: var(--size-xl) var(--size-2x);
|
||||
}
|
||||
|
||||
main > div.essay > .content > a.read-more {
|
||||
color: var(--color-black);
|
||||
}
|
||||
|
||||
main > article.thought > .content {
|
||||
border-top: unset;
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
main > .thought > .content > p:first-of-type {
|
||||
main > div > .content > p:first-of-type {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main > .thought > footer {
|
||||
main > div > footer, main > article.thought > footer {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-on-bg);
|
||||
padding: var(--size-md);
|
||||
}
|
||||
|
||||
main > .essay {
|
||||
align-self: flex-start;
|
||||
main > article.essay {
|
||||
margin-top: var(--size-md);
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
main > .essay > header > .title {
|
||||
main > article.essay > header > .title {
|
||||
font-weight: 300;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<main>
|
||||
{%- for post in collections.thoughts | reverse -%}
|
||||
{%- if post.data.type == "thought" -%}
|
||||
<section class="thought">
|
||||
<div class="thought">
|
||||
<header>
|
||||
<img class="hash" src="/assets/hash.svg" type="image/svg+xml">
|
||||
<span>An errant thought...</span>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<footer>
|
||||
Posted on {{ post.date | formatDate }}
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue