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} font-family:var(--mono);font-size:.88rem;line-height:1.7;white-space:pre;margin:.5rem 0}
/* footer (dark in both themes) */ /* footer (dark in both themes) */
.site-foot{background:#0f1a22;color:#aeb8c0;margin-top:1rem} .site-foot{background:#0f1a22;color:#aeb8c0;margin-top:3rem}
.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-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-brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700} .foot-about{max-width:22rem}
.foot-brand .mark{width:22px;height:22px;color:var(--teal)} .foot-logo{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:700;font-size:1.05rem}
.foot-tag{margin:0;color:#8994a0;font-size:.9rem} .foot-logo .mark{width:22px;height:22px;color:var(--teal)}
.foot-tag code{background:rgba(255,255,255,.08);color:#cfe3dd} .foot-logo:hover{text-decoration:none}
.foot-links{margin-left:auto;display:flex;gap:1.2rem;flex-wrap:wrap} .foot-about p{margin:.85rem 0 0;color:#8994a0;font-size:.9rem;line-height:1.6}
.foot-links a{color:#aeb8c0;font-size:.9rem} .foot-net{font-family:var(--mono)}
.foot-links a:hover{color:#fff} .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 */ /* services flow diagram */
.flow{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:1.3rem 0 .3rem} .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} .hero-in{grid-template-columns:1fr;gap:1.6rem}
.statuscard{max-width:26rem} .statuscard{max-width:26rem}
.cards{grid-template-columns:1fr 1fr} .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){ @media(max-width:560px){
.cards{grid-template-columns:1fr} .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 li{flex-direction:column;gap:.2rem}
.news-date{width:auto} .news-date{width:auto}
.ctaband-in{flex-direction:column;align-items:flex-start} .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"> <footer class="site-foot">
<div class="foot-in"> <div class="foot-in">
<div class="foot-brand"> <div class="foot-about">
<svg class="mark" viewBox="0 0 32 32" aria-hidden="true"> <a class="foot-logo" href="/">
<circle cx="8" cy="16" r="3.1" fill="currentColor"/> <svg class="mark" viewBox="0 0 32 32" aria-hidden="true">
<path d="M14 9.5a9 9 0 0 1 0 13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/> <circle cx="8" cy="16" r="3.1" fill="currentColor"/>
<path d="M18.5 5.5a15 15 0 0 1 0 21" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/> <path d="M14 9.5a9 9 0 0 1 0 13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
</svg> <path d="M18.5 5.5a15 15 0 0 1 0 21" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>
<span>echoIRCd</span> </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> </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"> <nav class="foot-col">
<a href="https://git.devtronic.pro/echo/echoIRCd">echoIRCd</a> <h4>Project</h4>
<a href="https://git.devtronic.pro/echo/echo">services</a> <a href="/features">Features</a>
<a href="https://git.devtronic.pro/echo/website">website</a> <a href="/services">Services</a>
<a href="https://orbit.devtronic.pro">web client</a> <a href="/connect">Chat with us</a>
<a href="/docs/changelog">Changelog</a>
</nav> </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> </div>
</footer> </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> <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>