Skip to content

Commit a05e62b

Browse files
Daniele-rolliDaniele-rolli
committed
🎨 UI improvements
1 parent fa2368e commit a05e62b

File tree

2 files changed

+71
-76
lines changed

2 files changed

+71
-76
lines changed

‎_includes/nav.html‎

Lines changed: 45 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,79 +4,62 @@
44
<div class="relative flex h-16 items-center justify-between">
55
<div class="flex justify-center sm:items-stretch sm:justify-start">
66
<a href="{{ site.baseurl }}/" class="flex shrink-0 items-center">
7-
<img
8-
class="h-8 w-auto"
9-
src="{{ site.baseurl }}/assets/img/logo.png"
10-
/>
7+
<img class="h-8 w-auto" src="{{ site.baseurl }}/assets/img/logo.png" />
118
<p class="ml-4 dark:text-gray-100 font-bold">Beaver Blog</p>
129
</a>
1310
<div class="hidden sm:ml-6 sm:block">
1411
<div class="flex space-x-4">
15-
<a
16-
href="https://bsky.app/profile/beavernotes.com"
17-
class="rounded-md dark:text-neutral-100 dark:text-neutral-100 hover:bg-blue-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
18-
aria-current="page"
19-
>
12+
<a href="https://bsky.app/profile/beavernotes.com" class="rounded-md dark:text-neutral-100 dark:text-neutral-100 hover:bg-blue-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
2013
<i class="fa-brands fa-bluesky hover:text-blue-400 fa-xl"></i>
2114
</a>
22-
<a
23-
href="https://mastodon.social/@Beavernotes"
24-
class="rounded-md dark:text-neutral-100 hover:bg-[#6364FF] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
25-
aria-current="page"
26-
>
15+
<a href="https://mastodon.social/@Beavernotes" class="rounded-md dark:text-neutral-100 hover:bg-[#6364FF] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
2716
<i class="fa-brands fa-mastodon hover:text-[#6364FF] fa-xl"></i>
2817
</a>
29-
<a
30-
href="https://www.reddit.com/r/BeaverNotes"
31-
class="rounded-md dark:text-neutral-100 hover:bg-[#FF4500] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
32-
aria-current="page"
33-
>
18+
<a href="https://www.reddit.com/r/BeaverNotes" class="rounded-md dark:text-neutral-100 hover:bg-[#FF4500] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
3419
<i class="fa-brands fa-reddit hover:text-[#FF4500] fa-xl"></i>
3520
</a>
36-
<a
37-
href="https://beaver-notes.github.io/Beaver-Docs"
38-
class="rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
39-
aria-current="page"
40-
>
21+
<a href="https://beaver-notes.github.io/Beaver-Docs" class="rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
4122
<i class="fa-solid fa-book hover:text-amber-400 fa-xl"></i>
4223
</a>
43-
<a
44-
href="{{site.url}}/feed.xml"
45-
class="rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white"
46-
aria-current="page"
47-
>
24+
<a href="{{site.url}}/feed.xml" class="rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
4825
<i class="fa-solid fa-rss hover:text-amber-400 fa-xl"></i>
4926
</a>
5027
</div>
5128
</div>
5229
</div>
5330
<!-- Search Icon Button -->
54-
<button
55-
onclick="openSearch()"
56-
class="text-neutral-100 p-2 rounded-lg hover:bg-amber-400 hover:bg-opacity-10 flex items-center justify-center ml-auto"
57-
>
58-
<i
59-
class="fa-solid fa-magnifying-glass text-gray-600 dark:text-neutral-100 hover:text-amber-400"
60-
></i>
31+
<button onclick="openSearch()" class="text-neutral-100 p-2 rounded-lg hover:bg-amber-400 hover:bg-opacity-10 flex items-center justify-center ml-auto">
32+
<i class="fa-solid fa-magnifying-glass text-gray-600 dark:text-neutral-100 hover:text-amber-400"></i>
6133
</button>
6234

6335
<!-- Dark Mode Toggle Button -->
64-
<button
65-
id="dark-mode-toggle"
66-
class="text-neutral-100 p-2 rounded-lg hover:bg-amber-400 hover:bg-opacity-10 flex items-center justify-center ml-4"
67-
onclick="toggleDarkMode()"
68-
>
69-
<i
70-
id="dark-mode-icon"
71-
class="fa-solid fa-moon text-gray-600 dark:text-neutral-100"
72-
></i>
36+
<button id="dark-mode-toggle" class="text-neutral-100 p-2 rounded-lg hover:bg-amber-400 hover:bg-opacity-10 flex items-center justify-center ml-4" onclick="toggleDarkMode()">
37+
<i id="dark-mode-icon" class="fa-solid fa-moon text-gray-600 dark:text-neutral-100"></i>
7338
</button>
7439
</div>
7540

