diff options
Diffstat (limited to 'public/css/main.css')
| -rw-r--r-- | public/css/main.css | 763 |
1 files changed, 763 insertions, 0 deletions
diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..62ed94d --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,763 @@ +@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oxanium:wght@700;800&display=swap"; + +/* ns-hugo-imp:/home/danix/Programming/GIT/danix2-hugo-theme/assets/css/variables.css */ +:root { + --bg: #060b10; + --bg2: #0c1520; + --surface: #101e2d; + --border: #182840; + --accent: #a855f7; + --accent2: #00ff88; + --text: #c4d6e8; + --text-dim: #7a9bb8; + --muted: #304860; + --color-tech: #a855f7; + --color-life: #f59e0b; + --color-quote: #00ff88; + --color-link: #38bdf8; + --color-photo: #ec4899; + --font-body: + "IBM Plex Sans", + system-ui, + sans-serif; + --font-mono: + "JetBrains Mono", + "Courier New", + monospace; + --font-head: "Oxanium", sans-serif; + --fs-body: 0.95rem; + --fs-nav: 0.8rem; + --fs-badge: 0.7rem; + --fs-btn: 0.8rem; + --fs-h3: 1.5rem; + --fs-h2: clamp(1.7rem, 6vw, 3rem); + --container-max: 1080px; + --container-narrow: 768px; + --gap-sm: 0.5rem; + --gap-md: 1.5rem; + --gap-lg: 2.5rem; + --gap-xl: 4rem; + --section-py-mobile: 4rem; + --section-py-desktop: 6rem; + --card-px-mobile: 1.5rem; + --card-px-desktop: 2rem; + --transition: all 0.2s ease; + --transition-slow: all 0.75s cubic-bezier(0.16,1,0.3,1); +} +html.theme-light { + --bg: #f0f4f8; + --bg2: #e2eaf4; + --surface: #d4dff0; + --border: #a8bdd8; + --accent: #7c3aed; + --accent2: #008f5a; + --text: #0d1b2a; + --text-dim: #2e4a6a; + --muted: #6888a8; +} +@media (max-width: 479px) { + :root { + --bp: "mobile"; + } +} +@media (min-width: 480px) { + :root { + --bp: "sm"; + } +} +@media (min-width: 768px) { + :root { + --bp: "md"; + } +} +@media (min-width: 1200px) { + :root { + --bp: "lg"; + } +} + +/* ns-hugo-imp:/home/danix/Programming/GIT/danix2-hugo-theme/assets/css/components/hero.css */ +.hero { + position: relative; + overflow: hidden; + padding: var(--section-py-mobile) 1.5rem; + background: var(--bg); + border-bottom: 1px solid var(--border); +} +@media (min-width: 768px) { + .hero { + padding: var(--section-py-desktop) 1.5rem; + } +} +#matrix-canvas { + position: absolute; + inset: 0; + opacity: 0.13; + pointer-events: none; +} +html.theme-light #matrix-canvas { + opacity: 0.18; +} +.hero-content { + position: relative; + z-index: 1; + max-width: var(--container-max); + margin: 0 auto; + display: flex; + align-items: center; + gap: var(--gap-lg); +} +.hero-avatar { + width: 64px; + height: 64px; + border-radius: 50%; + flex-shrink: 0; + background: + linear-gradient( + 135deg, + var(--accent), + var(--accent2)); + display: flex; + align-items: center; + justify-content: center; + font-family: var(--font-head); + font-size: 1.4rem; + font-weight: 800; + color: #fff; +} +@media (min-width: 768px) { + .hero-avatar { + width: 80px; + height: 80px; + font-size: 1.8rem; + } +} +.hero-text h1 { + margin-bottom: 0.25rem; +} +.hero-role { + font-family: var(--font-mono); + font-size: 0.85rem; + color: var(--accent); + letter-spacing: 0.1em; + text-transform: uppercase; + margin-bottom: 0.75rem; +} +.hero-bio { + color: var(--text-dim); + font-size: 0.95rem; + line-height: 1.8; + max-width: 400px; +} +#matrix-canvas::after { + content: ""; + position: absolute; + inset: 0; + background: + repeating-linear-gradient( + 0deg, + rgba(0, 0, 0, 0.15), + rgba(0, 0, 0, 0.15) 1px, + transparent 1px, + transparent 2px); + pointer-events: none; +} +.hero::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 600px; + height: 600px; + background: + radial-gradient( + circle, + rgba(168, 85, 247, 0.15) 0%, + transparent 70%); + transform: translate(-50%, -50%); + pointer-events: none; +} +@media (max-width: 768px) { + .hero-content { + flex-direction: column; + text-align: center; + } + .hero-bio { + max-width: 100%; + } +} + +/* ns-hugo-imp:/home/danix/Programming/GIT/danix2-hugo-theme/assets/css/components/card.css */ +.post-card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: 8px; + overflow: hidden; + transition: var(--transition); + display: flex; + gap: var(--gap-md); +} +.post-card:hover { + border-color: var(--accent); + box-shadow: 0 0 20px rgba(168, 85, 247, 0.2); +} +.post-card-image { + width: 120px; + height: 100px; + flex-shrink: 0; + object-fit: cover; + background: + linear-gradient( + 135deg, + var(--border), + var(--bg2)); + border-right: 1px solid var(--border); +} +@media (min-width: 768px) { + .post-card-image { + width: 160px; + height: 120px; + } +} +.post-card-body { + padding: var(--gap-md); + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; +} +.post-type-badge { + display: inline-block; + font-family: var(--font-mono); + font-size: var(--fs-badge); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + padding: 0.35rem 0.7rem; + border-radius: 20px; + margin-bottom: 0.5rem; + width: fit-content; +} +.post-type-badge.tech { + background: color-mix(in srgb, var(--color-tech) 15%, transparent); + border: 1px solid color-mix(in srgb, var(--color-tech) 30%, transparent); + color: var(--color-tech); +} +.post-type-badge.life { + background: color-mix(in srgb, var(--color-life) 15%, transparent); + border: 1px solid color-mix(in srgb, var(--color-life) 30%, transparent); + color: var(--color-life); +} +.post-type-badge.quote { + background: color-mix(in srgb, var(--color-quote) 15%, transparent); + border: 1px solid color-mix(in srgb, var(--color-quote) 30%, transparent); + color: var(--color-quote); +} +.post-type-badge.link { + background: color-mix(in srgb, var(--color-link) 15%, transparent); + border: 1px solid color-mix(in srgb, var(--color-link) 30%, transparent); + color: var(--color-link); +} +.post-type-badge.photo { + background: color-mix(in srgb, var(--color-photo) 15%, transparent); + border: 1px solid color-mix(in srgb, var(--color-photo) 30%, transparent); + color: var(--color-photo); +} +.post-card-title { + font-family: var(--font-head); + font-size: 1.1rem; + font-weight: 700; + line-height: 1.3; + margin-bottom: 0.5rem; + color: var(--text); +} +.post-card-title a { + color: var(--text); + text-decoration: none; +} +.post-card-title a:hover { + color: var(--accent); +} +.post-card-excerpt { + color: var(--text-dim); + font-size: 0.9rem; + line-height: 1.6; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + margin-bottom: 0.5rem; +} +.post-card-meta { + display: flex; + gap: 1rem; + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--muted); + text-transform: uppercase; + letter-spacing: 0.08em; +} +.post-card.featured { + grid-row: span 2; +} +.post-card.featured .post-card-image { + width: 100%; + height: 180px; + border-right: none; + border-bottom: 1px solid var(--border); +} +.post-card.featured .post-card-body { + padding: var(--gap-lg); +} +@media (max-width: 768px) { + .post-card { + flex-direction: column; + } + .post-card-image { + width: 100%; + height: 150px; + border-right: none; + border-bottom: 1px solid var(--border); + } + .post-card.featured .post-card-image { + height: 150px; + } +} + +/* ns-hugo-imp:/home/danix/Programming/GIT/danix2-hugo-theme/assets/css/components/feed.css */ +.feed-section { + padding: var(--section-py-mobile) 0; +} +@media (min-width: 768px) { + .feed-section { + padding: var(--section-py-desktop) 0; + } +} +.feed-label { + font-family: var(--font-mono); + font-size: 0.75rem; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--accent); + margin-bottom: 1.5rem; +} +.feed-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: var(--gap-md); + margin-bottom: var(--gap-xl); +} +@media (min-width: 768px) { + .feed-grid { + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 1200px) { + .feed-grid { + grid-template-columns: repeat(3, 1fr); + } +} +.feed-list { + display: flex; + flex-direction: column; + gap: var(--gap-md); +} +.feed-list .post-card { + flex-direction: row; +} +.filter-bar { + display: flex; + gap: var(--gap-sm); + margin-bottom: var(--gap-lg); + flex-wrap: wrap; +} +.filter-btn { + font-family: var(--font-mono); + font-size: var(--fs-badge); + padding: 0.4rem 1rem; + border: 1px solid var(--border); + border-radius: 20px; + background: transparent; + color: var(--text-dim); + text-transform: uppercase; + letter-spacing: 0.1em; + cursor: pointer; + transition: var(--transition); +} +.filter-btn:hover { + border-color: var(--accent); + color: var(--accent); +} +.filter-btn.active { + background: var(--accent); + color: #fff; + border-color: var(--accent); +} +.feed-cta { + display: inline-block; + padding: 0.75rem 1.5rem; + background: var(--accent); + color: #fff; + border-radius: 4px; + font-family: var(--font-mono); + font-size: var(--fs-btn); + text-transform: uppercase; + letter-spacing: 0.1em; + text-decoration: none; + transition: var(--transition); +} +.feed-cta:hover { + background: var(--accent2); + color: var(--bg); +} + +/* ns-hugo-imp:/home/danix/Programming/GIT/danix2-hugo-theme/assets/css/components/code.css */ +pre { + background: var(--surface); + border: 1px solid var(--border); + border-left: 3px solid var(--accent); + border-radius: 6px; + padding: 1rem; + overflow-x: auto; + position: relative; + margin: 1.5rem 0; +} +pre code { + font-family: var(--font-mono); + font-size: 0.9rem; + line-height: 1.6; + color: var(--text); +} +.highlight { + background: var(--surface); + border: 1px solid var(--border); + border-left: 3px solid var(--accent); + border-radius: 6px; + padding: 1rem; + overflow-x: auto; + margin: 1.5rem 0; + position: relative; +} +.highlight code { + background: none; + padding: 0; + border-radius: 0; + color: inherit; +} +.highlight .k { + color: #f59e0b; +} +.highlight .kn { + color: #f59e0b; +} +.highlight .kp { + color: #f59e0b; +} +.highlight .kr { + color: #f59e0b; +} +.highlight .kt { + color: #a855f7; +} +.highlight .n { + color: #c4d6e8; +} +.highlight .na { + color: #38bdf8; +} +.highlight .nb { + color: #38bdf8; +} +.highlight .nc { + color: #a855f7; +} +.highlight .no { + color: #00ff88; +} +.highlight .nd { + color: #f59e0b; +} +.highlight .ni { + color: #a855f7; +} +.highlight .ne { + color: #f59e0b; +} +.highlight .nf { + color: #38bdf8; +} +.highlight .nl { + color: #a855f7; +} +.highlight .nn { + color: #a855f7; +} +.highlight .nt { + color: #f59e0b; +} +.highlight .nv { + color: #c4d6e8; +} +.highlight .s { + color: #00ff88; +} +.highlight .sa { + color: #00ff88; +} +.highlight .sb { + color: #00ff88; +} +.highlight .sc { + color: #00ff88; +} +.highlight .s1 { + color: #00ff88; +} +.highlight .s2 { + color: #00ff88; +} +.highlight .se { + color: #f59e0b; +} +.highlight .sh { + color: #00ff88; +} +.highlight .si { + color: #f59e0b; +} +.highlight .sx { + color: #00ff88; +} +.highlight .sr { + color: #00ff88; +} +.highlight .ss { + color: #00ff88; +} +.highlight .m { + color: #38bdf8; +} +.highlight .mb { + color: #38bdf8; +} +.highlight .mf { + color: #38bdf8; +} +.highlight .mh { + color: #38bdf8; +} +.highlight .mi { + color: #38bdf8; +} +.highlight .il { + color: #38bdf8; +} +.highlight .mo { + color: #38bdf8; +} +.highlight .o { + color: #c4d6e8; +} +.highlight .ow { + color: #a855f7; +} +.highlight .c { + color: #7a9bb8; +} +.highlight .c1 { + color: #7a9bb8; +} +.highlight .ch { + color: #7a9bb8; +} +.highlight .cm { + color: #7a9bb8; +} +.highlight .cp { + color: #f59e0b; +} +.highlight .cpf { + color: #f59e0b; +} +html.theme-light .highlight { + background: var(--surface); + border-left-color: var(--accent); +} +html.theme-light .highlight .c { + color: #6a7fa0; +} +.code-copy-btn { + position: absolute; + top: 0.75rem; + right: 0.75rem; + background: var(--accent); + color: #fff; + border: none; + padding: 0.4rem 0.8rem; + border-radius: 4px; + font-family: var(--font-mono); + font-size: 0.75rem; + cursor: pointer; + opacity: 0; + transition: var(--transition); + text-transform: uppercase; + letter-spacing: 0.08em; +} +.highlight:hover .code-copy-btn, +pre:hover .code-copy-btn { + opacity: 1; +} +.code-copy-btn:hover { + background: var(--accent2); + color: var(--bg); +} +.code-copy-btn.copied { + background: var(--accent2); +} +code { + font-family: var(--font-mono); + background: var(--surface); + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-size: 0.9em; + color: var(--accent2); +} +p code { + border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); +} + +/* ns-hugo-imp:/home/danix/Programming/GIT/danix2-hugo-theme/assets/css/components/progress-bar.css */ +.reading-progress { + position: fixed; + top: 0; + left: 0; + height: 3px; + background: + linear-gradient( + 90deg, + var(--accent), + var(--accent2)); + width: 0%; + z-index: 200; + transition: width 0.1s ease-out; +} +.article-page .reading-progress, +.page-page .reading-progress { + display: block; +} +body:not(.scrollable) .reading-progress { + display: none; +} + +/* <stdin> */ +html { + font-size: 17px; + scroll-behavior: smooth; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-color: var(--bg); + color: var(--text); + font-family: var(--font-body); + font-size: var(--fs-body); + line-height: 1.95; + transition: background-color 0.2s, color 0.2s; +} +h1 { + font-family: var(--font-head); + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1.1; + margin-bottom: 0.5rem; +} +h2 { + font-family: var(--font-head); + font-size: var(--fs-h2); + font-weight: 800; + line-height: 1.1; + margin: 2rem 0 1rem; +} +h3 { + font-family: var(--font-head); + font-size: var(--fs-h3); + font-weight: 800; + line-height: 1.2; + margin: 1.5rem 0 0.75rem; +} +h4, +h5, +h6 { + font-family: var(--font-head); + font-weight: 800; + margin: 1rem 0 0.5rem; +} +p { + margin-bottom: 1rem; +} +a { + color: var(--accent); + text-decoration: none; + transition: var(--transition); +} +a:hover { + color: var(--accent2); +} +.container { + max-width: var(--container-max); + margin: 0 auto; + padding: 0 1.5rem; +} +.container-narrow { + max-width: var(--container-narrow); + margin: 0 auto; + padding: 0 1.5rem; +} +main { + min-height: calc(100vh - 200px); +} +ul, +ol { + margin-left: 1.5rem; + margin-bottom: 1rem; +} +li { + margin-bottom: 0.5rem; +} +code { + font-family: var(--font-mono); + background: var(--surface); + padding: 0.25rem 0.5rem; + border-radius: 4px; + font-size: 0.9em; +} +pre { + margin-bottom: 1rem; + overflow-x: auto; +} +pre code { + padding: 0; + background: none; + border-radius: 0; +} +:focus { + outline: 2px solid var(--accent); + outline-offset: 2px; +} +button:focus, +a:focus { + outline: 2px dashed var(--accent); + outline-offset: 4px; +} +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +/*# sourceMappingURL=main.css.map */ |