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

feat: add new button style, update nav

Browse source
This commit is contained in:
Devin Haska 2024-11-11 17:05:09 -08:00
parent 4b58c53060
commit 72b80f7e8f
14 changed files with 132 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/_data/navigation.js
View file

@ -3,14 +3,22 @@ export default {
{
text: "About",
url: "/about",
icon: "circle-info",
},
{
text: "Posts",
url: "/posts",
icon: "list",
},
{
text: "Catalogue",
url: "/catalogue",
text: "Games",
url: "/catalogue/games",
icon: "game-controller",
},
{
text: "Books",
url: "/catalogue/books",
icon: "book",
},
],
bottom: [

6
src/_includes/layouts/post.html
View file

@ -10,8 +10,10 @@ layout: "layouts/base"
<p class="[ text-skew text-fadeText flow-space-0.25 ]">{{ excerpt }}</p>
<ul class="[ categories ] [ cluster list-none p-0 flow-space-2 line-height-m ]">
{% for tag in tags | filter(["post"]) %}
<li class="[ flex gap-0.25 ]">
<a href="/tags/{{ tag | slugify }}">{{ tag }}</a>
<li>
<a class="[ button ]" href="/tags/{{ tag | slugify }}">
{% include "svgs/frame.svg" %}
{{ tag }}</a>
</li>
{% endfor %}
</ul>

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

@ -14,17 +14,19 @@
</div>
<div class="[ repel ]">
<nav class="[ flow-space-0.5 ]">
<ul class="[ menu ] [ cluster p-0 m-0 gap-0.5 ]" role="list">
<ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
<li>
<span class="[ visually-hidden ]">Feeds</span>
<a href="/feeds" class="[ button ]" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
<a href="/feeds"
class="[ button button--alt ]"
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 ]"
class="[ button button--alt ]"
target="_blank"
rel="me external noreferrer noopener"
aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>

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

@ -1,7 +1,10 @@
<ul class="[ menu ] [ list-none cluster p-0 m-0 ]">
{% for item in navigation.top %}
<li>
<a class="[ button ]" href="{{ item.url }}">{{ item.text }}</a>
<a class="[ button button--alt font-size-s line-height-m ]"
href="{{ item.url }}">
{% include "svgs/" + item.icon + ".svg" %}
<span class="[ visually-hidden ]">{{ item.text }}</span></a>
</li>
{% endfor %}
</ul>

3
src/_includes/svgs/book.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 0C3.34315 0 2 1.34315 2 3V13C2 14.6569 3.34315 16 5 16H14V14H4V12H14V0H5Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 212 B

3
src/_includes/svgs/circle-info.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM7 8H6V6H9V11H10V13H7V8ZM9 5V3H7V5H9Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 321 B

3
src/_includes/svgs/frame.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 15V12H10V15H12V12H15V10H12V6H15V4H12V1H10V4H6V1H4V4H1V6H4V10H1V12H4V15H6ZM10 10H6V6H10V10Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 269 B

3
src/_includes/svgs/game-controller.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13L3 14L6 11H10L13 14L16 13L15.248 4.7284C15.1076 3.18316 13.812 2 12.2604 2H3.73964C2.18803 2 0.89244 3.18316 0.751964 4.72839L0 13ZM12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6ZM12 8C12 8.55228 11.5523 9 11 9C10.4477 9 10 8.55228 10 8C10 7.44772 10.4477 7 11 7C11.5523 7 12 7.44772 12 8ZM5 8C6.10457 8 7 7.10457 7 6C7 4.89543 6.10457 4 5 4C3.89543 4 3 4.89543 3 6C3 7.10457 3.89543 8 5 8Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 633 B

10
src/_includes/svgs/list.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 1H1V3H3V1Z" fill="currentColor"/>
<path d="M3 5H1V7H3V5Z" fill="currentColor"/>
<path d="M1 9H3V11H1V9Z" fill="currentColor"/>
<path d="M3 13H1V15H3V13Z" fill="currentColor"/>
<path d="M15 1H5V3H15V1Z" fill="currentColor"/>
<path d="M15 5H5V7H15V5Z" fill="currentColor"/>
<path d="M5 9H15V11H5V9Z" fill="currentColor"/>
<path d="M15 13H5V15H15V13Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 486 B

4
src/_includes/svgs/user.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 7C9.65685 7 11 5.65685 11 4C11 2.34315 9.65685 1 8 1C6.34315 1 5 2.34315 5 4C5 5.65685 6.34315 7 8 7Z" fill="currentColor"/>
<path d="M14 12C14 10.3431 12.6569 9 11 9H5C3.34315 9 2 10.3431 2 12V15H14V12Z" fill="currentColor"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 342 B

107
src/css/blocks/button.css
View file

@ -1,35 +1,90 @@
.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);
color: var(--color-text);
display: inline-flex;
gap: var(--spacing-0\.5);
padding: var(--spacing-0\.5) var(--spacing-1);
position: relative;
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);
transition: transform 0.3s ease;
z-index: 1;
&::before,
&::after {
border-radius: var(--spacing-0\.5);
position: absolute;
inset: 0;
content: "";
transition:
opacity 0.1s ease,
transform 0.3s var(--transition-bounce);
z-index: -1;
}
&::before {
background-color: var(--color-surface);
}
&::after {
background-color: var(--color-text);
opacity: 0;
}
svg {
color: var(--color-fadeText);
transform: scale(1);
transition: transform 0.3s var(--transition-bounce);
}
}
.button:hover {
background-color: color-mix(
in srgb,
var(--color-white) 90%,
var(--color-primary)
);
@media (hover: hover) {
.button:hover {
&::before,
&::after {
transform: scale(1.05);
}
&::after {
opacity: 1;
}
svg {
color: var(--color-border);
transform: rotateZ(12deg) scale(1.4);
}
}
}
.button:active {
box-shadow: 0 0 0 var(--color-shadow);
transform: translate(2px, 2px);
transform: scale(0.8);
}
.button--alt {
color: var(--color-primary);
&::before {
background-color: var(--color-white);
}
&::after {
background-color: color-mix(
in srgb,
var(--color-white) 90%,
var(--color-primary)
);
}
svg {
color: inherit;
}
}
@media (hover: hover) {
.button--alt:hover {
color: var(--color-shadow);
svg {
color: inherit;
}
}
}

16
src/css/blocks/categories.css
View file

@ -1,16 +0,0 @@
.categories li {
color: var(--color-fadeText);
}
.categories li > a {
text-decoration-color: var(--color-fadeText);
}
.categories li > a:hover {
text-decoration-color: inherit;
}
.categories li::before {
content: "#";
user-select: none;
}

10
src/css/blocks/menu.css
View file

@ -1,10 +0,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 > li:has(a:focus-visible) {
filter: none;
}

2
src/css/global/variables.css
View file

@ -9,4 +9,6 @@
--text-skew: skew(0deg, -1deg);
--triangles: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0" d="M0,0 40,40 80,0z" /></svg>');
--transition-bounce: cubic-bezier(0.47, 2.5, 0.41, 1);
}