Skip to content

Commit c6d46ba

Browse files
robinrendlerobinrendle
committed
polish archives, sidebar, photos. added 11ty images
1 parent 51b5102 commit c6d46ba

25 files changed

+818
-1164
lines changed

‎_data/allPhotos.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎_data/photoNav.js‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎_includes/footer.njk‎

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<style>
22
.content-footer {
33
display: flex;
4-
position: sticky;
4+
position: fixed;
55
bottom: 0;
66
width: 100%;
77
background: white;
@@ -11,21 +11,36 @@
1111
background: var(--neutral-base-normal);
1212
font-size: var(--font-size-3);
1313
14-
min-height: var(--space-chrome);
15-
height: var(--space-chrome);
14+
min-height: var(--size-chrome);
15+
height: var(--size-chrome);
1616
padding-left: var(--space);
1717
padding-right: var(--space);
18+
19+
@media screen and (min-width: 768px) {
20+
.navigator:not(.closed) ~ .file & {
21+
width: calc(100% - var(--size-navigator));
22+
}
23+
}
1824
}
1925
2026
.content-footer-info {
2127
display: flex;
22-
gap: var(--space);
28+
gap: var(--space-1);
2329
list-style: none;
2430
margin: 0;
2531
padding: 0;
32+
font-variant-numeric: tabular-nums;
2633
2734
li {
28-
display: block;
35+
display: flex;
36+
gap: var(--space-half);
37+
align-items: center;
38+
line-height: 1;
39+
font-size: var(--font-size-2);
40+
41+
svg {
42+
fill: var(--neutral-text-normal);
43+
}
2944
}
3045
}
3146
</style>
@@ -35,23 +50,20 @@
3550
{% set commitDate = page.inputPath | gitCommitDate %}
3651
{% if commitDate %}
3752
<li>
38-
<svg height="18" width="18"><use href="#git-commit"></use></svg>
39-
<time datetime="{{ commitDate | htmlDateString }}">{{ commitDate | shortDate }}</time>
53+
<svg height="17" width="17"><use href="#calendar-blank"></use></svg>
54+
<time datetime="{{ commitDate | htmlDateString }}">{{ commitDate | dinkyDate }}</time>
4055
</li>
4156
<li>
42-
<svg height="18" width="18"><use href="#clock"></use></svg>
57+
<svg height="17" width="17"><use href="#clock"></use></svg>
4358
<time datetime="{{ commitDate | htmlDateString }}">{{ commitDate | time }}</time>
4459
</li>
4560
{% else %}
46-
<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | shortDate }}</time></li>
61+
<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | dinkyDate }}</time></li>
4762
<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | time }}</time></li>
4863
{% endif %}
49-
<li>
50-
<a href="https://github.com/robinrendle/robinrendle.com/commit/{{ page.inputPath | gitCommitHash }}" target="_blank" rel="noopener">
51-
<svg height="18" width="18"><use href="#git-commit"></use></svg>
52-
{{ page.inputPath | gitCommitHash }}
53-
</a>
54-
</li>
5564
</ul>
56-
<a class="btn" href="mailto:robin@robinrendle.com">Email</a>
65+
<a class="btn btn-subtle" href="https://github.com/robinrendle/robinrendle.com/commit/{{ page.inputPath | gitCommitHash }}" target="_blank" rel="noopener">
66+
<svg height="18" width="18"><use href="#git-commit"></use></svg>
67+
{{ page.inputPath | gitCommitHash }}
68+
</a>
5769
</footer>

‎_includes/layouts/note.njk‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ layout: layouts/base.njk
33
template: note
44
---
55

6-
{{ content | safe }}
6+
<div class="content-area">
7+
{{ content | safe }}
8+
</div>

‎_includes/layouts/photo.njk‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ layout: layouts/base.njk
33
template: photo
44
---
55

6-
<picture>
7-
{% for format, images in photo.metadata %}
8-
<source type="image/{{ format }}" srcset="{{ images[1].url }}">
9-
{% endfor %}
10-
<img src="{{ photo.metadata.jpeg[1].url }}" alt="{{ title }}">
11-
</picture>
6+
<div class="gallery-item">
7+
<img class="gallery-img" src="{{ photo.src }}" alt="{{ title }}">
8+
</div>

‎_includes/nav.njk‎

