ficd/zona
1
Fork 0
Code Issues 1 Pull requests Projects Releases 5 Packages Wiki Activity Actions

improved styling of hover symbols

Browse source
This commit is contained in:
Daniel Fichtinger 2025-07-15 18:35:13 -04:00
parent c33acfa1c8
commit 4ea80a33f8
1 changed files with 22 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/zona/data/content/static/style.css
View file

@ -62,11 +62,12 @@ header {
.site-logo.hover-symbol::before { .site-logo.hover-symbol::before {
content: "@"; content: "@";
/* color: var(--main-bullet-color);*/
} }
.title.hover-symbol::before { .title.hover-symbol::before {
content: ">"; content: ">";
color: var(--main-bullet-color); /* color: var(--main-bullet-color);*/
} }
.hover-symbol { .hover-symbol {
@ -74,6 +75,7 @@ header {
position: relative; position: relative;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
transition: color 0.15s ease;
} }
.hover-symbol::before { .hover-symbol::before {
@ -85,20 +87,24 @@ header {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.15s ease, color 0.15s ease;
color: var(--main-text-color);
} }
.hover-symbol:hover::before { .hover-symbol:hover::before {
opacity: 1; opacity: 1;
color: var(--main-placeholder-color); /* only the symbol changes color */
} }
.hover-symbol:hover { .hover-symbol:hover {
background-color: transparent; background-color: transparent;
/* color: var(--main-placeholder-color);*/
} }
.toclink { .toclink {
position: relative; position: relative;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: color 0.15s ease;
} }
.toclink::before { .toclink::before {
@ -109,7 +115,16 @@ header {
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
opacity: 0; opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.15s ease, color 0.15s ease;
color: var(--main-link-color);
}
.toclink:hover::before {
opacity: 1;
color: var(--main-placeholder-color);
}
.toclink:hover {
background-color: transparent;
} }
h1 .toclink::before { h1 .toclink::before {
@ -128,13 +143,6 @@ h4 .toclink::before {
content: "###"; content: "###";
} }
.toclink:hover::before {
opacity: 1;
}
.toclink:hover {
background-color: transparent;
}
/* h1, */ /* h1, */
h2, h2,
h3, h3,
@ -206,53 +214,26 @@ h6 {
ul { ul {
list-style-type: disc; list-style-type: disc;
/* or any other list style */
} }
li::marker { li::marker {
color: var(--main-bullet-color); color: var(--main-bullet-color);
/* Change this to your desired color */
} }
/*a {*/
/* color: var(--main-link-color);*/
/* text-decoration: none;*/
/* position: relative;*/
/*}*/
/*a::after {*/
/* content: "";*/
/* position: absolute;*/
/* left: 0;*/
/* bottom: -2px;*/
/* width: 100%;*/
/* height: 1px;*/
/* background-color: currentColor;*/
/* transform: scaleX(0);*/
/* transform-origin: center;*/
/* transition: transform 0.1s ease;*/
/*}*/
/*a:hover::after {*/
/* transform: scaleX(1);*/
/*}*/
/*a:has(> code)::after {*/
/* display: none;*/
/*}*/
a { a {
color: var(--main-link-color); color: var(--main-link-color);
text-decoration: underline; text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0); text-decoration-color: rgba(0, 0, 0, 0);
text-underline-offset: 2px; /* Optional: tweak spacing */ text-underline-offset: 2px;
} }
a { a {
transition: text-decoration-color 0.15s ease; transition: color 0.15s ease, text-decoration-color 0.15s ease;
} }
a:hover { a:hover {
text-decoration-color: currentColor; text-decoration-color: var(--main-placeholder-color);
color: var(--main-bullet-color);
} }
max-width: 100%; max-width: 100%;
@ -489,23 +470,3 @@ caption {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--main-small-text-color); color: var(--main-small-text-color);
} }
a > code {
text-decoration: none;
color: var(--main-link-color);
position: relative;
}
a:has(> code) {
text-decoration: none;
background: none;
/* position: static;*/
}
a:hover > code {
text-decoration: underline;
}
a:hover:has(> code) {
background: none;
}