STYLE GUIDE
A guide that shows my theme color palettes, heading styles, how different HTML elements are styled, and other site-wide design elements. Heavily inspired by ShellSharks. 🙂
TABLE OF CONTENTS
- Color Palettes
- Headings
- General HTML Elements
- Other Site-Wide Design Elements
- Not Yet Defined or Described
COLOR PALETTES
Light and dark theme color palettes can be seen by changed the theme mode (using the toggles in the sidebar).
FONTS
Display: Summer
Used for headings and larger text.Base: RainyHearts
Used for body text.Other: Trebuchet MS
Used for font toggle (for accessibility).HEADINGS
The standard headings for my site. Any customized headings are listed in the other site-wide design elements section.
H1 Header
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
H2 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.
H3 Header
H3 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.
H4 Header
H4 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.
H5 Header
H5 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.
H6 Header
H6 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.
GENERAL HTML ELEMENTS
Horizontal Rule <hr>:
Hyperlink <a>: This is an internal link to Mauvemystic's Dream Island. This is an external link.
aside <aside>:
bold <span class="bold">: Welcome to my island!
blockquote <blockquote>:
This is a blockquote.
br <br>:
This is me typing a sentence, and then
here's a line break.
button <button>:
cite <cite>: by mauvemystic
code <code>: Here is some inline code ↠ Print("Welcome to my island");
details <details>: Summary
This is what you see when you use the toggle dropdown.
footer <footer>:
header <header>:
unordered list <ul>:
- list item 1
- list item 2
- list item 3
ordered list <ol>:
- list item 1
- list item 2
- list item 3
main <main>:
mark <mark>: marked text
quote <q>: Why did the chicken cross the road? To get to the other side!
striked text <s>: whoops, scratch that!
sample output <samp>: example ↠ here's the output
small <small>: here's some small text
subscript <sub>: here's a subscript here
summary <summary>:
superscript <sup>: here's a superscript here
table <table>, <td>, <tr>, <th>:
| Name | Favorite Color |
|---|---|
| mauvemystic | purple |
underline <u>: underlined word
OTHER SITE-WIDE DESIGN ELEMENTS
Crossbullets class (list)
- List item 1
- List item 2
- List item 3
Heartbullets class (list)
- List item 1
- List item 2
- List item 3
Info class
Linkbutton class
Minitapebox class
Minitape Header
This is a minitapebox. I like to also use these to make sections on a page and make certain info stand out.
Resourcelink class (p)
This is the resourcelink class. I like to use this to create "lists" without the html list element.
Sidebar-title class
Sidebar blockquote
Starbullets class (list)
- List item 1
- List item 2
- List item 3
Stylehead class (heading)
H2 Header w/ Background
Tab class
Tapebox class
Tape Header
This is a tapebox. I like to use these to make sections on a page and make certain info stand out.
NOT YET DEFINED OR DESCRIBED
HTML tags that aren't defined within my site or not described in this guide.
Not described:
img, nav, p, pre, section
Not defined:
address, area, article, audio, base, bdi, bdo, caption, canvas, colgroup, datalist, dd, del, dfn, dialog, div, dl, dt, embed, fieldset, figcaption, figure, form, head, hgroup, html, iframe, img, input, kbd, label, legend, link, map, meta, meter, noscript, object, optgroup, option, output, param, picture, pre, progress, rp, rt, ruby, script, search, select, source, span, style, svg, tbody, template, textarea, tfoot, thead, title, track, var, video, wbr