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> </a>
<ul id="header-links"> <ul id="header-links">
<li> <li>
<a href="/">home</a> <a href="/" class="header-link">home</a>
</li> </li>
<li> <li>
<a href="/music">music</a> <a href="/music" class="header-link">music</a>
</li> </li>
<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>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<span title="coming later!">blog</span> <span class="header-link disabled" title="coming later!">blog</span>
</li> </li>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<span title="coming later!">art</span> <span class="header-link disabled" title="coming later!">art</span>
</li> </li>
<li id="toggle-crt"> <li>
<a href="javascript:void(0)">crt</a> <button id="toggle-crt" class="header-btn">crt</button>
</li> </li>
</ul> </ul>
</nav> </nav>

14
public/music.html
View file

@ -42,24 +42,24 @@
</a> </a>
<ul id="header-links"> <ul id="header-links">
<li> <li>
<a href="/">home</a> <a href="/" class="header-link">home</a>
</li> </li>
<li> <li>
<a href="/music">music</a> <a href="/music" class="header-link">music</a>
</li> </li>
<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>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<span title="coming later!">blog</span> <span class="header-link disabled" title="coming later!">blog</span>
</li> </li>
<li> <li>
<!-- coming later! --> <!-- coming later! -->
<span title="coming later!">art</span> <span class="header-link disabled" title="coming later!">art</span>
</li> </li>
<li id="toggle-crt"> <li>
<a href="javascript:void(0)">crt</a> <button id="toggle-crt" class="header-btn">crt</button>
</li> </li>
</ul> </ul>
</nav> </nav>

3
public/script/accessibility.js
View file

@ -39,6 +39,7 @@ if (accessibility) {
document.getElementById("toggle-crt").addEventListener("click", () => { document.getElementById("toggle-crt").addEventListener("click", () => {
toggle_accessibility_setting("disable_crt"); toggle_accessibility_setting("disable_crt");
document.querySelector('div#overlay').toggleAttribute("hidden"); 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; list-style: none;
} }
header ul li a, .header-link {
header ul li span {
padding: .2em .5em; padding: .2em .5em;
border: 1px solid var(--links); border: 1px solid var(--links);
color: var(--links); color: var(--links);
@ -118,33 +117,42 @@ header ul li span {
opacity: 0; opacity: 0;
} }
header ul li span { .header-link.disabled {
color: #aaa; color: #aaa;
border-color: #aaa; border-color: #aaa;
cursor: default; cursor: default;
text-decoration: none; text-decoration: none;
} }
header ul li a:hover { .header-link:not(.disabled):hover {
color: #eee; color: #eee;
border-color: #eee; border-color: #eee;
background-color: var(--links) !important; background-color: var(--links) !important;
text-decoration: none; text-decoration: none;
} }
.header-btn {
#toggle-crt a { padding: .2em .5em;
font-family: inherit;
font-size: inherit;
color: var(--primary); color: var(--primary);
border-color: var(--primary); border: 1px solid var(--primary);
opacity: 1; 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; color: #111;
background-color: var(--primary) !important; background-color: var(--primary) !important;
opacity: 1 !important;
} }
#toggle-crt.disabled a { .header-btn.disabled {
opacity: .5 !important; opacity: .5 !important;
} }