Skip to content

Commit c067f60

Browse files
nkrambonkrambo
authored
feat(Homepage): darkmode support (#1005)
1 parent b492ae3 commit c067f60

File tree

13 files changed

+308
-358
lines changed

13 files changed

+308
-358
lines changed

‎_includes/new-includes/header/navigation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<ul class="navigation-items">
22
{% for item in site.data.new-data.header.navigation %}
33
<li class="nav-item {% if page.url == item.url %}active{% endif %}">
4-
<a href="{{ item.url }}" data-text="{{ item.header }}">{{ item.header }}</a>
4+
<a href="{{ item.url }}" data-text="{{ item.header }}"><span>{{ item.header }}</span></a>
55
</li>
66
{% endfor %}
77
<li class="border">
88
<span />
99
</li>
1010
<li class="nav-item {% if page.url contains '/install' %}active{% endif %}">
11-
<a href="/install" data-text="Install">Install <span>({{ site.data.builds.swift_releases.last.name }})</span></a>
11+
<a href="/install" data-text="Install"><span>Install <span>({{ site.data.builds.swift_releases.last.name }})</span></span></a>
1212
</li>
1313
</ul>

‎assets/stylesheets/_screen.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
@use './core/_helpers' as mixhelpers;
22

3-
*,
4-
*:before,
5-
*:after {
6-
-moz-box-sizing: border-box;
7-
-webkit-box-sizing: border-box;
8-
box-sizing: border-box;
9-
}
10-
113
html,
124
body {
135
display: flex;
@@ -208,6 +200,7 @@ h2.header-with-anchor {
208200

209201
main {
210202
padding-top: 66px; // height of nav
203+
background-color: var(--color-fill);
211204

212205
.callout {
213206
display: grid;

‎assets/stylesheets/application.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,11 @@ body {
2727

2828
@include dark-theme;
2929
}
30+
31+
// Use linear-gradient so over scroll color matches footer background color, when user rubberbands.
32+
background-image: linear-gradient(
33+
180deg,
34+
var(--nav-scroller-gradient-start) 50%,
35+
var(--nav-scroller-gradient-end) 50%
36+
);
3037
}

‎assets/stylesheets/new-stylesheets/_core.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,28 @@ body {
1616
transition:
1717
background-color 0.3s ease,
1818
color 0.3s ease;
19-
@include light-theme;
19+
@include light-theme;
2020

2121
&[data-color-scheme='light'] {
2222
color-scheme: light;
2323
}
2424

2525
&[data-color-scheme='dark'] {
2626
color-scheme: dark;
27-
2827
@include dark-theme;
2928
}
3029

3130
// TODO: Remove this and move the rule in body
3231
#install {
3332
color: var(--site-text-color);
3433
}
34+
35+
// Use linear-gradient so over scroll color matches footer background color, when user rubberbands.
36+
background-image: linear-gradient(
37+
180deg,
38+
var(--nav-scroller-gradient-start) 50%,
39+
var(--nav-scroller-gradient-end) 50%
40+
);
3541
}
3642

3743
h2 {
@@ -42,6 +48,7 @@ main {
4248
display: flex;
4349
flex-direction: column;
4450
min-height: 100vh;
51+
background-color: var(--page-bg);
4552
}
4653

4754
code {

‎assets/stylesheets/new-stylesheets/_syntax.scss‎

Lines changed: 140 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -28,71 +28,167 @@
2828
}
2929
}
3030

31-
.code-box pre {
32-
button {
33-
border-radius: 0;
34-
}
35-
}
36-
3731
pre.highlight {
38-
background: #fff;
39-
padding: 1em;
40-
overflow-x: auto;
41-
border-radius: 10px;
42-
font-size: 15px;
32+
background: var(--color-code-background);
33+
font-size: 14px;
4334
line-height: 1.53;
35+
overflow-x: auto;
4436

45-
.c,
46-
.cm,
47-
.cp,
48-
.c1,
37+
.c, /* Comment */
38+
.cm, /* Comment.Multiline */
39+
.cp, /* Comment.Preproc */
40+
.c1, /* Comment.Single */
4941
.cs {
50-
color: #6e6e6e;
51-
font-style: italic;
42+
/* Comment.Special */
43+
color: var(--color-syntax-comments);
5244
}
5345

54-
.k,
55-
.kt,
46+
.k, /* Keyword */
47+
.kc, /* Keyword.Constant */
48+
.kd, /* Keyword.Declaration */
49+
.kp, /* Keyword.Pseudo */
5650
.kr,
57-
.kd {
58-
color: #ad3da4;
51+
.kt, /* Keyword.Reserved */
52+
.nb {
53+
/* Name.Builtin */
54+
color: var(--color-syntax-keywords);
5955
}
6056

61-
.s,
62-
.s1,
63-
.s2,
64-
.sd {
65-
color: #d12f1b;
57+
.nv, /* Name.Variable */
58+
.nf {
59+
/* Name.Function */
60+
color: var(--color-syntax-project-constants);
6661
}
6762

68-
.nf {
69-
color: #703daa;
63+
.n {
64+
color: #B181EC;
7065
}
7166

72-
.nc,
73-
.no,
74-
.nt {
75-
color: #3b5bdb;
67+
.o, .p {
68+
color: var(--color-syntax-brackets-dots);
69+
}
70+
71+
.s, /* Literal.String */
72+
.sb, /* Literal.String.Backtick */
73+
.sc, /* Literal.String.Char >> --color-syntax-characters */
74+
.sd, /* Literal.String.Doc */
75+
.s2, /* Literal.String.Double */
76+
.se, /* Literal.String.Escape */
77+
.sh, /* Literal.String.Heredoc */
78+
.si, /* Literal.String.Interpol */
79+
.s1, /* Literal.String.Single */
80+
.sx {
81+
/* Literal.String.Other */
82+
color: var(--color-syntax-strings);
83+
}
84+
85+
.na {
86+
/* Name.Attribute */
87+
color: var(--color-syntax-attributes);
7688
}
7789

78-
.nv,
79-
.vg,
90+
.nc, /* Name.Class */
91+
.ni, /* Name.Entity */
92+
.no, /* Name.Constant */
93+
.vc, /* Name.Variable.Class */
94+
.vg, /* Name.Variable.Global */
8095
.vi {
81-
color: #333;
96+
/* Name.Variable.Instance */
97+
color: var(--color-syntax-other-type-names);
98+
}
99+
100+
.err, /* Error */
101+
.gr, /* Generic.Error */
102+
.gt, /* Generic.Traceback */
103+
.ne {
104+
/* Name.Exception */
105+
color: var(--color-syntax-strings);
106+
}
107+
108+
.m, /* Literal.Number */
109+
.mf, /* Literal.Number.Float */
110+
.mh, /* Literal.Number.Hex */
111+
.mi, /* Literal.Number.Integer */
112+
.il, /* Literal.Number.Integer.Long */
113+
.mo {
114+
/* Literal.Number.Oct */
115+
color: var(--color-syntax-numbers);
116+
}
117+
118+
.ge {
119+
/* Generic.Emph */
120+
font-style: italic;
121+
}
122+
123+
.nt {
124+
/* Name.Tag */
125+
color: var(--color-syntax-characters);
126+
}
127+
128+
.gd, /* Generic.Deleted */
129+
.gd .x {
130+
/* Generic.Deleted.Specific */
131+
color: var(--color-syntax-plain-text);
132+
background-color: var(--color-fill-red-secondary);
133+
}
134+
135+
.gi, /* Generic.Inserted */
136+
.gi .x {
137+
/* Generic.Inserted.Specific */
138+
color: var(--color-syntax-plain-text);
139+
background-color: var(--color-fill-green-secondary);
140+
}
141+
142+
.gh, /* Generic.Heading */
143+
.bp, /* Name.Builtin.Pseudo */
144+
.go, /* Generic.Output */
145+
.gp, /* Generic.Prompt */
146+
.gu, /* Generic.Subheading */
147+
.w {
148+
/* Text.Whitespace */
149+
color: var(--color-syntax-comments);
150+
}
151+
152+
.nn {
153+
/* Name.Namespace */
154+
color: var(--color-syntax-other-declarations);
82155
}
83156

84-
.m,
85-
.mi,
86-
.mf {
87-
color: #098658;
157+
.sr {
158+
/* Literal.String.Regex */
159+
color: var(--color-figure-green);
88160
}
89161

90-
.o {
91-
color: #000;
162+
.ss {
163+
/* Literal.String.Symbol */
164+
color: var(--color-syntax-heading);
92165
}
93166

94-
.err {
95-
background-color: #ffeef0;
96-
color: #d73a49;
167+
/* Make prompts non-selectable, to make it easy to copy and paste */
168+
.gp {
169+
-webkit-user-select: none;
170+
user-select: none;
171+
172+
& + .w {
173+
-webkit-user-select: none;
174+
user-select: none;
175+
}
97176
}
98177
}
178+
179+
.language-console {
180+
color: var(--color-syntax-plain-text);
181+
}
182+
183+
// Explicit syntax highlighting for C++ code blocks:
184+
185+
.language-cpp .cp,
186+
.language-cpp .kt,
187+
.language-cpp .nl,
188+
.language-cpp .o,
189+
.language-c\+\+ .cp,
190+
.language-c\+\+ .kt,
191+
.language-c\+\+ .nl,
192+
.language-c\+\+ .o {
193+
color: var(--color-syntax-keywords);
194+
}

0 commit comments

Comments
 (0)