A charming Jekyll theme.
linus.arthr.dev/
jekyll-theme
feat(layout): create basic styling structure
+143
-9
+11
-9
_layouts/default.html
+11
-9
_layouts/default.html
···
28
28
</style>
29
29
{%- endif -%}
30
30
31
-
<link rel="stylesheet" href="{%- link assets/css/layout.css -%}" />
31
+
<link rel="stylesheet" type="text/css" href="{%- link assets/css/layout.css -%}" />
32
32
</head>
33
33
<body>
34
-
{% include header.html %}
35
-
36
-
<main class="site-content">
37
-
{{ content }}
38
-
</main>
39
-
40
-
41
-
{% include footer.html %}
34
+
<div class="site">
35
+
{% include header.html %}
36
+
37
+
<main class="site-content">
38
+
{{ content }}
39
+
</main>
40
+
41
+
42
+
{% include footer.html %}
43
+
</div>
42
44
</body>
43
45
</html>
+132
assets/css/layout.css
+132
assets/css/layout.css
···
1
+
:root {
2
+
--font-headings: ui-serif, serif;
3
+
--font-body: ui-sans-serif, sans-serif;
4
+
--font-code: ui-monospace, monospace;
5
+
6
+
--text-size: 1.4em;
7
+
--text-line-height: 1.65;
8
+
--spacing: 2rem;
9
+
}
10
+
11
+
html {
12
+
box-sizing: border-box;
13
+
font: 62.5%/100% var(--font-body);
14
+
}
15
+
16
+
*,
17
+
*::before,
18
+
*::after {
19
+
box-sizing: inherit;
20
+
}
21
+
22
+
body {
23
+
padding-inline: 5vw;
24
+
font-size: var(--text-size);
25
+
line-height: 1.5;
26
+
}
27
+
28
+
.site {
29
+
display: flex;
30
+
flex-flow: column nowrap;
31
+
max-width: 70rem;
32
+
margin-block: calc(var(--spacing) * 2);
33
+
margin-inline: auto;
34
+
}
35
+
36
+
/*
37
+
Site Header
38
+
*/
39
+
40
+
.site-header {
41
+
display: flex;
42
+
flex-flow: row wrap;
43
+
align-items: center;
44
+
margin-bottom: var(--spacing);
45
+
}
46
+
47
+
.site-header .site-branding {
48
+
display: inline-flex;
49
+
flex-flow: row nowrap;
50
+
align-items: center;
51
+
gap: calc(var(--spacing) / 2);
52
+
line-height: 100%;
53
+
}
54
+
55
+
.site-header .site-logo {
56
+
max-height: 2.5rem;
57
+
width: auto;
58
+
border-radius: 100%;
59
+
}
60
+
61
+
.site-header .site-name {
62
+
font-family: var(--font-headings);
63
+
font-weight: bolder;
64
+
font-style: italic;
65
+
font-size: 2.5rem;
66
+
}
67
+
68
+
.site-header .site-menu {
69
+
display: inline-flex;
70
+
flex-flow: row wrap;
71
+
justify-items: flex-end;
72
+
gap: var(--spacing);
73
+
margin-left: auto;
74
+
}
75
+
76
+
/*
77
+
Content
78
+
*/
79
+
80
+
.post {
81
+
margin-bottom: calc(var(--spacing) * 4);
82
+
}
83
+
84
+
.post-header > * {
85
+
display: inline;
86
+
vertical-align: baseline;
87
+
font-size: 2rem;
88
+
}
89
+
90
+
.post-header .post-permalink {
91
+
margin-right: calc(var(--spacing) / 4);
92
+
font-family: var(--font-headings);
93
+
}
94
+
95
+
.post-title {
96
+
font-family: var(--font-headings);
97
+
}
98
+
99
+
.post-content > * {
100
+
width: 100%;
101
+
max-width: 420px;
102
+
margin-left: auto;
103
+
}
104
+
105
+
.post-content > h1,
106
+
.post-content > h2,
107
+
.post-content > h3,
108
+
.post-content > h4,
109
+
.post-content > h5,
110
+
.post-content > h6 {
111
+
max-width: 500px;
112
+
}
113
+
114
+
.blog-pagination {
115
+
max-width: 420px;
116
+
margin-left: auto;
117
+
}
118
+
119
+
/*
120
+
Site Footer
121
+
*/
122
+
123
+
.site-footer {
124
+
margin-top: calc(var(--spacing) * 4);
125
+
width: 100%;
126
+
max-width: 420px;
127
+
margin-left: auto;
128
+
}
129
+
130
+
img {
131
+
max-width: 100%;
132
+
}
assets/icon.png
assets/icon.png
This is a binary file and will not be displayed.