mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-06-22 04:18:50 -07:00
website: redesign part 23
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user