Refector css and add TOC
This commit is contained in:
@@ -1,78 +1,5 @@
|
||||
<!-- ISSO style -->
|
||||
<style>
|
||||
.isso-comment-header {
|
||||
height: var(--space-2xl) !important;
|
||||
}
|
||||
|
||||
h4.isso-thread-heading {
|
||||
color: var(--text-color) !important;
|
||||
font-size: var(--step-2) !important;
|
||||
font-variation-settings: "opsz" 50, "wght" 350, "SOFT" 20, "WONK" 1 !important;
|
||||
line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important;
|
||||
margin-bottom: var(--space-m) !important;
|
||||
margin-top: var(--space-m) !important;
|
||||
padding-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
text-wrap: pretty !important;
|
||||
}
|
||||
|
||||
.isso-text > h1, .isso-text > h2 {
|
||||
padding: 0 0 0 0 !important;
|
||||
}
|
||||
|
||||
.isso-form-wrapper > .isso-auth-section > .isso-post-action > input {
|
||||
background-color: var(--contrast-color) !important;
|
||||
border: none !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
color: var(--background-color) !important;
|
||||
font-family: var(--font-family-ui) !important;
|
||||
font-size: var(--step--2) !important;
|
||||
font-variation-settings: var(--font-variation-ui) !important;
|
||||
height: var(--space-m-l) !important;
|
||||
letter-spacing: var(--ui-letter-spacing) !important;
|
||||
margin: var(--space-xs) 0 0 0 !important;
|
||||
padding: 0 var(--space-xs) !important;
|
||||
text-transform: uppercase !important;
|
||||
transition: var(--transition-normal) !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
p.isso-input-wrapper {
|
||||
display: block !important;
|
||||
max-width: 100% !important;
|
||||
& > label, & > input {
|
||||
font-family: var(--font-family-ui) !important;
|
||||
font-size: var(--step--2) !important;
|
||||
font-variation-settings: var(--font-variation-ui) !important;
|
||||
}
|
||||
& input {
|
||||
margin-block: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.isso-post-action {
|
||||
display: inline-block !important;
|
||||
float: inherit !important;
|
||||
margin: 0 var(--space-2xs) 0 0 !important;
|
||||
&::after {
|
||||
content: "" !important;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.isso-textarea {
|
||||
background-color: var(--background-color) !important;
|
||||
border: var(--border-details) !important;
|
||||
border-color: var(--contrast-color) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
color: var(--text-color) !important;
|
||||
font-family: var(--font-family) !important;
|
||||
font-size: var(--step-0) !important;
|
||||
font-variation-settings: var(--font-variation-default) !important;
|
||||
margin-block: 0 1lh !important;
|
||||
min-height: var(--space-l) !important;
|
||||
padding: 0 var(--space-3xs) !important;
|
||||
resize: vertical !important;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<!-- /ISSO style -->
|
||||
|
||||
@@ -4,7 +4,49 @@
|
||||
{% include "metadata.njk" %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/index.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/webfonts/webfonts.css" />
|
||||
{% if tags and (tags.includes('nowBurning') or tags.includes('status')) %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/microblog.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('blogroll') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/blogroll.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('galleryImage') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/gallery-images.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('metadata') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/metadata.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('navigator') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/navigator.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('profilePic') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/profile-pic.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('postList') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/post-list.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('tagList') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/tags.css" />
|
||||
{% endif %}
|
||||
{% if tags and (tags.includes('posts') or tags.includes('now')) %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/audio-player.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/code.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/comments.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/continue-discussion-on-mastodon.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/dropcap.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/fleuron.css" />
|
||||
{% endif %}
|
||||
{% if tags and tags.includes('guestbook') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/guestbook.css" />
|
||||
{% endif %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/weather.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/css/woo-mode.css" />
|
||||
{% if tags and tags.includes('quiz') %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/quiz.css" />
|
||||
{% endif %}
|
||||
{% if includeTOC %}
|
||||
<link rel="stylesheet" type="text/css" href="/css/toc.css" />
|
||||
{% endif %}
|
||||
{% if search %}
|
||||
<link rel="stylesheet" href="/pagefind/pagefind-ui.css">
|
||||
<link rel="stylesheet" type="text/css" href="/css/search.css" />
|
||||
@@ -16,13 +58,21 @@
|
||||
<!-- /Indieweb profile links -->
|
||||
{% include "structuredData.njk" %}
|
||||
{% include "analytics.html" %}
|
||||
{% include "issoStyle.njk" %}
|
||||
{% include "weatherStyle.njk" %}
|
||||
{% include "wooModeStyle.njk" %}
|
||||
</head>
|
||||
<body>
|
||||
{% include "header.njk" %}
|
||||
<main id="skip">
|
||||
{% if includeTOC %}
|
||||
<section>
|
||||
<article data-pagefind-body>
|
||||
<h1>{{ h1 }}</h1>
|
||||
<details class="toc">
|
||||
<summary>Table of Contents</summary>
|
||||
{{ content | toc(tags=['h2', 'h3', 'h4'], wrapper='div') | removeHash | safe }}
|
||||
</details>
|
||||
</article>
|
||||
</section>
|
||||
{% endif %}
|
||||
<section>
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
showPostListHeader: yep
|
||||
tags:
|
||||
- navigator
|
||||
---
|
||||
<h1>I’m Nathan; welcome friend.</h1>
|
||||
<p class="nodropcap page-block">My name is Nathan Upchurch, and this is my personal website and blog, where I write about all sorts of <a href="/tags">things</a> that I find interesting. Click through the categories below or see the <a href="/sitemap">sitemap</a> for a full list of everything there is to look at here.</p>
|
||||
|
||||
@@ -20,7 +20,7 @@ layout: layouts/base.njk
|
||||
{% endif %}
|
||||
<div class="post-metadata-copy">
|
||||
<p>{% if metadata.author.url %}<a href="{{ metadata.author.url }}">{% endif %}
|
||||
{% if metadata.author.name %}By {{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a> • {% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time> • {{ content | emojiReadTime }}</p>
|
||||
{% if metadata.author.name %}By {{ metadata.author.name }}{% endif %}{% if metadata.author.url %}</a> • {% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | niceDate }}</time>{% if tags and not tags.includes('quiz') %} • {{ content | emojiReadTime }}{% endif %}</p>
|
||||
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -1,62 +0,0 @@
|
||||
{% if collections.posts %}
|
||||
{% set previousPost = collections.posts | getPreviousCollectionItem %}
|
||||
{% set nextPost = collections.posts | getNextCollectionItem %}
|
||||
{% if nextPost or previousPost %}
|
||||
<section class="links-nextprev">
|
||||
<h2>Read Next</h2>
|
||||
<div class="postlist-item-container">
|
||||
{% if previousPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if previousPost.data.imageURL %} src="{{ previousPost.data.imageURL }}" alt="{{ previousPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a href="{{ previousPost.url }}" class="postlist-link">
|
||||
<p>Previous Article:</p>
|
||||
<h3>
|
||||
{% if previousPost.data.title %}{{ previousPost.data.title }}{% else %}<code>{{ previousPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ previousPost.date | htmlDateString }}">{{ previousPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if previousPost.data.synopsis %}
|
||||
<p>{{ previousPost.data.synopsis | truncate(105) | safe }}</p>
|
||||
{% else %}
|
||||
<p>{{ previousPost.content | truncate(105) | safe }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
{% if not nextPost %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if nextPost %}
|
||||
<article class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<div class="post-image-container">
|
||||
<img class="post-image" {% if nextPost.data.imageURL %} src="{{ nextPost.data.imageURL }}" alt="{{ nextPost.data.imageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
|
||||
</div>
|
||||
</a>
|
||||
<div class="post-copy">
|
||||
<a href="{{ nextPost.url }}" class="postlist-link">
|
||||
<p>Next Article:</p>
|
||||
<h3>
|
||||
{% if nextPost.data.title %}{{ nextPost.data.title }}{% else %}<code>{{ nextPost.url }}</code>{% endif %}
|
||||
</h3>
|
||||
</a>
|
||||
<time class="postlist-date" datetime="{{ nextPost.date | htmlDateString }}">{{ nextPost.date | readableDate("LLLL yyyy") }}</time>
|
||||
{% if nextPost.data.synopsis %}
|
||||
<p>{{ nextPost.data.synopsis | truncate(105) | safe }}</p>
|
||||
{% else %}
|
||||
<p>{{ nextPost.content | truncate(105) | safe }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@@ -1,112 +0,0 @@
|
||||
<!-- Weather style -->
|
||||
<style>
|
||||
.fallingObject {
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-family: Arial;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 0 1px #000;
|
||||
}
|
||||
@keyframes fallingObjects-fall {
|
||||
0% {
|
||||
top: -10%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
@keyframes fallingObjects-shake {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
.fallingObject {
|
||||
position: fixed;
|
||||
top: -10%;
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
animation-name: fallingObjects-fall, fallingObjects-shake;
|
||||
animation-duration: 10s, 3s;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
animation-play-state: running, running;
|
||||
}
|
||||
.fallingObject:nth-of-type(0) {
|
||||
left: 1%;
|
||||
animation-delay: 0s, 0s;
|
||||
& > div {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(1) {
|
||||
left: 10%;
|
||||
animation-delay: 1s, 1s;
|
||||
& > div {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(2) {
|
||||
left: 20%;
|
||||
animation-delay: 6s, 0.5s;
|
||||
& > div {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(3) {
|
||||
left: 30%;
|
||||
animation-delay: 4s, 2s;
|
||||
& > div {
|
||||
transform: rotate(84deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(4) {
|
||||
left: 40%;
|
||||
animation-delay: 2s, 2s;
|
||||
& > div {
|
||||
transform: rotate(267deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(5) {
|
||||
left: 50%;
|
||||
animation-delay: 8s, 3s;
|
||||
& > div {
|
||||
transform: rotate(200deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(6) {
|
||||
left: 60%;
|
||||
animation-delay: 6s, 2s;
|
||||
& > div {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(7) {
|
||||
left: 70%;
|
||||
animation-delay: 2.5s, 1s;
|
||||
& > div {
|
||||
transform: rotate(78deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(8) {
|
||||
left: 80%;
|
||||
animation-delay: 1s, 0s;
|
||||
& > div {
|
||||
transform: rotate(3120deg);
|
||||
}
|
||||
}
|
||||
.fallingObject:nth-of-type(9) {
|
||||
left: 90%;
|
||||
animation-delay: 3s, 1.5s;
|
||||
& > div {
|
||||
transform: rotate(123deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- / Weather style -->
|
||||
@@ -1,16 +0,0 @@
|
||||
<!-- Woo mode style -->
|
||||
<style>
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
opacity: .35;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<!-- / Woo mode style -->
|
||||
Reference in New Issue
Block a user