December Adventure 2024

2024-12-01

Day 1

As is tradition, I reactivated my winter theme which you should be seeing right now. There are several great examples of snow animations elsewhere but I wanted to write my own that was just HTML + CSS. This time around, I also added animating colors that are meant to mimic the lights we have at home. I'm still not super happy with the colors on both dark and light mode but that's for another day.

2024-12-02

Day 2

A few months ago I learned about Fonts with Built-in Syntax Highlighting so I added this to my site instead of Prism. I originally thought the colors weren't customizable unless you edit the font itself and recompile it which was a downside to this approach but worth the change at the time. Today, I figured I'd check again to see if anything new was written about it and learned about font-palette and override-colors which let's me configure the colors to better match my websites theme. It took some messing around with the colors and it's not perfect but this is what it looks like now based on the original example:

@font-palette-values --sylveon {
  font-family: 'Monaspace';
  override-colors:
    0 #6ef596, /* keywords, {} */
    1 #666666, /* comments */
    2 #71a8fe, /* literals */
    3 #f9f39e, /* numbers */
    4 #6ecff6, /* functions, [] */
    5 #f7f086, /* js others */
    6 black, /* not in use */
    7 #f492a5, /* inside quotes, css properties, few chars */
    8 #f55678 /* few chars */
  ;
}
@font-face {
  font-family: 'Monaspace';
  src: url('/assets/fonts/MonaspaceKrypton-SyntaxHighlighter-Regular.woff2') format('woff2');
}
code {
  font-family: "Monaspace", monospace;
  font-feature-settings: "colr", "calt";
  // font-palette: --sylveon;
  // or
  font-palette: var(--code-font-palette);
}

I use a variable so that I can switch the font-palette depending on whether the site is in light or dark mode.

2024-12-03

Day 3

Small change but I wanted to add a calendar at the top to link to specific days. I also updated the markup to work as an HTML Journal so that it can be subscribed to if one so chose via Atom/RSS.

2024-12-04

Day 4

Busy work day so didn't actually get anything done here. I'm cleaning up my blogroll and TODO so I hope to get that done soon.

2024-12-05

Day 5

I wanted to go back to what I was doing yesterday but todays Front End Study Hall motivated me to add one more thing for my holiday/winter theme. My Online Now indicator on my homepage is now styled to match the season. I wasn't sure if this was the right way to do it so I may come back to it if there's a way to handle it without an svg.

2024-12-06

Day 6

I didn't actually get anything done today, however I did write a specific piece of code at $DAYJOB that I was really excited about. Not exciting and nothing to show, but know I was proud.

2024-12-07

Day 7

I found an issue with my fetch_webmentions.js code related to fragments (#) in URLs. Fairly small fix but things work now.

2024-12-08

Day 8

This weekend got away from me to the point that I even missed most of IndieWebCamp: San Diego. I started updating my stickers page. I kinda want it to look like the stickers are on the page but need to work a little more to figure out how to display some of the captions. That's for tomorrow.

2024-12-09

Day 9

Fixed some styling related to webmentions and the /read page.

2024-12-10

Day 10

Small change but finally got the descriptions for the stickers to show up in a way I kinda like. I think a better idea would be to place them seemingly random on the page rather than the grid its on. I don't want to do it with position: absolute but I just might have to.

2024-12-11

Day 11

I was originally going to change the list to reverse order for this log but I decided instead to hide all days except today and make the calendar clickable to show that specific day. You can also show all if you want to read the full log in order.

2024-12-18

Day 18

Things have been busy but I'm still planning to come back and write more for the last few days. I have been writing code, just nothing to show yet.

2024-12-19

Day 19

Updated the styles for my /TODO page.

2024-12-22

Day 22

I added octothorpes to my site. Currently I have it set up to only add them for articles but I also want to be able to tag notes if they follow a specific format. Maybe if a tag is octothorpes:tag then it would ignore them for my internal tagging system and only add it as an octhorpe.