kitsu.cafe/static/css/main.css

:root {
    color-scheme: light dark;
    box-sizing: border-box;
    font-family: Arimo, Verdana, Helvetica, "Trebuchet MS", Tahoma, Arial, sans-serif;

    --border-radius: 4px;

    --egyptian-blue: #EA80FC;
    --light-purple: #AA4FF6;
    --purple: #7461AD;
    --lilac-violet: #794A7F;

    --lightest: 90%;
    --lighter:  70%;
    --light:    58%;
    --base:     46%;
    --dark:     34%;
    --darker:   22%;

    --violet:   255 40%;
    --magenta:  285 40%;
    --green:    75  31%;
    --yellow:   51  95%;
    --orange:   40  71%;
    --cyan:     195 41%;

    --grey:     200 6%;

    --black: 200 6% 10%;
    --white: 200 6% 94%;

    --foreground-color: light-dark(
      hsl(var(--black)),
      hsl(var(--white))
    );

    --background-color: light-dark(
      hsl(var(--white)),
      hsl(var(--black))
    );

    --secondary-background-color: light-dark(
      hsl(var(--violet) var(--light)),
      hsl(var(--violet) var(--dark))
    );

    --code-color: light-dark(
      hsl(var(--orange) var(--darker)),
      hsl(var(--yellow) var(--light))
    );

    --border-color: light-dark(
      hsl(var(--violet) var(--dark)),
      hsl(var(--violet) var(--light))
    );

    --header-color: light-dark(
      hsl(var(--orange) var(--dark)),
      hsl(var(--yellow) var(--base))
    );

    --subheader-color: light-dark(
      hsl(var(--violet) var(--dark)),
      hsl(var(--magenta) var(--light))
    );

    --link-color: light-dark(
      hsl(var(--cyan) var(--dark)),
      hsl(var(--cyan) var(--light))
    );

    --link-hover-color: light-dark(
      hsl(var(--cyan) var(--base)),
      hsl(var(--cyan) var(--lighter))
    );

    --link-active-color: light-dark(
      hsl(var(--cyan) var(--dark)),
      hsl(var(--cyan) var(--dark))
    );

    --link-visited-color: light-dark(
      hsl(var(--cyan) var(--darker)),
      hsl(var(--cyan) var(--dark))
    );

    --list-marker-color: light-dark(
      hsl(var(--orange) var(--base)),
      hsl(var(--yellow) var(--base))
    );

    --muted-color: light-dark(
      hsl(var(--grey) var(--dark)),
      hsl(var(--grey) var(--lighter))
    );

    --table-header-color: light-dark(
      hsl(var(--violet) var(--lighter)),
      hsl(var(--violet) var(--base))
    );

    --table-row-color: var(--background-color);

    --table-row-alt-color: light-dark(
      hsl(var(--grey) var(--lightest)),
      hsl(var(--grey) var(--darker))
    );
}

@media (prefers-reduced-motion: reduce) {
  .high-motion {
  }
}

* {
    box-sizing: inherit;
}

html, body {
    width: 100%;
}

body {
    --b: var(--background-color);
    --f: var(--secondary-background-color);

    margin: 0;
    background-color: var(--b);
    color: var(--foreground-color);

    background: radial-gradient(circle, transparent 20%, var(--b) 20%, var(--b) 80%, transparent 80%, transparent) 0% 0% / 48px 48px, radial-gradient(circle, transparent 20%, var(--b) 20%, var(--b) 80%, transparent 80%, transparent) 24px 24px / 48px 48px, linear-gradient(var(--f) 1px, transparent 1px) 0px -0.5px / 24px 24px, linear-gradient(90deg, var(--f) 1px, var(--b) 1px) -0.5px 0px / 24px 24px var(--b);
    background-size: 48px 48px, 48px 48px, 24px 24px, 24px 24px;
    background-color: var(--b);

}

