a lot done all that I need to do at this point is fix some old blog stuff that's broken and add utm and I'm done

TODO

@@ -1,48 +1,12 @@
-get RSS feed up and running (add utm stuff)
+MVP necessary:
+- add utm stuff
+- make post list datetime elem in dd so html spec is happy (need css so it can be repositioned back to the right)
+- Fix articles with inline html in them and/or links
 
-make post list datetime elem in dd so html spec is happy (need css so it can be repositioned back to the right)
+MVP unneeded:
-
+- post jump points and table of contents (be wary of having this take up too much space on mobile)
-Remove !important in css
+- ico?
-
+- Make references(the tiny number things) appear to the side instead of the bottom on desktop, try to make it bottom of page in print or bottom of print otherwise
-emphasize category viewer is in via different header color
+- analytics
-
-post jump points and table of contents (be wary of having this take up too much space on mobile)
-
-make tapping and holding or hovering changes header nav-link bg
-
-Fix forced colors as needed 
-    https://beeps.website/blog/2024-10-02-the-changelog-eleventy-3-forced-colours-new-art/#forced-colour-fixes!
-
-maybe make it so #content or a parent class which has everything but header scrolls intead of the normal page, needs and overflow css attr and height 100% for body/html and maybe flex-box and/or grid (this is to make scroll not appear on header)
-
-Fix articles with inline html in them and/or links
-
-ico?
-
-analytics
     https://github.com/electerious/Ackee
     https://umami.is/ (https://github.com/umami-software/umami)
-
-Make references(the tiny number things) appear to the side instead of the bottom on desktop, try to make it bottom of page in print or bottom of print otherwise
-
-~~get code blocks working properly, namely get them colored (probably with https://highlightjs.org/), maybe add a red border, consider https://github.com/highlightjs/highlight.js?tab=readme-ov-file#using-web-workers~~
-
-~~get highlight js theme set to my preference, make sure to add nesting in CSS so it'll be active when the light/dark class is active~~
-
-~~add CSS styling rule(s) so headers don't get link colors~~
-
-~~center titles properly~~
-
-~~center content box properly~~
-
-~~position code blocks in a way I like~~
-
-~~handle dark/light theming correctly (https://www.joshwcomeau.com/react/dark-mode/) seems useful for that~~
-
-~~Figure out why the header width is fucked on mobile as well as why the box is all the way to the left~~
-
-~~get preferred font setup https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face (see also notes) set font-display to "swap"~~
-
-~~Fix typography on mobile (mostly just anchors at this point)~~
-    https://stackoverflow.com/questions/16387400/getting-the-right-font-size-on-every-mobile-device#35155083
-    https://css-tricks.com/viewport-sized-typography/

notes

@@ -1,7 +1,3 @@
-Phthalo green #123524
-
-Maybe make it so headers use a cool serif font and text uses atkinson or some other sans serif font.
-
 https://abhinavsarkar.net/posts/static-site-generator-using-shake/
 https://randoma11y.com/
 https://fonts.google.com/knowledge/choosing_type
@@ -10,25 +6,12 @@ https://web.dev/articles/optimize-webfont-loading
 
 noted fonts:
 "Averia Serif Libre",cursive
-Piazzolla https://piazzolla.huertatipografica.com/
+Architects Daughter https://fonts.google.com/specimen/Architects+Daughter
-Atkinson Hyperlegible Font https://www.brailleinstitute.org/freefont/
-Liberation serif https://fonts.adobe.com/fonts/liberation-serif
-Marek Slab 
 Courier New
 Milonga https://fonts.google.com/specimen/Milonga
 ET Book https://edwardtufte.github.io/et-book/
-Cardo https://fonts.google.com/specimen/Cardo
-Architects Daughter https://fonts.google.com/specimen/Architects+Daughter
 Hanuman https://fonts.google.com/specimen/Hanuman
 TT2020 https://www.fontspace.com/tt2020-font-f42044
-"Zilla Slab", Inter, X-LocaleSpecific, sans-serif
-https://blog.mozilla.org/opendesign/zilla-slab-common-language-shared-font/
 Bookerly
-"Source Sans Pro", "Lucida Sans Unicode", "Helvetica", "Trebuchet MS", sans-serif, "Noto Emoji", "Quivira"
 Palatino,"Palatino Linotype","Palatino LT STD",serif
-Georgia
-Courier New', monospace;
-line-height: 1.5;
-https://fonts.google.com/specimen/Marcellus?preview.size=79&stroke=Serif
 https://fonts.google.com/specimen/Tinos?preview.size=79&stroke=Serif
-Noto serif: https://fonts.google.com/noto/specimen/Noto+Serif+Display?classification=Display&stroke=Serif&stylecount=18&preview.text=Hello%20there

posts/hello.yaml

@@ -1,5 +1,6 @@
 title: Hello
 author: pagwin
 tags: [hello, this is a list]
+description: "this is a description"
 draft: false
 date: 2024-08-01

posts/invidious_and_goals.md

@@ -3,7 +3,7 @@ title: "Yeeting the distractions and setting goals"
 
 description: "So recently I've begun work on trying to remove distractions so I'm more likely to work on productive stuff and this blog is effectively a lightning round of things I did to accomplish that"
 
-date: 2022-09-01
+date: 2022-09-02
 
 draft: false
 

static/css/colors.css

@@ -1,4 +1,4 @@
-@layer baseline, print;
+@layer baseline, baseline-raised, print;
 /* https://color.adobe.com/create/color-contrast-analyzer */
 /*dark theme*/
 @layer baseline{
@@ -58,6 +58,12 @@
 }
 }
 }
