Skip to content

Commit 74eb026

Browse files
LeftiumLeftium
committed
feat(demo): add consistent multi-column footer to all pages
1 parent aa36016 commit 74eb026

4 files changed

Lines changed: 170 additions & 8 deletions

File tree

‎demo/extended.html‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,24 @@
77
<link rel="stylesheet" href="../dist/nimble.css">
88
<style>
99
/* Demo-only styles — not part of nimble.css */
10+
11+
/* Site footer */
12+
body > footer {
13+
grid-column: 1 / -1;
14+
margin-top: 2rem;
15+
margin-bottom: calc(-1 * var(--nc-spacing));
16+
padding: 1.5rem;
17+
border-top: 1px solid var(--nc-border);
18+
background-color: var(--nc-surface-2);
19+
}
20+
@media (min-width: 48rem) {
21+
body > footer { grid-column: 2 / 5; }
22+
}
23+
body > footer ul { list-style: none; padding-left: 0; }
24+
body > footer a { color: color-mix(in oklch, var(--nc-text), transparent 40%); text-decoration: none; }
25+
body > footer a:hover { text-decoration: underline; }
26+
body > footer a > svg { margin-left: -20px; }
27+
1028
.demo-swatch {
1129
padding: 1.5rem;
1230
border-radius: var(--nc-radius);
@@ -289,7 +307,32 @@ <h2>Typography</h2>
289307
</main>
290308

291309
<footer>
292-
<p><small>nimble.css — Extended Demo. <a href="https://github.com/leftium/nimble.css">Source on GitHub</a>.</small></p>
310+
<nav class="grid">
311+
<div>
312+
<strong>nimble.css</strong>
313+
<ul>
314+
<li><a href="../">Home</a></li>
315+
<li><a href="./">HTML5 Test Page</a></li>
316+
<li><a href="extended.html">Extended Demo</a></li>
317+
<li><a href="pico.html">Pico-style Demo</a></li>
318+
</ul>
319+
</div>
320+
<div>
321+
<strong>Credits</strong>
322+
<ul>
323+
<li><a href="https://picocss.com/">Pico CSS</a> — aesthetic inspiration</li>
324+
<li><a href="https://open-props.style/">Open Props</a> — design token inspiration</li>
325+
</ul>
326+
</div>
327+
<div>
328+
<strong>About</strong>
329+
<ul>
330+
<li><a href="https://github.com/Leftium/nimble.css"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>Leftium/nimble.css</a></li>
331+
<li><a href="https://leftium.com"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/></svg>Leftium.com</a></li>
332+
<li>MIT License</li>
333+
</ul>
334+
</div>
335+
</nav>
293336
</footer>
294337

295338
<script>

‎demo/index.html‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -506,8 +506,49 @@ <h4><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> elem
506506

507507
</main>
508508
<footer>
509-
<p>nimble.css test page. Based on <a href="https://github.com/cbracco/html5-test-page">html5-test-page</a> by <a href="https://twitter.com/cbracco">@cbracco</a>.</p>
509+
<nav class="grid">
510+
<div>
511+
<strong>nimble.css</strong>
512+
<ul>
513+
<li><a href="../">Home</a></li>
514+
<li><a href="./">HTML5 Test Page</a></li>
515+
<li><a href="extended.html">Extended Demo</a></li>
516+
<li><a href="pico.html">Pico-style Demo</a></li>
517+
</ul>
518+
</div>
519+
<div>
520+
<strong>Credits</strong>
521+
<ul>
522+
<li><a href="https://github.com/cbracco/html5-test-page">html5-test-page</a> by <a href="https://twitter.com/cbracco">@cbracco</a></li>
523+
</ul>
524+
</div>
525+
<div>
526+
<strong>About</strong>
527+
<ul>
528+
<li><a href="https://github.com/Leftium/nimble.css"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>Leftium/nimble.css</a></li>
529+
<li><a href="https://leftium.com"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/></svg>Leftium.com</a></li>
530+
<li>MIT License</li>
531+
</ul>
532+
</div>
533+
</nav>
510534
</footer>
535+
<style>
536+
body > footer {
537+
grid-column: 1 / -1;
538+
margin-top: 2rem;
539+
margin-bottom: calc(-1 * var(--nc-spacing));
540+
padding: 1.5rem;
541+
border-top: 1px solid var(--nc-border);
542+
background-color: var(--nc-surface-2);
543+
}
544+
@media (min-width: 48rem) {
545+
body > footer { grid-column: 2 / 5; }
546+
}
547+
body > footer ul { list-style: none; padding-left: 0; }
548+
body > footer a { color: color-mix(in oklch, var(--nc-text), transparent 40%); text-decoration: none; }
549+
body > footer a:hover { text-decoration: underline; }
550+
body > footer a > svg { margin-left: -20px; }
551+
</style>
511552

512553
</body>
513554
</html>

‎demo/pico.html‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,23 @@
99
<style>
1010
/* Demo-only styles — not part of nimble.css */
1111

12+
/* Site footer */
13+
body > footer {
14+
grid-column: 1 / -1;
15+
margin-top: 2rem;
16+
margin-bottom: calc(-1 * var(--nc-spacing));
17+
padding: 1.5rem;
18+
border-top: 1px solid var(--nc-border);
19+
background-color: var(--nc-surface-2);
20+
}
21+
@media (min-width: 48rem) {
22+
body > footer { grid-column: 2 / 5; }
23+
}
24+
body > footer ul { list-style: none; padding-left: 0; }
25+
body > footer a { color: color-mix(in oklch, var(--nc-text), transparent 40%); text-decoration: none; }
26+
body > footer a:hover { text-decoration: underline; }
27+
body > footer a > svg { margin-left: -20px; }
28+
1229
/* Pico-style hidden fieldset borders */
1330
#preview fieldset,
1431
#form fieldset {
@@ -531,11 +548,32 @@ <h2>Loading</h2>
531548

532549
<!-- Footer -->
533550
<footer>
534-
<small>
535-
Built with <a href="https://github.com/leftium/nimble.css">nimble.css</a> |
536-
Inspired by <a href="https://picocss.com">Pico CSS</a> |
537-
<a href="https://github.com/picocss/examples/blob/master/v2-html/index.html">Original source</a>
538-
</small>
551+
<nav class="grid">
552+
<div>
553+
<strong>nimble.css</strong>
554+
<ul>
555+
<li><a href="../">Home</a></li>
556+
<li><a href="./">HTML5 Test Page</a></li>
557+
<li><a href="extended.html">Extended Demo</a></li>
558+
<li><a href="pico.html">Pico-style Demo</a></li>
559+
</ul>
560+
</div>
561+
<div>
562+
<strong>Credits</strong>
563+
<ul>
564+
<li><a href="https://picocss.com">Pico CSS</a> — inspiration</li>
565+
<li><a href="https://github.com/picocss/examples/blob/master/v2-html/index.html">Original source</a></li>
566+
</ul>
567+
</div>
568+
<div>
569+
<strong>About</strong>
570+
<ul>
571+
<li><a href="https://github.com/Leftium/nimble.css"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>Leftium/nimble.css</a></li>
572+
<li><a href="https://leftium.com"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/></svg>Leftium.com</a></li>
573+
<li>MIT License</li>
574+
</ul>
575+
</div>
576+
</nav>
539577
</footer>
540578
<!-- ./ Footer -->
541579

‎index.html‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,49 @@ <h2>Customization</h2>
8989
</section>
9090
</main>
9191
<footer>
92-
<p><a href="https://github.com/Leftium/nimble.css">GitHub</a> · MIT License</p>
92+
<nav class="grid">
93+
<div>
94+
<strong>nimble.css</strong>
95+
<ul>
96+
<li><a href="./">Home</a></li>
97+
<li><a href="demo/">HTML5 Test Page</a></li>
98+
<li><a href="demo/extended.html">Extended Demo</a></li>
99+
<li><a href="demo/pico.html">Pico-style Demo</a></li>
100+
</ul>
101+
</div>
102+
<div>
103+
<strong>Credits</strong>
104+
<ul>
105+
<li><a href="https://picocss.com/">Pico CSS</a> — aesthetic inspiration</li>
106+
<li><a href="https://open-props.style/">Open Props</a> — design token inspiration</li>
107+
</ul>
108+
</div>
109+
<div>
110+
<strong>About</strong>
111+
<ul>
112+
<li><a href="https://github.com/Leftium/nimble.css"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>Leftium/nimble.css</a></li>
113+
<li><a href="https://leftium.com"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/></svg>Leftium.com</a></li>
114+
<li>MIT License</li>
115+
</ul>
116+
</div>
117+
</nav>
93118
</footer>
94119
<style>
120+
body > footer {
121+
grid-column: 1 / -1;
122+
margin-top: 2rem;
123+
margin-bottom: calc(-1 * var(--nc-spacing));
124+
padding: 1.5rem;
125+
border-top: 1px solid var(--nc-border);
126+
background-color: var(--nc-surface-2);
127+
}
128+
@media (min-width: 48rem) {
129+
body > footer { grid-column: 2 / 5; }
130+
}
131+
body > footer ul { list-style: none; padding-left: 0; }
132+
body > footer a { color: color-mix(in oklch, var(--nc-text), transparent 40%); text-decoration: none; }
133+
body > footer a:hover { text-decoration: underline; }
134+
body > footer a > svg { margin-left: -20px; }
95135
pre { position: relative; }
96136
pre .copy-btn {
97137
position: absolute;

0 commit comments

Comments
 (0)