➜ Home

Site HTML and CSS classes

A guide to styling using the site's CSS classes. The site uses Bootstrap 5, so all Bootstrap 5 classes will work here (some class names are different from the more widely-used Bootstrap 4), though some have been restyled to fit the site's aesthetic. The following show all classes that are different from Bootstrap defaults.

Styling utility classes

.small / .medium / .large / .x-large / .faded /

.body-font

/ .title-font / Code element 
<span class="small">
    Small text
</span>
/
<span class="medium">
    Medium text
</span>
/
<span class="large">
    Large text
</span>
/
<span class="faded">
    Faded
</span>
/
<h3 class="body-font d-inline">
    Body font
</h3>
/
<span class="title-font">
    Title font
</span>
/
<code>
    Code
</code>

Animation and transitions

.pet .flip .shake .bob 
<button class="btn btn-primary transition">.transition (makes any CSS changes animate)</button>

<div class="row mt-5 mb-2">

    <div class="col-md-3 col-6">
        .pet
        <img src="/sprites/egg_1.png" class="pet">
    </div>

    <div class="col-md-3 col-6">
        .flip
        <img src="/sprites/egg_1.png" class="flip">
    </div>

    <div class="col-md-3 col-6">
        .shake
        <img src="/sprites/egg_1.png" class="shake">
    </div>

    <div class="col-md-3 col-6">
        .bob
        <img src="/sprites/egg_1.png" class="bob">
    </div>

</div>

Tooltips and popovers

Has tooltip / Has tooltip with no underline /
Popover trigger
Popover content 
<span class="tooltipped" title="This is the tooltip">
    Has tooltip
</span>
/
<span class="tooltipped-0" title="This is the tooltip">
    Has tooltip with no underline
</span>
/
<div class="popover-parent">
    <a href="#" class="popover-trigger">Popover trigger</a>
    <div class="popover">
        Popover content
    </div>
</div>

Borders

.border

.border-contrast

.border-default 

<div class="border">
    .border
</div>

<div class="border-contrast">
    .border-contrast
</div>

<div class="border-default">
    .border-default
</div>

Flipping and rotation

Rotate 90 / Rotate 180 / Rotate 270 / Flip X (display must be set to block, inline-block or flex) 
<span class="rotate-90 d-inline-block">
    Rotate 90
</span>
/
<span class="rotate-180 d-inline-block">
    Rotate 180
</span> 
/
<span class="rotate-270 d-inline-block">
    Rotate 270
</span>
/
<span class="flip-x d-inline-block">
    Flip X
</span>
(display must be set to block, inline-block or flex)

Backgrounds

.bg-light - elements inside a light background element will be styled as seen in the site's light theme (e.g. links and

headers

). 
<div class="bg-light">
    .bg-light - elements inside a light background element will be styled as seen in the site's light theme (e.g. <a href="#">links</a> and <h3 class="d-inline-block">headers</h3>).
</div>
.bg-dark - elements inside a dark background element will be styled as seen in the site's dark theme (e.g. links and

headers

). 
<div class="bg-dark">
    .bg-dark - elements inside a dark background element will be styled as seen in the site's dark theme (e.g. <a href="#">links</a> and <h3 class="d-inline-block">headers</h3>).
</div>
Light mode
.bg-primary
.bg-secondary
.bg-muted (more or less an alias for secondary).
.bg-faded
.bg-nav
.bg-success
.bg-warning
.bg-danger
.bg-info
Dark mode
.bg-primary
.bg-secondary
.bg-muted (more or less an alias for secondary).
.bg-faded
.bg-nav
.bg-success
.bg-warning
.bg-danger
.bg-info 
<div class="bg-primary">
    .bg-primary
</div>
<div class="bg-secondary">
    .bg-secondary
</div>
<div class="bg-muted">
    .bg-muted (more or less an alias for secondary).
</div>
<div class="bg-faded">
    .bg-faded
</div>
<div class="bg-nav">
    .bg-nav
</div>
<div class="bg-success">
    .bg-success
</div>
<div class="bg-warning">
    .bg-warning
</div>
<div class="bg-danger">
    .bg-danger
</div>
<div class="bg-info">
    .bg-info
</div>
.col-pink .col-maroon .col-rose .col-crimson .col-red .col-russet .col-brown .col-vermilion .col-bark .col-cream .col-beige .col-orange .col-honey .col-gold .col-ochre .col-yellow .col-lemon .col-lime .col-apple .col-chartreuse .col-olive .col-leaf .col-grass .col-gluppy .col-viridian .col-spring .col-mint .col-turquoise .col-teal .col-aqua .col-sea .col-cerulean .col-sky .col-sapphire .col-ultramarine .col-tumblr .col-navy .col-indigo .col-lilac .col-blurple .col-overcast .col-violet .col-amethyst .col-lavender .col-orchid .col-plum .col-fuchsia .col-wine .col-black .col-sable .col-grey .col-ash .col-silver .col-mist .col-white 
<span class="badge col-pink">
    .col-pink
</span>

<span class="badge col-maroon">
    .col-maroon
</span>

<span class="badge col-rose">
    .col-rose
</span>
[...]

Buttons

Light mode
.btn-primary .btn-secondary .btn-success .btn-warning .btn-danger .btn-info .btn-outline-primary .btn-outline-secondary .btn-outline-success .btn-outline-warning .btn-outline-danger .btn-outline-info
Dark mode
.btn-primary .btn-secondary .btn-success .btn-warning .btn-danger .btn-info .btn-outline-primary .btn-outline-secondary .btn-outline-success .btn-outline-warning .btn-outline-danger .btn-outline-info 
<a class="btn btn-primary">
    .btn-primary
