ari/arimelody.me-static
ari/arimelody.me-static
Archived
1
0
Fork 0
Code Issues 1 Pull requests Actions Projects Wiki Activity

added fixed header link/button style. more lighthouse optimisations

Browse source
This commit is contained in:
ari melody 2024-05-17 12:55:40 +01:00
parent 2dbed741a9
commit a37ca06241
Signed by: ari
GPG key ID: CF99829C92678188
5 changed files with 34 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/favicon-100.png (Stored with Git LFS)
View file

Binary file not shown.

14
public/index.html
View file

@ -42,24 +42,24 @@
</a>
<ul id="header-links">
<li>
<a href="/">home</a>
<a href="/" class="header-link">home</a>
</li>
<li>
<a href="/music">music</a>
<a href="/music" class="header-link">music</a>
</li>
<li>
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank" class="header-link">source</a>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">blog</span>
<span class="header-link disabled" title="coming later!">blog</span>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">art</span>
<span class="header-link disabled" title="coming later!">art</span>
</li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
<li>
<button id="toggle-crt" class="header-btn">crt</button>
</li>
</ul>
</nav>

14
public/music.html
View file

@ -42,24 +42,24 @@
</a>
<ul id="header-links">
<li>
<a href="/">home</a>
<a href="/" class="header-link">home</a>
</li>
<li>
<a href="/music">music</a>
<a href="/music" class="header-link">music</a>
</li>
<li>
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank">source</a>
<a href="https://git.arimelody.me/ari/arimelody.me" target="_blank" class="header-link">source</a>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">blog</span>
<span class="header-link disabled" title="coming later!">blog</span>
</li>
<li>
<!-- coming later! -->
<span title="coming later!">art</span>
<span class="header-link disabled" title="coming later!">art</span>
</li>
<li id="toggle-crt">
<a href="javascript:void(0)">crt</a>
<li>
<button id="toggle-crt" class="header-btn">crt</button>
</li>
</ul>
</nav>

3
public/script/accessibility.js
View file

@ -39,6 +39,7 @@ if (accessibility) {
document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_accessibility_setting("disable_crt");
document.querySelector('div#overlay').toggleAttribute("hidden");
document.getElementById('toggle-crt').className = accessibility.disable_crt ? "disabled" : "";
if (accessibility.disable_crt) document.getElementById('toggle-crt').classList.add("disabled");
else document.getElementById('toggle-crt').classList.remove("disabled");
});

28
public/style/main.css
View file

@ -104,8 +104,7 @@ header ul li {
list-style: none;
}
header ul li a,
header ul li span {
.header-link {
padding: .2em .5em;
border: 1px solid var(--links);
color: var(--links);
@ -118,33 +117,42 @@ header ul li span {
opacity: 0;
}
header ul li span {
.header-link.disabled {
color: #aaa;
border-color: #aaa;
cursor: default;
text-decoration: none;
}
header ul li a:hover {
.header-link:not(.disabled):hover {
color: #eee;
border-color: #eee;
background-color: var(--links) !important;
text-decoration: none;
}
#toggle-crt a {
.header-btn {
padding: .2em .5em;
font-family: inherit;
font-size: inherit;
color: var(--primary);
border-color: var(--primary);
opacity: 1;
border: 1px solid var(--primary);
border-radius: 2px;
background-color: transparent;
transition-property: color, border-color, background-color;
transition-duration: .2s;
animation-delay: 0s;
animation: list-item-fadein .2s forwards;
opacity: 0;
}
#toggle-crt a:hover {
.header-btn:hover {
color: #111;
background-color: var(--primary) !important;
opacity: 1 !important;
}
#toggle-crt.disabled a {
.header-btn.disabled {
opacity: .5 !important;
}