fix ui

theme/css/general.css

@@ -7,7 +7,7 @@
 }
 
 html {
-    font-family: __Inter_a4efb0, __Inter_Fallback_a4efb0, system-ui, arial;
+    font-family: var(--body-font);
     color: var(--fg);
     background-color: var(--bg);
     text-size-adjust: none;
@@ -16,10 +16,77 @@ html {
 
 body {
     margin: 0;
-    font-size: 1.6rem;
+    font-size: 1.7rem;
+    line-height: 1.7;
     overflow-x: hidden;
 }
 
+#body-container {
+    position: relative;
+    background-color: var(--bg);
+}
+
+.bg-animation {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+        radial-gradient(ellipse at 20% 20%, var(--bg-effect-primary) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 80%, var(--bg-effect-secondary) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 50%, var(--bg-effect-tertiary) 0%, transparent 70%);
+    animation: bg-drift 28s ease-in-out infinite alternate;
+}
+
+.grid-overlay {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1;
+    background-image:
+        linear-gradient(var(--grid-overlay-color) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid-overlay-color) 1px, transparent 1px);
+    background-size: 50px 50px;
+    opacity: 0.7;
+    animation: grid-float 40s linear infinite;
+}
+
+.particles {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2;
+    overflow: hidden;
+}
+
+.particle {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background: var(--particle-color);
+    border-radius: 50%;
+    opacity: 0;
+    filter: blur(0.2px);
+    animation: float-particle 16s infinite;
+}
+
+@keyframes bg-drift {
+    0% { transform: translate3d(0, 0, 0) scale(1); }
+    100% { transform: translate3d(-2%, 1%, 0) scale(1.04); }
+}
+
+@keyframes grid-float {
+    0% { background-position: 0 0, 0 0; }
+    100% { background-position: 60px 30px, 30px 60px; }
+}
+
+@keyframes float-particle {
+    0% { transform: translate3d(var(--particle-x), 100vh, 0) rotate(0deg); opacity: 0; }
+    10% { opacity: 0.6; }
+    90% { opacity: 0.6; }
+    100% { transform: translate3d(calc(var(--particle-x) * 1.5), -120vh, 0) rotate(720deg); opacity: 0; }
+}
+
 code {
     font-family: var(--mono-font) !important;
     font-size: var(--code-font-size);
@@ -56,6 +123,18 @@ h4, h5 { margin-block-start: 2em; }
     margin-block-start: 1em;
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--heading-font);
+    letter-spacing: -0.01em;
+    line-height: 1.2;
+}
+
+h1 { font-size: clamp(2.6rem, 2.2rem + 1.5vw, 3.6rem); }
+h2 { font-size: clamp(2.1rem, 1.8rem + 1vw, 2.8rem); }
+h3 { font-size: clamp(1.8rem, 1.6rem + 0.6vw, 2.2rem); }
+h4 { font-size: 1.7rem; }
+h5 { font-size: 1.5rem; }
+
 h1:target::before,
 h2:target::before,
 h3:target::before,
@@ -84,7 +163,9 @@ h6:target::before {
 }
 .page-wrapper {
     box-sizing: border-box;
-    background-color: var(--bg);
+    background-color: transparent;
+    position: relative;
+    z-index: 5;
 }
 .no-js .page-wrapper,
 .js:not(.sidebar-resizing) .page-wrapper {
@@ -96,7 +177,7 @@ h6:target::before {
 
 .content {
     overflow-y: auto;
-    padding: 0 5px 50px 5px;
+    padding: 10px 10px 60px 10px;
 }
 .content main {
     margin-inline-start: auto;
@@ -107,11 +188,16 @@ h6:target::before {
     margin-inline-start: auto;
     margin-inline-end: auto;
     max-width: var(--content-max-width);
-    margin-top: 20px;
+    margin-top: 24px;
+}
+.content p,
+.content ol,
+.content ul {
+    line-height: 1.7;
+}
+.content p {
+    margin: 0 0 1.2em 0;
 }
-.content p { line-height: 1.45em; }
-.content ol { line-height: 1.45em; }
-.content ul { line-height: 1.45em; }
 .content a { text-decoration: none; }
 .content a:hover { text-decoration: underline; }
 .content img, .content video { max-width: 100%; }
@@ -127,9 +213,10 @@ h6:target::before {
 table {
     margin: 0 auto;
     border-collapse: collapse;
+    font-size: 0.95em;
 }
 table td {
-    padding: 3px 20px;
+    padding: 6px 18px;
     border: 1px var(--table-border-color) solid;
 }
 table thead {
@@ -239,4 +326,4 @@ sup {
 
 .result-no-output {
     font-style: italic;
-}
+}