wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

fix: various fixes

Browse source
This commit is contained in:
Devin Haska 2024-03-01 22:56:33 -08:00
parent 7ec4550b5a
commit 568ece3e95
7 changed files with 69 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/_data/meta.js
View file

@ -6,6 +6,7 @@ module.exports = {
locale: "en_EN",
lang: "en",
author: "Devin Haska",
repoUrl: "https://github.com/wonderfulfrog/wonderfulfrog.com",
social: {
github: "https://github.com/wonderfulfrog",
mastodon: "https://mastodon.social/@wonderfulfrog",

2
src/_includes/macros/date.njk
View file

@ -1,5 +1,5 @@
{% macro format(dateString) %}
<time class="[ date ] [ flex items-center gap-0.5 text-fadeText ]" datetime="{{ date }}">
<span class="[ text-shadow line-height-s ]">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
<span class="[ text-primary line-height-s ]">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
</time>
{% endmacro %}

15
src/_includes/partials/footer.html
View file

@ -1,7 +1,7 @@
<footer class="[ bg-surface mt-1.5 py-1.5 ]">
<div class="[ wrapper flow ]">
<div class="[ repel ]">
<p>&copy; {{ meta.author }} 2018-2024.</p>
<p>&copy; {{ meta.author }} 2018 - 2024.</p>
<nav>
<ul class="[ cluster p-0 m-0 ]" role="list">
{% for link in navigation.bottom %}
@ -12,17 +12,22 @@
</ul>
</nav>
</div>
<div class="[ repel ]">
<nav class="[ flow-space-0.5 ]">
<ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
<ul class="[ menu ] [ cluster p-0 m-0 gap-0.5 ]" role="list">
<li>
<span class="[ visually-hidden ]">RSS</span>
<a href="/rss.xml" target="_blank" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
<a href="/rss.xml"
class="[ button ]"
target="_blank"
aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
</li>
{% for key, url in meta.social %}
{% set alt = key | capitalize %}
<li>
<span class="[ visually-hidden ]">{{ alt }}</span>
<a href="{{ url }}"
class="[ button ]"
target="_blank"
rel="me external noreferrer noopener"
aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
@ -30,5 +35,9 @@
{% endfor %}
</ul>
</nav>
<a href="{{ meta.repoUrl }}"
target="_blank"
rel="me external noreferrer noopener">Source</a>
</div>
</div>
</footer>

2
src/_includes/partials/menu.html
View file

@ -1,7 +1,7 @@
<ul class="[ menu ] [ list-none cluster p-0 m-0 ]">
{% for item in navigation.top %}
<li>
<a class="[ menu-button ]" href="{{ item.url }}">{{ item.text }}</a>
<a class="[ button ]" href="{{ item.url }}">{{ item.text }}</a>
</li>
{% endfor %}
</ul>

35
src/css/blocks/button.css Normal file
View file

@ -0,0 +1,35 @@
.button {
display: flex;
align-items: center;
justify-content: center;
line-height: 1rem;
background-color: var(--color-white);
color: var(--color-shadow);
box-shadow:
1px 1px 0px var(--color-shadow),
2px 2px 0 var(--color-shadow);
padding-block: var(--spacing-0\.25);
padding-inline: var(--spacing-0\.5);
border-radius: var(--spacing-0\.25);
border: 1px solid var(--color-shadow);
text-decoration: none;
font-size: 0.8rem;
transition:
box-shadow var(--transition-duration),
transform var(--transition-duration),
background-color var(--transition-duration),
color var(--transition-duration);
}
.button:hover {
background-color: color-mix(
in srgb,
var(--color-white) 90%,
var(--color-primary)
);
}
.button:active {
box-shadow: 0 0 0 var(--color-shadow);
transform: translate(2px, 2px);
}

6
src/css/blocks/menu.css Normal file
View file

@ -0,0 +1,6 @@
.menu > li {
filter: drop-shadow(1px 0 0 var(--color-white))
drop-shadow(-1px 0 0 var(--color-white))
drop-shadow(0 -1px 0 var(--color-white))
drop-shadow(0 1px 0 var(--color-white));
}

41
src/css/blocks/site-header.css
View file

@ -16,44 +16,3 @@
left: 0;
right: 0;
}
.menu > li {
filter: drop-shadow(1px 0 0 var(--color-white))
drop-shadow(-1px 0 0 var(--color-white))
drop-shadow(0 -1px 0 var(--color-white))
drop-shadow(0 1px 0 var(--color-white));
}
.menu-button {
display: block;
line-height: 1rem;
background-color: var(--color-white);
color: var(--color-shadow);
box-shadow:
1px 1px 0px var(--color-shadow),
2px 2px 0 var(--color-shadow);
padding-block: var(--spacing-0\.25);
padding-inline: var(--spacing-0\.5);
border-radius: var(--spacing-0\.25);
border: 1px solid var(--color-shadow);
text-decoration: none;
font-size: 0.8rem;
transition:
box-shadow var(--transition-duration),
transform var(--transition-duration),
background-color var(--transition-duration),
color var(--transition-duration);
}
.menu-button:hover {
background-color: color-mix(
in srgb,
var(--color-white) 90%,
var(--color-primary)
);
}
.menu-button:active {
box-shadow: 0 0 0 var(--color-shadow);
transform: translate(2px, 2px);
}