Skip to content

Commit 1da8ed0

Browse files
aschultzaschultz
committed
Add some basic syntax colors.
Sort sitemap to reduce file churn. Fix table sizing.
1 parent 1ec4563 commit 1da8ed0

File tree

9 files changed

+256
-62
lines changed

9 files changed

+256
-62
lines changed

‎README.md

+16-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1+
## Summary
12

2-
Folder hierarchy:
3-
/docs
4-
Build output. Contents of this path are hosted on GitHub Pages.
5-
3+
Backing repo for GitHub Pages
4+
5+
## Folder hierarchy
6+
7+
- docs/
8+
- Build output. Contents of this path are hosted on GitHub Pages.
9+
- src/
10+
- assets/
11+
- Static asset files (fonts, images, etc) that are imported into React pages
12+
- components/
13+
- Shared React components
14+
- pages/
15+
- Top-level site pages
16+
- posts/
17+
- Blog posts. These are all Markdown files that get translated using `components\post.tsx`

‎gatsby-config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = {
44
siteMetadata: {
55
siteUrl: `https://aschultz.github.io/`,
66
title: `a.schultz`,
7-
description: `Pratical solutions to every day problems`,
7+
description: `Pratical solutions to everyday problems`,
88
},
99
plugins: [
1010
{
@@ -15,7 +15,7 @@ module.exports = {
1515
serialize: (args) => {
1616
const defaults = require(`gatsby-plugin-sitemap/internals`).defaultOptions;
1717
const data = defaults.serialize(args);
18-
data.sort((x) => x.url);
18+
data.sort((left, right) => (left.url < right.url ? -1 : left.url > right.url ? 1 : 0));
1919
return data;
2020
},
2121
},

‎src/components/_reset.css

-5
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,6 @@ ul li::before {
3636
content: "\200B"; /* Safari fix */
3737
}
3838

39-
pre {
40-
overflow-x: auto;
41-
white-space: pre;
42-
}
43-
4439
textarea {
4540
margin: 0;
4641
overflow: auto;

‎src/components/code.css

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
/*
2+
Code globals
3+
*/
4+
:root {
5+
--code-black: #222222;
6+
--code-lightgray: #d4d4d4;
7+
--code-gray: #707070;
8+
--code-white: #ffffff;
9+
10+
--code-emerald: #24ccaa;
11+
--code-green: #a6e22e;
12+
--code-yellow: #e6db74;
13+
--code-gold: #ccbe3c;
14+
/* --code-orange: #ffa07a; */
15+
--code-orange: #ce9178;
16+
/* --code-blue: #66d9ef; */
17+
--code-lightblue: #9cdcfe;
18+
--code-blue: #569cd6;
19+
--code-slateblue: #2c3e50;
20+
--code-purple: #ae81ff;
21+
--code-pink: #f92672;
22+
--code-red: #ff5858;
23+
24+
--code-background: var(--code-black);
25+
--code-text: var(--code-lightgray);
26+
--code-keyword: var(--code-blue);
27+
--code-comment: var(--code-gray);
28+
--code-string: var(--code-orange);
29+
--code-function: var(--code-gold);
30+
--code-class: var(--code-emerald);
31+
--code-selector: var(--code-orange);
32+
--code-operator: var(--code-green);
33+
}
34+
35+
pre,
36+
code {
37+
direction: ltr;
38+
text-align: left;
39+
white-space: pre;
40+
word-spacing: normal;
41+
word-break: normal;
42+
hyphens: none;
43+
tab-size: 4;
44+
45+
font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
46+
}
47+
48+
/*
49+
Inline
50+
*/
51+
:not(pre) > code {
52+
background: #eeeeee;
53+
border: 1px solid #cccccc;
54+
padding: 0 4px;
55+
56+
font-size: inherit;
57+
line-height: inherit;
58+
}
59+
60+
/*
61+
Code boxes
62+
*/
63+
pre {
64+
font-size: 13px;
65+
line-height: 1.5;
66+
67+
overflow: scroll auto;
68+
border-radius: 3px;
69+
box-shadow: inset 0 0 4px 0 #ccc;
70+
padding: 1em;
71+
background-color: var(--code-background);
72+
color: var(--code-text);
73+
text-shadow: 0 1px #000000;
74+
75+
/*
76+
There seems to be a Chrome bug if border is non-zero.
77+
Page scrolling can get stuck if the mouse is over the pre.
78+
Seems related to overflow.
79+
*/
80+
border: none;
81+
}
82+
pre > code {
83+
position: relative;
84+
}
85+
pre::-webkit-scrollbar {
86+
width: 16px;
87+
height: 16px;
88+
}
89+
pre::-webkit-scrollbar-thumb {
90+
border-radius: 8px;
91+
border: 6px solid transparent;
92+
box-shadow: inset 0 0 0 16px #888;
93+
}
94+
pre:hover::-webkit-scrollbar-thumb {
95+
border: 3px solid transparent;
96+
}
97+
pre::-webkit-scrollbar-thumb:hover {
98+
box-shadow: inset 0 0 0 16px #999;
99+
}
100+
101+
/*
102+
Syntax highlighting
103+
*/
104+
105+
/* Common */
106+
.token.punctuation {
107+
}
108+
.token.operator,
109+
.token.operator.arrow {
110+
color: var(--code-operator);
111+
}
112+
.token.keyword,
113+
.token.class-name .token.punctuation {
114+
color: var(--code-keyword);
115+
}
116+
.token.keyword.module,
117+
.token.keyword.control-flow {
118+
}
119+
.token.boolean,
120+
.token.number,
121+
.token.constant,
122+
.token.symbol {
123+
}
124+
125+
.token.string,
126+
.token.char {
127+
color: var(--code-string);
128+
}
129+
.token.string.url {
130+
}
131+
132+
.token.regex {
133+
}
134+
135+
.token.comment,
136+
.token.prolog {
137+
color: var(--code-comment);
138+
}
139+
140+
.token.namespace {
141+
}
142+
143+
.token.class-name,
144+
.token.maybe-class-name {
145+
color: var(--code-class);
146+
}
147+
148+
.token.function {
149+
color: var(--code-function);
150+
}
151+
152+
.token.parameter {
153+
}
154+
155+
.token.property {
156+
}
157+
158+
/* HTML, XML, CSS */
159+
.token.doctype .token.doctype-tag {
160+
}
161+
.token.doctype .token.name {
162+
}
163+
.token.tag {
164+
}
165+
.token.entity {
166+
}
167+
.token.attr-name {
168+
}
169+
.token.selector {
170+
color: var(--code-selector);
171+
}
172+
.token.atrule {
173+
}
174+
.token.unit {
175+
}
176+
.token.cdata {
177+
}
178+
.token.bold {
179+
font-weight: bolder;
180+
}
181+
.token.italic {
182+
font-style: italic;
183+
}
184+
.token.important {
185+
font-weight: bolder;
186+
}
187+
188+
/* Language overrides */

‎src/components/layout.css

+40-49
Original file line numberDiff line numberDiff line change
@@ -38,22 +38,14 @@ h3 {
3838
}
3939

4040
p,
41-
blockquote {
41+
blockquote,
42+
li {
4243
font-size: 1em;
4344
line-height: 1.5;
4445
}
45-
li {
46-
font-size: 1em;
47-
line-height: 1.2;
46+
li:not(:last-child) {
4847
margin-bottom: 0.5em;
4948
}
50-
:not(pre) > code {
51-
font-size: 1em;
52-
font-family: monospace;
53-
background: #eeeeee;
54-
border: 1px solid #cccccc;
55-
padding: 2px 4px;
56-
}
5749
a {
5850
text-decoration: none;
5951
}
@@ -64,18 +56,45 @@ a:hover {
6456
/*=============================================================
6557
LAYOUT
6658
=============================================================*/
67-
59+
:root {
60+
--site-mainWidth: 700px;
61+
}
6862
.siteRoot {
6963
min-height: 100vh;
7064

7165
display: grid;
72-
grid-template-columns: 100%;
66+
grid-template-columns: auto 1fr auto;
67+
grid-template-rows: auto 1fr auto;
7368
grid-auto-columns: 0;
74-
grid-auto-rows: auto 100% auto;
69+
grid-auto-rows: 0;
7570
grid-template-areas:
76-
"header"
77-
"main"
78-
"footer";
71+
"header header header"
72+
"main main main"
73+
"footer footer footer";
74+
75+
background: linear-gradient(90deg, #eee, #fff, #eee);
76+
}
77+
78+
.siteRoot > div.bg {
79+
grid-row: 1 / -1;
80+
grid-column: 1/-1;
81+
display: flex;
82+
flex-direction: row;
83+
justify-content: center;
84+
align-items: stretch;
85+
}
86+
div.bg-left {
87+
flex: 1;
88+
background: linear-gradient(90deg, #eee, #fff);
89+
}
90+
div.bg-right {
91+
flex: 1;
92+
background: linear-gradient(90deg, #fff, #eee);
93+
}
94+
div.bg-main {
95+
width: 100%;
96+
max-width: var(--site-mainWidth);
97+
background-color: #fff;
7998
}
8099

81100
/*=============================================================
@@ -87,11 +106,12 @@ a:hover {
87106
/* outline: 0.1px solid red; */
88107
display: flex;
89108
justify-content: center;
109+
background: #ffffff;
90110
}
91111

92112
.siteNav {
93113
flex: 1;
94-
max-width: 800px;
114+
max-width: var(--site-mainWidth);
95115

96116
padding: 0 0 0 16px;
97117

@@ -198,7 +218,7 @@ main,
198218
.ccontent > * {
199219
display: block;
200220
width: 100%;
201-
max-width: 800px;
221+
max-width: var(--site-mainWidth);
202222
padding: 0 16px;
203223
}
204224

@@ -234,35 +254,6 @@ article {
234254
margin-left: 2em;
235255
}
236256

237-
/*
238-
Customize code boxes
239-
*/
240-
pre {
241-
border-radius: 0px;
242-
border: 1px solid #ccc;
243-
box-shadow: inset 0 0 4px 0 #ccc;
244-
padding: 1em;
245-
}
246-
.gatsby-highlight > pre {
247-
margin: 0;
248-
overflow-y: hidden; /* Prevent vertical scroll sticking */
249-
}
250-
pre::-webkit-scrollbar {
251-
width: 16px;
252-
height: 16px;
253-
}
254-
pre::-webkit-scrollbar-thumb {
255-
border-radius: 8px;
256-
border: 6px solid transparent;
257-
box-shadow: inset 0 0 0 16px #888;
258-
}
259-
pre:hover::-webkit-scrollbar-thumb {
260-
border: 3px solid transparent;
261-
}
262-
pre::-webkit-scrollbar-thumb:hover {
263-
box-shadow: inset 0 0 0 16px #999;
264-
}
265-
266257
/*
267258
Customize tables
268259
*/
@@ -278,7 +269,7 @@ th {
278269
border: 1px solid #ccc;
279270
}
280271
th {
281-
background-color: rgb(103, 137, 177);
272+
background-color: #375a83;
282273
color: white;
283274
}
284275
td:first-child,

0 commit comments

Comments
 (0)