website: redesign part 23

This commit is contained in:
nym21
2026-06-08 16:08:52 +02:00
parent e5068bbbf3
commit 6786be296d
7 changed files with 118 additions and 88 deletions
+79 -82
View File
@@ -86,98 +86,95 @@ main.learn {
counter-increment: detail;
scroll-margin-top: var(--offset);
}
}
h1,
h2,
h3 {
line-height: 1;
section[id] {
> h1,
> h2,
> h3 {
position: sticky;
top: var(--offset);
line-height: 1;
background: var(--black);
a {
position: relative;
display: inline-block;
color: var(--white);
text-decoration: none;
a {
position: relative;
display: inline-block;
color: var(--white);
text-decoration: none;
&::before {
position: absolute;
top: 50%;
right: 100%;
translate: 0 -50%;
opacity: 0;
user-select: none;
text-decoration: none;
&::before {
position: absolute;
top: 50%;
right: 100%;
translate: 0 -50%;
opacity: 0;
user-select: none;
text-decoration: none;
}
&:hover::before {
opacity: 0.5;
}
&:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.125em;
}
&:active {
color: var(--orange);
}
}
}
&:hover::before {
opacity: 0.5;
> h1 {
z-index: 3;
padding-bottom: var(--heading-padding-bottom);
border-bottom: 1px solid var(--gray);
font-size: 3rem;
a::before {
content: counter(theme, upper-roman) ". ";
}
}
&:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.125em;
> h2 {
z-index: 2;
padding-top: var(--topic-padding-top);
padding-bottom: var(--heading-padding-bottom);
border-bottom: 1px dashed var(--gray);
font-size: var(--topic-font-size);
a::before {
content: counter(topic) ". ";
}
}
&:active {
color: var(--orange);
> h3 {
z-index: 1;
padding-top: var(--detail-padding-top);
padding-bottom: var(--detail-padding-bottom);
border-bottom: 1px dotted var(--gray);
font-size: var(--detail-font-size);
a::before {
content: counter(detail, lower-alpha) ". ";
}
}
> p {
margin-top: 1rem;
color: var(--dark-white);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
> figure {
margin-top: 2rem;
color: var(--gray);
font-size: var(--font-size-xs);
}
}
}
h1,
h2,
h3 {
position: sticky;
top: var(--offset);
background: var(--black);
}
h1 {
z-index: 3;
padding-bottom: var(--heading-padding-bottom);
border-bottom: 1px solid var(--gray);
font-size: 3rem;
a::before {
content: counter(theme, upper-roman) ". ";
}
}
h2 {
z-index: 2;
padding-top: var(--topic-padding-top);
padding-bottom: var(--heading-padding-bottom);
border-bottom: 1px dashed var(--gray);
font-size: var(--topic-font-size);
a::before {
content: counter(topic) ". ";
}
}
h3 {
z-index: 1;
padding-top: var(--detail-padding-top);
padding-bottom: var(--detail-padding-bottom);
border-bottom: 1px dotted var(--gray);
font-size: var(--detail-font-size);
a::before {
content: counter(detail, lower-alpha) ". ";
}
}
p {
margin-top: 1rem;
color: var(--dark-white);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
figure {
margin-top: 2rem;
color: var(--gray);
font-size: var(--font-size-xs);
}
}