add a TOC, more nutrition info stuff, update some styles and templates
This commit is contained in:
Joshua Seigler
parent
863ed9c128
commit
a29ee38e0e
18 changed files with 534 additions and 86 deletions
|
|
@ -30,7 +30,7 @@
|
|||
{%- if author -%}
|
||||
<author>{{ author }}</author>
|
||||
{%- endif -%}
|
||||
{%- if date -%}
|
||||
{%- if date and not omitMetadata -%}
|
||||
<date>{{ date | formatDate("MMMM D, YYYY") }}</date>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,14 @@ tags: timeline
|
|||
permalink: about/index.html
|
||||
title: About
|
||||
---
|
||||
{{ content | safe }}
|
||||
|
||||
{% for item in collections.timeline | reverse %}
|
||||
{% if item.data.title !== "About" and not item.data.draft %}
|
||||
<h3 id="{{item.data.time}}"><a class="header-anchor" href="#{{item.data.time}}" aria-hidden="true"></a>{{ item.data.title | markdown | safe }} <aside>{{item.data.time}}</aside></h3>
|
||||
<p>{{ item.data.description | markdown | safe }}</p>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<main data-pagefind-body>
|
||||
{{ content | safe }}
|
||||
<section>
|
||||
{% for item in collections.timeline | reverse %}
|
||||
{% if item.data.title !== "About" and not item.data.draft %}
|
||||
<h3 id="{{item.data.time}}"><a class="header-anchor" href="#{{item.data.time}}" aria-hidden="true"></a>{{ item.data.title | markdown | safe }} <aside>{{item.data.time}}</aside></h3>
|
||||
<p>{{ item.data.description | markdown | safe }}</p>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -34,9 +34,7 @@ title: Joshua's Homepage
|
|||
<body data-font="english" data-path="{{ page.url }}">
|
||||
<script>{% include "-darklight.js" %}</script>
|
||||
{% include "-header.njk" %}
|
||||
<main data-pagefind-body>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
{{ content | safe }}
|
||||
{% include "-footer.njk" %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,23 @@ layout: "base.njk"
|
|||
eleventyComputed:
|
||||
title: "{{ page.fileSlug | capitalize }}"
|
||||
---
|
||||
{{ content | safe }}
|
||||
{% set tag = page.fileSlug %}
|
||||
{% if collections[tag] %}
|
||||
<section>
|
||||
{% for item in collections[tag] | reverse %}
|
||||
<article class="item-summary">
|
||||
<a href="{{ item.url }}">{{ item.data.title }}</a>
|
||||
{% if item.data.date %}<aside>{{item.data.date | formatDate("MMMM DD, YYYY")}}</aside>{% endif %}
|
||||
<p class="item-summary-description">{{ item.data.description }}</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
<main>
|
||||
<section data-pagefind-body>
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
{% endif %}
|
||||
{% set tag = page.fileSlug %}
|
||||
{% if collections[tag] %}
|
||||
<section>
|
||||
{% for item in collections[tag] | reverse %}
|
||||
<article class="item-summary">
|
||||
<a href="{{ item.url }}">{{ item.data.title }}</a>
|
||||
{% if item.data.date %}
|
||||
<aside>{{ item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
|
||||
{% endif %}
|
||||
<p class="item-summary-description">{{ item.data.description }}</p>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
</main>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
:root {
|
||||
font-size: 16px;
|
||||
font-size: clamp(14px, 9px + 0.5vw, 24px);
|
||||
font-size: clamp(14px, 8px + 0.65vw, 24px);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -103,6 +103,13 @@ body[data-theme="dark"] {
|
|||
color: var(--c-text-dark);
|
||||
}
|
||||
|
||||
mark {
|
||||
background: var(--c-highlight);
|
||||
color: inherit;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 0 0 0.75em 0.25em var(--c-highlight);
|
||||
}
|
||||
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
|
|
@ -150,12 +157,40 @@ main p img {
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
section {
|
||||
section:nth-child(n+2) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.footnote-item:target,
|
||||
.footnote-ref :target {
|
||||
header.toc {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-size: var(--s-1);
|
||||
ol {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
&:nth-child(n+2):before {
|
||||
content: ' · ';
|
||||
}
|
||||
}
|
||||
}
|
||||
.toc > ol::before {
|
||||
content: "Contents: ";
|
||||
}
|
||||
.toc ol ol {
|
||||
&::before {
|
||||
content: "(";
|
||||
}
|
||||
&::after {
|
||||
content: ")";
|
||||
}
|
||||
}
|
||||
|
||||
:target {
|
||||
animation: ping 1s ease-out;
|
||||
&,
|
||||
a {
|
||||
|
|
@ -236,6 +271,10 @@ span.aside {
|
|||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
ul.collection {
|
||||
padding-left: 0;
|
||||
> li {
|
||||
|
|
@ -438,7 +477,10 @@ h4 {
|
|||
position: relative;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 0.5em var(--c-highlight);
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 0;
|
||||
main > &:nth-child(n+2) {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
margin-bottom: 0.5rem;
|
||||
&:hover .header-anchor {
|
||||
opacity: 1;
|
||||
|
|
@ -466,7 +508,6 @@ h1 {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
.header-meta {
|
||||
margin-bottom: calc(0.75 * var(--s3));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -512,6 +553,7 @@ h1 {
|
|||
}
|
||||
|
||||
main {
|
||||
margin-top: calc(0.75 * var(--s3));
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
|
|
|
|||
|
|
@ -1,27 +1,29 @@
|
|||
---
|
||||
layout: "base.njk"
|
||||
---
|
||||
{{ content | safe }}
|
||||
{%- for name, collection in collections -%}
|
||||
{%- if name in ["posts"] -%}
|
||||
<h2>{{name | capitalize }}</h2>
|
||||
<ul class="collection">
|
||||
{%- for item in collection | reverse -%}
|
||||
{%- if (loop.index <= 5) -%}
|
||||
<li>
|
||||
<a href="{{item.url}}">{{item.data.title}}</a>
|
||||
{%- if item.data.date -%}
|
||||
<aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
|
||||
{%- endif -%}
|
||||
<p>{{item.data.description | safe}}</p>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if (loop.index == 6) -%}
|
||||
<li>
|
||||
<a href="/{{name}}/">More {{name}}…</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
<main data-pagefind-body>
|
||||
{{ content | safe }}
|
||||
{%- for name, collection in collections -%}
|
||||
{%- if name in ["posts"] -%}
|
||||
<h2>{{name | capitalize }}</h2>
|
||||
<ul class="collection">
|
||||
{%- for item in collection | reverse -%}
|
||||
{%- if (loop.index <= 5) -%}
|
||||
<li>
|
||||
<a href="{{item.url}}">{{item.data.title}}</a>
|
||||
{%- if item.data.date -%}
|
||||
<aside>{{item.data.date | formatDate("MMMM DD, YYYY") }}</aside>
|
||||
{%- endif -%}
|
||||
<p>{{item.data.description | safe}}</p>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- if (loop.index == 6) -%}
|
||||
<li>
|
||||
<a href="/{{name}}/">More {{name}}…</a>
|
||||
</li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
---
|
||||
layout: base.njk
|
||||
---
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
{% if not omitTOC %}
|
||||
<header class="toc">{{ content | toc('{"tags":["h2", "h3"],"wrapper":"span"}') | safe }}</header>
|
||||
{% endif %}
|
||||
<main data-pagefind-body="data-pagefind-body">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<script data-isso="//comments.apps.seigler.net/" src="//comments.apps.seigler.net/js/embed.min.js"></script>
|
||||
|
||||
<section id="isso-thread" data-title="{{computedTitle}}">
|
||||
<noscript>Javascript needs to be activated to view comments.</noscript>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue