Design Guide
This is the design guide for this site. This page shows native HTML elements as well as custom components that have been styled for this site. This page exists for the purpose of identifying which elements and components have styles specifically created for them and showcasing those styles. As such, this is not a typical page, and you will encounter a fair bit of lorem ipsum content below.
Below, I've left notes about some of the design choices and features of different elements, but those notes are not meant to be considered complete or exhaustive. For further documentation on use or modifying these styles, see the CSS file or the site's ReadMe page.
Heading Level 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae et est laborum doloribus voluptatem veniam harum odio, dolorum in, veritatis sint, rem expedita iusto nihil?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum debitis id dolor autem saepe pariatur harum expedita, hic cumque tempore. Culpa quidem, eius numquam facilis.
Heading Level 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit recusandae quibusdam reiciendis quas, maxime atque cum veniam debitis consequuntur ea dolorum distinctio est quasi laborum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium quaerat quis asperiores, vitae cumque aspernatur adipisci neque, dolore eos accusantium quos, suscipit minima saepe aliquam.
Heading Level 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat amet cumque fuga, quas minus! Corrupti eligendi modi quisquam, tempora non optio maiores eum beatae recusandae.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, illo, accusamus. Ea quis soluta nesciunt amet unde quia ex distinctio nam illo. Dolorem, dolor temporibus!
Heading Level 5
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis veniam, quisquam eaque vero saepe et laudantium aliquam doloribus neque repellendus. Unde, enim autem doloribus voluptatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio earum praesentium nulla repellendus consequuntur magnam voluptatem? Natus nostrum minima, nesciunt cum mollitia et dolorem. Doloremque.
Heading Level 6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, voluptates quibusdam culpa totam ipsa placeat cupiditate cum, vel voluptatum ex id necessitatibus commodi! Reprehenderit, veniam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ratione, reiciendis voluptate rerum laboriosam molestiae, odio quibusdam minima rem voluptates expedita, temporibus provident modi ipsa!
Dark Mode & Light Mode
This site supports both dark and light modes. Change your OS or user agent preferences to change between modes.
Inline Elements
The a element. This element has unique styles for hover and focus states.
Here are some elements that appear bolded: the b element, the strong element.
Here are some elements that appear italicized: the i element, the em element, the cite element.
The ::selection pseudo-element is styled as well. Highlight this text to see it change color.
Here is the <mark> element: this text is marked/highlighed.
Here is the <code> element: this is the <code> element.
Here is the <kbd> element: Alt+D jumps your focus to the browser's URL/search bar.
Lists
Ordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
Unordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 3.1
- List Item 3.2
- List Item 3.2.1
- List Item 3.2.2
- List Item 3.3
- List Item 4
Description List
- Definition Term 1
- Definition Description 1
- Definition Term 2
- Definition Description 2
Tables
| Item | Cost (in galactic credits) |
|---|---|
| Starship | 9999999 |
| Ion core | 70099 |
| Rations | 2000 |
| Total | 10072098 |
Block Level Elements
Blockquote
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam error blanditiis et culpa ut vero ea quibusdam, consequatur natus quidem nihil officiis a porro accusamus accusantium facilis amet dolore beatae?
Custom Components
Raised Card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis porro similique, cum quidem tempore corporis, pariatur voluptate delectus quisquam soluta sequi quae, cumque aliquid ratione.
Links & Buttons
Inline
Here is a standard inline link: Ann Leckie is one of my favorite authors. Links have unique states for hover and focus styles.
“Undercover” Links
Below is a set of “undercover” links. I use these in the header and the footer. They look more or less like simple, free-floating links, but they have a nice rounded outline which appears on focus and which gives the impression of being a button.
In a list of links, give the <ul> or <ol> element class="link-undercover--list", and give each link class="link-undercover", like so:
If you have one standalone undercover link, give it both of these classes: class="link-undercover link-undercover--standalone", like so:
“Turncoat” Links
Next up we have “turncoat” links. I use these for tag links after blog posts. They look like classic outline buttons, and in a focus or hover state, their colors flip. These links are often prefaced by a decorative SVG icon.
In a list of links, give the <ul> or <ol> element class="link-turncoat--list", and give each link class="link-turncoat", like so:
If you have one standalone turncoat link, give it both of these classes: class="link-turncoat link-turncoat--standalone", like so:
The standalone turncoat links have some extra padding.