Skip to content

Commit 2b52e5c

Browse files
kevinfarrugiakevinfarrugia
committed
Added dark-mode to demo page; Added anchors to headings
1 parent f514743 commit 2b52e5c

File tree

4 files changed

+173
-17
lines changed

4 files changed

+173
-17
lines changed

‎docs/demos.tsx

Lines changed: 92 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,61 +20,139 @@ function Demos() {
2020
<div className="demos">
2121
<h2>Demos</h2>
2222
<div className="item">
23-
<h3>Multiple Items</h3>
23+
<h3>
24+
<a id="multiple_items" href="#multiple_items" className="anchor">
25+
Multiple Items
26+
</a>
27+
</h3>
2428
<MultipleItemsGlider />
2529
</div>
2630
<div className="item">
27-
<h3>Single Item with Scroll Lock</h3>
31+
<h3>
32+
<a
33+
id="single_item_with_scroll_lock"
34+
href="#single_item_with_scroll_lock"
35+
className="anchor"
36+
>
37+
Single Item with Scroll Lock
38+
</a>
39+
</h3>
2840
<SingleItemGlider />
2941
</div>
3042
<div className="item">
31-
<h3>Responsive Glider</h3>
43+
<h3>
44+
<a
45+
id="responsive_glider"
46+
href="#responsive_glider"
47+
className="anchor"
48+
>
49+
Responsive Glider
50+
</a>
51+
</h3>
3252
<ResponsiveGlider />
3353
</div>
3454
<div className="item">
35-
<h3>Autoplay Glider</h3>
55+
<h3>
56+
<a id="autoplay_glider" href="#autoplay_glider" className="anchor">
57+
Autoplay Glider
58+
</a>
59+
</h3>
3660
<AutoplayGlider />
3761
</div>
3862
<div className="item">
39-
<h3>Updating Props</h3>
63+
<h3>
64+
<a id="updating_props" href="#updating_props" className="anchor">
65+
Updating Props
66+
</a>
67+
</h3>
4068
<UpdatingPropsGlider />
4169
</div>
4270
<div className="item">
4371
<h3>
44-
<code>ref</code> exposes Glider methods
72+
<a
73+
id="ref_exposes_glider"
74+
href="#ref_exposes_glider"
75+
className="anchor"
76+
>
77+
<code>ref</code> exposes Glider methods
78+
</a>
4579
</h3>
4680
<RefGlider />
4781
</div>
4882
<div className="item">
49-
<h3>Perspective View</h3>
83+
<h3>
84+
<a id="perspective_view" href="#perspective_view" className="anchor">
85+
Perspective View
86+
</a>
87+
</h3>
5088
<PerspectiveViewGlider />
5189
</div>
5290
<div className="item">
53-
<h3>Scroll to slide #5</h3>
91+
<h3>
92+
<a id="scroll_to_slide" href="#scroll_to_slide" className="anchor">
93+
Scroll to slide #5
94+
</a>
95+
</h3>
5496
<ScrollToGlider />
5597
</div>
5698
<div className="item">
57-
<h3>Fractional Slides</h3>
99+
<h3>
100+
<a
101+
id="fractional_slides"
102+
href="#fractional_slides"
103+
className="anchor"
104+
>
105+
Fractional Slides
106+
</a>
107+
</h3>
58108
<FractionalSlidesGlider />
59109
</div>
60110
<div className="item">
61-
<h3>Custom Events</h3>
111+
<h3>
112+
<a id="custom_events" href="#custom_events" className="anchor">
113+
Custom Events
114+
</a>
115+
</h3>
62116
<CustomEventsGlider />
63117
</div>
64118
<div className="item">
65-
<h3>Custom Element Arrow</h3>
119+
<h3>
120+
<a
121+
id="custom_element_arrow"
122+
href="#custom_element_arrow"
123+
className="anchor"
124+
>
125+
Custom Element Arrow
126+
</a>
127+
</h3>
66128
<CustomElementArrowsGlider />
67129
</div>
68130
<div className="item">
69-
<h3>Unmounting / remounting</h3>
131+
<h3>
132+
<a
133+
id="unmounting_remounting"
134+
href="#unmounting_remounting"
135+
className="anchor"
136+
>
137+
Unmounting / remounting
138+
</a>
139+
</h3>
70140
<RemountingGlider />
71141
</div>
72142
<div className="item">
73-
<h3>Skip Track</h3>
143+
<h3>
144+
<a id="skip_track" href="#skip_track" className="anchor">
145+
Skip Track
146+
</a>
147+
</h3>
74148
<SkipTrackGlider />
75149
</div>
76150
<div className="item">
77-
<h3>Dynamic Data</h3>
151+
<h3>
152+
<a id="dynamic_data" href="#dynamic_data" className="anchor">
153+
Dynamic Data
154+
</a>
155+
</h3>
78156
<DynamicDataGlider />
79157
</div>
80158
</div>

‎docs/perspective.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,13 @@
2121
justify-content: center;
2222
}
2323

