tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    /* Just barelyyy not white */
    background-color: #fff8f7;
    /* Use a Serif font as default */
    font-family: "Source Serif Pro", serif;
    /* Centered horizontally */
    margin: 0 auto;
    /* nat.org */
    max-width: 35em;
    padding: 1em;
}

p {
    @apply tracking-tight leading-relaxed mb-4;
}

h1 {
    @apply text-5xl font-extrabold;
}

h2 {
    @apply text-4xl font-bold;
}

h3 {
    @apply text-3xl font-bold;
}

h4 {
    @apply text-2xl font-bold;
}

h5 {
    @apply text-xl font-bold;
}

h6 {
    @apply text-lg font-bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    @apply mb-4;
}

ol,
ul {
    @apply list-outside pl-4;
}

p + ul,
p + ol {
    /* Apply a negative upper margin to lists that follow a paragraph */
    @apply -mt-4;
}

ul {
    @apply list-disc;
}

ol {
    @apply list-decimal;
}

pre {
    font-family: "Source Code Pro", monospace;
    /* Added to make code blocks horizontally scrollable, but I think it's fine
       for any pre-formatted text to also scroll. */
    @apply overflow-x-auto;
}

/* I like cycling through colors! */
:root {
    --zero: #cfefaf;
    --one: #b5dce8;
    --two: #ffc8b2;
    --three: #ffe766;
    --four: #e16f7c;
    --five: #a2a4e2;
    --link: #ff9800;
}

.link-zero {
    background-image: linear-gradient(
        to bottom,
        var(--zero) 0%,
        var(--zero) 100%
    );
}
.link-one {
    background-image: linear-gradient(
        to bottom,
        var(--one) 0%,
        var(--one) 100%
    );
}
.link-two {
    background-image: linear-gradient(
        to bottom,
        var(--two) 0%,
        var(--two) 100%
    );
}
.link-three {
    background-image: linear-gradient(
        to bottom,
        var(--three) 0%,
        var(--three) 100%
    );
}
.link-four {
    background-image: linear-gradient(
        to bottom,
        var(--four) 0%,
        var(--four) 100%
    );
}
.link-five {
    background-image: linear-gradient(
        to bottom,
        var(--five) 0%,
        var(--five) 100%
    );
}

.blockquote-zero {
    border-color: var(--zero);
}
.blockquote-one {
    border-color: var(--one);
}
.blockquote-two {
    border-color: var(--two);
}
.blockquote-three {
    border-color: var(--three);
}
.blockquote-four {
    border-color: var(--four);
}
.blockquote-five {
    border-color: var(--five);
}

a {
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px 2px;
    color: #000;
    text-decoration: none;
    transition: background-size 0.6s;
    @apply px-1;
}

a:hover {
    background-size: 4px 50px;
}

blockquote {
    @apply p-4 my-4 border-l-4 border-gray-300;
}

blockquote p {
    @apply leading-relaxed text-gray-900;
}

/* Make <abbr> work on mobile.
   From: https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ */
abbr[title] {
    position: relative;

    /* ensure consistent styling across browsers */
    text-decoration: underline dotted;
}

abbr[title]:hover::after,
abbr[title]:focus::after {
    content: attr(title);

    /* position tooltip like the native one */
    position: absolute;
    left: 0;
    bottom: -1em;
    width: auto;
    white-space: nowrap;

    /* style tooltip */
    background-color: #1e1e1e;
    color: #fff;
    border-radius: 3px;
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
}