Fix CheckBoxList SVG icons + Move docs source

2022-05-25 17:22:54 -07:00
parent 8da6572074
commit 4ffc90f963
21 changed files with 284 additions and 250 deletions
--- a/src/docs/components/Header.svelte
+++ b/src/docs/components/Header.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+    import OmorphiaLogo from '../assets/omorphia.svg';
+    import IconLogoGithub from 'virtual:icons/carbon/logo-github';
+    import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2';
+    import { onMount } from 'svelte';
+
+    let headerElement;
+
+    onMount(() => {
+        let lastScrollTop: number;
+        window.addEventListener('scroll', () => {
+            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            if (scrollTop > lastScrollTop && headerElement) {
+                headerElement.style.top = '-100%';
+            } else if (headerElement) {
+                headerElement.style.top = '0';
+            }
+            lastScrollTop = scrollTop;
+        });
+    });
+</script>
+
+<header class="header" bind:this={headerElement}>
+    <OmorphiaLogo class="header__logo" />
+    <div class="header__title">Omorphia</div>
+    <div class="header__links">
+        <a class="hide-sm" href="https://modrinth.com">Modrinth.com</a>
+        <span class="spacer-dot hide-sm" />
+        <a href="https://www.npmjs.com/package/omorphia">NPM</a>
+        <span class="spacer-dot" />
+        <a href="https://rewrite.modrinth.com/discord">
+            <IconChat />
+        </a>
+        <a href="https://github.com/modrinth/omorphia">
+            <IconLogoGithub />
+        </a>
+    </div>
+</header>
+
+<style lang="postcss">
+    .header {
+        display: flex;
+        grid-gap: 10px;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 16px 24px;
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 10;
+        background-color: hsl(0, 0%, 100%);
+        box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0,
+            hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset;
+        transition: top 0.3s ease-in-out;
+
+        @media not (--sm) {
+            top: 0 !important;
+        }
+
+        @media (--sm) {
+            padding: 10px 32px;
+        }
+
+        :global(&__logo) {
+            max-width: 32px;
+            min-width: 32px;
+            aspect-ratio: 1 / 1;
+        }
+
+        &__title {
+            font-size: 20px;
+            font-weight: 600;
+        }
+
+        &__links {
+            margin-left: auto;
+            grid-gap: 16px;
+            align-items: center;
+            justify-content: center;
+            display: flex;
+
+            :global(svg) {
+                height: 22px;
+                width: auto;
+            }
+
+            .hide-sm {
+                display: none;
+
+                @media (--sm) {
+                    display: flex;
+                }
+            }
+
+            a {
+                text-decoration: none;
+
+                &:not(:hover) {
+                    color: unset;
+                }
+            }
+        }
+    }
+
+    .spacer-dot {
+        background-color: hsla(0, 0%, 0%, 0.2);
+        border-radius: 999px;
+        width: 5px;
+        aspect-ratio: 1 / 1;
+    }
+</style>