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!
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.
- Is beautiful (ofc!)
- Displays images properly
- Graceful headings
- Maybe: tables (Element CSS feature parity
- Maybe: codeblocks (Element CSS feature parity)
- And of course lists!
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
| Name | Instrument |
|---|---|
| Data | Violin |
| Riker | Trombone |
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.
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?