css test page

index

• blog + css
• color codes
• headers
• text + quotes
• lists + tables
• code
• links
• images + videos
• spoiler tags

blog + css

this blog is made with bearblog. blog posts are written in simple markdown (with some html embedding for personal flairs).

this css theme is mostly derived from sakura, a classless css framework by oxalorg. further inspiration was drawn from bearblogs by cinni and plex, as well as the neocities site wired sound for wired people.

please note that as this is a personal reference sheet, some of the information in the following text only apply within the context of this blog and its custom styling.

color codes

| medium bold | clicked links, title shadow | #da4453 | light | title, main, unclicked links, breaks | #eb99a1| | white | text, borders, spoilers | #ffffff |

headers

there are four sizes of header text.

title header

large header

medium header

small header

the smaller the better...

text + quotes

this is presumably a body of text of subpar quality, meandering over some grand concept in which the writer completely lacks the capability to properly handle.

this is a quotation from some other text, perhaps to give the writer's prose the illusion of competency.

this is a continuation of the original body of text, now emboldened by the knowledge (but not necessarily the understanding) of others' work¹.

lists + tables

邪道魔法少女の作品：

• ナースウィッチ小麦ちゃんマジカルて
• 撲殺天使ドクロちゃん
  1. ぴぴるぴるぴるぴぴるぴ～
  2. ぴぴるぴるぴるぴぴるぴ～
• 大魔法峠

好きな邪道魔法少女の作品：

1. ナースウィッチ小麦ちゃんマジカルて
2. 撲殺天使ドクロちゃん
   • ぴぴるぴるぴるぴぴるぴ～
   • ぴぴるぴるぴるぴぴるぴ～
3. 大魔法峠

code

should the writer recall their begrudgingly accepted trade in coding, they can create blocks as follows to show code snippets (though there may likely be other uses for this similar to quotation):

def test():
  text = 'you are an idiot!'
  print(text)

while it is possible to render this with colors, it is currently slightly difficult to read:

def test():
  text = 'you are an idiot!'
  print(text)

links

here is a link test. it will open in another tab, to be listened to in the background or read at a separate time without detracting from the place it was linked from. (in other words, don't forget to add tab: before your links so readers don't lose their place...)

links can be created within a page as well, provided you insert elements with ids. for example, the table of contents entry for this section of the page:

* [links](/css/#links)

redirects to the following html object, which encloses the title of this section:

<span id="links">links</span>

images + videos

the following objects are capable of responsive sizing - try changing the window dimensions!

a totally not stolen image²:

long, long, man~³⁴:

a youtube embed:

create your own youtube embed link with the following template:

<div class="embed">
<iframe width="690" height="388" src="https://www.youtube.com/embed/your video id here" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div>

spoiler tags

boo!

spoiler tags like the one above can be created with the following code snippet:

<span class="spoiler">spoiler text</span>

hover over the spoiler to reveal the text. on mobile devices you should be able to hold press on the text to permanently remove the spoiler.

top