detail page port

styles/global.scss

@@ -0,0 +1,187 @@
+@use 'reset' as *;
+@use 'fonts' as *;
+@use 'colors' as *;
+@use 'easings' as *;
+@use 'functions' as *;
+@use 'layout' as *;
+@use 'utils' as *;
+@use 'font-style' as *;
+@use 'themes' as *;
+@use 'scroll' as *;
+@use 'layers' as *;
+@use 'transitions' as *;
+
+body {
+    margin: 0;
+
+    -webkit-tap-highlight-color: transparent;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased !important;
+    text-rendering: optimizeLegibility !important;
+
+    font-variant-numeric: lining-nums proportional-nums ordinal;
+    font-feature-settings: 'dlig' on;
+
+    // Standard transitions
+    --td: 500ms;
+    --te: var(--ease-out-expo);
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+// Type
+.s1 {
+    @include s1;
+}
+.s2 {
+    @include s2;
+}
+.s3 {
+    @include s3;
+}
+.s4 {
+    @include s4;
+}
+.h1,
+h1 {
+    @include h1;
+}
+.h2,
+h2 {
+    @include h2;
+}
+.h3,
+h3 {
+    @include h3;
+}
+.h4,
+h4 {
+    @include h4;
+}
+.h5,
+h5 {
+    @include h5;
+}
+.h6,
+h6 {
+    @include h6;
+}
+.em1 {
+    @include em1;
+}
+.em2 {
+    @include em2;
+}
+.em3 {
+    @include em3;
+}
+.q1 {
+    @include q1;
+}
+.p-l {
+    @include p-l;
+}
+.p,
+body,
+p,
+a,
+button,
+input {
+    @include p;
+}
+.p-s {
+    @include p-s;
+}
+.p-xs {
+    @include p-xs;
+}
+.p-xxs {
+    @include p-xxs;
+}
+
+// Rich text styling
+.entry {
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+    p {
+        min-height: 1px;
+    }
+    a {
+        text-decoration: underline;
+    }
+    & > * {
+        margin-bottom: 1em;
+        margin-top: 1em;
+    }
+    & > *:first-child {
+        margin-top: 0;
+    }
+    & > *:last-child {
+        margin-bottom: 0;
+    }
+
+    ul,
+    ol {
+        li {
+            margin-bottom: 1em;
+            width: desktop-vw(577px);
+
+            @include mobile {
+                width: 100%;
+            }
+        }
+    }
+    ul {
+        list-style: disc;
+        padding-left: 1em;
+    }
+    ol {
+        counter-reset: list;
+
+        li::before {
+            counter-increment: list;
+            content: counter(list);
+            padding-right: 0.5em;
+            font-variant-numeric: lining-nums proportional-nums;
+        }
+    }
+}
+
+// Generic animations
+@keyframes blink {
+    5% {
+        opacity: 0;
+    }
+    40% {
+        opacity: 0;
+    }
+    60% {
+        opacity: 1;
+    }
+    95% {
+        opacity: 1;
+    }
+}
+@keyframes fade {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes fadeup {
+    from {
+        transform: translateY(10px);
+        opacity: 0;
+    }
+    to {
+        transform: none;
+        opacity: 1;
+    }
+}