Here lies the Shellsharks site Style Guide. It displays the current theme color palette, heading styles, how different HTML elements are styled, and other site-wide design constructs of note. This is primarily a tool for myself when modifying site design.

Table of Contents

Markdown syntax for inputting a ToC

* Do not remove this line (it will not be displayed)
{:toc}

• Table of Contents
• Color Palette
  • Post Type Colors
  • Notes Source Colors
  • Other Colors
• Headings
• H1 Header
  • H2 Header
    • H3 Header
      • H4 Header
        • H5 Header
          • H6 Header
• General HTML Elements
• Other site-wide design constructs
  • Poem class
  • Containbox class
  • Note Card
  • Note Card w/ Reply
  • Site-wide Iconography
• Other HTML Elements
• Not yet defined or described here
• Deprecated
• Writing Style Guide & Conventions
• Resources

Color Palette

Color palette for the current theme.

Post Type Colors

Colors for the various post types throughout the site.

Notes Source Colors

Colors I use for shading notes from different sources.

Other Colors

Some other colors I use throughout the site…

Headings

Heading styles.

H1 Header

The H1 Header. Lorem ipsum odor amet, consectetuer adipiscing elit. Molestie at facilisis ultricies taciti dolor magna odio finibus. Ultricies mauris leo elementum porttitor curabitur eu. Proin integer iaculis malesuada placerat suspendisse euismod lectus. Rhoncus bibendum fames netus fringilla dictum bibendum integer penatibus efficitur. Sapien posuere venenatis nibh vivamus convallis interdum vulputate nullam.

H2 Header

The H2 Header. Felis diam vivamus inceptos sodales eleifend nullam amet conubia duis. Etiam faucibus rutrum fermentum per nullam class aenean? Montes nostra fringilla velit venenatis phasellus libero egestas facilisis maecenas. Donec consequat elementum praesent adipiscing integer. Quisque sodales erat suscipit; aptent turpis sollicitudin ligula. Mattis turpis lacinia sem morbi facilisis curabitur. Rutrum viverra class platea dui eros bibendum pharetra nec venenatis. Netus vitae et nisi venenatis aptent est sagittis netus. Senectus ornare maximus arcu, odio sit facilisis vestibulum blandit.

H3 Header

The H3 Header. Suspendisse elementum nascetur congue conubia magnis consequat. Erat maecenas himenaeos vel gravida sem torquent. Adipiscing metus aliquet id leo nisl egestas nec. Sem curabitur tempus aptent aenean eget porta viverra. Aptent elit venenatis fermentum habitasse porta sollicitudin vivamus pharetra. Suspendisse vel nam orci proin himenaeos efficitur. Hendrerit vitae euismod efficitur dapibus molestie ultrices volutpat purus lectus. Nec nisl efficitur; vulputate congue dolor massa? Proin nisi hac aenean sit duis ante dui? Fringilla proin luctus iaculis nostra ornare cubilia orci.

H4 Header

The H4 Header. Accumsan non suspendisse non proin sodales erat pretium fringilla. Montes sagittis efficitur sociosqu pellentesque magnis fringilla mi justo feugiat. Nascetur ipsum quisque tempus imperdiet odio magnis cras ad. Iaculis quis tempus nisl donec eros congue semper. Dignissim eleifend cursus sollicitudin libero senectus ultrices id aliquam. Praesent ultricies ad rutrum mattis; eu tempor maecenas augue nascetur. Donec massa sagittis aenean nibh imperdiet etiam. Bibendum ad ornare pulvinar non neque nostra enim dui. Dignissim porta tristique gravida ullamcorper conubia sem. Nostra velit enim aliquet nostra congue finibus fermentum pulvinar.

H5 Header

The H5 Header. Venenatis hendrerit netus posuere per aptent aptent. Facilisi at nostra id himenaeos phasellus magnis nascetur ullamcorper. Porta dui dui; dis penatibus vestibulum habitant. Habitasse eleifend bibendum class vehicula velit purus. Vulputate parturient condimentum eu aliquet conubia curabitur auctor. Accumsan sollicitudin fusce parturient amet urna fusce nostra suscipit. Enim primis per diam ullamcorper tincidunt eros.

H6 Header

The H6 Header. Habitasse porta taciti sapien senectus, egestas feugiat vestibulum. Mollis sem cursus nascetur venenatis augue nec. Ultricies tortor a morbi; magnis massa parturient nostra. Natoque amet faucibus adipiscing ridiculus cursus fames. Diam enim ultricies condimentum amet facilisi. Litora odio nec senectus odio curabitur; urna nullam natoque justo. Finibus convallis diam mattis nisl ullamcorper inceptos.

