Have you ever for some reason wanted to use the ✨amazing✨ stylesheets from this website in your own projects? No problem! This post is a full documentation on how it works and how you can use it and blah blah blah blah

Definitions(README)

The CSS for this website specifically has two parts:

• Component Styles: Styles for components e.g Cards and Buttons found at the Test Page.
• Everything else: Navbar, Content, Content Header, Content Body, and everything else thats not mentioned above or before.

They are available in this directory as components-style.css and style.css.

Component documentation

Check out the Test Page for now. Just use inspect elements to check what classes etc they have

Layout documentation

You can again just inspect element this website, or look at the simple example shown below for reference.

<div class=navbar></div> <!-- The entire navbar -->
<div class="side-contents"></div> <!-- Shows up next to contents,
          if this is present the positioning of contents will change automatically -->
<div class=content><!-- The thing in the middle -->
    <div class="content-header"></div> <!-- Content header -->
    <div class="content-content"></div> <!-- Content body -->
</div>
<div class="footer is-center"> <!-- Static footer --> </div>

My content isn't taking up the screen!

If you put the above code as is into a document with skybord.css set up, you will realise that the content will not take the rest of the page if it is empty. You will have to either make sure the content is longer than the page or do some maths and put down a set height.

Themes

On the top of your everything else styles is a definition of colours used with the css. If you hate skybord.css's black and white you can change it to anything else, for example add a little blue to your background or a little red to your foreground.

Does this terrify you?

Below are a list of all the variables and what they affect.

Name	Desc
Background Primary	The darkest back background of the page.
Background Secondary	The middle background for contents, for example the contents of a post.
Background Tertiary	The lightest background for interactive components(buttons etc) and for the content header.
Foreground Primary	Texts, titles, everything
Foreground Secondary	Secondary texts where necessary
Foreground Border	Borders
Colour properties	I forgot what they are used for but practically useless

Updates

This stylesheet definitely will have updates and changes depending on my mood, sometimes even an overhaul. Again, using the version from this repo for better accuracy.

Mobile Support

Apart from the above, skybord.xyz css has out of the box mobile support, which you probably can tell if reading on mobile.

Sidebar

If using the sidebar, it will instead appear at the top of the page on a small enough screen, similar to Github's.