@media only screen and (min-width: 740px) {
    body {
        margin: initial;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: Palatino, Georgia, Tinos, Georgia, Garamond, "Times New Roman", Times, serif;
    font-variant: small-caps;
}

h1 {
    color: var(--header-color);
}

h2, h3, h4, h5, h6 {
    color: var(--subheader-color);
}

a { color: var(--link-color); }
a:hover { color: var(--link-hover-color); }
a:active { color: var(--link-active-color); }

li {
    list-style: none;
    position: relative;

    margin-left: 8px;
    padding-left: 4px;
}

li::before {
    content: '★';
    position: absolute;
    font-size: 1.2rem;
    top: -4px;
    left: -14px;
    color: var(--list-marker-color);
}

img {
    max-width: 100%;
}

code {
    --x: 0.25rem;
    margin-left: var(--x);
    margin-right: var(--x);
    font-weight: 500;
    color: var(--code-color);
}

pre {
    --x: 0.5rem;
    --y: 1rem;

    padding: var(--y) var(--x) var(--y) var(--x);
}

pre, code {
    font-family: Inconsolata, Consolas, Cousine, "Courier New", Courier, monospace;
    font-size: 1rem;
    overflow: auto;
}

nav.main-nav {
    display: flex;
    flex-wrap: wrap;
    min-width: 160px;
    justify-content: center;
}

nav li::before {
    content: '';
}

article header {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    overflow: auto;
}

table td {
  padding: 0.25rem 0.25rem;
}

@media only screen and (min-width: 740px) {
    table {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

}

table thead th {
    font-weight: 400;
    font-size: 0.9rem;
    text-align: left;

    color: light-dark(
      hsl(var(--grey) var(--dark)),
      hsl(var(--grey) var(--light))
    );
}

table td:first-child {
  padding-left: 0.25rem;
}

table tbody tr:nth-child(odd) {
    background-color: var(--table-row-color);
}

table tbody tr:nth-child(even) {
    background-color: var(--table-row-alt-color);
}

@media only screen and (min-width: 740px) {
    nav.main-nav {
        flex-direction: column;
        justify-content: initial;
    }

    nav.main-nav li::before {
        content: '★';
    }
} 

.container {
    display: flex;
    flex-direction: column;

    justify-content: center;

    width: 100%;
    max-width: 800px;
}

@media only screen and (min-width: 740px) {
    .container {
        flex-direction: row-reverse;
        margin-top: 1rem;
    }
} 

.full-width {
    width: 100%;
}

.full-width.container {
    max-width: initial;
}

.column {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.row-reverse {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.column .align-center, .row .align-center {
    align-items: center;
}

.column .justify-center, .row .justify-center {
    justify-content: center;
}

.column .space-between, .row .space-between {
    justify-content: space-between;
}

.box {
    background-color: var(--background-color);
    padding: 1rem;
    max-width: 100%;
    overflow: auto;
}

@media only screen and (min-width: 740px) {
    .box {
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin: 0.75rem;
    }
}

.box.has-moon {
    position: relative;
}

.box.has-moon::before {
    content: '';
    position: absolute;
    top: 24px;
    right: 18px;
    height: 24px; 
    width: 24px; 
    box-shadow: -4px 4px 0 1px var(--list-marker-color);
    border-radius: 50%; 
}

.header {
    color: var(--header-color);
    margin: 0;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: .5rem;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--muted-color);
}

.divider:not(:empty)::before {
  margin-right: .25rem;
}

.divider:not(:empty)::after {
  margin-left: .25rem;
}

.box-image {
    margin: 0.25rem;
    margin-right: 0.75rem;
    float: left;
    height: 100px;
    width: 100px;
}

.box-content {
    display: inline-block;
    padding-left: 1rem;
}

.box-image img {
    transition: transform .25s ease;
    image-rendering: smooth;
}

.box-image img:hover {
    transform: scale(1.1) translateY(-5px);
}

.hide-overflow {
    overflow: hidden;
}

.muted {
    color: var(--muted-color);
}

.center-text {
    text-align: center;
}

.grow {
    flex-grow: 1;
}

.image-link {
    display: block;
}

@media only screen and (max-width: 740px) {
    .hide-mobile {
        display: none;
    }
}

.anti-copyright {
    position: relative;
}

.anti-copyright .cross {
    position: absolute;
    right: 4px;
}

.center {
  margin-left: auto;
  margin-right: auto;
}