footer: real multi-column layout, drop the duplicated tagline

This commit is contained in:
Jean Chevronnet 2026-08-31 00:46:01 +00:00
parent 88c8fc72bb
commit df6216d0d2
No known key found for this signature in database
GPG key ID: 439666D63A9477E4
2 changed files with 58 additions and 22 deletions

View file

@ -134,15 +134,21 @@ code{font-family:var(--mono);font-size:.9em;background:rgba(18,165,148,.09);colo
font-family:var(--mono);font-size:.88rem;line-height:1.7;white-space:pre;margin:.5rem 0}
/* footer (dark in both themes) */
.site-foot{background:#0f1a22;color:#aeb8c0;margin-top:1rem}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:2rem 1.25rem;display:flex;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700}
.foot-brand .mark{width:22px;height:22px;color:var(--teal)}
.foot-tag{margin:0;color:#8994a0;font-size:.9rem}
.foot-tag code{background:rgba(255,255,255,.08);color:#cfe3dd}
.foot-links{margin-left:auto;display:flex;gap:1.2rem;flex-wrap:wrap}
.foot-links a{color:#aeb8c0;font-size:.9rem}
.foot-links a:hover{color:#fff}
.site-foot{background:#0f1a22;color:#aeb8c0;margin-top:3rem}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:3rem 1.25rem 2.2rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem 1.5rem}
.foot-about{max-width:22rem}
.foot-logo{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:700;font-size:1.05rem}
.foot-logo .mark{width:22px;height:22px;color:var(--teal)}
.foot-logo:hover{text-decoration:none}
.foot-about p{margin:.85rem 0 0;color:#8994a0;font-size:.9rem;line-height:1.6}
.foot-net{font-family:var(--mono)}
.foot-net code,.foot-about code{background:rgba(255,255,255,.08);color:#cfe3dd;padding:.05em .4em;border-radius:4px;font-size:.85em}
.foot-col{display:flex;flex-direction:column}
.foot-col h4{color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:600;margin:.15rem 0 .9rem}
.foot-col a{color:#aeb8c0;font-size:.9rem;padding:.3rem 0}
.foot-col a:hover{color:#fff;text-decoration:none}
.foot-bar{border-top:1px solid rgba(255,255,255,.08);max-width:var(--wrap);margin:0 auto;padding:1.1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.83rem;color:#7c8894}
.foot-bar code{font-family:var(--mono);background:rgba(255,255,255,.06);color:#9fb4ad;padding:.2em .55em;border-radius:5px;font-size:.9em}
/* services flow diagram */
.flow{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:1.3rem 0 .3rem}
@ -155,6 +161,8 @@ code{font-family:var(--mono);font-size:.9em;background:rgba(18,165,148,.09);colo
.hero-in{grid-template-columns:1fr;gap:1.6rem}
.statuscard{max-width:26rem}
.cards{grid-template-columns:1fr 1fr}
.foot-in{grid-template-columns:1fr 1fr 1fr;gap:1.8rem 1.5rem}
.foot-about{grid-column:1 / -1;max-width:none}
}
@media(max-width:560px){
.cards{grid-template-columns:1fr}
@ -162,4 +170,6 @@ code{font-family:var(--mono);font-size:.9em;background:rgba(18,165,148,.09);colo
.news li{flex-direction:column;gap:.2rem}
.news-date{width:auto}
.ctaband-in{flex-direction:column;align-items:flex-start}
.foot-in{grid-template-columns:1fr 1fr}
.foot-bar{justify-content:center;text-align:center}
}

View file

@ -49,21 +49,47 @@
<footer class="site-foot">
<div class="foot-in">
<div class="foot-brand">
<svg class="mark" viewBox="0 0 32 32" aria-hidden="true">
<circle cx="8" cy="16" r="3.1" fill="currentColor"/>
<path d="M14 9.5a9 9 0 0 1 0 13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
<path d="M18.5 5.5a15 15 0 0 1 0 21" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
</svg>
<span>echoIRCd</span>
<div class="foot-about">
<a class="foot-logo" href="/">
<svg class="mark" viewBox="0 0 32 32" aria-hidden="true">
<circle cx="8" cy="16" r="3.1" fill="currentColor"/>
<path d="M14 9.5a9 9 0 0 1 0 13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
<path d="M18.5 5.5a15 15 0 0 1 0 21" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
</svg>
<span>echoIRCd</span>
</a>
<p>Modern IRC, written from scratch in Rust.</p>
<p class="foot-net"><code>irc.echoircd.org</code> · +6697 TLS</p>
</div>
<p class="foot-tag">A native-Rust IRC daemon, with <a href="/services">echo services</a> linked over S2S. No forks, no C, no <code>unsafe</code>.</p>
<nav class="foot-links">
<a href="https://git.devtronic.pro/echo/echoIRCd">echoIRCd</a>
<a href="https://git.devtronic.pro/echo/echo">services</a>
<a href="https://git.devtronic.pro/echo/website">website</a>
<a href="https://orbit.devtronic.pro">web client</a>
<nav class="foot-col">
<h4>Project</h4>
<a href="/features">Features</a>
<a href="/services">Services</a>
<a href="/connect">Chat with us</a>
<a href="/docs/changelog">Changelog</a>
</nav>
<nav class="foot-col">
<h4>Documentation</h4>
<a href="/docs/installation">Installation</a>
<a href="/docs/configuration">Configuration</a>
<a href="/docs/commands">Commands</a>
<a href="/docs/ircv3">IRCv3</a>
</nav>
<nav class="foot-col">
<h4>Source</h4>
<a href="https://git.devtronic.pro/echo/echoIRCd">echoIRCd</a>
<a href="https://git.devtronic.pro/echo/echo">echo services</a>
<a href="https://git.devtronic.pro/echo/website">Website</a>
<a href="https://orbit.devtronic.pro">Web client</a>
</nav>
</div>
<div class="foot-bar">
<span>&copy; 2026 echoIRCd</span>
<code>#![forbid(unsafe_code)]</code>
</div>
</footer>
<script>function toggleTheme(){var d=document.documentElement,n=d.getAttribute('data-theme')==='dark'?'light':'dark';d.setAttribute('data-theme',n);try{localStorage.setItem('theme',n);}catch(e){}}</script>