76-
<ul
77-
id="results-container"
78-
class="fixed right-0 z-40 w-80 bg-neutral-100 dark:bg-neutral-700 dark:text-neutral-100 rounded-xl overflow-auto"
79-
>
41+
<!-- Share Buttons Container -->
42+
<div class="sm:hidden">
43+
<div class="flex justify-center">
44+
<a href="https://bsky.app/profile/beavernotes.com" class="rounded-md dark:text-neutral-100 dark:text-neutral-100 hover:bg-blue-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
45+
<i class="fa-brands fa-bluesky hover:text-blue-400 fa-xl"></i>
46+
</a>
47+
<a href="https://mastodon.social/@Beavernotes" class="rounded-md dark:text-neutral-100 hover:bg-[#6364FF] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
48+
<i class="fa-brands fa-mastodon hover:text-[#6364FF] fa-xl"></i>
49+
</a>
50+
<a href="https://www.reddit.com/r/BeaverNotes" class="rounded-md dark:text-neutral-100 hover:bg-[#FF4500] hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
51+
<i class="fa-brands fa-reddit hover:text-[#FF4500] fa-xl"></i>
52+
</a>
53+
<a href="https://beaver-notes.github.io/Beaver-Docs" class="rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
54+
<i class="fa-solid fa-book hover:text-amber-400 fa-xl"></i>
55+
</a>
56+
<a href="{{site.url}}/feed.xml" class="rounded-md dark:text-neutral-100 hover:bg-amber-400 hover:bg-opacity-20 p-2 text-sm font-medium dark:text-white" aria-current="page">
57+
<i class="fa-solid fa-rss hover:text-amber-400 fa-xl"></i>
58+
</a>
59+
</div>
60+
</div>
61+
62+
<ul id="results-container" class="fixed right-0 z-40 w-80 bg-neutral-100 dark:bg-neutral-700 dark:text-neutral-100 rounded-xl overflow-auto">
8063
<li></li>
8164
</ul>
8265
</div>
@@ -104,9 +87,7 @@
10487
const html = document.documentElement;
10588
const icon = document.getElementById("dark-mode-icon");
10689
const savedTheme = localStorage.getItem("theme");
107-
const systemPrefersDark = window.matchMedia(
108-
"(prefers-color-scheme: dark)"
109-
).matches;
90+
const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
11091

11192
if (savedTheme) {
11293
// Apply saved theme
@@ -133,21 +114,19 @@
133114
}
134115

135116
// Update theme dynamically if the system preference changes
136-
window
137-
.matchMedia("(prefers-color-scheme: dark)")
138-
.addEventListener("change", (e) => {
139-
if (!localStorage.getItem("theme")) {
140-
if (e.matches) {
141-
html.classList.add("dark");
142-
icon.classList.add("fa-sun");
143-
icon.classList.remove("fa-moon");
144-
} else {
145-
html.classList.remove("dark");
146-
icon.classList.add("fa-moon");
147-
icon.classList.remove("fa-sun");
148-
}
117+
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
118+
if (!localStorage.getItem("theme")) {
119+
if (e.matches) {
120+
html.classList.add("dark");
121+
icon.classList.add("fa-sun");
122+
icon.classList.remove("fa-moon");
123+
} else {
124+
html.classList.remove("dark");
125+
icon.classList.add("fa-moon");
126+
icon.classList.remove("fa-sun");
149127
}
150-
});
128+
}
129+
});
151130
});
152131

153132
function openSearch() {

‎_includes/search.html‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
role="dialog"
77
aria-labelledby="search-dialog-title"
88
aria-hidden="true"
9-
class="fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24"
9+
class="fixed inset-0 mx-4 z-50 flex items-start justify-center pt-16 sm:pt-24"
1010
>
1111
<div
1212
class="bg-white dark:bg-neutral-700 w-full max-w-xl rounded-lg shadow-xl relative"
@@ -22,11 +22,13 @@
2222
placeholder="Type to search..."
2323
aria-label="Search input"
2424
/>
25-
26-
<!-- Search Icon -->
27-
<i
28-
class="fa-solid fa-magnifying-glass p-2 text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg cursor-pointer"
29-
></i>
25+
26+
<!-- Close Button (visible on all screens) -->
27+
<button onclick="closeSearch()">
28+
<i
29+
class="fa-solid fa-close p-2 text-neutral-600 dark:text-neutral-100 hover:text-amber-400 text-lg cursor-pointer"
30+
></i>
31+
</button>
3032
</div>
3133
<ul id="results-container" class="pb-2"></ul>
3234
</div>
@@ -36,35 +38,49 @@
3638
<script>
3739
function closeSearch() {
3840
const searchContainer = document.getElementById("search-container");
41+
const searchIcon = document.getElementById("search-icon");
42+
3943
if (searchContainer) {
4044
searchContainer.classList.add("hidden");
4145
} else {
4246
console.error("Search container not found");
4347
}
48+
49+
if (searchIcon) {
50+
searchIcon.classList.remove("hidden"); // Show search icon again
51+
}
4452
}
4553

46-
// Initialize SimpleJekyllSearch
4754
document.addEventListener("DOMContentLoaded", () => {
4855
const searchInput = document.getElementById("search-input");
4956
const resultsContainer = document.getElementById("results-container");
57+
const searchContainer = document.getElementById("search-container");
58+
const searchIcon = document.getElementById("search-icon");
5059

5160
// Add ESC key listener
5261
document.addEventListener("keydown", (e) => {
5362
if (e.key === "Escape") {
54-
e.preventDefault(); // Prevent default to avoid bubbling
63+
e.preventDefault();
5564
closeSearch();
5665
}
5766
});
5867

59-
// Inject site.baseurl from Jekyll into the JSON path
68+
// Hide search icon when search is open
69+
if (searchIcon) {
70+
searchIcon.addEventListener("click", () => {
71+
searchContainer.classList.remove("hidden");
72+
searchIcon.classList.add("hidden"); // Hide search icon
73+
});
74+
}
75+
76+
// Initialize SimpleJekyllSearch
6077
const jsonPath = "{{ site.baseurl }}/assets/search.json";
6178

6279
if (!searchInput || !resultsContainer) {
6380
console.error("Search input or results container not found");
6481
return;
6582
}
6683

67-
// Initialize the search with SimpleJekyllSearch
6884
SimpleJekyllSearch({
6985
searchInput: searchInput,
7086
resultsContainer: resultsContainer,

0 commit comments

Comments
 (0)