index.pcss

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

body {
    min-width: 320px;
}

strong {
    @apply font-semibold;
}

a {
    @apply text-blue-500;
    @apply underline;
}

pre code {
    @apply block;
    @apply bg-gray-600;
    @apply text-gray-100;
    @apply py-2;
    @apply text-lg;
    @apply shadow-background-gray;
    @apply mx-2;
    @apply overflow-hidden;
}

hr {
    @apply mt-4;
}

ul {
    li::before {
        @apply mr-2;
        @apply text-gray-400;
        @apply text-base;
        content: "→";
    }
}

.button {
    @apply border-b-2;
    @apply px-4;
    @apply py-2;
    @apply flex;
    @apply flex-row;
    @apply items-center;
    @apply justify-center;
    text-shadow: 0px 0px 1px #63b3ed;

    &:disabled {
        filter: grayscale(100%);
    }
}

@responsive {
    .button.gray {
        @apply border-gray-400;
        @apply bg-gray-200;
        @apply text-blue-500;
    }

    .button.green {
        @apply border-green-600;
        @apply bg-green-500;
        @apply text-gray-100;
    }
}

@responsive {
    .h-min-64 {
        min-height: 16rem;
    }
}

.code-literal {
    color: rgb(192, 204, 219);
}

.code-line-number {
    @apply no-select;
    width: 2rem;
    margin-right: 1rem;
    margin-left: -0.5rem;
    text-align: right;
    color: hsla(0, 0%, 100%, 0.25);
}

.code-comment {
    color: hsla(0, 0%, 100%, 0.25);
}

.code-variable {
    color: rgb(192, 204, 219);
}

.code-token {
    color: rgb(212, 133, 106);
}

.code-string {
    color: rgb(132, 196, 206);
}

.code-name {
    color: rgb(67, 181, 179);
}

.code-keyword {
    color: rgb(82, 152, 196);
}

.editor {
    @apply relative;
    @apply subpixel-antialiased;
    @apply px-5;
    @apply pt-4;
    @apply border-b-4;
    @apply border-gray-900;
    @apply font-mono;
    @apply text-sm;
    @apply code-literal;
    @apply overflow-hidden;
    @apply w-full;
    background-color: rgb(40, 48, 53);
    line-height: 1.675;
    height: 12rem;
    font-size: 1rem;

    &.show-more {
        height: 24rem;
    }

    .line {
        display: block;
        width: 100%;
        clear: left;

        &::selection {
            @apply code-selection;
        }

        &::-moz-selection {
            @apply code-selection;
        }

        .segment {
            @apply inline-block;

            &::selection {
                @apply code-selection;
            }

            &::-moz-selection {
                @apply code-selection;
            }
        }
    }
}

@screen lg {
    .editor {
        &.show-more {
            @apply mt-16;
        }
    }
}

.code-selection {
    background-color: #43b5b3;
    text-decoration: none;
    text-shadow: none;
    outline: none;
}

.no-select {
    user-select: none;
}

.shadow-background-blue {
    box-shadow: 8px 0 0 #3182ce, -8px 0 0 #3182ce;
}

.shadow-background-gray {
    box-shadow: 8px 0 0 #718096, -8px 0 0 #718096;
}

.corner {
    @apply absolute;
    @apply w-screen;
    @apply max-w-full;

    --height: 2.5vw;
    --color: theme("colors.gray.100");

    &.blue {
        --color: theme("colors.blue.500");
    }

    &.white {
        --color: theme("colors.gray.100");
    }

    &.grey {
        --color: theme("colors.gray.300");
    }

    &.top {
        @apply top-0;

        &.right {
            border-top: solid var(--height) var(--color);
            border-right: solid 50vw var(--color);
            border-bottom: solid var(--height) transparent;
            border-left: solid 50vw transparent;
        }

        &.left {
            border-top: solid var(--height) var(--color);
            border-right: solid 50vw transparent;
            border-bottom: solid var(--height) transparent;
            border-left: solid 50vw var(--color);
        }
    }

    &.bottom {
        @apply bottom-0;

        &.right {
            border-top: solid var(--height) transparent;
            border-right: solid 50vw var(--color);
            border-bottom: solid var(--height) var(--color);
            border-left: solid 50vw transparent;
        }

        &.left {
            border-top: solid var(--height) transparent;
            border-right: solid 50vw transparent;
            border-bottom: solid var(--height) var(--color);
            border-left: solid 50vw var(--color);
        }
    }
}

:root {
    --dynamic-padding-height: 4vw;
    --dynamic-margin-height: 2vw;
}

@responsive {
    .pt-d {
        padding-top: var(--dynamic-padding-height);
    }

    .pb-d {
        padding-bottom: var(--dynamic-padding-height);
    }

    .pd {
        @apply pt-d;
        @apply pb-d;
    }

    .mt-d {
        margin-top: var(--dynamic-margin-height);
    }

    .mb-d {
        margin-bottom: var(--dynamic-margin-height);
    }

    .md {
        @apply mt-d;
        @apply mb-d;
    }
}

.header-title {
    @apply font-semibold;
    @apply relative;
    @apply mx-2;
    @apply mb-4;
    font-size: 4rem;

    a {
        @apply text-gray-100;
        @apply no-underline;
    }
}

.header-subtitle {
    @apply font-semibold;
    @apply text-gray-100;
    @apply relative;
    @apply mx-2;
    font-size: 2rem;
}

@screen lg {
    .header-title {
        @apply tilt;
    }

    .header-subtitle {
        @apply tilt;
    }
}

.tilt {
    transform: rotate(-4deg);
    transform-origin: 0% 100%;
}