ginzuishou

What's all this then?

This is a visual theme for my Codepen projects, built in Sass.

What does "ginzuishou" mean?

It's a Japanese word meaning "silver crystal". It's a hint to the inspiration behind the colours of this theme. If you know, you know.

It's hard to see things when you're too close. Take a step back and look. There is immense joy in just watching - watching all the little creatures in nature. Trees grow however makes them happy. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it.

We don't need any guidelines or formats. All we need to do is just let it flow right out of us. Let's get crazy. Just make a decision and let it go. These things happen automatically. All you have to do is just let them happen. That's crazy. In nature, dead trees are just as normal as live trees.

const code = this;
  • Unordered list item one.
  • Unordered list item two.
  • Unordered list item three.
  1. Ordered list item one.
  2. Ordered list item two.
  3. Ordered list item three.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Wait, is this an accordion? In native HTML?

Yes! It's a group of details elements, with border radii applied to the first and last elements in the group.

Can each accordion item be styled individually?

Sure can.

How do you get the other accordion items to close when another one opens?

Add a name attribute to each of the details elements in the group. Make sure the value of name matches across all accordion items.

.moonlight

It's hard to see things when you're too close. Take a step back and look.

We don't need any guidelines or formats.

.midnight

It's hard to see things when you're too close. Take a step back and look.

We don't need any guidelines or formats.

.rainbow

It's hard to see things when you're too close. Take a step back and look.

We don't need any guidelines or formats.

.twilight

It's hard to see things when you're too close. Take a step back and look.

We don't need any guidelines or formats.

.sunrise

It's hard to see things when you're too close. Take a step back and look.

We don't need any guidelines or formats.

data-variant="success"

data-variant="info"

data-variant="error"

data-variant="warning"

div.moonlight popover

It's hard to see things when you're too close. Take a step back and look.

We don't need any guidelines or formats.