Skip to content

Commit d14984e

Browse files
colepeterscolepeters
committed
Update blog design
1 parent e460840 commit d14984e

File tree

9 files changed

+34
-61
lines changed

9 files changed

+34
-61
lines changed

‎app/elements/blog/card.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function BlogPost ({ html, state }) {
88
<style>
99
:host {
1010
display: block;
11-
background-color: white;
11+
background-color: var(--cloud-ateneo);
1212
border-radius: 0.5em;
1313
}
1414

‎app/elements/blog/featured-card.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function BlogFeaturedPost ({ html, state }) {
77
<style>
88
:host {
99
display: block;
10-
background-color: white;
10+
background-color: var(--cloud-ateneo);
1111
border-radius: 0.5em;
1212
}
1313

‎app/elements/blog/posts.mjs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default function BlogPosts({ html, state }) {
1+
export default function BlogPosts ({ html, state }) {
22
const { store } = state
33
const { posts = [], offset, limit } = store
44

@@ -22,7 +22,6 @@ export default function BlogPosts({ html, state }) {
2222
<style>
2323
section {
2424
max-width: 60rem;
25-
color: var(--dark);
2625
}
2726
</style>
2827
<section class="mi-auto pb0 pb2-sm pb4-md grid gap2">

‎app/elements/blog/series.mjs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
export default function BlogSeries({ html, state }) {
1+
export default function BlogSeries ({ html, state }) {
22
const { store } = state
33
const { post: activePost, series } = store
44

5-
const seriesMarkup = series.map((seriesPost, index) => `<blog-series-entry ${seriesPost.title === activePost.frontmatter.title ? "active" : ""} index="${index + 1}" href="${seriesPost.href}" title="${seriesPost.title}"></blog-series-entry>`).join('')
5+
const seriesMarkup = series.map((seriesPost, index) => `<blog-series-entry ${seriesPost.title === activePost.frontmatter.title ? 'active' : ''} index="${index + 1}" href="${seriesPost.href}" title="${seriesPost.title}"></blog-series-entry>`).join('')
66

77
return html`
88
<style>
99
nav {
10-
background-color: var(--smoke);
11-
border-color: var(--green);
10+
background-color: var(--smoke-halite);
11+
border-color: var(--princess);
1212
}
1313
1414
ol {

‎app/elements/markdown-content.mjs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default function MarkdownContent ({ html }) {
101101
102102
code {
103103
font-family: var(--font-mono);
104-
font-size: 0.95em; /* match body/heading x-height */
104+
font-size: 0.925em; /* match body/heading x-height */
105105
}
106106
107107
h1 code,
@@ -112,15 +112,15 @@ export default function MarkdownContent ({ html }) {
112112
}
113113
114114
:not(pre, h1, h2, h3) > code {
115-
padding: 0.1rem 0.2rem;
115+
padding: 0.125rem 0.25rem;
116116
line-height: 1rem;
117117
overflow-wrap: break-word;
118-
background-color: var(--gray-50);
118+
background-color: var(--smoke-halite);
119119
border-radius: 0.25rem;
120120
}
121121
122122
blockquote :not(pre) > code {
123-
background-color: var(--gray-50);
123+
background-color: var(--smoke-halite);
124124
}
125125
126126
pre code {

‎app/pages/blog/index.mjs

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,25 @@ export default function ({ html, state }) {
55

66
return html`
77
<style scope="global">
8-
:root {
9-
--site-max-width: 1440px;
10-
}
8+
/* Colors */
119
body {
12-
background-color: var(--denim);
13-
color: var(--rift);
14-
margin-block-start: var(--global-bar-height);
15-
}
16-
17-
@font-face {
18-
font-family: "Source Code";
19-
src: url("/_public/fonts/SourceCodeVF.otf.woff2") format("woff2-variations");
20-
font-weight: 400 700;
10+
background-color: var(--white-denim);
11+
color: var(--rift-white);
2112
}
2213
</style>
2314
2415
<site-header active="/blog"></site-header>
2516
26-
<main class="pbs2 pi-2">
27-
<begin-container>
17+
<main class="pbs2 pi-2 leading4">
18+
<site-container>
2819
<blog-posts></blog-posts>
2920
<blog-pagination
3021
limit="${limit}"
3122
offset="${offset}"
3223
total="${total}"
3324
class="pbe3 pbe5-lg"
3425
></blog-pagination>
35-
</begin-container>
26+
</site-container>
3627
</main>
3728
<site-footer></site-footer>
3829
`

‎app/pages/blog/posts/$$.mjs

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { parseDate } from '../../../lib/parseDate.mjs'
1+
import { parseDate } from '../../../lib/parseDate.mjs'
22

33
function mastodonUrl (handle) {
44
// create https://indieweb.social/@tbeseda from @[email protected]
@@ -20,64 +20,46 @@ export default function ({ html, state }) {
2020

2121
return html`
2222
<style scope="global">
23-
:root {
24-
--site-max-width: 1440px;
25-
}
2623
body {
27-
background-color: var(--denim);
28-
color: var(--rift);
24+
background-color: var(--cloud-ateneo);
2925
margin-block-start: var(--global-bar-height);
3026
}
31-
32-
@font-face {
33-
font-family: "Source Code";
34-
src: url("/_public/fonts/SourceCodeVF.otf.woff2") format("woff2-variations");
35-
font-weight: 400 700;
36-
}
3727
</style>
3828
<style>
3929
:host {
4030
display: block;
41-
padding-block-start: var(--space-0);
4231
}
4332
44-
begin-container {
45-
background-color: white;
33+
site-container {
34+
background-color: var(--white-denim);
4635
border-radius: 0.5em;
4736
}
4837
38+
article {
39+
max-width: 86ch;
40+
}
41+
4942
.avatar {
5043
width: 40px;
5144
aspect-ratio: 1 / 1;
5245
}
5346
5447
@media screen and (min-width: 56em) {
55-
article {
56-
max-width: 58rem;
57-
}
58-
5948
.avatar {
6049
width: 60px;
6150
}
6251
}
63-
64-
@media screen and (min-width: 76em) {
65-
article {
66-
max-width: 64rem;
67-
}
68-
}
69-
7052
</style>
7153
<link rel="stylesheet" href="/_public/css/docs-colors.css" />
7254
7355
<site-header active="/blog"></site-header>
7456
75-
<div class="mi0">
76-
<begin-container class="relative">
57+
<div class="mi0 mi4-lg">
58+
<site-container>
7759
<article
78-
class="h-entry font-sans leading4 mi-auto mb0 mb4-lg p0 p5-lg pi6-xl"
60+
class="h-entry leading4 mi-auto mb0 mb4-lg p0 p5-lg pi6-xl"
7961
>
80-
<begin-h1 class="p-name mbe2-lg">${post.frontmatter.title}</begin-h1>
62+
<h1 class="text4 text5-lg leading1 font-bold p-name mbe2-lg">${post.frontmatter.title}</h1>
8163
8264
<div class="flex align-items-center mb0 mbe2-lg">
8365
<img
@@ -104,7 +86,7 @@ export default function ({ html, state }) {
10486
<h-card class="hidden" name="${author}" photo="/_public/blog/${avatar}" ${mastodon ? `url="${mastodonUrl(mastodon)}"` : ''}></h-card>
10587
${webmentions}
10688
</article>
107-
</begin-container>
89+
</site-container>
10890
</div>
10991
<site-footer></site-footer>
11092
`

‎public/css/docs-highlight.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939

4040
/* Dark Theme */
4141
:root[data-force-theme='dark'] {
42-
--hl-bg: var(--dark);
42+
--hl-bg: var(--halite);
4343
--hl-color: var(--white);
4444
--hl-comment: var(--inky);
4545
--hl-punctuation: var(--light);
@@ -59,7 +59,7 @@
5959
/* Dark Theme: System */
6060
@media (prefers-color-scheme: dark) {
6161
:root {
62-
--hl-bg: var(--dark);
62+
--hl-bg: var(--halite);
6363
--hl-color: var(--white);
6464
--hl-comment: var(--inky);
6565
--hl-punctuation: var(--light);

‎styleguide.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@
5555
"docs-nav-width": "16rem",
5656
"nav-height": "4rem",
5757
"editorial-width": "max(320px - var(--space-0), 87.5vw)",
58-
"docs-max-width": "100rem"
58+
"docs-max-width": "100rem",
59+
"font-mono": "Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
5960
},
6061
"queries": {
6162
"lg": "56em",

0 commit comments

Comments
 (0)