@voidzero-dev/vitepress-theme 0.0.17 → 0.0.18

package/style.css

@@ -1,343 +0,0 @@
-/**
- * Shared theme styles
- *
- * Usage in consuming project:
- * @import "@voidzero-dev/vitepress-theme/style.css";
- * @import "tailwindcss" source(".") source("../../node_modules/@voidzero-dev/vitepress-theme/components");
- */
-
-@plugin "@tailwindcss/typography";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-/* Fonts */
-@font-face {
-    font-family: 'APK Protocol';
-    font-weight: 500;
-    src: url('./fonts/APK-Protocol-Medium.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka';
-    font-weight: 400;
-    src: url('./fonts/KHTeka-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka';
-    font-weight: 500;
-    src: url('./fonts/KHTeka-Medium.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka Mono';
-    font-weight: 400;
-    src: url('./fonts/KHTekaMono-Regular.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: 'KH Teka Mono';
-    font-weight: 500;
-    src: url('./fonts/KHTekaMono-Medium.woff2') format('woff2');
-}
-
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
-
-@theme {
-    --font-*: initial;
-    --font-heading: 'APK Protocol', sans-serif;
-    --font-sans: 'KH Teka', sans-serif;
-    --font-mono: 'KH Teka Mono', monospace;
-
-    --color-*: initial;
-    --color-white: #FFFFFF;
-    --color-primary: #08060D;
-    --color-beige: #F4F3EC;
-    --color-nickel: #3B3440;
-    --color-grey: #827A89;
-    --color-stroke: #E5E4E7;
-    --color-midnight: #0C0912;
-    --color-slate: #14121A;
-    --color-ruby: #863BFF;
-    --color-wine: #140033;
-    --color-violet: #140033;
-    --color-plum: #1D0033;
-    --color-electric: #6C3BFF;
-    --color-vite: #b39aff;
-    --color-space: #110033;
-    --color-zest: #22FF73;
-    --color-forest: #002611;
-    --color-fire: #FF5500;
-    --color-rust: #260001;
-    --color-aqua: #32F3E9;
-    --color-sea: #002624;
-}
-
-@layer components {
-
-    h1 {
-        @apply text-5xl md:text-6xl font-medium font-heading text-balance text-primary md:leading-[4.2rem] tracking-tighter;
-    }
-
-    h2 {
-        @apply text-3xl md:text-5xl font-medium font-heading tracking-tight text-balance text-primary;
-    }
-
-    h3 {
-        @apply text-3xl md:text-4xl font-medium font-heading text-balance text-primary;
-    }
-
-    h4 {
-        @apply text-xl md:text-3xl font-medium font-heading text-balance text-primary;
-    }
-
-    h5 {
-        @apply text-lg md:text-2xl font-medium font-heading md:leading-7 text-balance text-primary;
-    }
-
-    h6 {
-        @apply text-base md:text-xl font-medium font-heading md:leading-7 text-balance text-primary;
-    }
-
-    p, li {
-        @apply text-base md:text-lg text-grey;
-    }
-
-    code {
-        @apply font-mono text-space text-base px-1.5 py-0.5 outline outline-stroke rounded dark:outline-grey dark:text-white;
-    }
-
-    .wrapper {
-        @apply max-w-[calc(100vw-2rem)] xl:max-w-[80rem] mx-auto border-l border-r border-stroke dark:border-nickel divide-stroke dark:divide-nickel relative overflow-x-clip;
-    }
-
-    .wrapper--ticks::before, .tick-left::before {
-        content: '';
-        position: absolute;
-        top: -5px;
-        left: 0;
-        width: 0;
-        height: 0;
-        border-top: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-bottom: 5px solid transparent;
-        border-left: 5px solid var(--color-stroke);
-    }
-
-    .wrapper--ticks::after, .tick-right::after {
-        content: '';
-        position: absolute;
-        top: -5px;
-        right: 0;
-        width: 0;
-        height: 0;
-        border-top: 5px solid transparent;
-        border-right: 5px solid var(--color-stroke);
-        border-bottom: 5px solid transparent;
-        border-left: 5px solid transparent;
-    }
-
-    [data-theme=dark] .wrapper--ticks::before, [data-theme=dark] .tick-left::before {
-        border-left-color: var(--color-nickel);
-    }
-
-    [data-theme=dark] .wrapper--ticks::after, [data-theme=dark] .tick-right::after {
-        border-right-color: var(--color-nickel);
-    }
-
-    .button {
-        @apply select-none py-2 px-4 rounded-lg outline outline-stroke inline-flex items-center gap-2 overflow-hidden justify-center text-primary dark:text-white bg-white dark:bg-transparent dark:outline-nickel font-medium hover:shadow-md dark:hover:bg-white dark:hover:text-primary hover:scale-105 transition-all;
-
-        &.button--sm{
-            @apply text-base py-1.5 px-3 rounded;
-        }
-
-        &.button--primary {
-            @apply text-white relative overflow-visible outline-none transition-colors transform-gpu hover:scale-105 transition-transform;
-
-            &:hover {
-
-                &::before {
-                    filter: brightness(130%);
-                    transform: scaleX(1.0125) scaleY(1.025);
-                }
-
-                &::after {
-                    transform: scaleX(0.98) scaleY(0.96);
-                }
-            }
-
-            &::before {
-                content: '';
-                position: absolute;
-                top: -3px;
-                left: -3px;
-                right: -3px;
-                bottom: -3px;
-                background-color: #CCCCCC;
-                background-image: url('./assets/primary-button-background.jpg');
-                background-size: 150% 150%;
-                background-position: center;
-                border-radius: calc(0.5rem + 3px);
-                z-index: -2;
-                animation: move-background 16s ease-in-out infinite;
-                transition: all 200ms ease-in-out;
-            }
-
-            &::after {
-                content: '';
-                position: absolute;
-                inset: 0;
-                background: var(--color-primary);
-                z-index: -1;
-                border-radius: 0.5rem;
-                transition: all 300ms ease-in-out;
-            }
-
-            &.button--white {
-                @apply text-primary;
-
-                &::after {
-                    background: var(--color-white);
-                }
-            }
-
-
-        }
-    }
-
-    @keyframes move-background {
-        0%, 100% {
-            background-position: 40% 40%;
-        }
-        50% {
-            background-position: 60% 60%;
-        }
-    }
-
-    .stacked-blocks {
-        @apply flex items-center justify-start;
-
-        > *:not(:first-child) {
-            @apply -ml-2;
-        }
-
-        li, a {
-            @apply size-12 sm:size-14 relative bg-[#F9F8F5] rounded-xl outline-[3px] outline-offset-[-3px] outline-white overflow-hidden p-4 flex items-center justify-center;
-            transition: transform 0.2s ease;
-
-            &:hover {
-                transform: translateY(-4px);
-            }
-        }
-
-        > *:nth-child(1) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(-5deg);
-            }
-        }
-
-        > *:nth-child(2) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(5deg);
-            }
-        }
-
-        > *:nth-child(3) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(-5deg);
-            }
-        }
-
-        > *:nth-child(4) {
-            &:hover, &:hover li, &:hover a {
-                transform: translateY(-4px) rotate(5deg);
-            }
-        }
-    }
-
-    .checkmark-list {
-        @apply list-none flex flex-col gap-3;
-
-        li {
-            @apply text-white text-base tracking-tight relative pl-8;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 50%;
-                transform: translateY(-50%);
-                width: 20px;
-                height: 20px;
-                background-image: url('./assets/checkmark.svg');
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-position: center;
-            }
-        }
-    }
-
-    .project-icon {
-        @apply flex items-center gap-2;
-
-        figcaption {
-            @apply text-white text-base tracking-tight;
-        }
-    }
-
-    ul.nav {
-        @apply flex items-center gap-10;
-
-        li {
-            a {
-                @apply !text-primary text-base;
-            }
-        }
-    }
-
-    /* Reka UI tabs styling */
-    [role="tablist"] {
-        [data-reka-collection-item] {
-            @apply px-1.5 sm:px-2.5 py-1 rounded text-sm font-mono tracking-tight text-grey cursor-pointer hover:text-white transition-colors duration-75 select-none;
-        }
-
-        [data-reka-collection-item][data-state='active'] {
-            @apply bg-white text-primary;
-        }
-    }
-
-}
-
-html {
-    overflow-x: clip;
-    font-size: 16px;
-    color: var(--color-nickel);
-
-    [data-theme=dark] {
-        color: var(--color-white);
-    }
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    position: relative;
-    overflow-x: clip;
-    text-rendering: optimizeLegibility;
-    image-rendering: high-quality;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    &::-webkit-scrollbar {
-        width: 10px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background-color: #efefef;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: #000;
-    }
-}