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 {
content: "@";
/* color: var(--main-bullet-color);*/
}
.title.hover-symbol::before {
content: ">";
color: var(--main-bullet-color);
/* color: var(--main-bullet-color);*/
}
.hover-symbol {
@ -74,6 +75,7 @@ header {
position: relative;
font-weight: bold;
text-decoration: none;
transition: color 0.15s ease;
}
.hover-symbol::before {
@ -85,20 +87,24 @@ header {
top: 50%;
transform: translateY(-50%);
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 {
opacity: 1;
color: var(--main-placeholder-color); /* only the symbol changes color */
}
.hover-symbol:hover {
background-color: transparent;
/* color: var(--main-placeholder-color);*/
}
.toclink {
position: relative;
text-decoration: none;
color: inherit;
transition: color 0.15s ease;
}
.toclink::before {
@ -109,7 +115,16 @@ header {
top: 50%;
transform: translateY(-50%);
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 {
@ -128,13 +143,6 @@ h4 .toclink::before {
content: "###";
}
.toclink:hover::before {
opacity: 1;
}
.toclink:hover {
background-color: transparent;
}
/* h1, */
h2,
h3,
@ -206,53 +214,26 @@ h6 {
ul {
list-style-type: disc;
/* or any other list style */
}
li::marker {
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 {
color: var(--main-link-color);
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0);
text-underline-offset: 2px; /* Optional: tweak spacing */
text-underline-offset: 2px;
}
a {
transition: text-decoration-color 0.15s ease;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover {
text-decoration-color: currentColor;
text-decoration-color: var(--main-placeholder-color);
color: var(--main-bullet-color);
}
max-width: 100%;
@ -489,23 +470,3 @@ caption {
font-size: 0.8rem;
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;
}