From 77fae2dfe095af8248f82a32eaeb3bf36672655d Mon Sep 17 00:00:00 2001 From: just n Date: Sat, 17 Jan 2026 19:50:42 +0000 Subject: [PATCH] Add main.css --- main.css | 270 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 main.css diff --git a/main.css b/main.css new file mode 100644 index 0000000..43ad6b3 --- /dev/null +++ b/main.css @@ -0,0 +1,270 @@ +* { + box-sizing: border-box; +} +body { + font-family: 'Georgia', 'Times New Roman', serif; + font-size: 18px; + line-height: 1.6; + letter-spacing: 0.02em; + word-spacing: 0.1em; + color: #e2e8f0; + background-color: #1a202c; + text-shadow: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-user-select: text; + -moz-user-select: text; + -ms-user-select: text; + user-select: text; + margin: 0; + padding: 2rem; + max-width: 80ch; + margin: 0 auto; +} +.reading-container, +main, +article, +.content { + max-width: 65ch; + margin: 0 auto; + padding: 3rem 2rem; + background-color: #2d3748; + border-radius: 12px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); + border: 1px solid #4a5568; +} +p { + margin-bottom: 1.5em; + margin-top: 0; + orphans: 3; + widows: 3; + text-align: center; + hyphens: none; + -webkit-hyphens: none; + -moz-hyphens: none; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; + font-weight: 700; + line-height: 1.2; + margin-top: 2em; + margin-bottom: 0.5em; + letter-spacing: -0.02em; + text-align: center; + color: #f7fafc; +} +h1 { + font-size: 2.25em; + margin-top: 0; +} +h2 { + font-size: 1.75em; +} +h3 { + font-size: 1.5em; +} +h4 { + font-size: 1.25em; +} +ul, +ol { + margin: 1.5em 0; + padding-left: 2em; + text-align: left; + max-width: max-content; + margin-left: auto; + margin-right: auto; +} +li { + margin-bottom: 0.5em; + line-height: 1.5; +} +a { + color: #63b3ed; + text-decoration: underline; + transition: color 0.1s ease; +} +a:hover { + color: #90cdf4; +} +a:visited { + color: #b794f6; +} +code, +pre { + font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; + font-size: 0.9em; + background-color: #4a5568; + padding: 0.2em 0.4em; + border-radius: 4px; + border: 1px solid #718096; + color: #e2e8f0; +} +pre { + padding: 1.5em; + overflow-x: auto; + line-height: 1.4; + text-align: left; + border-radius: 8px; +} +table { + border-collapse: collapse; + width: 100%; + margin: 1.5em auto; + border-radius: 8px; + overflow: hidden; + border: 1px solid #4a5568; +} +th, +td { + border: 1px solid #4a5568; + padding: 0.75em; + text-align: center; +} +th { + background-color: #4a5568; + font-weight: 600; + color: #f7fafc; +} +blockquote { + margin: 1.5em 0; + padding: 1.5em 2em; + border-left: 4px solid #4a5568; + background-color: #2d3748; + font-style: italic; + text-align: center; + border-radius: 0 8px 8px 0; + color: #cbd5e0; +} +*, +*::before, +*::after { + animation-duration: 0s !important; + animation-delay: 0s !important; + transition-duration: 0s !important; + transition-delay: 0s !important; +} +a { + transition: color 0.1s ease !important; +} +@media screen and (max-width: 768px) { + body { + font-size: 16px; + line-height: 1.5; + } + .reading-container, + main, + article, + .content { + padding: 2rem 1.5rem; + border-radius: 8px; + } + h1 { + font-size: 2em; + } + h2 { + font-size: 1.5em; + } + h3 { + font-size: 1.25em; + } +} +@media screen and (min-width: 1200px) { + body { + font-size: 19px; + } + .reading-container, + main, + article, + .content { + padding: 4rem 3rem; + } +} +@media (prefers-contrast: high) { + body { + color: #ffffff; + background-color: #000000; + } + .reading-container, + main, + article, + .content { + background-color: #000000; + border: 2px solid #ffffff; + box-shadow: none; + } + h1, + h2, + h3, + h4, + h5, + h6 { + color: #ffffff; + } + a { + color: #00ffff; + } + a:visited { + color: #ff00ff; + } + code, + pre { + background-color: #000000; + border: 1px solid #ffffff; + color: #ffffff; + } + th { + background-color: #000000; + color: #ffffff; + } + blockquote { + background-color: #000000; + border-left: 4px solid #ffffff; + color: #ffffff; + } +} +@media (prefers-reduced-motion: reduce) { + a { + transition: none !important; + } +} +@media print { + body { + font-size: 12pt; + line-height: 1.4; + color: #000000; + background-color: transparent; + } + .reading-container, + main, + article, + .content { + max-width: none; + margin: 0; + padding: 0; + background-color: transparent; + border: none; + box-shadow: none; + } + a { + color: #000000; + text-decoration: underline; + } + p, + blockquote { + text-align: left; + } +} +a:focus, +button:focus, +input:focus, +textarea:focus, +select:focus { + outline: 2px solid #63b3ed; + outline-offset: 2px; +}