Skip to content

Commit 506722d

Browse files
macxmacx
committed
Refactor links, toc
1 parent c2fd432 commit 506722d

File tree

21 files changed

+309
-96
lines changed

21 files changed

+309
-96
lines changed

‎assets/scripts/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,15 @@ const externalLinks = document.querySelectorAll('main a[href^="http"]');
106106

107107
const linkedHeadlines = document.querySelectorAll(['h1[id], h2[id]']);
108108
const linkedSections = document.querySelectorAll(['.stage__item[id]']);
109-
const stageNavigation = document.querySelector('.stage__navigation');
109+
const stageNavigation = document.querySelector('#TableOfContents');
110110

111111
function headlinesObserverCallback(entries) {
112112
const stageNavigationLinks = stageNavigation.querySelectorAll('a');
113113

114114
entries.forEach((entry) => {
115115
if (entry.isIntersecting) {
116116
const navItem = stageNavigation.querySelector(
117-
'a[href="#' + entry.target.id + '"]'
117+
`a[href="#${entry.target.id}"]`
118118
);
119119

120120
if (navItem) {

‎assets/styles/base/layout.scss‎

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -164,32 +164,6 @@ a {
164164
text-transform: uppercase;
165165
letter-spacing: 0.1rem;
166166
}
167-
168-
ul {
169-
all: unset;
170-
}
171-
172-
li {
173-
list-style: none;
174-
margin: 0 0 0.5em;
175-
}
176-
177-
a {
178-
display: block;
179-
padding: 0.2em 0;
180-
color: var(--clr-text--light);
181-
182-
&:hover,
183-
&:focus {
184-
color: var(--clr-primary);
185-
text-decoration: none;
186-
}
187-
188-
&.is-active {
189-
font-weight: var(--font-weight--bold);
190-
color: var(--clr-primary);
191-
}
192-
}
193167
}
194168
}
195169
}

‎assets/styles/base/mixins.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
@mixin respond($breakpoint, $type: 'from') {
1+
@mixin respond($bp, $type: 'from', $bp2: '') {
22
$layout-breakpoints: (
33
small: 480px,
44
medium: 600px,
55
large: 1000px,
66
);
77

88
@if $type == 'from' {
9-
@media screen and (min-width: map-get($layout-breakpoints, $breakpoint)) {
9+
@media screen and (min-width: map-get($layout-breakpoints, $bp)) {
10+
@content;
11+
}
12+
} @else if $type == 'between' {
13+
@media screen and (min-width: map-get($layout-breakpoints, $bp)) and (max-width: map-get($layout-breakpoints, $bp2)) {
1014
@content;
1115
}
1216
} @else if $type == 'to' {
13-
@media screen and (max-width: map-get($layout-breakpoints, $breakpoint)-1) {
17+
@media screen and (max-width: map-get($layout-breakpoints, $bp)-1) {
1418
@content;
1519
}
1620
}

‎assets/styles/base/variables.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
--header-height: 3.75rem;
88
--navigation-width: 15rem;
9+
--content-spacing: var(--spacing);
910
--content-max-width: 45rem;
1011
--border-radius: 0.2rem;
1112

@@ -44,6 +45,7 @@
4445

4546
--font-size: 1rem;
4647
--font-size--small: 0.875rem;
48+
--font-size--xsmall: 0.75rem;
4749
--font-size--large: 1.25rem;
4850

4951
--line-height: 1.4;
@@ -62,7 +64,7 @@
6264
--image-shadow: 0 0.25rem 0.75rem -0.5rem rgb(10 52 120 / 30%);
6365

6466
@media (min-width: 600px) {
65-
--spacing: 2.5rem;
67+
--content-spacing: 2.5rem;
6668
--spacing--large: 4rem;
6769
}
6870

@@ -73,6 +75,7 @@
7375
--clr-text--dark: #fff;
7476
--clr-line: rgba(255, 255, 255, 0.2);
7577
--clr-header: rgba(20, 35, 45, 0.8);
78+
--clr-inverse: rgb(38, 50, 56);
7679

7780
--clr-play-1: hsla(206, 99%, 69%, 0.1);
7881
--clr-play-2: hsla(123, 46%, 66%, 0.1);

‎assets/styles/main.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,8 @@
1919
'modules/mode-switch',
2020
'modules/button',
2121
'modules/content',
22+
'modules/reflist',
23+
'modules/hint',
24+
'modules/toc',
2225
'modules/footer',
2326
'syntax/chroma';

‎assets/styles/modules/content.scss‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22
min-height: calc(100vh - 3.75rem);
33
max-width: var(--content-max-width);
44
margin: 0 auto;
5-
padding: 0 var(--spacing);
5+
padding: 0 var(--content-spacing);
66
transition: padding var(--transition);
77

88
a:not([class]),
99
abbr {
10-
color: inherit;
11-
margin: 0;
10+
color: var(--clr-text);
1211
border-bottom: 2px solid;
1312
border-radius: 0.2em;
1413
font-weight: var(--font-weight--bold);
@@ -22,7 +21,8 @@
2221
color: var(--clr-inverse);
2322
border-color: var(--clr-text--light);
2423
padding: 0 0.3em;
25-
margin: 0 -0.3em;
24+
margin-left: -0.3em;
25+
margin-right: -0.3em;
2626
}
2727
}
2828

@@ -33,7 +33,7 @@
3333
}
3434

3535
&--full {
36-
padding: var(--spacing--large) var(--spacing);
36+
padding: var(--spacing--large) var(--content-spacing);
3737
}
3838

3939
h2 {
@@ -87,30 +87,6 @@
8787
}
8888
}
8989

90-
ul:not([class]) {
91-
margin: 1.5em 0 1em;
92-
padding: 0;
93-
94-
li {
95-
@include list-item();
96-
97-
margin: 0 0 1.2em;
98-
font-size: 0.8125rem;
99-
color: var(--clr-text--light);
100-
101-
a {
102-
display: inline-block;
103-
font-size: 1rem;
104-
margin-bottom: 0.2em;
105-
106-
&:hover,
107-
&:focus-visible {
108-
margin-bottom: 0.2em;
109-
}
110-
}
111-
}
112-
}
113-
11490
code {
11591
color: var(--clr-text--code);
11692
// background-color: var(--clr-code);
@@ -124,7 +100,7 @@
124100

125101
picture {
126102
display: block;
127-
margin: 0 0 var(--spacing);
103+
margin: 0 0 var(--content-spacing);
128104

129105
img {
130106
display: block;
@@ -134,9 +110,9 @@ picture {
134110
}
135111

136112
figure {
137-
margin-left: calc(var(--spacing) * -1);
138-
margin-right: calc(var(--spacing) * -1);
139-
margin-bottom: var(--spacing);
113+
margin-left: calc(var(--content-spacing) * -1);
114+
margin-right: calc(var(--content-spacing) * -1);
115+
margin-bottom: var(--content-spacing);
140116
transition: all var(--transition--theme);
141117

142118
picture {
@@ -150,7 +126,7 @@ figure {
150126

151127
figcaption {
152128
font-size: var(--font-size--small);
153-
padding: 0 var(--spacing);
129+
padding: 0 var(--content-spacing);
154130
color: var(--clr-text--light);
155131

156132
span:nth-child(2) {
@@ -182,7 +158,7 @@ figure {
182158

183159
/*
184160
┌──────────────────────────────────┐
185-
FOOTNOTES
161+
FOOTNOTES
186162
└──────────────────────────────────┘
187163
*/
188164

‎assets/styles/modules/footer.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.footer {
66
position: relative;
77
z-index: 5;
8-
padding: var(--spacing);
8+
padding: var(--spacing) var(--content-spacing);
99
font-size: 0.8rem;
1010
border-top: 1px solid var(--footer-line);
1111
color: var(--clr-text--light);

‎assets/styles/modules/hint.scss‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
[data-hint] {
2+
position: relative;
3+
z-index: 500;
4+
cursor: pointer;
5+
6+
&::before,
7+
&::after {
8+
position: absolute;
9+
left: 50%;
10+
bottom: 100%;
11+
transform: translate(-50%, 100%);
12+
transition: opacity 0.2s, transform 0.2s;
13+
14+
opacity: 0;
15+
pointer-events: none;
16+
}
17+
18+
&:hover {
19+
&::before,
20+
&::after {
21+
opacity: 1;
22+
transform: translate(-50%, 0);
23+
}
24+
}
25+
26+
&::before {
27+
margin: 0 0 10px;
28+
padding: 0.4em 0.7em 0.4em;
29+
border-radius: 3px;
30+
background: var(--clr-text);
31+
color: var(--clr-inverse);
32+
content: attr(data-hint);
33+
34+
font-size: var(--font-size--xsmall);
35+
line-height: 1;
36+
white-space: nowrap;
37+
text-align: center;
38+
}
39+
40+
&::after {
41+
width: 0;
42+
border: 5px solid transparent;
43+
border-top-color: var(--clr-text);
44+
content: '';
45+
font-size: 0;
46+
line-height: 0;
47+
}
48+
}

‎assets/styles/modules/reflist.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.reflist {
2+
ul {
3+
margin: 1.5em 0 1em;
4+
padding: 0;
5+
}
6+
7+
li {
8+
@include list-item();
9+
10+
margin: 0 0 1.3em;
11+
font-size: 0.8125rem;
12+
color: var(--clr-text--light);
13+
14+
a:not([class]) {
15+
display: inline-block;
16+
font-size: 1rem;
17+
margin-bottom: 0.5em;
18+
}
19+
}
20+
21+
&__item {
22+
svg {
23+
width: 1rem;
24+
height: 1rem;
25+
fill: var(--clr-text--light);
26+
}
27+
}
28+
29+
&__item-header {
30+
display: flex;
31+
justify-content: space-between;
32+
align-items: end;
33+
margin-bottom: 0.5em;
34+
35+
a {
36+
margin-bottom: 0 !important;
37+
}
38+
}
39+
}

0 commit comments

Comments
 (0)