rc-1

frontend/include/index/critical.css

@@ -0,0 +1,209 @@
+:root {
+    --animation-duration: 500ms;
+    --animation-transition: 200ms;
+    --animation-load-delay: 200ms;
+    --animation-step-delay: 50ms;
+
+    --border-thickness: 1px;
+
+    --background-tertiary: hsl(0, 0%, 0%);
+    --background-secondary: hsl(0, 0%, 16%);
+    --background-primary: hsl(0, 0%, 32%);
+    --background-highlight: hsl(0, 0%, 80%);
+    --background-translucent: hsla(0, 0%, 0%, 0.3);
+
+    --font-color-accent: hsl(0, 50%, 80%);
+    --font-color-primary: hsl(0, 0%, 95%);
+    --font-color-secondary: hsl(0, 0%, 65%);
+
+    --effect-glass-corner-thickness: 1px;
+    --effect-glass-corner-offset: -16px;
+    --effect-glass-corner-margin: 16px;
+    --effect-glass-corner-color: hsl(0, 0%, 30%);
+    --effect-glass-tint: hsla(0, 0%, 100%, 0.075);
+    --effect-glass-blur: 4px;
+}
+
+::-webkit-scrollbar {
+    width: 0;
+}
+
+html,
+body {
+    margin: 0;
+    background-color: var(--background-tertiary);
+    padding: 0;
+}
+
+p,
+a,
+pre,
+code,
+span,
+input,
+textarea,
+label,
+button {
+    display: block;
+    margin: 0;
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    color: var(--font-color-primary);
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1em;
+    line-height: 1em;
+    font-family: 'Terminus', monospace;
+}
+
+input::placeholder {
+    color: var(--font-color-secondary);
+}
+
+/* Global Layout */
+span.layout-tooltip {
+    border: var(--border-thickness) solid var(--background-primary);
+    background-color: var(--background-tertiary);
+    padding: 4px 8px;
+}
+
+div.layout-wrapper {
+    display: grid;
+    width: 100%;
+    height: 100%;
+}
+
+div.layout-background {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+}
+
+div.layout-foreground {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin: auto;
+    margin-top: 16px;
+    width: 100%;
+    max-width: 1024px;
+    max-height: 100vh;
+}
+
+.layout-scrolling {
+    max-height: calc(100vh - var(--effect-glass-corner-margin) * 4);
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+nav.layout-sidebar {
+    box-sizing: border-box;
+    padding: 16px;
+    width: 300px;
+}
+
+main.layout-content {
+    box-sizing: border-box;
+    padding: 16px;
+    width: 600px;
+}
+
+/* Global Effects */
+.animation-blink {
+    animation: kf-blink 1s infinite step-start;
+}
+
+@keyframes kf-blink {
+    50% {
+        opacity: 0;
+    }
+}
+
+.animation-scroll-in {
+    animation: kf-scroll-in 1s forwards linear;
+    box-sizing: border-box;
+    max-width: fit-content;
+    overflow: hidden;
+    text-wrap-mode: nowrap;
+}
+
+@keyframes kf-scroll-in {
+    0% {
+        width: 0%;
+    }
+
+    100% {
+        width: 100%;
+    }
+}
+
+.animation-fade-in {
+    animation: kf-fade-in 500ms forwards linear;
+}
+
+@keyframes kf-fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.animation-fall-in {
+    opacity: 0;
+    animation: kf-fall-in var(--animation-transition) ease forwards;
+}
+
+@keyframes kf-fall-in {
+    from {
+        transform: scale(1.05);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.animation-caution {
+    position: relative;
+    overflow: visible;
+}
+
+.animation-caution::before {
+    position: absolute;
+    transform: translate(16px, 16px);
+    clip-path: polygon(
+        calc(100% - 12px) 0,
+        100% 0,
+        100% 100%,
+        0 100%,
+        0 calc(100% - 12px),
+        calc(100% - 12px) calc(100% - 12px)
+    );
+    filter: opacity(0.33);
+    animation: kf-caution 1200s infinite linear;
+    box-sizing: border-box;
+    inset: 0;
+    background: repeating-linear-gradient(
+        45deg,
+        var(--background-primary) 0,
+        var(--background-primary) 8px,
+        black 8px,
+        black 16px
+    );
+    content: '';
+}
+
+@keyframes kf-caution {
+    0% {
+        background-position-y: 0px;
+    }
+    100% {
+        background-position-y: 7200px;
+    }
+}