improved use of semantic html

objectionable.solutions/index.html

@@ -13,7 +13,8 @@
     <h1>Sara's Objectionable Solutions</h1>
 </header>
 <main>
-<section id="about">
+
+<article id="about">
     <h2><a href="#about">About Me</a></h2>
     <section>
         <img src="favicon.svg" class="image-right" style="height:8em" alt="A vector drawing of a blonde white woman wearing a purple tank top and a witch hat. On top of the hat a jackdaw is perched">
@@ -29,8 +30,9 @@
         <li>Languages: Dutch (native) and English (fluent)</li>
         <li>Romance: <a target="_blank" href="https://app.wafrn.net/blog/Eclypia">Them</a>; Not open</li>
     </ul></section>
-</section>
-<section id="friends">
+</article>
+
+<article id="friends">
     <h2><a href="#friends">My Friends around the web</a></h2>
     <section>
         <h3><a href="https://hertog.hermitcollective.net">Hertog!</a></h3>
@@ -50,8 +52,9 @@
             Who develops and hosts the awesome Wave blog I contribute to. As well as being fun to chat with on fedi.
         </p>
     </section>
-</section>
-<section id="buttons">
+</article>
+
+<article id="buttons">
     <h2><a href="#buttons">Buttons</a></h2>
     <section id="my-buttons">
         <h3><a href="#my-buttons">My Buttons</a></h3>
@@ -93,8 +96,9 @@
             <img src="https://i-eat.rocks/images/ui/ieatrocks.png" class="button" alt="88x31 button saying 'I-Eat.Rocks, click here'"/>
         </a>
     </section>
-</section>
-<section id="links">
+</article>
+
+<article id="links">
     <h2><a href="#links">Links</a></h2>
     <p>Where to find me around the web</p>
     <section>
@@ -121,8 +125,9 @@
         <h3><a href="https://sara.objectionable.solutions">Portfolio Website</a></h3>
         <p>With stuff I've made/worked on, mostly duplicates of what you can find on my itch.io profile.</p>
     </section>
-</section>
-<section id="link-directory">
+</article>
+
+<article id="link-directory">
     <h2><a href="the-big-list.html">My Link Directory</a></h2>
     <p>
         I keep a <a href="the-big-list.html">link directory</a> of all kinds of things i recommend. And I encourage you to make one as well! It's fun and helpful to others.
@@ -130,14 +135,16 @@
     <p>
         The idea is that in the current age of the internet, one where search engines barely work and are filled with adverts and LLM-generated bullshit. By sharing what we like and trust, we can help others find new sources they like and trust more easily.
     </p>
-</section>
-<section id="cat">
+</article>
+
+<article id="cat">
     <h2><a href="#cat">Look At My Stupid Cat</a></h2>
     <section>
         <img src="cat.jpeg" alt="An orange-and-white cat lying on her back in the sun on a windowsill.">
         <p>She is adorable :3</p>
     </section>
-</section>
+</article>
+
 <footer>
     <a href="index.html">back to top</a>
 </footer>

objectionable.solutions/style.css

@@ -29,7 +29,7 @@ a:hover {
     border: solid var(--color-tl-border) 1px;
 }
 
-section, details {
+section, details, article {
     border: solid black var(--border-width);
     border-color: var(--color-tl-border) var(--color-br-border)
                   var(--color-br-border) var(--color-tl-border);

objectionable.solutions/the-big-list.html

@@ -13,7 +13,9 @@
     <h1>The Big List of Recommendations</h1>
     <p>Sites, products, tools, blogs, you name it, I have opinions on it. Here's some of the stuff I personally like.</p>
 </header>
-<section id="newsletters">
+
+<main>
+<article id="newsletters">
     <h2>Newsletters</h2>
     <p>
         I follow more RSS feeds than I care to count, but here's some of the active ones that I like or that have helped me in various ways.
@@ -102,9 +104,9 @@
         </p>
         <p class="feed-url"><i>https://godotengine.org/rss.xml</i> and <i>https://godotengine.org/atom.xml</i></p>
     </section>
-</section>
+</article>
 
-<section id="resources">
+<article id="resources">
     <h2>Resources</h2>
     <p>
         There are so many resources online, and sometimes they can be difficult to find. Here's the ones I have had good use of in the past. Recorded here in part because I know for a fact I'll forget them myself.
@@ -131,9 +133,9 @@
             An amazing book on the processes that go into making levels in teams. The particular notes on how to design from large to medium to specific levels of detail have massively helped me refine my ability to iterate on conceptsquickly.
         </p>
     </section>
-</section>
+</article>
 
-<section id="tools">
+<article id="tools">
     <h2>Tools</h2>
     <p>
         The tools I use (or have used and recommend) in my day-to-day life. A lot of these will be Libre and/or Open Source solutions for stuff I'd usually have to pay a major internet corporation for (in one way or another).
@@ -145,7 +147,7 @@
         </p>
     </section>
     <section id="sway">
-        <h3><a target="_blank" href="https://swaywm.org/">SwayWM</a></h2>
+        <h3><a target="_blank" href="https://swaywm.org/">SwayWM</a></h3>
             <p>
                 After using i3 for a year and wanting to switch to Wayland. Also how I found Drew DeVault's blog. Sway works, and offers the level of simple customisability I personally desire. Though I freely admit it's not for everyone.
             </p>
@@ -174,8 +176,8 @@
             There are a <i>Lot</i> of RSS feeds, but sometimes it can be a bit hard to find one for specific subjects you'd like to keep on top of. So feedle.world provides a search engine for RSS feeds. It doesn't have summaries, or tries to push any advertising. It simply directs you to the articles.
         </p>
     </section>
-</section>
-<section id="comics">
+</article>
+<article id="comics">
     <h2>Webcomics</h2>
     <p>
         I read a lot of webcomics. I don't particularly care to support the rough duopoly of the space, so I'll just share the ones you can follow on their own website through an RSS feed.
@@ -192,17 +194,17 @@
             What if clowns were cops, when they're actually supposed to be firefighters. A story about a woman at her lowest point given a second chance, and a well-intentioned public service being turned into a tool for control (and hopefully how that control is challenged and broken, the full story isn't done yet).
         </p>
     </section>
-</section>
-<section id="web-directories">
-    <h2>Web Directories</h2>
+</article>
+<article id="web-directories">
+    <h2><a href="#web-directories">Web Directories</a></h2>
     <p>Other weblink directories and recommendations pages.</p>
     <section>
         <h3><a target="_blank" href="https://url.town">url.town</a></h3>
         <p>A general everything-directory of webpages for various kinds of things. Organised and categorised so it's fun to browse idly and quick to search through.</p>
         <a href="https://url.town/"><img src="https://url.town/88x31.png" class="button" title="url.town" alt="URL Town pop. 642" /></a>
     </section>
-</section>
-<section id="buttons">
+</article>
+<article id="buttons">
     <h2><a href="#buttons">Buttons</a></h2>
     <section>
         <p>Here's my personal webpage's button. Feel free to add it to your own personal page if you want to. Just don't imply I condone whatever it's next to.</p>
@@ -264,7 +266,8 @@
         </p>
         <a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="https://licensebuttons.net/i/l/by-sa/000000/ff/ff/ff/88x31.png" class="button" title="CC-by-SA"/></a>
     </section>
-</section>
+</article>
+</main>
 <footer>
     <p>
         Do you know a thing that's not here, and think I'd enjoy it? Tell me about it on fedi at Sara_Objectionable@app.wafrn.net or bsky @sara-objectionable.at.app.wafrn.net (though do mention the website sent you, cause I may not respond to random messages...).