187 lines
6.4 KiB
HTML
187 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
||
/>
|
||
<link rel="stylesheet" href="/site.css?v=88202782cebe" />
|
||
<style>
|
||
/* inter-latin-wght-normal */
|
||
@font-face {
|
||
font-family: "Inter Variable";
|
||
font-style: normal;
|
||
font-display: swap;
|
||
font-weight: 100 900;
|
||
src: url(/fonts/inter-latin-wght-normal.woff2)
|
||
format("woff2-variations");
|
||
unicode-range:
|
||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
|
||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||
} /* inter-latin-wght-italic */
|
||
@font-face {
|
||
font-family: "Inter Variable";
|
||
font-style: italic;
|
||
font-display: swap;
|
||
font-weight: 100 900;
|
||
src: url(/fonts/inter-latin-wght-italic.woff2)
|
||
format("woff2-variations");
|
||
unicode-range:
|
||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
|
||
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
|
||
U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
</style>
|
||
<script
|
||
defer
|
||
src="https://stats.apps.seigler.net/script.js"
|
||
data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"
|
||
></script>
|
||
<script defer src="/scripts/effects.js?v=d86d3b7642f1"></script>
|
||
<link rel="me" href="https://github.com/seigler" />
|
||
<link
|
||
rel="webmention"
|
||
href="https://webmention.io/joshua.seigler.net/webmention"
|
||
/>
|
||
<title>Site design updated - joshua.seigler.net</title>
|
||
<meta name="description" content="New look, simpler tech." />
|
||
<meta name="keywords" content="posts, technical" />
|
||
<meta property="og:title" content="Site design updated" />
|
||
<meta property="og:type" content="" />
|
||
<meta
|
||
property="og:url"
|
||
content="https://joshua.seigler.net/posts/site-design-updated/"
|
||
/>
|
||
<meta name="twitter:title" content="Site design updated" />
|
||
<meta name="twitter:description" content="New look, simpler tech." />
|
||
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta name="generator" content="Eleventy v3.1.0" />
|
||
</head>
|
||
<body data-font="english" data-path="/posts/site-design-updated/">
|
||
<header>
|
||
<nav>
|
||
<div class="nav-row">
|
||
<div class="nav-home"><a href="/">joshua.seigler.net</a></div>
|
||
</div>
|
||
<div class="nav-categories">
|
||
<a class="nav-active" href="/posts/">/posts</a>
|
||
<a class="" href="/about/">/about</a>
|
||
<a class="" href="/now/">/now</a>
|
||
<a class="" href="/uses/">/uses</a>
|
||
<a class="" href="/recipes/">/recipes</a>
|
||
<a class="" href="/music/">/music</a>
|
||
<a class="" href="/books/">/books</a>
|
||
<a class="" href="/search/">/search</a>
|
||
</div>
|
||
</nav>
|
||
<h1>Site design updated</h1>
|
||
<div class="header-meta">
|
||
<author>Joshua Seigler</author><date>June 5, 2024</date>
|
||
|
||
<span class="tags" style="--totalTags: 11"
|
||
><a class="tag" style="--tagIndex: 5" href="/tags/technical"
|
||
>technical</a
|
||
>
|
||
</span>
|
||
</div>
|
||
</header>
|
||
|
||
<header class="toc"></header>
|
||
|
||
<main data-pagefind-body="data-pagefind-body">
|
||
<style>
|
||
@import url("/fonts/ftaurebesh/ftaurebesh.css?v=b6b5f713b0fb");
|
||
</style>
|
||
<p>
|
||
New design! The tools I used before have a lot of unmaintained or
|
||
outdated dependencies and I wanted something a little simpler. The new
|
||
site uses
|
||
<a href="https://pnpm.io/" target="_blank" rel="noopener">pnpm</a>,
|
||
<a href="https://www.11ty.dev/" target="_blank" rel="noopener">11ty</a>,
|
||
and
|
||
<a
|
||
href="https://mozilla.github.io/nunjucks/"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>Nunjucks</a
|
||
>. Content is still in
|
||
<a
|
||
href="https://daringfireball.net/projects/markdown/"
|
||
target="_blank"
|
||
rel="noopener"
|
||
>markdown</a
|
||
>.
|
||
</p>
|
||
<p>
|
||
One thing I’m proud of is a visual ping for footnotes.<sup
|
||
class="footnote-ref"
|
||
><a href="#footnote1">[1]</a
|
||
><a class="footnote-anchor" id="footnote-ref1"></a
|
||
></sup>
|
||
When you click a footnote<sup class="footnote-ref"
|
||
><a href="#footnote2">[2]</a
|
||
><a class="footnote-anchor" id="footnote-ref2"></a
|
||
></sup>
|
||
it briefly highlights the thing you jumped to.
|
||
</p>
|
||
<p>
|
||
In the upper right I added a style toggle that applies the font from
|
||
Star Wars, “Aurebesh”. I learned how to read it but sometimes want some
|
||
practice.
|
||
<span data-language="aurebesh"
|
||
>People who can read this are cool and I like them.</span
|
||
>
|
||
</p>
|
||
<p>I also finally made a section for recipes!</p>
|
||
<blockquote>
|
||
<p>
|
||
May 2025 edit: I updated the design some more without changing the
|
||
tech stack. The main improvements are animated clouds and a host of
|
||
minor adjustments.
|
||
</p>
|
||
</blockquote>
|
||
<blockquote>
|
||
<p>
|
||
June 2025 edit: I have continued to alter the design. Pray I don’t
|
||
alter it any further.
|
||
</p>
|
||
</blockquote>
|
||
<hr class="footnotes-sep" />
|
||
<section class="footnotes">
|
||
<ol class="footnotes-list">
|
||
<li id="footnote1" class="footnote-item">
|
||
<p>
|
||
It highlights when you click back, too.
|
||
<a href="#footnote-ref1" class="footnote-backref">↩︎</a>
|
||
</p>
|
||
</li>
|
||
<li id="footnote2" class="footnote-item">
|
||
<p>Hi. <a href="#footnote-ref2" class="footnote-backref">↩︎</a></p>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
</main>
|
||
<script
|
||
data-isso="//comments.apps.seigler.net/"
|
||
src="//comments.apps.seigler.net/js/embed.min.js"
|
||
></script>
|
||
<section id="isso-thread" data-title="">
|
||
<noscript>Javascript needs to be activated to view comments.</noscript>
|
||
</section>
|
||
|
||
<footer>
|
||
© Joshua Seigler 2025. -
|
||
<a rel="me" href="mailto:joshua@seigler.net?subject=Hello">Contact</a>
|
||
-
|
||
<a href="/feed.xml">RSS</a>
|
||
-
|
||
<a href="/unoffice-hours/">Unoffice Hours</a>
|
||
-
|
||
<a href="/webrings/">Webrings</a>
|
||
</footer>
|
||
<div id="effects"></div>
|
||
</body>
|
||
</html>
|