the home site for me: also iteration 3 or 4 of my site
chore: remove public
-176
public/android-chrome-192x192.png
public/android-chrome-192x192.png
This is a binary file and will not be displayed.
public/android-chrome-512x512.png
public/android-chrome-512x512.png
This is a binary file and will not be displayed.
public/apple-touch-icon.png
public/apple-touch-icon.png
This is a binary file and will not be displayed.
public/click.ogg
public/click.ogg
This is a binary file and will not be displayed.
-105
public/css/style.css
-105
public/css/style.css
···
1
-
#nav-bar {
2
-
padding: .625rem 0 0 0;
3
-
display: flex;
4
-
flex-direction: row;
5
-
gap: .25rem;
6
-
flex-wrap: wrap;
7
-
justify-content: flex-end;
8
-
align-items: center;
9
-
align-content: flex-end
10
-
}
11
-
12
-
#footer-container {
13
-
display: flex;
14
-
flex-wrap: wrap;
15
-
justify-content: space-between;
16
-
align-items: center;
17
-
}
18
-
19
-
.accent-data {
20
-
color: var(--accent);
21
-
}
22
-
23
-
.theme-transition {
24
-
transition: color 0.3s ease, background-color 0.3s ease;
25
-
}
26
-
27
-
.tags-data {
28
-
display: flex;
29
-
flex-direction: column;
30
-
flex-wrap: wrap;
31
-
justify-content: flex-end;
32
-
align-items: flex-start;
33
-
align-content: flex-end
34
-
}
35
-
36
-
.title-list li {
37
-
margin-bottom: .375rem;
38
-
}
39
-
40
-
/* icons settings */
41
-
.icons {
42
-
width: 1.3rem;
43
-
height: 1.3rem;
44
-
aspect-ratio: 1/1;
45
-
display: inline-block;
46
-
vertical-align: middle;
47
-
color: var(--text);
48
-
fill: var(--text);
49
-
background-color: transparent;
50
-
cursor: pointer;
51
-
}
52
-
53
-
.icons:hover {
54
-
background-color: transparent;
55
-
color: var(--accent);
56
-
}
57
-
58
-
/* footnotes */
59
-
.footnote-definition {
60
-
margin: 0 0 0 .125rem;
61
-
}
62
-
63
-
.footnote-definition-label {
64
-
color: var(--accent);
65
-
}
66
-
67
-
.footnote-definition p {
68
-
display: inline;
69
-
margin: .625rem 0 0 .625rem;
70
-
}
71
-
72
-
/* general classes */
73
-
.no-style {
74
-
padding: 0;
75
-
margin: 0;
76
-
border: none;
77
-
border-radius: 0
78
-
}
79
-
80
-
.no-style:hover {
81
-
background-color: transparent;
82
-
color: var(--accent);
83
-
}
84
-
85
-
.center {
86
-
text-align: center;
87
-
}
88
-
89
-
.center img {
90
-
display: block;
91
-
margin: 1rem auto;
92
-
}
93
-
94
-
.float-right {
95
-
float: right
96
-
}
97
-
98
-
.float-left {
99
-
float: left
100
-
}
101
-
102
-
/* shortcodes css */
103
-
.webring {
104
-
margin: .375rem;
105
-
}
public/favicon-16x16.png
public/favicon-16x16.png
This is a binary file and will not be displayed.
public/favicon-32x32.png
public/favicon-32x32.png
This is a binary file and will not be displayed.
public/favicon.ico
public/favicon.ico
This is a binary file and will not be displayed.
-21
public/icons.svg
-21
public/icons.svg
···
1
-
<svg xmlns="http://www.w3.org/2000/svg">
2
-
<symbol id="rss" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
3
-
<path fill="currentColor" d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/>
4
-
</symbol>
5
-
6
-
<symbol id="darkMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
7
-
<path fill="currentColor" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/>
8
-
</symbol>
9
-
10
-
<symbol id="lightMode" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
11
-
<path fill="currentColor" d="M12 15q1.25 0 2.125-.875T15 12q0-1.25-.875-2.125T12 9q-1.25 0-2.125.875T9 12q0 1.25.875 2.125T12 15Zm0 2q-2.075 0-3.538-1.463T7 12q0-2.075 1.463-3.538T12 7q2.075 0 3.538 1.463T17 12q0 2.075-1.463 3.538T12 17ZM2 13q-.425 0-.713-.288T1 12q0-.425.288-.713T2 11h2q.425 0 .713.288T5 12q0 .425-.288.713T4 13H2Zm18 0q-.425 0-.713-.288T19 12q0-.425.288-.713T20 11h2q.425 0 .713.288T23 12q0 .425-.288.713T22 13h-2Zm-8-8q-.425 0-.713-.288T11 4V2q0-.425.288-.713T12 1q.425 0 .713.288T13 2v2q0 .425-.288.713T12 5Zm0 18q-.425 0-.713-.288T11 22v-2q0-.425.288-.713T12 19q.425 0 .713.288T13 20v2q0 .425-.288.713T12 23ZM5.65 7.05L4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7q-.275.3-.687.288T5.65 7.05ZM18 19.425l-1.05-1.075q-.275-.3-.275-.713t.275-.687q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3ZM16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275ZM4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288ZM12 12Z"/>
12
-
</symbol>
13
-
14
-
<symbol id="chevronLeft" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
15
-
<path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6l1.41-1.42Z"/>
16
-
</symbol>
17
-
18
-
<symbol id="chevronRight" viewBox="0 0 24 24"><rect x="0" y="0" fill="none" stroke="none" />
19
-
<path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6l-1.41-1.42Z"/>
20
-
</symbol>
21
-
</svg>
-49
public/js/script.js
-49
public/js/script.js
···
1
-
const toggleButton = document.getElementById('theme-toggle');
2
-
const themeIcon = document.getElementById('theme-icon');
3
-
const themeSound = document.getElementById('theme-sound');
4
-
5
-
// Function to update the theme icon based on the current theme
6
-
const updateThemeIcon = (isDarkMode) => {
7
-
const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
8
-
const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
9
-
themeIcon.querySelector('use').setAttribute('href', iconPath);
10
-
};
11
-
12
-
// Function to update the theme based on the current mode
13
-
const updateTheme = (isDarkMode) => {
14
-
const theme = isDarkMode ? 'dark' : 'light';
15
-
document.documentElement.setAttribute('data-theme', theme);
16
-
updateThemeIcon(isDarkMode);
17
-
};
18
-
19
-
// Function to toggle the theme
20
-
const toggleTheme = () => {
21
-
const isDarkMode = toggleButton.checked;
22
-
updateTheme(isDarkMode);
23
-
themeSound.play();
24
-
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
25
-
26
-
// Add transition class to body for smooth transition
27
-
document.body.classList.add('theme-transition');
28
-
setTimeout(() => {
29
-
document.body.classList.remove('theme-transition');
30
-
}, 300);
31
-
};
32
-
33
-
// Event listener for theme toggle
34
-
toggleButton.addEventListener('change', toggleTheme);
35
-
36
-
// Function to initialize the theme based on the stored preference
37
-
const initializeTheme = () => {
38
-
const storedTheme = localStorage.getItem('theme');
39
-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
40
-
const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
41
-
toggleButton.checked = isDarkMode;
42
-
updateTheme(isDarkMode);
43
-
};
44
-
45
-
// Initialize the theme
46
-
initializeTheme();
47
-
48
-
// Listen for changes in system preference
49
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);
-1
public/site.webmanifest
-1
public/site.webmanifest
···
1
-
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}