joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve effects, start adding search

Browse source
This commit is contained in:
Joshua Seigler 2025-06-11 16:50:47 -04:00
parent e2fb545d0b
commit 36554b5b7b
8 changed files with 184 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
site/_includes/-header.njk
View file

@ -49,8 +49,10 @@
<a class="{{ 'nav-active' if '/recipes' in page.url }}" href="{{ "/recipes/" | url }}">/recipes</a>
<a class="{{ 'nav-active' if '/music' in page.url }}" href="{{ "/music/" | url }}">/music</a>
<a class="{{ 'nav-active' if '/books' in page.url }}" href="{{ "/books/" | url }}">/books</a>
<button id="search" type="button"><svg style="height:0.75em;margin-right:0.5ch" viewBox="0 0 12 13"><g stroke-width="1.5" stroke="currentcolor" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>search</button>
</div>
</nav>
{% include "-search.njk" %}
<h1>{{ tag | capitalize if tag else title }}</h1>
<div class="header-meta">
{%- if author -%}

4
site/_includes/-search.njk Normal file
View file

@ -0,0 +1,4 @@
<div class="searchCard">
<div id="searchbox"></div>
<script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false });"></script>
</div>

2
site/_includes/base.njk
View file

@ -28,7 +28,7 @@ title: Joshua's Homepage
</head>
<body data-font="english" data-path="{{ page.url }}">
{% include "-header.njk" %}
<main>
<main data-pagefind-body>
{{ content | safe }}
</main>
{% include "-footer.njk" %}

23
site/_includes/css/site.css
View file

@ -113,17 +113,24 @@ body {
a {
color: inherit;
}
a[href] {
a[href], button#search {
appearance: none;
text-decoration-line: underline;
box-decoration-break: clone;
padding: 0.1em;
margin: -0.1em;
position: relative;
}
a[href]:hover,
a[href]:focus-visible,
nav label:hover,
nav label:focus-visible,
button#search {
background: transparent;
border: none;
color: inherit;
font-family: inherit;
font-size: inherit;
margin-left: auto;
}
:is(a, nav label, button#search):hover,
:is(a, nav label, button#search):focus-visible,
nav label:has(input:focus-visible),
nav label:has(input:checked) {
outline: none;
@ -139,8 +146,7 @@ nav label:has(input:checked) {
0 0 1rem var(--c-accent);
}
}
a[href]:focus-visible,
nav label:focus-visible,
:is(a[href], button, button#search, nav label):focus-visible,
nav label:has(input:focus-visible) {
z-index: 1;
outline: 2px solid var(--c-text-dark);
@ -396,7 +402,8 @@ footer section {
position: relative;
cursor: pointer;
text-decoration-line: underline;
display: inline-block;
display: inline-flex;
align-items: center;
border-radius: 0;
padding: 0.1rem 0.25rem;
margin: 0;