A new template for single articles

14 September, 2019

The default template of my website sure looks different, but for a reason: It is originally based on cards (hence the CSS class name), not single articles. So when I used it to display single articles like this, it just looks... overkill.

Let's change that with a new template! It has a much less rounded corner, and slightly smaller shadows as well. In addition, I'm trying to make it easy as Markdown to write posts on this site, so stay tuned for a remix of Element CSS!

Simulation of saturated YouTube thumbnail

Thankfully, I don't have to resort to this sort of thumbnail in order to grab attention!

My requirements for sanify

So, what am I doing differently from Element CSS? Honestly, none. This is mostly a separate implementation.

Things I will not do

If it's not in GFM, it's not in sanify.

That's basically the gist of it.

Table test


Code block test

<code> is used inline.

func main(){
    fmt.Println("<pre> is used for large blocks!")

Features new to sanify

Blockquotes have a src attribute:

Honestly people who are still coding stuff for older hardware impress me so much

The <cite> tag can be used to indicate quotes in proportional font, and has additional styling:

I just read War of two Worlds, and it's awesome.

The Dreamcast is a console that never really had its shine.

Sidebar images are docked to the right side, out of the main article. They do come back inline when things get crowded!

Neocities is a social network of 254,000 web sites that are bringing back the lost individual creativity of the web. We offer free static web hosting and tools that allow you to create your own web site.

Neocities features an in-browser HTML editor, a command line tool, custom domain support, fast site performance, easy file uploading, RSS feeds, folder support, and so much more.

Clearing is always done manually. I used to clear automagically on headings, but it looks uglier that way.

<note> and <caution> blocks can be used for all of your offtopic rambles.

Wikiboxes are actually a holdover from my previous website (done for a school assignment). Talk about component reuse!

I call these extra elements "Wikiboxes", as they are originally from MediaWiki. These extra elements aren't actually in the original idea for sanify, it's mostly added as an afterthought.

This note box also has the sidebar class applied to it, which means that it also stays far to the right when you read this page on a computer. Neat, huh?