Wanna steal this look?

Using 'cave.css'

documentation/tutorial

=== Setting Up a Page ===

First, you'll need to create a document called cave.css. Then, copy and paste these contents into it. To apply the CSS to an HTML page, paste the following into the head of the document:

<link href="cave.css" rel="stylesheet" type="text/css" media="all">

If you want the content of your HTML page to be centered like it is here, you'll need to encase everything in the body in two div elements: the outermost div should have the class .flexbox, and within that should be a div with the class .container. Just put all of your page content within the .container div, and it'll be centered!

Next, decide on a four-color palette. By default, cave.css uses the Moonlight GB palette. I recommend browsing the Lospec palette list and setting the color count to '4'. Once you find one you like, you'll need to change the variables in the :root of the CSS.

• --bg: The background color.
  I recommend using either the darkest or lightest color in your palette.
• --font: The main font color and the link hover background color.
  I recommend using a color that has either the most or second-most contrast with your background.
• --clr-a: The color of headings, bold text, and the background of unvisited links.
  I recommend using a color that has the second-most or most contrast with your background.
• --clr-b: The color of horizontal rules and the background of visited links.
  I recommend using a color that has the least contrast with your background.

Optionally, you can change the font face with the --font-face variable or the width of the content with the --width variable. The defaults are Lucida Console and 800px, respectively.

If you don't plan on messing with classes, congratulations! You're done!

== Background Images ==

As of June 11, 2023, you can easily include a background image! Just put the following in the <style> tag of your page:

body {background-image: url("YOUR_IMG.png");}

I highly recommend using doodad.dev's pattern generator or something similar to maintain your four-color palette.

=== Changing Colors, Positions, and Borders ===

For any given element, you can change the text color, the background color, or both. Sorry about the confusing names for the last few, but I couldn't think of any others.

• .a changes the font to color a, like so.
• .b changes the font to color b, like so.
• .a-bg changes the background to color a, like so.
• .b-bg changes the background to color b, like so.
• .font changes the font to the normal font color, which is useful if you want to change the color inside another group of a different color, or if you want to change the color of a heading.
• .bg-font changes the font to the background color, like so. (fun for secret text)
• .font-bg changes the background to the main font color, like so. (fun for "redacted" text)

h1 and h2 elements have a width set to 100%, so that if their background colors are changed, it will create a visual separation in the page content. I also have a .no-margin class that allows you to remove the margins to create fun gradients or stripes.

Combine the colors any way you like!

There are also classes that help you align text. .center-text, .left-text, and .right-text do exactly what they say.

Finally, there are classes that change border styles and colors. For horizontal rules, the default border is solid and b-colored. The .dotted-border and .dashed-border classes change the border style to dotted or dashed, respectively. The .a-border, .b-border, and .font-border classes change the border to the a, b, or font colors, respectively.

== Changing a Single Page's Palette ==

To change the color palette of a single page, you'll need to paste the following into the head of the document:

<style>
  :root {
    --bg: #0f052d;
    --font: #36868f;
    --clr-a: #5fc75d;
    --clr-b: #203671;
  }
</style>

Next, you just need to replace those hex codes with the ones for the colors you want for that page!

=== Boxes ===

=== Displaying ASCII art ===

Because I also made this CSS for displaying ASCII art, I did some special things with the 'pre' element and added a few flexbox-related classes for making galleries. By default, the galleries center their content both horizontally (along the central y-axis of the page) and vertically (along the central x-axis of whatever row of things they're in). A div with the .gallery class will center all individual elements in this way. If you don't want to read up on the flexbox stuff and/or you want to use the gallery as-is, you don't need to read any further.

== "The Flexbox Stuff" ==

I made some classes that edit the behavior of the .gallery class in case you don't like the way things are justified/aligned. Because these classes mess with flexbox stuff, they'll also edit the behavior of the .flexbox div that encases the entire page, if that's interesting to you.

Here are the classes you can apply to a .gallery, or to any flexbox container:

• .justify-content-start justifies the stuff in the gallery towards the left side of the page.
• .justify-content-end justifies the stuff in the gallery towards the right side of the page.
• .justify-content-around justifies the stuff in the gallery so that there's equal space around the elements in each row. There will be an equal amount of space between an element and the side of its container as there is between each element.
• .justify-content-between justifies the stuff in the gallery so that there's equal space between the elements in each row. Space between elements doesn't take into account the space between an element and its container. In other words, elements can line up with the edge of their container.
• .align-items-start aligns the tops of all elements in the gallery with the tops of their respective rows.
• .align-items-end aligns the bottoms of all elements in the gallery with the bottoms of their respective rows.

And Here are the classes you can apply to an individual element within a .gallery, or any flexbox container:

• .align-self-start aligns the top of the element with the top of its row.
• .align-self-end aligns the bottom of the element with the bottom of its row.