Skip to content

Commit cd54fe0

Browse files
chrisspieglchrisspiegl
committedJun 11, 2024
chore: update consulting page and change the whole design to a lighter color schema with a new font choice.
1 parent 342ca81 commit cd54fe0

14 files changed

+6148
-4972
lines changed
 

‎_includes/layout.pug

+19-18
Original file line numberDiff line numberDiff line change
@@ -41,25 +41,26 @@ body
4141
if meta.build.env === 'development'
4242
header.development(style="padding: .2rem 0; margin: 0; background-color: rgba(255, 105, 97, 0.5); min-width: 100%; width: 100%; min-height: 0; height: auto; display: block; border-bottom: 2px solid rgb(255,105,97); text-align: center;")= `DEVELOPMENT | ${ global.dateHtml(meta.build.timestamp) }`
4343
header.container
44-
section
45-
- const avatarImage = '/assets/images/other/avatar-spiegl-chris-leica-2022-08-20-L1010008.jpg'
46-
img#avatar(srcset=`${meta.imageResizer(320, 0, avatarImage)} 640w, ${meta.imageResizer(640, 0, avatarImage)} 1280w, ${meta.imageResizer(1280, 0, avatarImage)} 1920w` src=avatarImage, alt="")
47-
div.text
48-
h1
49-
a(href="/") Chris Spiegl
50-
if (nomadlist.now.string !== 'Unknown')
51-
p
52-
small: em Currently in #[a(href='/location')= nomadlist.now.string]
44+
section.top
45+
section.header
46+
- const avatarImage = '/assets/images/other/avatar-spiegl-chris-leica-2022-08-20-L1010008.jpg'
47+
img#avatar(srcset=`${meta.imageResizer(320, 0, avatarImage)} 640w, ${meta.imageResizer(640, 0, avatarImage)} 1280w, ${meta.imageResizer(1280, 0, avatarImage)} 1920w` src=avatarImage, alt="")
48+
div.text
49+
h1
50+
a(href="/") Chris Spiegl
51+
if (nomadlist.now.string !== 'Unknown')
52+
p
53+
small: em Currently in #[a(href='/location')= nomadlist.now.string]
5354

54-
section.social
55-
a(href="/youtube" title="YouTube Profile — External Link" target="_blank")
56-
i(class="fa-brands fa-youtube")
57-
a(href="/instagram" title="Instagram Profile — External Link" target="_blank")
58-
i(class="fa-brands fa-instagram")
59-
a(href="/linkedin" title="LinkedIn Profile — External Link" target="_blank")
60-
i(class="fa-brands fa-linkedin")
61-
a(href="/twitter" title="Twitter Profile — External Link" target="_blank")
62-
i(class="fa-brands fa-twitter")
55+
section.social
56+
a(href="/youtube" title="YouTube Profile — External Link" target="_blank")
57+
i(class="fa-brands fa-youtube")
58+
a(href="/instagram" title="Instagram Profile — External Link" target="_blank")
59+
i(class="fa-brands fa-instagram")
60+
a(href="/linkedin" title="LinkedIn Profile — External Link" target="_blank")
61+
i(class="fa-brands fa-linkedin")
62+
a(href="/twitter" title="Twitter Profile — External Link" target="_blank")
63+
i(class="fa-brands fa-twitter")
6364

6465
nav.navMain
6566
ul