24+
@media screen and (prefers-color-scheme: dark) {
25+
.slide-outer > span {
26+
background: #333;
27+
border: 1px solid #4a4a5a;
28+
}
29+
}
30+
2431
.slide-outer:nth-child(2n) > span {
2532
color: #a89cc8;
2633
}

‎docs/style.css

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ body {
1717

1818
a,
1919
a:visited {
20-
color: #fff;
20+
color: inherit;
2121
text-decoration: none;
2222
}
2323

@@ -35,18 +35,31 @@ footer {
3535

3636
.hero {
3737
padding: 2em;
38-
background-image: linear-gradient(to right, #51089f 0%,#7f1cc5 30%, #cd88e5 100%);
38+
background-image: linear-gradient(
39+
to right,
40+
#51089f 0%,
41+
#7f1cc5 30%,
42+
#cd88e5 100%
43+
);
3944
color: rgba(255, 255, 255, 0.75);
4045
font-size: 1.5em;
4146
text-align: center;
4247
}
4348

4449
.content {
50+
padding: 1em 0;
4551
background-color: #fff;
4652
color: rgba(0, 0, 0, 0.75);
4753
text-align: center;
4854
}
4955

56+
@media screen and (prefers-color-scheme: dark) {
57+
.content {
58+
background-color: #32333f;
59+
color: rgba(255, 255, 255, 0.75);
60+
}
61+
}
62+
5063
pre {
5164
background-color: #333;
5265
border-radius: 4px;
@@ -85,11 +98,22 @@ summary {
8598

8699
.app {
87100
padding: 1em 0;
88-
background-image: linear-gradient(to right, #51089f 0%,#7f1cc5 30%, #cd88e5 100%);
101+
background-image: linear-gradient(
102+
to right,
103+
#51089f 0%,
104+
#7f1cc5 30%,
105+
#cd88e5 100%
106+
);
89107
color: rgba(0, 0, 0, 0.75);
90108
text-align: center;
91109
}
92110

111+
@media screen and (prefers-color-scheme: dark) {
112+
.demos {
113+
color: rgba(255, 255, 255, 0.75);
114+
}
115+
}
116+
93117
.container {
94118
width: 90%;
95119
max-width: 72em;
@@ -104,6 +128,12 @@ summary {
104128
overflow: hidden;
105129
}
106130

131+
@media screen and (prefers-color-scheme: dark) {
132+
.demos {
133+
background-color: #32333f;
134+
}
135+
}
136+
107137
.item {
108138
margin-top: 2em;
109139
border-top: 1px solid #f0f0f0;
@@ -112,3 +142,37 @@ summary {
112142
.item:first-child {
113143
border-top: 0;
114144
}
145+
146+
.anchor {
147+
color: #000;
148+
}
149+
150+
@media screen and (prefers-color-scheme: dark) {
151+
.anchor {
152+
color: #fafafa;
153+
}
154+
}
155+
156+
.anchor::before {
157+
color: rgba(0, 0, 0, 0.75);
158+
content: "#";
159+
display: none;
160+
margin-left: -0.75em;
161+
position: absolute;
162+
}
163+
164+
@media screen and (prefers-color-scheme: dark) {
165+
.anchor::before {
166+
color: hsla(0, 0%, 100%, 0.75);
167+
}
168+
}
169+
170+
.anchor:hover::before {
171+
display: inline;
172+
}
173+
174+
@media (hover: none) {
175+
.anchor:hover::before {
176+
visibility: hidden;
177+
}
178+
}

‎docs/theme.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,13 @@
5050
border: 1px solid #cacaca;
5151
}
5252

53+
@media screen and (prefers-color-scheme: dark) {
54+
.slide {
55+
background: #333;
56+
border: 1px solid #4a4a5a;
57+
}
58+
}
59+
5360
.slide > span {
5461
color: #8cc9f0;
5562
font-weight: bold;

0 commit comments

Comments
 (0)