My personal blog
hauleth.dev
blog
fix: send CSS to the gym
+499
-104
+1
-1
content/_index.md
+1
-1
content/_index.md
+90
sass/_header.scss
+90
sass/_header.scss
···
1
+
@import "variables";
2
+
3
+
@mixin menu {
4
+
position: absolute;
5
+
background: var(--background);
6
+
box-shadow: var(--shadow);
7
+
color: white;
8
+
border: 2px solid;
9
+
margin: 0;
10
+
padding: 10px;
11
+
list-style: none;
12
+
z-index: 99;
13
+
}
14
+
15
+
.header {
16
+
display: flex;
17
+
flex-direction: column;
18
+
position: relative;
19
+
20
+
&__inner {
21
+
display: flex;
22
+
align-items: center;
23
+
justify-content: space-between;
24
+
}
25
+
26
+
&__logo {
27
+
display: flex;
28
+
flex: 1;
29
+
30
+
&:after {
31
+
content: '';
32
+
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
33
+
display: block;
34
+
width: 100%;
35
+
right: 10px;
36
+
}
37
+
38
+
a {
39
+
flex: 0 0 auto;
40
+
max-width: 100%;
41
+
text-decoration: none;
42
+
}
43
+
}
44
+
45
+
.menu {
46
+
margin: 20px 0;
47
+
--shadow-color: var(--accent-alpha-70);
48
+
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
49
+
50
+
@media (max-width: $phone-max-width) {
51
+
@include menu;
52
+
top: 50px;
53
+
right: 0;
54
+
}
55
+
56
+
&__inner {
57
+
display: flex;
58
+
flex-wrap: wrap;
59
+
list-style: none;
60
+
margin: 0;
61
+
padding: 0;
62
+
63
+
li:not(:last-of-type) {
64
+
margin-right: 20px;
65
+
margin-bottom: 10px;
66
+
flex: 0 0 auto;
67
+
}
68
+
69
+
@media (max-width: $phone-max-width) {
70
+
flex-direction: column;
71
+
align-items: flex-start;
72
+
padding: 0;
73
+
74
+
li {
75
+
margin: 0;
76
+
padding: 5px;
77
+
}
78
+
}
79
+
}
80
+
81
+
&-trigger {
82
+
color: var(--accent);
83
+
border: 2px solid;
84
+
margin-left: 10px;
85
+
height: 100%;
86
+
padding: 3px 8px;
87
+
position: relative;
88
+
}
89
+
}
90
+
}
+8
sass/_logo.scss
+8
sass/_logo.scss
+14
-91
sass/_main.scss
+14
-91
sass/_main.scss
···
1
-
@import "../themes/zerm/sass/variables";
1
+
@import "variables";
2
2
3
3
html {
4
4
box-sizing: border-box;
···
22
22
-webkit-font-smoothing: antialiased;
23
23
-webkit-overflow-scrolling: touch;
24
24
-webkit-text-size-adjust: 100%;
25
-
26
-
@media (max-width: $phone-max-width) {
27
-
font-size: 1rem;
28
-
}
29
25
}
30
26
31
27
h1, h2, h3, h4, h5, h6 {
···
44
40
border-bottom-color: transparent;
45
41
cursor: pointer;
46
42
47
-
@media(max-width: $phone-max-width){
48
-
visibility: visible;
43
+
@media (hover: none){
44
+
visibility: visible;
49
45
}
50
46
}
51
47
···
56
52
}
57
53
}
58
54
59
-
// Actually keeping Pawroman's stylings here for font-size over h1-h6.
60
-
// I prefer differentiated header height.
61
-
62
-
// OLD
63
-
// ---------------------
64
-
// h1, h2, h3 {
65
-
// font-size: 1.4rem;
66
-
// }
67
-
68
-
// h4, h5, h6 {
69
-
// font-size: 1.2rem;
70
-
// }
71
-
72
-
// Pawroman's
73
-
// ---------------------
74
55
h1 {
75
56
font-size: 1.4rem;
76
57
}
···
95
76
img {
96
77
display: block;
97
78
max-width: 100%;
98
-
99
-
&.left {
100
-
margin-right: auto;
101
-
}
102
-
103
-
&.center {
104
-
margin-left: auto;
105
-
margin-right: auto;
106
-
}
107
-
108
-
&.right {
109
-
margin-left: auto;
110
-
}
111
79
}
112
80
113
81
p {
114
82
margin-bottom: 20px;
115
83
}
116
84
117
-
figure {
118
-
display: table;
119
-
max-width: 100%;
120
-
margin: 25px 0;
121
-
122
-
&.left {
123
-
// img {
124
-
margin-right: auto;
125
-
// }
126
-
}
127
-
128
-
&.center {
129
-
// img {
130
-
margin-left: auto;
131
-
margin-right: auto;
132
-
// }
133
-
}
134
-
135
-
&.right {
136
-
// img {
137
-
margin-left: auto;
138
-
// }
139
-
}
140
-
141
-
figcaption {
142
-
font-size: 14px;
143
-
padding: 5px 10px;
144
-
margin-top: 5px;
145
-
background: var(--accent);
146
-
color: var(--background);
147
-
148
-
&.left {
149
-
text-align: left;
150
-
}
151
-
152
-
&.center {
153
-
text-align: center;
154
-
}
155
-
156
-
&.right {
157
-
text-align: right;
158
-
}
159
-
}
160
-
}
161
-
162
85
code {
163
86
font-family: ui-monospace, monospace;
164
87
background: var(--accent-alpha-20);
···
186
109
word-wrap: break-word;
187
110
}
188
111
189
-
code {
190
-
background: none !important;
191
-
margin: 0;
192
-
padding: 0;
193
-
font-size: inherit;
194
-
border: none;
112
+
code {
113
+
background: none !important;
114
+
margin: 0;
115
+
padding: 0;
116
+
font-size: inherit;
117
+
border: none;
195
118
}
196
119
}
197
120
···
256
179
padding: 0;
257
180
258
181
li {
259
-
position: relative;
260
-
margin-top: 5px;
261
-
margin-bottom: 5px;
182
+
position: relative;
183
+
margin-top: 5px;
184
+
margin-bottom: 5px;
262
185
}
263
186
264
187
@media (max-width: $phone-max-width) {
···
266
189
}
267
190
268
191
ul, ol {
269
-
margin-top: 10px;
270
-
margin-bottom: 10px;
192
+
margin-top: 10px;
193
+
margin-bottom: 10px;
271
194
}
272
195
}
273
196
+81
sass/_pagination.scss
+81
sass/_pagination.scss
···
1
+
@import 'variables';
2
+
3
+
.pagination {
4
+
margin-top: 50px;
5
+
6
+
&__title {
7
+
display: flex;
8
+
text-align: center;
9
+
position: relative;
10
+
margin: 100px 0 20px;
11
+
12
+
&-h {
13
+
text-align: center;
14
+
margin: 0 auto;
15
+
padding: 5px 10px;
16
+
background: var(--background);
17
+
font-size: .8rem;
18
+
text-transform: uppercase;
19
+
letter-spacing: .1em;
20
+
z-index: 1;
21
+
}
22
+
23
+
hr {
24
+
position: absolute;
25
+
left: 0;
26
+
right: 0;
27
+
width: 100%;
28
+
margin-top: 15px;
29
+
z-index: 0;
30
+
}
31
+
}
32
+
33
+
&__buttons {
34
+
display: flex;
35
+
align-items: center;
36
+
justify-content: center;
37
+
38
+
a {
39
+
text-decoration: none;
40
+
}
41
+
}
42
+
}
43
+
44
+
.button {
45
+
position: relative;
46
+
display: inline-flex;
47
+
align-items: center;
48
+
justify-content: center;
49
+
border-radius: 8px;
50
+
max-width: 40%;
51
+
padding: 0;
52
+
cursor: pointer;
53
+
appearance: none;
54
+
55
+
+ .button {
56
+
margin-left: 10px;
57
+
}
58
+
59
+
a {
60
+
display: flex;
61
+
padding: 8px 16px;
62
+
text-decoration: none;
63
+
text-overflow: ellipsis;
64
+
white-space: nowrap;
65
+
overflow: hidden;
66
+
}
67
+
68
+
&__text {
69
+
text-overflow: ellipsis;
70
+
white-space: nowrap;
71
+
overflow: hidden;
72
+
}
73
+
74
+
&.next .button__icon {
75
+
margin-left: 8px;
76
+
}
77
+
78
+
&.previous .button__icon {
79
+
margin-right: 8px;
80
+
}
81
+
}
+142
sass/_post.scss
+142
sass/_post.scss
···
1
+
@import "variables";
2
+
3
+
.post {
4
+
width: 100%;
5
+
text-align: left;
6
+
margin: 20px auto;
7
+
padding: 20px 0;
8
+
9
+
@media (max-width: $tablet-max-width) {
10
+
max-width: 660px;
11
+
}
12
+
13
+
&:not(:last-of-type) {
14
+
border-bottom: 1px solid var(--border-color);
15
+
}
16
+
17
+
&-meta {
18
+
margin-bottom: 10px;
19
+
color: var(--accent-alpha-70);
20
+
}
21
+
22
+
&-title {
23
+
--border: 3px dotted var(--accent);
24
+
position: relative;
25
+
color: var(--accent);
26
+
margin: 0 0 15px;
27
+
padding-bottom: 15px;
28
+
border-bottom: var(--border);
29
+
30
+
&:after {
31
+
content: '';
32
+
position: absolute;
33
+
bottom: 2px;
34
+
display: block;
35
+
width: 100%;
36
+
border-bottom: var(--border);
37
+
}
38
+
39
+
a {
40
+
text-decoration: none;
41
+
}
42
+
}
43
+
44
+
&-tags {
45
+
display: block;
46
+
margin-bottom: 20px;
47
+
opacity: .5;
48
+
49
+
a {
50
+
text-decoration: none;
51
+
}
52
+
}
53
+
54
+
&-content {
55
+
margin-top: 30px;
56
+
}
57
+
58
+
&-cover {
59
+
border: 20px solid var(--accent);
60
+
background: transparent;
61
+
margin: 40px 0;
62
+
padding: 20px;
63
+
64
+
@media (max-width: $phone-max-width) {
65
+
padding: 10px;
66
+
border-width: 10px;
67
+
}
68
+
}
69
+
70
+
ul {
71
+
list-style: none;
72
+
73
+
li:before {
74
+
content: '⦿';
75
+
position: absolute;
76
+
left: -20px;
77
+
color: var(--accent);
78
+
}
79
+
ul {
80
+
81
+
li:before {
82
+
content: '■';
83
+
position: absolute;
84
+
left: -20px;
85
+
color: var(--accent);
86
+
}
87
+
88
+
ul {
89
+
90
+
li:before {
91
+
content: '►';
92
+
position: absolute;
93
+
left: -20px;
94
+
color: var(--accent);
95
+
}
96
+
}
97
+
}
98
+
}
99
+
}
100
+
101
+
// TODO: try adapting this using a properly nested selector in the block above
102
+
// for ul items.
103
+
.tag-list {
104
+
@media(max-width: $phone-max-width) {
105
+
margin-left: 5%;
106
+
}
107
+
}
108
+
109
+
.post--regulation {
110
+
h1 {
111
+
justify-content: center;
112
+
}
113
+
114
+
h2 {
115
+
justify-content: center;
116
+
margin-bottom: 10px;
117
+
118
+
&+ h2 {
119
+
margin-top: -10px;
120
+
margin-bottom: 20px;
121
+
}
122
+
}
123
+
}
124
+
125
+
.post-list {
126
+
.post-date {
127
+
color: var(--accent-alpha-70);
128
+
text-decoration: none;
129
+
}
130
+
131
+
a {
132
+
text-decoration: none;
133
+
}
134
+
135
+
.post-list-title {
136
+
text-decoration: underline;
137
+
}
138
+
139
+
.post-tag {
140
+
text-decoration: underline;
141
+
}
142
+
}
+13
-6
sass/style.scss
+13
-6
sass/style.scss
···
1
-
@import '../themes/zerm/sass/buttons';
2
-
@import '../themes/zerm/sass/header';
3
-
@import '../themes/zerm/sass/logo';
1
+
@import 'variables';
2
+
// @import 'buttons';
3
+
@import 'header';
4
+
@import 'logo';
4
5
@import 'main';
5
-
@import '../themes/zerm/sass/post';
6
-
@import '../themes/zerm/sass/pagination';
7
-
@import '../themes/zerm/sass/footer';
6
+
@import 'post';
7
+
@import 'pagination';
8
+
@import 'footer';
9
+
10
+
:root {
11
+
--phoneWidth: (max-width: #{$phone-max-width + 1px});
12
+
--tabletWidth: (max-width: #{$tablet-max-width + 1px});
13
+
}
14
+
+4
-6
templates/index.html
+4
-6
templates/index.html
···
1
1
{% extends "zerm/templates/index.html" %}
2
2
3
-
{% block general_meta %}
4
-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
5
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
6
-
<meta name="description" content="{{ config.description }}"/>
7
-
<script async defer data-domain="hauleth.dev" src="https://plausible.io/js/plausible.js"></script>
8
-
{% endblock general_meta %}
3
+
{% block script %}
4
+
{{ footer::script() }}
5
+
<script async defer data-domain="hauleth.dev" src="https://plausible.io/js/plausible.js"></script>
6
+
{% endblock script %}
9
7
10
8
{% block header %}
11
9
<header class="header">