General HTML Elements

Horizontal Rule <hr>:

Horizontal Rule (Shark-Style):

Hyperlink <a>: Shellsharks Homepage

bold <b>: Welcome to the Shellsharks website!

blockquote <blockquote>:

If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!

br <br>:

Some text blah blah and then a break
text after the break.

button <button>: Push me!

cite <cite>: [Shellsharks 1]

code <code>: Here’s some inline code –> Print("Hello World");

code <pre><code></pre>: Here’s a full-size, pre-embedded code block (using the monokai style from rouge)

<p>here's some html code!</p>

em <em>: I’m emphasizing this!

footnotes [^N]: Here’s a footnote.¹

underordered list <ul>:

• item a
• item b
• item c

ordered list <ol>:

1. item 1
2. item 2
3. item 3

mark <mark>: Unmarked text, and marked text.

short quotation <q>: What we do in life, echoes in eternity

text no longer correct <s>: The year is 2023

sample output <samp>: Program A outputs, bzzt –> This is example output!

small <small>: Regular stuff and Small stuff

strong <strong>: Regular stuff and Strong stuff

subscript <sub>: Some subscript stuff_here

superscript <sup>: Some superscript stuff^here

table <table>, <td>, <th>, <tr>:

time <time>: The time is 12:45

underline <u>: I am going to underline this –> Shellsharks.com

Other site-wide design constructs

Poem class

Containbox class

Note Card

Mike Sass
@shellsharks

1/19/24 11:27

When we find out God is an AI singularity that created humans to replace itself only to have us humans create AI to replace ourselves. ♾️

#microfiction #ai

28

---

Ivory for iOS

Syndication:

#life #microfiction #ai

Note Card w/ Reply

Mike Sass
@shellsharks

3/13/24 14:27

@stefan Oh man, the “Nothing to put there” crowd hits home. That and the much-related (but not listed here) “no one will care what I have to say / no one will read” crowd. To anyone who matches these descriptions or has these feelings, know that you…

A. absolutely have something to say, and a blog is a great place to say it, and..

B. The Internet is a huge place. People will find your site and read it, no matter how niche it is, or how poorly designed, or how seemingly poorly written. There’s no thought you could have that couldn’t educate someone else out there and nothing you could write about that there isn’t some community out there that would have similar thoughts.

As for the other reasons folks don’t have a site…

1. Github Pages (and some other platforms) is 100% free (so if expense is an issue then it doesn’t need to be)

2. There are more hosting providers than ever these days, many of which make it dead simple to get started, so don’t let complexity be a stopping point. You can always start real simple and get more complex as you go.

3. Time may be the biggest hurdle. I would just say that a blog isn’t something you need to maintain or publish regularly. Just put something up and post when you have time. Posts can be short, they can be sloppy, they can be whatever, Since you own the site, you can always edit something poorly written later too.

For everything else, you could check out my post about “Why I Blog. You Should Too!” for other advice/inspiration. Cheers!

https://shellsharks.com/you-should-blog

287

---

Ivory for MacOS

Syndication:

#technology #life #blogging #bestof

Site-wide Iconography

Icons are provided to Shellsharks via Phosphor

Other HTML Elements

abbreviation <abbr>: ShllShrk

data <data>: This is some "data"!

details <details>:

alternate voice or mood? <i>: This is my “alternate” voice

insert <ins>: test

menu <menu>:

Not yet defined or described here

HTML tags that are either not at all defined within my site or at minimum not described in this style guide.

address, area, article, aside, audio, base, bdi, bdo, caption, canvas, colgroup, datalist, dd, del, dfn, dialog, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, head, header, hgroup, html, iframe, img, input, kbd, label, legend, link, main, map, meta, meter, nav, noscript, object, optgroup, option, output, p, param, picture, pre, progress, rp, rt, ruby, script, search, section, select, source, span, style, summary, svg, tbody, template, textarea, tfoot, thead, title, track, var, video, wbr

Deprecated

A list of deprecated HTML elements, also not defined here.

acronym, applet, basefont, big, center (I still use this hah!), dir, font, frame, frameset, noframes, strike, tt

Writing Style Guide & Conventions

For information on writing style / conventions, reference the Manual of Style.

Resources

• A blog post with every html element
• HTML Element Reference | W3Schools
• Flamed Fury Style Guide
• kramdown Quick Reference