new blog post

content/blog/2023/12/re-the-art-of-hyperlinking.md

@@ -0,0 +1,16 @@
+---
+title: "Re: The Art of Hyperlinking"
+date: 2023-12-14T20:45:42-07:00
+reply_to: 
+  url: https://flamedfury.com/posts/the-art-of-hyperlinking/
+  author: flamedfury
+  title: The Art of Hyperlinking
+---
+
+I recently read fLaMEd's post discussing the shortcomings of linking techniques frequently used on the smallweb, such as link pages, webrings, button walls, etc. Many websites on the smallweb employ these techniques in order to connect to other stops in the smallweb space. I don't think they are inherently bad, of course, but the context matters a lot. I want to know *why* the webmaster has chosen to put these links on their website, even if the explanation is as brief as "these people are my friends and their websites are cool." 
+
+Frankly, links without context suck. The sheer amount of bullshit online makes it so we are all more hesitant to click links without good reason. If you like a website a lot, you should briefly explain what you like about it. Do you find it useful? Is it fun to browse? Does the webmaster share an interest of yours? With these questions unanswered, I am much less likely to click a link to another site. 
+
+Webrings suffer this problem too. While webrings naturally provide a small amount of context in its name and topic, the sites contained within them are not always related. Devastatia observes that you see the same websites in every webring over and over, which makes them useless. If you find a new webring, why bother browsing through it if you'll see all the same sites you saw in the last webring you found? It's a shame that this is the case, as I think webrings are one of the more interesting constructs from the web 1.0 era.
+
+It's for this reason that my site is not a part of any webrings, though I'm open to changing that if one comes along that aligns with my interests. In the meantime, my contribution to the social smallweb will be maintaining my links page with a short blurb of context for each link.

themes/saturn/layouts/blog/list.html

@@ -17,4 +17,8 @@
     {{ end }}
     {{ template "_internal/pagination.html" . }}
 </section>
+<div id="right-sidebar">
+    <h3>Archive</h3>
+    <a href="/blog/2023">2023</a>
+</div>
 {{ end }}

themes/saturn/layouts/blog/single.html

@@ -2,6 +2,9 @@
 <section class="content">
     <article class="h-entry content">
         <h1 class="p-name">{{ .Title }}</h1>
+        {{ if .Params.reply_to }}
+        <p class="context">⤷ Reply to <a href="{{ .Params.reply_to.url }}" class="u-in-reply-to">{{ .Params.reply_to.title }}</a> by {{ .Params.reply_to.author }}.</p>
+        {{ end }}
         <a class="p-author h-card hidden" href="https://yequari.com">yequari</a>
         <time class="dt-published" datetime={{.PublishDate }}>{{ .PublishDate.Format "Mon, Jan 02, 2006" }}</time>
         <a class="u-url permalink" href={{ .RelPermalink }}>Permalink</a>

themes/saturn/static/css/main.css

@@ -150,9 +150,8 @@ header {
 
 header h1 {
     font-family: "Genesis", 'Courier New', Courier, monospace;
-    font-size: 1.3rem;
+    font-size: 1rem;
     color: var(--pewter-blue);
-    width: 350px;
 }
 
 header ul.social {
@@ -185,6 +184,10 @@ p.about {
     padding: 15px;
 }
 
+p.context {
+    font-style: italic;
+}
+
 span.social {
     display: inline-block;
     width: 16px;
@@ -256,8 +259,12 @@ article {
     max-width: 750px;
 }
 
+article p.context {
+    margin-top: -25px;
+    padding-left: 25px;
+}
+
 article p {
-    text-indent: 1rem;
     text-align: justify;
     font-size: 1.1rem;
 }
@@ -290,14 +297,24 @@ article a.title:hover, article a.title:active {
     color: var(--primary-link-hover);
 }
 
+blockquote {
+    font: 14px/22px normal helvetica, sans-serif;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    margin-left: 50px;
+    padding-left: 15px;
+    border-left: 3px solid #ccc;
+}
+
 code {
     background-color: black;
-    padding: 10px;
     overflow-x: scroll;
+    padding: 0 5px;
     color: white;
 }
 
 pre code{
+    padding: 15px;
     display: block;
 }
 
@@ -402,6 +419,10 @@ footer {
         padding: 0 45px;
     }
 
+    article img {
+        max-width: 250px;
+    }
+
     .big {
         flex-direction: column;
         width: unset;