styles.css

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

/* --  Menu open/close controls -- */
#menu-state:checked+aside {
    @apply ml-0
}

#menu-state~main label[for='menu-state'] svg {
    @apply transition
}

#menu-state:checked~main label[for='menu-state'] svg {
    @apply transform rotate-180
}

/* -- Section title links --*/

a.headerlink {
    @apply float-right
}

section a.headerlink {
    @apply text-white dark:text-gray-800
}

h1>a.headerlink::before,
h2>a.headerlink::before,
h3>a.headerlink::before,
h4>a.headerlink::before,
h5>a.headerlink::before,
h6>a.headerlink::before {
    @apply hidden
}

h1:hover>a.headerlink::before,
h2:hover>a.headerlink::before,
h3:hover>a.headerlink::before,
h4:hover>a.headerlink::before,
h5:hover>a.headerlink::before,
h6:hover>a.headerlink::before {
    @apply inline-block dark:text-white
}

section a.headerlink::before {
    content: "";
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>');
    width: 24px;
    height: 24px;
}

@media (prefers-color-scheme: dark) {

    section a.headerlink::before {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="white" fill="none" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>');
    }
}

/* -- Admonitions -- */
.admonition {
    @apply rounded border border-green-300 dark:border-green-600
}

.admonition-title {
    @apply m-0 px-4 py-2 font-bold bg-green-100/50 dark:bg-green-700/25
}

.admonition-title ~ :not(ul) {
    @apply px-4
}

.admonition ol {
    @apply mx-4
}

/* -- Figures -- */
img[style*="width"] {
    @apply m-auto
}

figure.align-center figcaption {
    @apply text-center
}

.caption-text {
    @apply text-gray-500 mt-0
}

/* -- Code Blocks -- */
div.highlight {
    @apply rounded border dark:border-gray-600
}

div.highlight .hll {
    @apply bg-[#fff] dark:bg-[#000]
}

/* -- Search -- */
.highlight-link {
    @apply dark:text-white
}

/* -- Local table of contents -- */

#localtoc a[href='#'] {
    @apply font-semibold
}

#localtoc a[href='#']+ul {
    @apply ml-0
}

#localtoc ul {
    @apply list-none
}

/* -- Strikethrough -- */
.strike {
    @apply line-through
}

/* -- Kbd -- */
kbd {
    @apply px-1 inline-block border rounded
}

/* -- Profile image -- */

.full-profile {
    @apply flex justify-between p-2 lg:flex-col border-b lg:border-b-0 dark:border-gray-600
}

.full-profile img {
    @apply transition-all duration-300 w-12 border-2 border-green-700 rounded-full lg:m-auto lg:border-4 lg:w-40
}

.full-profile h2 {
    @apply transition-all duration-300 mt-2 text-xl text-green-600 lg:text-center lg:text-2xl
}

.small-profile {
    @apply flex justify-between p-2 border-b dark:border-gray-600
}

.small-profile img {
    @apply transition-all duration-300 w-12 border-2 border-green-700 rounded-full
}

.small-profile h2 {
    @apply transition-all duration-300 mt-2 text-xl text-green-600
}