wip

src/frontend/style.scss

@@ -1,5 +1,6 @@
 body {
     --primary: rgb(134, 179, 0);
+    font-feature-settings: "pkna";
 }
 
 .xarticle {
@@ -9,9 +10,24 @@ body {
 
 .fade {
     animation: 0.3s ease-out 0s fadeIn;
+    &.down {
+        animation-name: fadeInUp;
+    }
+    &.up {
+        animation-name: fadeInUp;
+    }
 }
 
 @keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-8px);
@@ -22,6 +38,17 @@ body {
     }
 }
 
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
 .block {
     display: block !important;
 }
@@ -33,3 +60,19 @@ body {
 small {
     font-size: 0.8rem;
 }
+
+.modal {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #000000c0;
+    z-index: 40000;
+}
+
+.dark .card.dialog {
+    background: var(--tone-2);
+    min-width: min(100vw, 320px);
+    max-width: min(100vw, 600px);
+}