</a>
<a class="btn btn-secondary">
    .btn-secondary
</a>
<a class="btn btn-success">
    .btn-success
</a>
<a class="btn btn-warning">
    .btn-warning
</a>
<a class="btn btn-danger">
    .btn-danger
</a>
<a class="btn btn-info">
    .btn-info
</a>
<a class="btn btn-outline-primary">
    .btn-outline-primary
</a>
<a class="btn btn-outline-secondary">
    .btn-outline-secondary
</a>
<a class="btn btn-outline-success">
    .btn-outline-success
</a>
<a class="btn btn-outline-warning">
    .btn-outline-warning
</a>
<a class="btn btn-outline-danger">
    .btn-outline-danger
</a>
<a class="btn btn-outline-info">
    .btn-outline-info
</a>

Alerts

Light mode
.alert-primary
.alert-secondary
.alert-success
.alert-warning
.alert-danger
.alert-info
Dark mode
.alert-primary
.alert-secondary
.alert-success
.alert-warning
.alert-danger
.alert-info 
<div class="alert alert-primary">
    .alert-primary
</div>
<div class="alert alert-secondary">
    .alert-secondary
</div>
<div class="alert alert-success">
    .alert-success
</div>
<div class="alert alert-warning">
    .alert-warning
</div>
<div class="alert alert-danger">
    .alert-danger
</div>
<div class="alert alert-info">
    .alert-info
</div>

Text colours

Light mode
.text-muted .text-primary .text-danger .text-success
Dark mode
.text-muted .text-primary .text-danger .text-success 
<span class="text-muted">
    .text-muted
</span>
<span class="text-primary">
    .text-primary
</span>
<span class="text-danger">
    .text-danger
</span>
<span class="text-success">
    .text-success
</span>

Cards

Light mode
.card-border
Dark mode
.card-border 
<div class="card-border">
    .card-border
</div>
Light mode
.card-simple
Dark mode
.card-simple 
<div class="card-simple">
    .card-simple
</div>
Light mode
.card-highlight
Dark mode
.card-highlight 
<div class="card-highlight">
    .card-highlight
</div>
Light mode
.card-bg
Dark mode
.card-bg 
<div class="card-bg">
    .card-bg
</div>

Flex styles

.row-center
A
B
C
.column-center
A
B
C
.row-stretch
A
B
C
.column-stretch
A
B
C
.row-between
A
B
C
.column-between
A
B
C
<div class="row-center bg-faded" style="width: 200px; height: 200px;">
    <div class="card-simple">A</div>
    <div class="card-simple">B</div>
    <div class="card-simple">C</div>
</div>

<div class="column-center bg-faded" style="width: 200px; height: 200px;">
    <div class="card-simple">A</div>
    <div class="card-simple">B</div>
    <div class="card-simple">C</div>
</div>

<div class="row-stretch bg-faded" style="width: 200px; height: 200px;">
    <div class="card-simple">A</div>
    <div class="card-simple">B</div>
    <div class="card-simple">C</div>
</div>

<div class="column-stretch bg-faded" style="width: 200px; height: 200px;">
    <div class="card-simple">A</div>
    <div class="card-simple">B</div>
    <div class="card-simple">C</div>
</div>

<div class="row-between bg-faded" style="width: 200px; height: 200px;">
    <div class="card-simple">A</div>
    <div class="card-simple">B</div>
    <div class="card-simple">C</div>
</div>

<div class="column-between bg-faded" style="width: 200px; height: 200px;">
    <div class="card-simple">A</div>
    <div class="card-simple">B</div>
    <div class="card-simple">C</div>
</div>

Sizing

.mw-200 (maximum width 200px)
.mh-200 (maximum height 200px)
.mw-300 (maximum width 300px)
.mh-300 (maximum height 300px)
.mw-400 (maximum width 400px)
.mh-400 (maximum height 400px)
.mw-500 (maximum width 500px)
.mh-500 (maximum height 500px)
.emoji (height 1.3em)
.miw-200 (minimum width 200px)
.miw-300 (minimum width 300px)
.miw-400 (minimum width 400px)
.miw-500 (minimum width 500px) 
<img src="/splash/banner1.png" class="mw-200">
.mw-200 (maximum width 200px)
<br>
<img src="/splash/jnaq.jpg" class="mh-200">
.mh-200 (maximum height 200px)
<br>
<img src="/splash/banner1.png" class="mw-300">
.mw-300 (maximum width 300px)
<br>
<img src="/splash/jnaq.jpg" class="mh-300">
.mh-300 (maximum height 300px)
<br>
<img src="/splash/banner1.png" class="mw-400">
.mw-400 (maximum width 400px)
<br>
<img src="/splash/jnaq.jpg" class="mh-400">
.mh-400 (maximum height 400px)
<br>
<img src="/splash/banner1.png" class="mw-500">
.mw-500 (maximum width 500px)
<br>
<img src="/splash/jnaq.jpg" class="mh-500">
.mh-500 (maximum height 500px)
<br>
<img src="/sprites/crown.png" class="emoji">
.emoji (height 1.3em)
<br>
<img src="/sprites/crown.png" class="miw-200">
.mw-200 (minimum width 200px)
<br>
<img src="/sprites/crown.png" class="miw-300">
.mw-300 (minimum width 300px)   
<br>
<img src="/sprites/crown.png" class="miw-400">
.mw-400 (minimum width 400px)
<br>
<img src="/sprites/crown.png" class="miw-500">
.mw-500 (minimum width 500px)