feat: footer refactor
This commit is contained in:
Devin Haska
parent
f339227c3d
commit
d4ffca4b5b
13 changed files with 94 additions and 4834 deletions
|
|
@ -18,7 +18,6 @@ module.exports = {
|
|||
feed: "",
|
||||
},
|
||||
social: {
|
||||
rss: "",
|
||||
github: "",
|
||||
mastodon: "",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,21 +1,8 @@
|
|||
{% set socialLinks = meta.social | entries %}
|
||||
<footer class="[ footer ]">
|
||||
<div class="[ wrapper ] [ flex justify-between ]">
|
||||
<div class="[ flow ]">
|
||||
<p>© {{ meta.author }} 2018-2024.</p>
|
||||
<nav>
|
||||
<ul class="[ footer-links ] [ flex list-none ]">
|
||||
{% for link in socialLinks %}
|
||||
{% set key = link | first %}
|
||||
{% set url = link | last %}
|
||||
<li>
|
||||
<a href="{{ url }}" target="_blank" rel="external noreferrer noopener">{{ key }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="[ footer-grid footer-gap wrapper ]">
|
||||
<p>© {{ meta.author }} 2018-2024.</p>
|
||||
<nav class="[ footer-pages ]">
|
||||
<ul class="[ footer-links ] [ flex list-none ]">
|
||||
{% for link in navigation.bottom %}
|
||||
<li>
|
||||
|
|
@ -24,5 +11,22 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="[ footer-socials ]">
|
||||
<ul class="[ footer-links footer-gap ] [ flex list-none items-center ]">
|
||||
<li>
|
||||
<span class="visually-hidden">RSS</span>
|
||||
<a href="#" target="_blank">{% include "svgs/rss.svg" %}</a>
|
||||
</li>
|
||||
{% for link in socialLinks %}
|
||||
{% set key = link | first %}
|
||||
{% set url = link | last %}
|
||||
{% set alt = key | capitalize %}
|
||||
<li>
|
||||
<span class="visually-hidden">{{ alt }}</span>
|
||||
<a href="{{ url }}" target="_blank" rel="external noreferrer noopener">{% include "svgs/social-" + key + ".svg" %}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
5
src/_includes/svgs/rss.svg
Normal file
5
src/_includes/svgs/rss.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 1H1V3H3C8.52285 3 13 7.47715 13 13V15H15V13C15 6.37258 9.62742 1 3 1Z" fill="currentColor"/>
|
||||
<path d="M3 6H1V8H3C5.76142 8 8 10.2386 8 13V15H10V13C10 9.13401 6.86599 6 3 6Z" fill="currentColor"/>
|
||||
<path d="M3 15C4.10457 15 5 14.1046 5 13C5 11.8954 4.10457 11 3 11C1.89543 11 1 11.8954 1 13C1 14.1046 1.89543 15 3 15Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 454 B |
2
src/_includes/svgs/social-github.svg
Normal file
2
src/_includes/svgs/social-github.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<svg width="16" height="16" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/></svg>
|
||||
|
||||
|
After Width: | Height: | Size: 990 B |
2
src/_includes/svgs/social-mastodon.svg
Normal file
2
src/_includes/svgs/social-mastodon.svg
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<svg fill="currentColor" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="M21.327 8.566c0-4.339-2.843-5.61-2.843-5.61-1.433-.658-3.894-.935-6.451-.956h-.063c-2.557.021-5.016.298-6.45.956 0 0-2.843 1.272-2.843 5.61 0 .993-.019 2.181.012 3.441.103 4.243.778 8.425 4.701 9.463 1.809.479 3.362.579 4.612.51 2.268-.126 3.541-.809 3.541-.809l-.075-1.646s-1.621.511-3.441.449c-1.804-.062-3.707-.194-3.999-2.409a4.523 4.523 0 0 1-.04-.621s1.77.433 4.014.536c1.372.063 2.658-.08 3.965-.236 2.506-.299 4.688-1.843 4.962-3.254.434-2.223.398-5.424.398-5.424zm-3.353 5.59h-2.081V9.057c0-1.075-.452-1.62-1.357-1.62-1 0-1.501.647-1.501 1.927v2.791h-2.069V9.364c0-1.28-.501-1.927-1.502-1.927-.905 0-1.357.546-1.357 1.62v5.099H6.026V8.903c0-1.074.273-1.927.823-2.558.566-.631 1.307-.955 2.228-.955 1.065 0 1.872.409 2.405 1.228l.518.869.519-.869c.533-.819 1.34-1.228 2.405-1.228.92 0 1.662.324 2.228.955.549.631.822 1.484.822 2.558v5.253z"/></svg>
|
||||
|
||||
|
After Width: | Height: | Size: 991 B |
|
|
@ -1,11 +0,0 @@
|
|||
.footer {
|
||||
background-color: var(--color-bg-soft);
|
||||
margin-block-start: 1.5rem;
|
||||
padding-block: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
38
src/assets/css/blocks/site-footer.css
Normal file
38
src/assets/css/blocks/site-footer.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.footer {
|
||||
background-color: var(--color-bg-soft);
|
||||
margin-block-start: 1.5rem;
|
||||
padding-block: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-gap {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer-socials {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.footer-pages .footer-links {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (min-width: 32rem) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.footer-pages .footer-links {
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,5 +11,5 @@
|
|||
|
||||
.navbar .links {
|
||||
list-style-type: none;
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,11 +73,11 @@ ul li::marker {
|
|||
}
|
||||
|
||||
ol li::marker {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
color: var(--color-text-soft);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-inline-start: 2px solid var(--color-text-soft);
|
||||
border-inline-start: 2px solid var(--color-bg-faded);
|
||||
margin-inline-start: 0;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
|
@ -105,6 +105,11 @@ img[width][height] {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-style: solid;
|
||||
color: var(--color-bg-faded);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
--color-dark: var(--color-neutral-950);
|
||||
|
||||
--color-bg: var(--color-light);
|
||||
--color-bg-faded: var(--color-neutral-300);
|
||||
--color-bg-soft: var(--color-neutral-100);
|
||||
--color-text: var(--color-dark);
|
||||
--color-text-soft: var(--color-neutral-600);
|
||||
|
|
@ -20,7 +21,10 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-bg: var(--color-dark);
|
||||
--color-bg-soft: var(--color-neutral-900);
|
||||
--color-bg-faded: var(--color-neutral-800);
|
||||
--color-text: var(--color-light);
|
||||
--color-text-soft: var(--color-neutral-500);
|
||||
|
||||
--color-primary: var(--color-aqua-300);
|
||||
--color-primary-highlight: var(--color-aqua-200);
|
||||
|
|
|
|||
15
src/assets/css/utils/visually-hidden.css
Normal file
15
src/assets/css/utils/visually-hidden.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/*
|
||||
VISUALLY HIDDEN UTILITY
|
||||
Info: https://piccalil.li/quick-tip/visually-hidden/
|
||||
*/
|
||||
.visually-hidden {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 368 B |
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 286 KiB |
Loading…
Add table
Add a link
Reference in a new issue