Pen's CSS and HTML Testing Site (and whatever this other computer coding language is called)

Note: If you want the white section to be longer or shorter, you've got to change the "—background-gradient-distance:" value. Make the number bigger to make the white section to be larger, and make the number smaller to make the white section smaller. At default, it is set at 125rem. (I'll get scutoid or someone to tell me how to exactly do this without having to pull the whole code for it.)

This is a temporary page. Once I get the code perfect, I'll move import the theme to another page with the correct posting format for a theme.

@import url('https://fontlibrary.org/face/raleway');
@import url('https://fontlibrary.org/face/shabmam');
@import url('https://fontlibrary.org/face/iosevka-extended');
 
:root {
  --theme-base: "black-highlighter";
  --theme-id: "aimless";
  --theme-name: "Aimless Theme";
 
  --logo-image: url("http://backrooms-sandbox-2.wikidot.com/local--files/collab:pen-s-css-and-html-testing-site/edited_logo.png");
  --header-title: "The Aimless";
  --header-subtitle: "What now lies ahead?";
 
  /* Typefaces */
  --body-font: 'Shabnam', sans-serif;
  --header-font: 'Shabnam', sans-serif;
  --title-font: 'Raleway', sans-serif;
  --mono-font: 'Iosevka Extended', monospace;
 
 /*Colors of the Actual Page*/
  --white-monochrome: 168, 168, 79;
  --pale-gray-monochrome: 152, 133, 88;
  --light-gray-monochrome: 15, 15, 0;
  --gray-monochrome: 71, 49, 27;
  --black-monochrome: 0, 0, 0;
  --bright-accent: 71, 50, 30;
  --medium-accent: 103, 10, 10;
  --dark-accent: 71, 49, 27;
  --pale-accent: 152, 133, 88;
  --alt-accent: 255, 140, 0;
 
--swatch-topmenu-border-color: var(--medium-accent);
 
  --link-color: 54, 35, 17;
  --hover-link-color:  117, 82, 47;
   --newpage-link-color: var(--alt-accent);
 
  --background-gradient-distance: 125rem;
 
  --gradient-header: linear-gradient(to top,
      rgba(var(--medium-accent)) 0%,
      rgba(var(--medium-accent), 0.90) 100%
   );
   --diagonal-stripes: linear-gradient(transparent 0);
}
 
#skrollr-body {
   background-image:
    radial-gradient(circle, rgb(var(--medium-accent)) 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
/* Makes those super tiny red dots at the top.*/
#skrollr-body {
   background-image:
   radial-gradient(circle, rgb(var(--medium-accent)) 50%, transparent 0);
   background-repeat: repeat;
   background-size: 0.25em 0.25em;
   width: 100%;
   height: 7.5rem;
}
 
#side-bar .side-block div a img {
   filter: grayscale(100%);
}
 
 #container {
   background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0);
   background-size: 0.25em 0.25em;
   background-repeat: repeat;
   background-attachment: fixed;
}
 
div#page-options-bottom-2 > a, div#page-options-bottom > a {
   border-radius: 0em;
   -moz-border-radius: 0em;
   border: none;
   margin: auto; /*To fix that pesky bottom options bar*/
}
 
div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {
   border: none;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
}
 
#header::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a {
   position: absolute;
   top: 1rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
}
 
#header h2, #header h2 span, #header h2 span::before {
   position: absolute;
   top: 2rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
}
 
#header h1 a::before, #header h2 span::before {
   text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--newpage-color))
}
 
div.block-center {
   min-width: 30%
}
 
@media only screen and (max-width:768px) {
   div.block-center {
      min-width: 40%
   }
}
 
/*Syling the colors of the Blockqoutes.*/
blockquote {
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(255,255,255,.25);
}
 
div.blockqoute {
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(255,255,255,.25);
}
 
.styled-quote {
   background-color:rgb(var(--pale-gray-monochrome));
   border-left: 0.5rem solid rgba(var(--gray-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(255,255,255,.25);
}
 
.dark-styled-quote {
   background-color:rgb(var(--gray-monochrome));
   border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.05rem 0.1rem 0.3rem rgba(255,255,255,.25);
   color:rgb(var(--black-monochrome));
}
 
.lightblock {
   background-color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(255,255,255,.25);
}
 
.darkblock {
   background-color:rgb(var(--gray-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(255,255,255,.25);
   color:rgb(var(--black-monochrome));
}
 
.interwiki1_title {
    color: rgb(80,77,66);
    border-bottom: solid 1px rgb(80,77,66);
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
}
 
.interwiki1_entry {
    position: relative;
    margin: 2px 0;
}
 
.interwiki1_entry p::before {
    content: "■";
    font-size: 9px;
    color: rgb(80,77,66);
    position: relative;
    margin: 0 7px 0 5px;
    bottom: 3px;
}
 
.interwiki1_entry a, .interwiki1_entry a:visited {
    font-weight: bold;
    color: #b01;
    text-decoration: none;
    background: transparent;
}
 
.interwiki1_entry a:hover {
    background-color: transparent;
    text-decoration: underline;
}
 
div.scpnet-interwiki-wrapper {
    margin: 0;
    width: auto;
}
 
iframe.scpnet-interwiki-frame {
    border: inherit;
    width: 100%;
    height: 230px;
}
 
@media (min-width:768px) {
    div.scpnet-interwiki-wrapper,
    iframe.scpnet-interwiki-frame {
        width: 100%;
    }
}
 
/* remove the input on the searchbar because it doesn't work */
#search-top-box-input {
    display: none;
}
 
/* add a message to the deletion thing or the rename thing */
#rename-option-rename::before, #rename-option-delete::before {
    content: "Reminder: Backrooms Wiki users can rename pages they own, but use this responsibly (preferably only if there is an error with the name). Only staff are allowed to delete pages, even your own pages: ask Backrooms Wiki staff and they will help you!";
    color: yellow;
    display: block;
    margin-top: 1rem;
}

Examples:

You scrutinizing my new theme.

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Fonts Used

Body Font is 'Shabnam'
Header Font is 'Shabnam'

Title Font is 'Raleway'

Monospaced font is 'Iosevka Extended'

tab with text

This is a tab view.

Tab with more text

Hey look, more text here.
Surprising.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This empty tab has a really long name for some odd reason. I wonder why?

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

I lied about this one. It's not empty.

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes¹

[[div class="lightblock"]]
This is a light block.
[[/div]]

[[div class="styled-quote"]]
Styled qoute.
[[/div]]

[[div class="darkblock"]]
Dark block.
[[/div]]

[[div class="dark-styled-quote"]]
Dark Styled block qoute.
[[/div]]

---

This is a	table
I personally don't	know how to make these
so I don't expect you to be able to either.

this text
is here
so you can
see how
everything looks
with different
formats^and
other_stuff
including links that do not
And links that do exist!

---

Credits

"Cats in Milano" by br1dotcom is licensed under CC BY 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by/2.0/?ref=openverse.
I based this heavily upon the Old Liminal theme page, so thanks to the creators of it for creating a base for this.
Thanks to Bufo_Bufo for the encouragment and in-depth critique on this. It really helped, more than they realized.

---

Footnotes

1. And here's a footnote!