Lines changed: 67 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,21 @@
1717
1818
.navigator {
1919
flex-direction: column;
20-
position: relative;
20+
position: fixed;
21+
top: 0;
22+
left: 0;
23+
bottom: 0;
2124
height: 100dvh;
2225
overflow-x: hidden;
2326
overflow-y: scroll;
2427
background: var(--neutral-base-normal);
2528
border-right: 1px solid var(--neutral-border-soft);
2629
font-size: var(--font-size-3);
30+
z-index: 999;
2731
2832
@media screen and (min-width: 768px) {
29-
min-width: 20rem;
30-
width: 20rem;
33+
min-width: var(--size-navigator);
34+
width: var(--size-navigator);
3135
}
3236
}
3337
@@ -46,8 +50,8 @@
4650
border-bottom: 1px solid var(--neutral-border-soft);
4751
font-size: var(--font-size-3);
4852
49-
min-height: var(--space-chrome);
50-
height: var(--space-chrome);
53+
min-height: var(--size-chrome);
54+
height: var(--size-chrome);
5155
padding-left: var(--space);
5256
padding-right: var(--space);
5357
@@ -273,15 +277,16 @@
273277
background: var(--neutral-base-normal);
274278
display: flex;
275279
align-items: center;
276-
gap: var(--space-half);
280+
gap: var(--space);
277281
padding-left: var(--space-half);
278282
279-
min-height: var(--space-chrome);
280-
height: var(--space-chrome);
283+
min-height: var(--size-chrome);
284+
height: var(--size-chrome);
281285
padding-left: var(--space);
282286
padding-right: var(--space);
283287
284288
svg {
289+
margin-left: var(--space-half);
285290
pointer-events: none;
286291
fill: var(--neutral-text-soft);
287292
}
@@ -365,6 +370,48 @@
365370
});
366371
});
367372
373+
// Restore details state from localStorage
374+
function getDetailsKey(details) {
375+
const link = details.querySelector('summary a');
376+
return link ? link.getAttribute('href') : null;
377+
}
378+
379+
function saveDetailsState() {
380+
const state = {};
381+
document.querySelectorAll('.directory details').forEach(details => {
382+
const key = getDetailsKey(details);
383+
if (key) {
384+
state[key] = details.open;
385+
}
386+
});
387+
localStorage.setItem('detailsState', JSON.stringify(state));
388+
}
389+
390+
function restoreDetailsState() {
391+
const savedState = localStorage.getItem('detailsState');
392+
if (!savedState) return;
393+
394+
try {
395+
const state = JSON.parse(savedState);
396+
document.querySelectorAll('.directory details').forEach(details => {
397+
const key = getDetailsKey(details);
398+
if (key && state.hasOwnProperty(key)) {
399+
details.open = state[key];
400+
}
401+
});
402+
} catch (e) {
403+
console.error('Failed to restore details state:', e);
404+
}
405+
}
406+
407+
// Restore state on page load
408+
restoreDetailsState();
409+
410+
// Save state whenever a details element is toggled
411+
document.querySelectorAll('.directory details').forEach(details => {
412+
details.addEventListener('toggle', saveDetailsState);
413+
});
414+
368415
// Toggle details
369416
const toggleButton = document.querySelector('.toggle-details');
370417
if (toggleButton) {
@@ -375,6 +422,9 @@
375422
allDetails.forEach(details => {
376423
details.open = !anyOpen;
377424
});
425+
426+
// Save the new state after toggling all
427+
saveDetailsState();
378428
});
379429
}
380430
@@ -554,12 +604,16 @@
554604
555605
if (query === '') {
556606
// Reset: show all items and restore original details state
607+
directory.classList.remove('searching', 'no-results');
557608
directory.querySelectorAll('a, details, li').forEach(el => {
558609
el.style.display = '';
559610
});
560611
return;
561612
}
562613
614+
// Add searching class
615+
directory.classList.add('searching');
616+
563617
// Open all details when searching
564618
directory.querySelectorAll('details').forEach(details => {
565619
details.open = true;
@@ -594,12 +648,15 @@
594648
}
595649
});
596650
597-
// Show "nah mate, nothin here" if no results
651+
// Add/remove no-results class and show message
598652
if (!hasResults) {
653+
directory.classList.add('no-results');
599654
noResultsMessage = document.createElement('div');
600655
noResultsMessage.textContent = 'nah mate, nothin here';
601656
noResultsMessage.style.padding = '1rem';
602657
directory.appendChild(noResultsMessage);
658+
} else {
659+
directory.classList.remove('no-results');
603660
}
604661
});
605662
}
@@ -690,7 +747,7 @@
690747
<li class="list-item">
691748
<a href="{{ post.url }}" class="{{ page.url | isActive(post.url) }}">
692749
<iconcontainer>
693-
<svg class="icon" height="18" width="18"><use href="#envelope-simple"></use></svg>
750+
<svg class="icon" height="18" width="18"><use href="#note"></use></svg>
694751
<h3>{{ post.data.title }}</h3>
695752
</iconcontainer>
696753
</a>

0 commit comments

Comments
 (0)