Skip to content

Commit 06786fb

Browse files
committed
[docs] various style theme improvements
1 parent cd31382 commit 06786fb

File tree

5 files changed

+267
-7
lines changed

5 files changed

+267
-7
lines changed

site/src/styles/copy-snippet.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
}
99

1010
.snippet-for-copy {
11-
border: 1px solid hsla(0, 0%, 0%, .15);
11+
/* border: 1px solid hsla(0, 0%, 0%, .15); */
1212
border-radius: 1px;
13-
background: hsla(0, 0%, 0%, .075);
13+
/* background: hsla(0, 0%, 0%, .075); */
1414
margin: 10px 0;
1515
font-size: .95em;
1616
}

site/src/styles/github-markdown.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
color: hsl(226, 52%, 27%) !important;
1111
}
1212

13+
.markdown-body h1, h2, h3, h4, h5 {
14+
/* Google Sans is for headlines only per Google guidelines*/
15+
font-family: Arial, Helvetica, sans-serif !important;
16+
}
17+
1318
@media (max-width: 767px) {
1419
.markdown-body {
1520
padding: 15px;

site/src/styles/main.css

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ p, ul {
9999

100100
.page-header__navigation li {
101101
display: inline;
102-
margin-right: 0.6rem;
102+
margin: 6px 0px 0px 15px;
103103
}
104104

105105
.page-header__navigation li:last-child {
@@ -223,11 +223,15 @@ main.page-main {
223223
}
224224

225225
.secondary-font-color {
226-
/* TODO: opt for font color */
227-
color: hsl(330, 73%, 49%);
226+
color: #fe8ec6;
227+
}
228+
229+
.tertiary-font-color {
230+
color: #d74b91;
228231
}
229232

230233
main.page-main .heading {
234+
letter-spacing: -1px;
231235
font-size: 1.5em;
232236
font-weight: 900;
233237
margin: 0;
@@ -258,7 +262,7 @@ main.page-main .heading em {
258262

259263
@media (min-width: 600px) {
260264
main.page-main .heading {
261-
font-size: 2em;
265+
font-size: 2.1em;
262266
margin: 24px 0 18px 0;
263267
}
264268

@@ -268,7 +272,7 @@ main.page-main .heading em {
268272
}
269273

270274
.page-header__subtitle {
271-
margin: 1em 0;
275+
margin: 1.7em 0;
272276
}
273277

274278
.page-header__logo-image {

site/src/styles/prism.css

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
/**
2+
* Shades of Purple Theme for Prism.js
3+
*
4+
* @author Ahmad Awais <https://twitter.com/MrAhmadAwais/>
5+
* @support Follow/tweet at https://twitter.com/MrAhmadAwais/
6+
*/
7+
8+
code[class*='language-'],
9+
pre[class*='language-'] {
10+
color: #9efeff;
11+
direction: ltr;
12+
text-align: left;
13+
white-space: pre;
14+
word-spacing: normal;
15+
word-break: normal;
16+
17+
-moz-tab-size: 4;
18+
-o-tab-size: 4;
19+
tab-size: 4;
20+
21+
-webkit-hyphens: none;
22+
-moz-hyphens: none;
23+
-ms-hyphens: none;
24+
hyphens: none;
25+
26+
font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
27+
font-weight: 400;
28+
font-size: 17px;
29+
line-height: 25px;
30+
letter-spacing: 0.5px;
31+
text-shadow: 0 1px #222245;
32+
}
33+
34+
pre[class*='language-']::-moz-selection,
35+
pre[class*='language-'] ::-moz-selection,
36+
code[class*='language-']::-moz-selection,
37+
code[class*='language-'] ::-moz-selection,
38+
pre[class*='language-']::selection,
39+
pre[class*='language-'] ::selection,
40+
code[class*='language-']::selection,
41+
code[class*='language-'] ::selection {
42+
color: inherit;
43+
background: #a599e9;
44+
}
45+
46+
/* Code blocks. */
47+
pre[class*='language-'] {
48+
padding: 2em;
49+
margin: 0.5em 0;
50+
overflow: auto;
51+
}
52+
53+
:not(pre) > code[class*='language-'],
54+
pre[class*='language-'] {
55+
background: #1e1e3f;
56+
}
57+
58+
/* Inline code */
59+
:not(pre) > code[class*='language-'] {
60+
padding: 0.1em;
61+
border-radius: 0.3em;
62+
}
63+
64+
.token {
65+
font-weight: 400;
66+
}
67+
68+
.token.comment,
69+
.token.prolog,
70+
.token.cdata {
71+
color: #b362ff;
72+
}
73+
74+
.token.delimiter,
75+
.token.keyword,
76+
.token.selector,
77+
.token.important,
78+
.token.atrule {
79+
color: #ff9d00;
80+
}
81+
82+
.token.operator,
83+
.token.attr-name {
84+
color: rgb(255, 180, 84);
85+
}
86+
87+
.token.punctuation {
88+
color: #ffffff;
89+
}
90+
91+
.token.boolean {
92+
color: rgb(255, 98, 140);
93+
}
94+
95+
.token.tag,
96+
.token.tag .punctuation,
97+
.token.doctype,
98+
.token.builtin {
99+
color: rgb(255, 157, 0);
100+
}
101+
102+
.token.entity,
103+
.token.symbol {
104+
color: #6897bb;
105+
}
106+
107+
.token.number {
108+
color: #ff628c;
109+
}
110+
111+
.token.property,
112+
.token.constant,
113+
.token.variable {
114+
color: #ff628c;
115+
}
116+
117+
.token.string,
118+
.token.char {
119+
color: #a5ff90;
120+
}
121+
122+
.token.attr-value,
123+
.token.attr-value .punctuation {
124+
color: #a5c261;
125+
}
126+
127+
.token.attr-value .punctuation:first-child {
128+
color: #a9b7c6;
129+
}
130+
131+
.token.url {
132+
color: #287bde;
133+
text-decoration: underline;
134+
}
135+
136+
.token.function {
137+
color: rgb(250, 208, 0);
138+
}
139+
140+
.token.regex {
141+
background: #364135;
142+
}
143+
144+
.token.bold {
145+
font-weight: bold;
146+
}
147+
148+
.token.italic {
149+
font-style: italic;
150+
}
151+
152+
.token.inserted {
153+
background: #00ff00;
154+
}
155+
156+
.token.deleted {
157+
background: #ff000d;
158+
}
159+
160+
code.language-css .token.property,
161+
code.language-css .token.property + .token.punctuation {
162+
color: #a9b7c6;
163+
}
164+
165+
code.language-css .token.id {
166+
color: #ffc66d;
167+
}
168+
169+
code.language-css .token.selector > .token.class,
170+
code.language-css .token.selector > .token.attribute,
171+
code.language-css .token.selector > .token.pseudo-class,
172+
code.language-css .token.selector > .token.pseudo-element {
173+
color: #ffc66d;
174+
}
175+
176+
.token.class-name {
177+
color: #fb94ff;
178+
}
179+
180+
.token.operator,
181+
.token.entity,
182+
.token.url,
183+
.language-css .token.string,
184+
.style .token.string {
185+
background: none;
186+
}
187+
188+
pre .line-highlight,
189+
pre .line-highlight.line-highlight,
190+
pre > code.line-highlight {
191+
margin-top: 36px;
192+
background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
193+
}
194+
195+
pre .line-highlight:before,
196+
pre > code.line-highlight:before,
197+
pre .line-highlight[data-end]:after,
198+
pre > code.line-highlight[data-end]:after {
199+
content: '';
200+
}
201+
202+
/* edits */
203+
204+
pre.language-html, pre.language-js, pre.language-bash, pre.language-css {
205+
font-size: 15px;
206+
}

site/yarn.lock

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
# yarn lockfile v1
33

44

5+
"@11ty/eleventy-plugin-syntaxhighlight@^3.0.1":
6+
version "3.0.1"
7+
resolved "https://registry.yarnpkg.com/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-3.0.1.tgz#24fb872d1bb8f8dee8d6df22d3614aaff6b45306"
8+
integrity sha512-+cXc5oyFagCat+JgIh+4cI1otQMVYSsXjxj2/8J78I+p6ICvCfObzvi7PTXvDPbwXOQP8RkcB4DYOP+MKkcPAw==
9+
dependencies:
10+
prismjs "^1.17.1"
11+
512
"@11ty/eleventy@^0.8.3":
613
version "0.8.3"
714
resolved "https://registry.yarnpkg.com/@11ty/eleventy/-/eleventy-0.8.3.tgz#94c417f7b658e78ab5f9ce64b91ff32b4ae5de31"
@@ -508,6 +515,15 @@ clean-css@^4.1.11, clean-css@^4.2.1:
508515
dependencies:
509516
source-map "~0.6.0"
510517

518+
clipboard@^2.0.0:
519+
version "2.0.6"
520+
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
521+
integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
522+
dependencies:
523+
good-listener "^1.2.2"
524+
select "^1.1.2"
525+
tiny-emitter "^2.0.0"
526+
511527
cliui@^2.1.0:
512528
version "2.1.0"
513529
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -707,6 +723,11 @@ del@^2.2.0:
707723
pinkie-promise "^2.0.0"
708724
rimraf "^2.2.8"
709725

726+
delegate@^3.1.2:
727+
version "3.2.0"
728+
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
729+
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
730+
710731
delegates@^1.0.0:
711732
version "1.0.0"
712733
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -1219,6 +1240,13 @@ gonzales-pe@^4.2.3:
12191240
dependencies:
12201241
minimist "1.1.x"
12211242

1243+
good-listener@^1.2.2:
1244+
version "1.2.2"
1245+
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
1246+
integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
1247+
dependencies:
1248+
delegate "^3.1.2"
1249+
12221250
graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
12231251
version "4.2.3"
12241252
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
@@ -2328,6 +2356,13 @@ pretty@^2.0.0:
23282356
extend-shallow "^2.0.1"
23292357
js-beautify "^1.6.12"
23302358

2359+
prismjs@^1.17.1:
2360+
version "1.20.0"
2361+
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"
2362+
integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==
2363+
optionalDependencies:
2364+
clipboard "^2.0.0"
2365+
23312366
process-nextick-args@~2.0.0:
23322367
version "2.0.1"
23332368
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -2652,6 +2687,11 @@ section-matter@^1.0.0:
26522687
extend-shallow "^2.0.1"
26532688
kind-of "^6.0.0"
26542689

2690+
select@^1.1.2:
2691+
version "1.1.2"
2692+
resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
2693+
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
2694+
26552695
semver-compare@^1.0.0:
26562696
version "1.0.0"
26572697
resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -3046,6 +3086,11 @@ time-require@^0.1.2:
30463086
pretty-ms "^0.2.1"
30473087
text-table "^0.2.0"
30483088

3089+
tiny-emitter@^2.0.0:
3090+
version "2.1.0"
3091+
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
3092+
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
3093+
30493094
to-array@0.1.4:
30503095
version "0.1.4"
30513096
resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"

0 commit comments

Comments
 (0)