summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css519
1 files changed, 44 insertions, 475 deletions
diff --git a/style.css b/style.css
index 74970c3a..4d428726 100644
--- a/style.css
+++ b/style.css
@@ -1,532 +1,101 @@
@font-face {
font-family: 'text';
- src: url('./text.ttf') format('truetype');
+ src: url("./text.ttf") format("truetype");
}
@font-face {
font-family: 'heading';
- src: url('./heading.ttf') format('truetype');
+ src: url("./heading.ttf") format("truetype");
}
@font-face {
font-family: 'code';
- src: url('./code.ttf') format('truetype');
+ src: url("./code.ttf") format("truetype");
}
@font-face {
font-family: 'handnotes';
- src: url('./handnotes.ttf') format('truetype');
-}
-
-@font-face {
- font-family: 'typewriter';
- src: url('./typewriter.ttf') format('truetype');
-}
-
-:root {
- --bg-void: #05030a;
- --bg-deep: #0f0620;
- --bg-electric: #1f0e3f;
- --neon-cyan: #2ef7ff;
- --neon-magenta: #ff2fa9;
- --neon-lime: #8eff58;
- --neon-gold: #ffd866;
- --text-main: #d8fcff;
- --text-muted: #9be9f4;
- --panel-bg: rgba(6, 12, 31, 0.82);
- --panel-border: rgba(46, 247, 255, 0.5);
- --panel-shadow: 0 0 22px rgba(46, 247, 255, 0.24), 0 0 70px rgba(255, 47, 169, 0.14);
- --rfx-scroll: 0px;
+ src: url("./handnotes.ttf") format("truetype");
}
html {
- min-height: 100%;
- background-color: var(--bg-void);
- background-image:
- radial-gradient(circle at 10% 18%, rgba(255, 47, 169, 0.3), rgba(255, 47, 169, 0) 32%),
- radial-gradient(circle at 88% 12%, rgba(46, 247, 255, 0.26), rgba(46, 247, 255, 0) 30%),
- radial-gradient(circle at 50% 120%, rgba(142, 255, 88, 0.12), rgba(142, 255, 88, 0) 45%),
- linear-gradient(160deg, var(--bg-void), var(--bg-deep) 40%, var(--bg-electric));
- background-size: cover;
- color: var(--text-main);
+ background-color: #f0f0f0;
+ background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6),
+ linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%, #e6e6e6);
+ background-size: 20px 20px;
+ background-position: 0 0, 10px 10px;
}
body {
font-family: text, sans-serif;
- color: var(--text-main);
- max-width: 980px;
- margin: 1.3rem auto;
- padding: 1.3rem 1.6rem;
- border: 1px solid var(--panel-border);
- border-radius: 12px;
- background: var(--panel-bg);
- box-shadow: var(--panel-shadow);
+ background: #ffffff;
+ max-width: 1200px;
+ padding: 20px;
+ margin: 20px auto;
+ border: 5px solid #dddddd;
+ border-radius: 15px;
word-wrap: break-word;
- overflow-x: hidden;
- transform-origin: 50% 0%;
- animation: body-boot 0.8s ease-out forwards;
-}
-
-body > :not(#rfx-stars):not(.rfx-overlay-grid):not(.rfx-overlay-scanlines):not(.rfx-vignette) {
- position: relative;
- z-index: 2;
-}
-
-#rfx-stars,
-.rfx-overlay-grid,
-.rfx-overlay-scanlines,
-.rfx-vignette {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
-}
-
-#rfx-stars {
- z-index: 0;
- overflow: hidden;
}
-#rfx-stars .star {
- position: absolute;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.9);
- box-shadow: 0 0 6px rgba(46, 247, 255, 0.75), 0 0 12px rgba(255, 47, 169, 0.28);
- animation: twinkle var(--twinkle-speed, 3.8s) ease-in-out infinite;
-}
-
-.rfx-overlay-grid {
- z-index: 0;
- opacity: 0.24;
- background-image:
- linear-gradient(rgba(46, 247, 255, 0.1) 1px, transparent 1px),
- linear-gradient(90deg, rgba(46, 247, 255, 0.1) 1px, transparent 1px),
- linear-gradient(0deg, rgba(255, 47, 169, 0.15), rgba(255, 47, 169, 0));
- background-size: 48px 48px, 48px 48px, 100% 100%;
- background-position:
- 0 calc(var(--rfx-scroll) * -0.06),
- calc(var(--rfx-scroll) * 0.03) 0,
- 0 0;
-}
-
-.rfx-overlay-scanlines {
- z-index: 1;
- opacity: 0.2;
- background: repeating-linear-gradient(
- 0deg,
- rgba(255, 255, 255, 0.06) 0px,
- rgba(255, 255, 255, 0.02) 1px,
- rgba(0, 0, 0, 0.2) 2px,
- rgba(0, 0, 0, 0) 4px
- );
- mix-blend-mode: screen;
- animation: scanline-shift 8s linear infinite;
-}
-
-.rfx-vignette {
- z-index: 1;
- background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.52) 100%);
-}
-
-h1,
-h2,
-h3 {
- display: inline-block !important;
+h1, h2, h3 {
font-family: heading, serif;
- font-weight: normal;
- margin-top: 1.1rem;
- margin-bottom: 0.2rem;
- color: var(--neon-cyan);
- letter-spacing: 0.1em;
- text-transform: uppercase;
- text-shadow:
- 0 0 4px rgba(46, 247, 255, 0.9),
- 0 0 11px rgba(46, 247, 255, 0.7),
- 0 0 22px rgba(255, 47, 169, 0.35);
-}
-
-h1 {
- color: var(--neon-lime);
-}
-
-h1::after,
-h2::after,
-h3::after {
- content: '';
- display: block;
- width: 100%;
- height: 2px;
- margin-top: 2px;
- background: linear-gradient(90deg, rgba(255, 47, 169, 0.05), rgba(46, 247, 255, 0.9), rgba(255, 47, 169, 0.05));
- box-shadow: 0 0 7px rgba(46, 247, 255, 0.6);
-}
-
-h1.glitch,
-h2.glitch,
-h3.glitch {
- position: relative;
- animation: glitch-shake 0.22s steps(2, end) 1;
-}
-
-h1.glitch::before,
-h1.glitch::after,
-h2.glitch::before,
-h2.glitch::after,
-h3.glitch::before,
-h3.glitch::after {
- content: attr(data-rfx-text);
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- overflow: hidden;
- pointer-events: none;
-}
-
-h1.glitch::before,
-h2.glitch::before,
-h3.glitch::before {
- color: var(--neon-magenta);
- transform: translate(-2px, 0);
- opacity: 0.7;
- clip-path: inset(0 0 48% 0);
-}
-
-h1.glitch::after,
-h2.glitch::after,
-h3.glitch::after {
- color: var(--neon-cyan);
- transform: translate(2px, 0);
- opacity: 0.72;
- clip-path: inset(58% 0 0 0);
-}
-
-p,
-span {
- color: var(--text-main);
- text-shadow: 0 0 7px rgba(46, 247, 255, 0.1);
-}
-
-p.header,
-p.footer {
- font-family: handnotes, sans-serif;
- letter-spacing: 0.04em;
- color: var(--text-muted);
+ color: #6ca0dc;
}
a {
- color: var(--neon-cyan);
+ font-family: code, monospace;
text-decoration: none;
- transition: color 0.18s ease-in-out, text-shadow 0.18s ease-in-out, transform 0.18s ease-in-out;
+ color: #8e44ad;
+ padding: 0 0 0 0;
}
a:hover {
- color: var(--neon-gold);
- text-shadow: 0 0 8px rgba(255, 216, 102, 0.8), 0 0 18px rgba(255, 47, 169, 0.45);
- transform: translateY(-1px);
-}
-
-a.textlink {
- display: inline-block;
- margin: 0.05rem 0;
+ text-decoration: underline;
}
a.textlink:before {
- content: '>>';
- color: var(--neon-magenta);
- letter-spacing: -0.05em;
- margin-right: 0.45rem;
- text-shadow: 0 0 6px rgba(255, 47, 169, 0.8);
-}
-
-a.textlink.link-pulse {
- animation: link-pulse 0.3s ease-out 1;
-}
-
-ul {
- list-style: none;
- padding-left: 0.7rem;
- margin: 0.7rem 0;
-}
-
-li {
- margin: 0.28rem 0 0.28rem 1rem;
- color: var(--text-main);
- text-shadow: 0 0 5px rgba(46, 247, 255, 0.26);
-}
-
-li:before {
- content: '::';
- color: var(--neon-lime);
- margin-right: 0.45rem;
- text-shadow: 0 0 6px rgba(142, 255, 88, 0.75);
+ content: "⇒ ";
}
.quote {
- color: #a9f5ff;
font-style: italic;
- text-shadow: 0 0 8px rgba(46, 247, 255, 0.45);
}
.quote:before {
- content: '[';
- color: var(--neon-magenta);
+ content: "« ";
+ padding-left: 2px;
}
.quote:after {
- content: ']';
- color: var(--neon-magenta);
+ content: " »";
+ padding-right: 2px;
}
-pre {
- position: relative;
- isolation: isolate;
- font-family: code, 'DejaVu Sans Mono', 'Courier New', monospace;
- font-size: 0.95rem;
- font-variant-ligatures: none;
- letter-spacing: 0;
- line-height: 1.35;
- tab-size: 4;
- white-space: pre;
- background: linear-gradient(180deg, rgba(5, 11, 30, 0.9), rgba(10, 17, 44, 0.92));
- border: 1px solid rgba(46, 247, 255, 0.4);
- border-left: 4px solid var(--neon-magenta);
- color: #9afcff;
- padding: 0.9rem;
- border-radius: 8px;
- overflow-x: auto;
- text-shadow: 0 0 5px rgba(46, 247, 255, 0.4);
- box-shadow: inset 0 0 20px rgba(46, 247, 255, 0.12), 0 0 16px rgba(255, 47, 169, 0.18);
- animation: crt-flicker 2.8s infinite;
-}
-
-pre::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- background: repeating-linear-gradient(
- 0deg,
- rgba(140, 255, 200, 0.1) 0px,
- rgba(140, 255, 200, 0.06) 1px,
- rgba(0, 0, 0, 0.07) 2px,
- rgba(0, 0, 0, 0) 4px
- );
- mix-blend-mode: screen;
- opacity: 0.75;
-}
-
-pre::after {
- content: '';
- position: absolute;
- left: -38%;
- top: 0;
- width: 36%;
- height: 100%;
- pointer-events: none;
- background: linear-gradient(
- 90deg,
- rgba(255, 255, 255, 0),
- rgba(46, 247, 255, 0.16),
- rgba(255, 47, 169, 0.2),
- rgba(255, 255, 255, 0)
- );
- animation: crt-sweep 5.4s linear infinite;
+ul {
+ list-style: none;
+ margin: 0 0 0 0;
+ padding: 0 0 0 0;
}
-span.inlinecode {
- font-family: code, 'DejaVu Sans Mono', 'Courier New', monospace;
- color: #a7f9ff;
- border: 1px solid rgba(46, 247, 255, 0.45);
- border-radius: 4px;
- background: rgba(9, 20, 43, 0.88);
- padding: 0.07rem 0.26rem;
- box-shadow: inset 0 0 8px rgba(46, 247, 255, 0.2), 0 0 8px rgba(46, 247, 255, 0.13);
- text-shadow: 0 0 4px rgba(46, 247, 255, 0.35);
- animation: crt-flicker 4.2s infinite;
+li:before {
+ content: "★";
+ padding-right: 5px;
+ color: #9b59b6;
}
img {
- max-width: 92%;
- display: block;
- margin: 1rem auto;
- border: 1px solid rgba(46, 247, 255, 0.45);
- border-radius: 8px;
- box-shadow: 0 0 20px rgba(46, 247, 255, 0.28), 0 0 30px rgba(255, 47, 169, 0.18);
- filter: saturate(1.12) contrast(1.08);
-}
-
-.rfx-reveal {
- opacity: 0;
- transform: translateY(14px) scale(0.99);
- animation: reveal-up 0.78s cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
- animation-delay: var(--rfx-delay, 0ms);
-}
-
-.rfx-cursor-burst {
- position: fixed;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- border: 1px solid var(--neon-cyan);
- box-shadow: 0 0 8px rgba(46, 247, 255, 0.95), 0 0 16px rgba(255, 47, 169, 0.6);
- pointer-events: none;
- z-index: 4;
- transform: translate(-50%, -50%);
- animation: cursor-burst 0.45s ease-out forwards;
-}
-
-@keyframes body-boot {
- 0% {
- transform: translateY(10px) scale(0.98);
- filter: blur(3px);
- }
- 100% {
- transform: translateY(0) scale(1);
- filter: blur(0);
- }
-}
-
-@keyframes twinkle {
- 0%,
- 100% {
- opacity: 0.18;
- transform: scale(1);
- }
- 50% {
- opacity: 0.92;
- transform: scale(1.28);
- }
+ max-width: 90%;
}
-@keyframes scanline-shift {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(6px);
- }
-}
-
-@keyframes glitch-shake {
- 0% {
- transform: translate(0, 0);
- }
- 25% {
- transform: translate(-1px, 0);
- }
- 50% {
- transform: translate(1px, 0);
- }
- 75% {
- transform: translate(-1px, 0);
- }
- 100% {
- transform: translate(0, 0);
- }
-}
-
-@keyframes reveal-up {
- 0% {
- opacity: 0;
- transform: translateY(14px) scale(0.99);
- }
- 100% {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-@keyframes cursor-burst {
- 0% {
- opacity: 1;
- transform: translate(-50%, -50%) scale(0.5);
- }
- 100% {
- opacity: 0;
- transform: translate(-50%, -50%) scale(2.2);
- }
-}
-
-@keyframes link-pulse {
- 0% {
- text-shadow: 0 0 0 rgba(255, 216, 102, 0);
- }
- 100% {
- text-shadow: 0 0 14px rgba(255, 216, 102, 0.8);
- }
-}
-
-@keyframes crt-flicker {
- 0%,
- 100% {
- opacity: 1;
- }
- 18% {
- opacity: 0.96;
- }
- 19% {
- opacity: 0.91;
- }
- 20% {
- opacity: 0.97;
- }
- 50% {
- opacity: 0.98;
- }
- 51% {
- opacity: 0.93;
- }
- 52% {
- opacity: 0.99;
- }
-}
-
-@keyframes crt-sweep {
- 0% {
- transform: translateX(0);
- }
- 100% {
- transform: translateX(420%);
- }
-}
-
-@media (max-width: 800px) {
- body {
- margin: 0.4rem;
- padding: 0.9rem;
- border-radius: 9px;
- }
-
- h1,
- h2,
- h3 {
- letter-spacing: 0.07em;
- text-wrap: balance;
- }
-}
-
-html.reduce-motion *,
-html.reduce-motion *::before,
-html.reduce-motion *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0ms !important;
-}
-
-html.reduce-motion #rfx-stars .star:nth-child(n + 32) {
- display: none;
+pre {
+ font-family: code, monospace;
+ padding: 20px;
+ border: 1px solid #dddddd;
+ border-radius: 15px;
}
-@media (prefers-reduced-motion: reduce) {
- * {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0ms !important;
- }
+span.inlinecode {
+ font-family: code, monospace;
+ border: 1px solid #999999;
+ border-radius: 2px;
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 16:03:43 +0000