+@layer baseline-raised {
+.nav-link {
+    color: var(--nav-link-color);
+    background-color: var(--nav-link-bg-color);
+}
+}
 @layer baseline{
 body {
     background: var(--bg-color);
@@ -69,10 +75,6 @@ body {
   outline: 2px solid var(--focus-outline-color);
   border-radius: 0.25rem;
 }
-.nav-link {
-    color: var(--nav-link-color) !important;
-    background-color: var(--nav-link-bg-color);
-}
 
 a {
     color: var(--link-unclicked);
@@ -106,14 +108,6 @@ pre:has( > code) {
   color: var(--highlight-fg);
 }
 
-h1, h2,h3,h4,h5,h6{
-  text-shadow: 2px 2px 0px #888;
-}
-/*
- *h1, h2,h3,h4,h5,h6{
-  text-shadow: 2px 2px 1px light-dark(lab(25% -10% -20%), lab(75% -10% -20%));
-}
- * */
 }
 @media print {
 @layer print{

static/css/icon-colors.css

@@ -1,5 +1,20 @@
+@layer futureproof;
+
+@layer futureproof{
+
+@media (prefers-color-scheme: dark){
 :root {
-    --background-color: rgba(0,0,0,1);
+    --background-color: rgba(0,0,0,0);
-    --primary-color: green;
+    --primary-color: white;
-    --secondary-color: blue;
+    --secondary-color: white;
+}
+}
+@media (prefers-color-scheme: light){
+:root {
+    --background-color: rgba(0,0,0,0);
+    --primary-color: black;
+    --secondary-color: black;
+}
+}
+
 }

static/css/layout.css

@@ -35,6 +35,10 @@ h1 {
 h2 {
   font-size: 1.65rem;
 }
+h1, h2, h3, h4, h5, h6 {
+    /*I want serifs dangit*/
+    font-family: "courier-std", serif;
+}
 p{
   font-size: var(--base-text-size);
 }
@@ -124,8 +128,12 @@ blockquote {
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
+}
+.icon {
+    width: 2rem;
+    height: 2rem;
 }
-
 /* div element with this class can be a bitch so need to select those as well as pre*/
 .sourceCode {
     max-width: -moz-available;

static/images/rss.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 	 viewBox="0 0 455.731 455.731" xml:space="preserve">
          <style>
-            @import url("/css/icon-colors.css");
+            @import url("/static/css/icon-colors.css");
             .box {
                 fill: var(--background-color);
             }
@@ -17,6 +17,7 @@
                 fill: var(--primary-color);
             }*/
          </style>
+         <a href="/index.xml" target="_top">
 <g>
 	<rect x="0" y="0" class="box" width="455.731" height="455.731"/>
 	<g>
@@ -28,4 +29,5 @@
 		<circle class="icon circle" cx="109.833" cy="346.26" r="46.088"/>
 	</g>
 </g>
+</a>
 </svg>

templates/default.html

@@ -12,6 +12,7 @@
         href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
         rel="stylesheet">
 
+    <link rel="stylesheet" href="https://use.typekit.net/tux2tbi.css">
     <meta name="theme-color" content="#1c1b19" media="(prefers-color-scheme: dark)">
     <meta name="theme-color" content="#e2e3e5" media="(prefers-color-scheme: light)">
     <link rel="stylesheet" type="text/css" href="/static/css/layout.css" />
@@ -31,6 +32,8 @@
         <main id="content">
             {{{content}}}
         </main>
+        <!-- don't bother with anchor on outside anchor is inside svg-->
+        <object class="icon" data="/static/images/rss.svg"></object>
     </div>
 </body>
 

templates/feed.xml

@@ -1,35 +1,21 @@
 <?xml version="1.0" encoding="utf-8" standalone="yes"?>
-<feed xmlns:atom="http://www.w3.org/2005/Atom">
+<feed xmlns="http://www.w3.org/2005/Atom">
     <title>Pagwin's Blog</title>
-    <link>https://pagwin.xyz/</link>
+    <link href="https://pagwin.xyz/"/>
     <updated>{{now}}</updated>
-    <description>All of pagwin's blog posts</description>
     <generator uri="https://git.pagwin.xyz/Pagwin/psb">PSB</generator>
-    <language>en-us</language>
+    <id>https://pagwin.xyz/posts</id>
     <link href="https://pagwin.xyz/index.xml" rel="self" type="application/rss+xml"/>
     <author>
         <name>Pagwin</name>
-        <email>rss-contact@pagwin.xyz</email>
     </author>
     {{#posts}}
     <entry>
         <title>{{title}}</title>
         <link href="{{link}}"/>
         <updated>{{iso_date}}</updated>
-        <summary>{{description}}</summary>
+        <summary>{{summary}}</summary>
         <id>{{id}}</id>
-        {{iso_date}}
     </entry>
     {{/posts}}
-<!--
+</feed>
--->
-<!--
-        <item>
-            <title></title>
-            <link><>
-            <pubDate></pubDate>
-            <guid></guid>
-            <description></description>
-        </item>
--->
-</rss>

templates/posts.html

@@ -4,7 +4,7 @@
         <dt class="post-title-item"><a href="{{link}}">{{title}}</a> </dt>
         <time datetime="{{{iso_date}}}">{{date}}</time>
         <dd>
-            <p>{{description}}</p>
+            <p>{{summary}}</p>
         </dd>
     </div>
     {{/posts}}