From 867f0aaf4ad46d9180795e1371129a4ad0e00f63 Mon Sep 17 00:00:00 2001 From: reverse Date: Mon, 31 Aug 2026 02:18:33 +0000 Subject: [PATCH] =?UTF-8?q?home:=20developer=20theme=20=E2=80=94=20dark=20?= =?UTF-8?q?default,=20ibm=20plex=20mono,=20hairline=20nav,=20hero=20sessio?= =?UTF-8?q?n=20window?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/style.css | 89 ++++++++++++++++++++++---------------------- templates/base.html | 8 ++-- templates/index.html | 40 +++++++++++--------- 3 files changed, 71 insertions(+), 66 deletions(-) diff --git a/static/style.css b/static/style.css index e2e7553..f0a315a 100644 --- a/static/style.css +++ b/static/style.css @@ -7,16 +7,16 @@ --amber:#e8a13c; --green:#22b573; --red:#e0604f; --purple-line:#c6b6ec; --purple-fg:#5a3fb0; --purple-bg:#f3edfd; --bq-fg:#0c5a51; --dot:rgba(18,165,148,.06); - --sans:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; - --mono:ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace; + --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; + --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace; --wrap:1080px; } :root[data-theme="dark"]{ - --teal:#15b6a3; --teal-d:#48d8c4; --teal-dd:#7de9db; --teal-t:#0f2d29; --teal-edge:#0b8474; - --ink:#e3ece8; --muted:#93a8a1; --faint:#66807a; - --line:#1b2e29; --line2:#26403a; --bg:#0b1614; --card:#132622; --panel:#0f1e1b; - --purple-line:#4f5a7a; --purple-fg:#bfc7ee; --purple-bg:#182034; --bq-fg:#8fe6d8; - --dot:rgba(37,200,178,.06); + --teal:#17b8a6; --teal-d:#2dd4bf; --teal-dd:#6fe7d7; --teal-t:#0e2a26; --teal-edge:#0c8072; + --ink:#e7ece9; --muted:#98a29c; --faint:#68726c; + --line:#232c28; --line2:#313d38; --bg:#0e1211; --card:#141b18; --panel:#121815; + --purple-line:#3b4a63; --purple-fg:#b9c6e6; --purple-bg:#161c28; --bq-fg:#8fe6d8; + --dot:rgba(45,212,191,.05); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} @@ -36,7 +36,7 @@ code{font-family:var(--mono);font-size:.9em;background:rgba(18,165,148,.09);colo .mono-line{font-family:var(--mono);color:var(--muted)} /* buttons */ -.btn{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.95rem;letter-spacing:.005em;padding:.58rem 1.25rem;border-radius:5px;border:1.5px solid transparent;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .09s ease,transform .09s ease} +.btn{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-weight:500;font-size:.9rem;letter-spacing:0;padding:.58rem 1.2rem;border-radius:5px;border:1.5px solid transparent;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .09s ease,transform .09s ease} .btn:hover{text-decoration:none} .btn-primary{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 3px 0 var(--teal-edge),inset 0 1px 0 rgba(255,255,255,.2)} .btn-primary:hover{background:var(--teal-d);border-color:var(--teal-d)} @@ -45,58 +45,59 @@ code{font-family:var(--mono);font-size:.9em;background:rgba(18,165,148,.09);colo .btn-ghost:hover{background:var(--teal-t);color:var(--teal-dd)} .btn-ghost:active{transform:translateY(1px)} -/* top bar (teal in both themes) */ -.topbar{background:var(--teal);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 12px -6px rgba(0,0,0,.35)} +/* top bar — dark, hairline, monospace nav */ +.topbar{background:var(--panel);color:var(--ink);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)} .bar-in{max-width:var(--wrap);margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} -.brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:700;font-size:1.25rem} -.brand:hover{text-decoration:none;opacity:.95} -.mark{width:26px;height:26px;color:#fff;flex:none} -.mainnav{margin-left:auto;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap} -.mainnav a{color:#eafffb;font-weight:500;font-size:.96rem;opacity:.9;padding:.15rem 0;border-bottom:2px solid transparent} -.mainnav a:hover{opacity:1;text-decoration:none} -.mainnav a.on{opacity:1;border-bottom-color:#fff} -.mainnav a.ext{opacity:.8} +.brand{display:flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:600;font-size:1.18rem;font-family:var(--mono);letter-spacing:-.02em} +.brand:hover{text-decoration:none;color:var(--teal-d)} +.mark{width:24px;height:24px;color:var(--teal);flex:none} +.mainnav{margin-left:auto;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap} +.mainnav a{color:var(--muted);font-family:var(--mono);font-weight:500;font-size:.88rem;padding:.15rem 0;border-bottom:2px solid transparent} +.mainnav a:hover{color:var(--ink);text-decoration:none} +.mainnav a.on{color:var(--teal-d);border-bottom-color:var(--teal-d)} +.mainnav a.ext{color:var(--faint)} +.mainnav a.ext:hover{color:var(--teal-d)} /* theme toggle */ -.theme-toggle{margin-left:.1rem;background:none;border:0;cursor:pointer;color:#fff;opacity:.9;display:inline-flex;align-items:center;padding:.15rem;line-height:0} -.theme-toggle:hover{opacity:1} +.theme-toggle{margin-left:.1rem;background:none;border:0;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;padding:.15rem;line-height:0} +.theme-toggle:hover{color:var(--ink)} .theme-toggle svg{width:18px;height:18px} .theme-toggle .ic-sun{display:none} :root[data-theme="dark"] .theme-toggle .ic-moon{display:none} :root[data-theme="dark"] .theme-toggle .ic-sun{display:inline} /* hero */ -.hero{padding:3.4rem 0 2.6rem} -.hero-in{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:center} -.eyebrow{color:var(--teal-d);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 .8rem} -.hero h1{font-size:clamp(2.4rem,5.4vw,3.7rem);margin-bottom:1rem} -.hero-sub{color:var(--muted);font-size:1.12rem;max-width:34rem;margin-bottom:1.6rem} +.hero{padding:3.6rem 0 2.8rem} +.hero-in{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:1.02fr 1fr;gap:2.6rem;align-items:center} +.eyebrow{font-family:var(--mono);color:var(--teal-d);font-weight:500;font-size:.8rem;letter-spacing:.02em;margin:0 0 1rem} +.hero h1{font-size:clamp(2.3rem,5vw,3.5rem);letter-spacing:-.03em;margin-bottom:1rem;font-weight:700} +.hero-sub{color:var(--muted);font-size:1.08rem;max-width:34rem;margin-bottom:1.5rem} .cta{display:flex;gap:.7rem;flex-wrap:wrap} +.statline{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:1.5rem;font-family:var(--mono);font-size:.78rem;color:var(--faint)} +.statline b{font-weight:500;color:var(--muted)} +.statline .st{color:var(--faint)} +.statline .st.on{color:var(--teal-d)} +.statline .st.down{color:var(--red)} -/* status card */ -.statuscard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;box-shadow:0 20px 40px -28px rgba(20,40,60,.4)} -.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem} -.sc-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--faint);font-weight:600} -.dot{width:9px;height:9px;border-radius:50%} -.dot.on{background:var(--green);box-shadow:0 0 0 0 rgba(34,181,115,.6);animation:pulse 2s infinite} -.dot.off{background:var(--faint)} -@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,181,115,.5)}70%{box-shadow:0 0 0 7px rgba(34,181,115,0)}100%{box-shadow:0 0 0 0 rgba(34,181,115,0)}} -.sc-rows{margin:0} -.sc-rows>div{display:flex;justify-content:space-between;align-items:baseline;padding:.42rem 0;border-bottom:1px dashed var(--line)} -.sc-rows>div:last-child{border-bottom:0} -.sc-rows dt{color:var(--muted);font-size:.9rem} -.sc-rows dd{margin:0;font-weight:500;font-family:var(--mono);font-size:.9rem;color:var(--ink)} -.sc-rows .live{color:var(--green)} .sc-rows .down{color:var(--red)} -.sc-foot{margin-top:.7rem;font-size:.78rem;color:var(--faint)} +/* hero code window — a clean session panel, not a faux terminal skin */ +.codewin{background:var(--code-bg);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:0 26px 55px -32px rgba(0,0,0,.75)} +.codewin-bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--mono);font-size:.76rem;color:#8fa3a0} +.cw-dot{width:9px;height:9px;border-radius:50%;background:var(--teal-d);box-shadow:0 0 0 3px rgba(45,212,191,.16)} +.codewin pre{margin:0;padding:.95rem 1.05rem;overflow-x:auto;font-family:var(--mono);font-size:.79rem;line-height:1.75;color:var(--code-fg)} +.codewin code{font-family:inherit;background:none;color:inherit;padding:0;font-size:inherit} +.codewin .c-cmd{color:var(--cmd)} +.codewin .c-num{color:#7ee0d0;font-weight:500} +.codewin .c-kw{color:#e0a56b} +.codewin .c-srv{color:#7d8a86} /* feature band */ .band{background:linear-gradient(180deg,var(--card),var(--panel));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3.2rem 0} .h-center{text-align:center} -.band h2{font-size:1.9rem;margin-bottom:2rem} +.band h2{font-family:var(--mono);font-weight:600;letter-spacing:-.02em;font-size:1.55rem;margin-bottom:2rem} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} -.fcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.4rem;transition:border-color .15s,box-shadow .15s} -.fcard:hover{border-color:var(--teal);box-shadow:0 16px 30px -24px rgba(18,165,148,.6)} -.fcard h3{font-size:1.12rem;color:var(--teal-dd)} +.fcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.3rem 1.4rem;transition:border-color .15s} +.fcard:hover{border-color:var(--teal)} +.fcard h3{font-family:var(--mono);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;color:var(--teal-dd)} .fcard p{margin:0;color:var(--muted);font-size:.95rem} .more{margin-top:1.8rem}.more a{font-weight:600} diff --git a/templates/base.html b/templates/base.html index c3bef3a..31619cd 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,10 +1,10 @@ - + - - + + {% block title %}echoIRCd — a from-scratch IRC server in Rust{% endblock %} @@ -13,7 +13,7 @@ - + {% block head %}{% endblock %} diff --git a/templates/index.html b/templates/index.html index 9497232..f419251 100644 --- a/templates/index.html +++ b/templates/index.html @@ -4,30 +4,34 @@
-

IRC daemon · written in Rust

+

// IRC daemon · written in Rust · IRCv3

The from-scratch
IRC server.

-

echoIRCd is a modern IRC daemon, built from the ground up in Rust — full - IRCv3, modern TLS, and SASL. No forks. No C. No unsafe. Pair it with - echo services, a separate package linked over S2S.

+

A modern IRC daemon built from the ground up in Rust — full IRCv3, + TLS 1.3 and SASL. No forks. No C. No unsafe. Pair it with + echo services over S2S.

Connect to the network - See the features + Read the docs +
+
+ {% if status.online %}● online{% else %}● offline{% endif %} + echoIRCd {{ status.version }} + :6697 tls 1.3 + users {{ status.users }} + chans {{ status.channels }}
-