hugo-theme/static/css/base.css

/* global base styles */
@layer base {
    html,
    body{
        background-color: #b19fb3;
        @apply h-screen
    }
    a{
        @apply text-purple-400 font-semibold underline;
    }
    a[rel] {
        @apply whitespace-nowrap;
    }

    blockquote {
        @apply pl-2 border-l-8 border-gray-600 italic;
    }
    blockquote cite {
        display: block;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    #site-title {
        @apply font-bold font-mono;
    }

    h1 {
        @apply text-3xl;
    }
    h2 {
        @apply text-2xl;
    }
    h3 {
        @apply text-xl;
    }
    h4 {
        @apply text-lg;
    }

    textarea, input {
        @apply w-full p-2 bg-white border border-gray-400 rounded;
    }
    textarea {
        @apply h-24;
    }
    
    details > *:not(summary) {
        @apply pl-4;
    }

    ol {
        @apply list-decimal list-inside;
    }
    ul {
        @apply list-disc list-inside;
    }
    li > ol,
    li > ul {
        @apply pl-4;
    }
    li > ul {
        list-style-type: circle;
    }
    li > ol {
        list-style-type: lower-roman;
    }

    pre {
        @apply w-full my-2 p-2 bg-gray-50 text-black rounded !important;
    }
    code {
        @apply inline-block px-1 bg-gray-50 rounded-sm;
    }
    .highlight > pre > code {
        @apply w-full overflow-auto;
    }

    hr {
        @apply w-full border-gray-700 mt-4 mb-2;
    }


    .form {
        /* filler */
    }
    .form label {
        @apply block text-lg font-semibold;
    }
    .form label .desc {
        @apply text-xs lowercase;
    }
    .form label .desc::before {
        content: "(";
    }
    .form label .desc::after {
        content: ")";
    }
    .form input,
    .form select {
        @apply inline-block w-full max-w-screen-lg border border-gray-400 rounded;
    }

    .form .input-prefix {
        @apply flex w-full max-w-screen-lg border border-gray-400 rounded overflow-hidden;
    }
    .form .input-prefix::before {
        @apply bg-gray-200 pl-2 pr-1;
        content: attr(data-prefix);
    }
    .form .input-prefix input {
        @apply border-none rounded-none;
    }

    /* tables */
    table {
        @apply w-full bg-purple-200 border-2;
    }
    table a {
        @apply text-black;
    }
    table thead,
    table tbody,
    table thead tr,
    table tbody tr {
        @apply flex w-full;
    }
    table thead {
        @apply bg-gray-100 border-b-2 border-black;
    }
    table thead th {
        @apply text-left;
    }

    table tbody {
        @apply flex-col items-center justify-between overflow-y-auto max-h-80;
    }
    table thead tr *,
    table tbody tr * {
        @apply flex-1;
    }
    table tbody tr:nth-child(even){
        @apply bg-purple-100;
    }
    table tbody tr{
        @apply hover:bg-white;
    }

    table thead th:first-child,
    table tbody td:first-child {
        @apply pl-2;
    }
    table thead th:last-child,
    table tbody td:last-child {
        @apply pr-2;
    }

    article figure {
        @apply max-w-lg mx-auto p-2 border border-gray-400 rounded text-center;
    }

    figure img {
        @apply w-full sm:w-3/4 xl:w-5/6 mx-auto;
    }

    figure figcaption {
        @apply w-full sm:w-3/4 xl:w-5/6 mx-auto text-sm italic;
    }

    nav ul {
        @apply list-none space-y-2;
    }
    nav a {
        @apply text-black;
    }
}

@layer components {
    /* standard classes */
    .btn {
        @apply inline-block bg-white p-2 border border-black rounded text-black font-normal no-underline;
    }
    
    .panel {
        @apply w-full my-2 border border-black p-2 rounded bg-gray-200 relative;
    }

    .fullscreen {
        @apply block w-screen h-screen;
    }

    /* wrap an image such that it is only minimally scaled to fit a desired area. */
    /* actual size it left to be applied to the element. */
    .image-wrapper {
        @apply inline-block items-center justify-items-center overflow-hidden;
    }
    .image-wrapper img {
        @apply w-full h-full object-cover;
    }

    /* Navbar styles */
    #sidebar
    {
        @apply w-screen xl:w-1/5 lg:max-w-xs bg-pink-500 border-r border-black;
        background-image: linear-gradient(to bottom, rgba(123,100,127,0) 0%, rgba(123,100,127,0.25) 5%, rgba(123,100,127,0.75) 25%, rgba(123,100,127,1) 90%), url("/imgs/hex_500_1000_10.png");
    }
    #sidebar h1,
    #sidebar nav,
    #sidebar p {
        @apply mx-8 my-4 px-6 py-4 bg-opacity-75 bg-gray-200 rounded text-center;
    }
    #sidebar h1 {
        @apply bg-opacity-70;
    }
    #sidebar nav {
        text-align: left;
    }

    #sidebar #site-title {
        @apply text-3xl;
    }

    /* Blog */
    .blog-post {
        @apply w-full md:w-3/4 xl:w-1/2 max-w-3xl mx-auto;
    }
    .blog-post--body {
        @apply px-2;
    }
    .blog-post--body h2 {
        @apply mt-4;
    }
    .blog-post--body p {
        @apply my-2;
    }
    .blog-post--footer {
        @apply mt-8 p-2 font-mono text-sm border-t border-black;
    }

    /* Console */
    .console {
        @apply p-2 bg-black font-mono rounded;
        color: #00FF00;
    }
    .console p {
        @apply m-0;
    }
    .console * {
        color: inherit;
    }

    /* Footer badges */
    .badges * {
        @apply inline-block;
    }
    .badges img {
        width: 88px;
    }
}