‎assets/scss/_blockquote.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
blockquote {
22
margin: 0 1.5rem 2rem;
3-
border-left: 4px solid var(--color-light);
4-
color: var(--color-lightest);
3+
border-left: 4px solid var(--color-lighter);
4+
color: var(--color-darkest);
55
padding-left: .75rem;
66
padding-bottom: 0;
77
p:last-child {

‎assets/scss/_footer.scss

+12-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,17 @@ footer {
88

99
#search {
1010
margin: 4rem auto;
11-
width: 50%;
11+
width: 100%;
12+
form {
13+
display: grid;
14+
grid-gap: 1rem;
15+
grid-template-columns: 3fr 1fr;
16+
padding-bottom: 2rem;
17+
18+
@media screen and (max-width: $break-mobile) {
19+
grid-template-columns: 1fr;
20+
}
21+
}
1222
}
1323

1424
ul {
@@ -41,4 +51,4 @@ footer {
4151
color: inherit;
4252
text-decoration: none;
4353
}
44-
}
54+
}

‎assets/scss/_header.scss

+55-29
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,79 @@ body>header {
22
padding-top: 2rem;
33
padding-bottom: 2rem;
44

5-
>section {
5+
section.top {
66
display: flex;
7-
justify-content: center;
7+
justify-content: space-between;
88
align-items: center;
99
padding-bottom: 2rem;
1010

11-
#avatar {
12-
// position: absolute;
13-
border-radius: 50%;
14-
width: 5rem;
15-
height: 5rem;
16-
margin-right: 1rem;
11+
@media screen and (max-width: calc($break-mobile + 200px)) {
12+
flex-direction: column;
13+
gap: 2rem;
1714
}
1815

19-
.text {
20-
text-align: left;
21-
margin-top: 1.2rem;
16+
section.header {
17+
display: flex;
18+
justify-content: start;
19+
align-items: center;
2220

23-
h1 {
24-
// text-align: center;
25-
margin-bottom: 0;
26-
padding: 0;
27-
line-height: 2rem;
21+
#avatar {
22+
// position: absolute;
23+
border-radius: 50%;
24+
width: 5rem;
25+
height: 5rem;
26+
margin-right: 1rem;
2827
}
2928

30-
a {
31-
text-decoration: none;
32-
color: var(--color-body);
33-
font-weight: normal;
29+
.text {
30+
text-align: left;
31+
// margin-top: 1rem;
32+
font-family: var(--font-serif);
33+
34+
h1 {
35+
font-family: var(--font-serif);
36+
// text-transform: uppercase;
37+
// text-align: center;
38+
margin-bottom: 0;
39+
padding: 0;
40+
line-height: 2rem;
41+
}
3442

35-
&:hover {
43+
a {
44+
font-family: var(--font-serif);
3645
text-decoration: none;
46+
color: var(--color-body);
47+
font-weight: bold;
48+
49+
&:hover {
50+
text-decoration: none;
51+
}
52+
53+
}
54+
55+
em, em a {
56+
font-weight: normal;
57+
font-style: normal;
3758
}
38-
}
3959

40-
p {
41-
text-align: center;
42-
padding: 0;
43-
margin: 0;
60+
p {
61+
text-align: center;
62+
padding: 0;
63+
margin: 0;
64+
}
4465
}
4566
}
4667

47-
&.social {
68+
.social {
69+
display: flex;
70+
flex-direction: row;
71+
justify-content: end;
72+
align-items: center;
73+
4874
a {
4975
display: block;
50-
padding: 0 3rem;
51-
color: #ffffff;
76+
padding: 0 1rem;
77+
color: var(--color-foreground);
5278
font-size: 1.5rem;
5379

5480
&:hover,

‎assets/scss/style.scss

+61-29
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
$content-width: 640px;
2-
$break-mobile: $content-width+100px;
3-
@import url('https://fonts.googleapis.com/css?family=Vollkorn:400,400i,700,700i&display=swap');
1+
// $content-width: 640px;
2+
$content-width: 980px;
3+
$break-mobile: $content-width / 2;
4+
// @import url('https://fonts.googleapis.com/css?family=Vollkorn:400,400i,700,700i&display=swap');
5+
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
46

57
:root {
68
/* GRAYS */
@@ -51,18 +53,22 @@ $break-mobile: $content-width+100px;
5153

5254
--color-white: #fff;
5355

54-
--color-foreground: var(--color-white);
55-
--color-background: var(--color-dark);
56+
--color-foreground: #86868b;
57+
--color-background: #f5f5f7;
5658
--color-bg-contrast: var(--color-gray-95);
59+
// --color-foreground: var(--color-white);
60+
// --color-background: var(--color-dark);
61+
// --color-bg-contrast: var(--color-gray-95);
5762
/* table even row */
5863

5964
--color-body: var(--color-foreground);
60-
--color-nav-text: var(--color-white);
65+
--color-nav-text: #86868b;
66+
// --color-nav-text: var(--color-white);
6167
--color-nav-hover: var(--color-orange);
6268
--color-heading: var(--color-gray-20);
6369
--color-figure-caption: var(--color-gray-40);
6470
--color-link: var(--color-orange);
65-
--color-footer: var(--color-light);
71+
--color-footer: var(--color-lighter);
6672
--color-code: var(--color-lighter);
6773
/* naked code */
6874
--color-code-bg: var(--color-dark);
@@ -93,10 +99,15 @@ $break-mobile: $content-width+100px;
9399

94100

95101

96-
--font-system: 'Vollkorn', -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
97-
--font-serif: Georgia, serif;
98-
--font-sans-serif: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
99-
--font-mono: Consolas, Menlo, Monaco, "Courier New", Courier, monospace;
102+
// --font-system: 'Vollkorn', -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
103+
--font-system: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
104+
--font-serif: "Playfair Display", Georgia, serif;
105+
// font-family: -apple-system-ui-serif, ui-serif, 'Georgia', serif;
106+
// --font-sans-serif: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
107+
--font-sans-serif: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
108+
// --font-mono: Consolas, Menlo, Monaco, "Courier New", Courier, monospace;
109+
--font-mono: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
110+
100111

101112
--font-body: var(--font-system);
102113
--font-caption: var(--font-system);
@@ -114,16 +125,27 @@ $break-mobile: $content-width+100px;
114125
https://www.modularscale.com/?1&em&1.25
115126
*/
116127

117-
--font-size-plus-3: 2em;
118-
--font-size-plus-2: 1.953em;
119-
--font-size-plus-1: 1.563em;
120-
--font-size-plus-0: 1.125em;
121-
--font-size-base: 1.125em;
122-
--font-size-minus-0: 1.125em;
123-
--font-size-minus-1: 1em;
124-
--font-size-minus-2: 0.9em;
125-
--font-size-minus-3: 0.7em;
126-
--font-size-minus-4: 0.5em;
128+
--font-size-plus-3: 2.93rem;
129+
--font-size-plus-2: 2.344rem;
130+
--font-size-plus-1: 1.875rem;
131+
--font-size-plus-0: 1.5rem;
132+
--font-size-base: 1.5rem;
133+
--font-size-minus-0: 1.5rem;
134+
--font-size-minus-1: 1.2rem;
135+
--font-size-minus-2: 0.96rem;
136+
--font-size-minus-3: 0.768rem;
137+
--font-size-minus-4: 0.614rem;
138+
139+
// --font-size-plus-3: 2em;
140+
// --font-size-plus-2: 1.953em;
141+
// --font-size-plus-1: 1.563em;
142+
// --font-size-plus-0: 1.125em;
143+
// --font-size-base: 1.125em;
144+
// --font-size-minus-0: 1.125em;
145+
// --font-size-minus-1: 1em;
146+
// --font-size-minus-2: 0.9em;
147+
// --font-size-minus-3: 0.7em;
148+
// --font-size-minus-4: 0.5em;
127149
}
128150

129151
*,
@@ -137,20 +159,21 @@ p,
137159
a,
138160
blockquote {
139161
font-family: var(--font-body);
140-
font-weight: normal;
162+
// font-weight: normal;
141163
}
142164

143165
h1 {
144-
font-size: var(--font-size-plus-2);
145-
letter-spacing: .25rem;
166+
font-size: var(--font-size-plus-1);
167+
// letter-spacing: .25rem;
168+
// letter-spacing: -0.015rem;
146169
}
147170

148171
h2 {
149-
font-size: var(--font-size-plus-1);
172+
font-size: var(--font-size-plus-0);
150173
}
151174

152175
h3 {
153-
font-size: var(--font-size-plus-1);
176+
font-size: var(--font-size-plus-0);
154177
color: var(--color-lighter);
155178
}
156179

@@ -196,6 +219,10 @@ details {
196219
padding-bottom: 2rem;
197220
}
198221

222+
ul ul {
223+
padding-bottom: unset;
224+
}
225+
199226
em,
200227
hr,
201228
span,
@@ -206,7 +233,7 @@ em {
206233

207234
strong {
208235
font-weight: bold;
209-
letter-spacing: .05rem;
236+
// letter-spacing: .05rem;
210237
}
211238

212239
details {
@@ -230,7 +257,7 @@ body {
230257
margin: auto;
231258
font-family: var(--font-body);
232259
font-weight: 400;
233-
line-height: 1.6;
260+
line-height: 1.4;
234261
font-size: var(--font-size-base);
235262
color: var(--color-body);
236263
background-color: var(--color-background);
@@ -368,6 +395,7 @@ img[src*="#signature"],
368395

369396
h2 {
370397
margin-bottom: 0;
398+
padding-top: 8rem;
371399

372400
a {
373401
color: var(--color-body);
@@ -382,7 +410,7 @@ h2 {
382410

383411
pre,
384412
code {
385-
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
413+
font-family: var(--font-code);
386414
line-height: 1.5;
387415
}
388416

@@ -552,6 +580,10 @@ p code {
552580
display: block !important;
553581
}
554582

583+
.btn-center {
584+
margin: auto;
585+
}
586+
555587
#newsletter-embed {
556588
padding: 3rem 0 4rem;
557589
}

0 commit comments

Comments
 (0)
Failed to load comments.