this repo has no description
restructured html code
+44
-42
+6
-5
src/_components/Header.tsx
+6
-5
src/_components/Header.tsx
···
5
5
6
6
export default function Header({title, note}: HeaderProps) {
7
7
return (
8
-
<>
9
-
<h1 className="header">{title}</h1>
10
-
{note !== undefined
8
+
<header>
9
+
<h1>{ title }</h1>
10
+
{
11
+
note !== undefined
11
12
? (
12
13
13
-
<small className="smaller">{note}</small>
14
+
<small>{note}</small>
14
15
)
15
16
: (
16
17
<></>
17
18
)
18
19
}
19
-
</>
20
+
</header>
20
21
);
21
22
}
+6
-5
src/_includes/layouts/root.njk
+6
-5
src/_includes/layouts/root.njk
···
8
8
<link rel="stylesheet" href="/altagos.css">
9
9
</head>
10
10
<body>
11
-
<div class="root">
12
-
<div class="content">
11
+
<main>
12
+
{{ comp.Header({title: metas.title, note: metas.note}) | safe }}
13
+
<content>
13
14
{{ content | safe }}
14
-
</div>
15
+
</content>
16
+
</main>
15
17
16
-
{% include "layouts/footer.njk" %}
17
-
</div>
18
+
{% include "layouts/footer.njk" %}
18
19
</body>
19
20
</html>
+28
-27
src/_includes/sass/root.scss
+28
-27
src/_includes/sass/root.scss
···
28
28
}
29
29
30
30
body {
31
+
display: flex;
32
+
flex-direction: column;
33
+
align-content: space-between;
34
+
justify-content: space-between;
35
+
36
+
margin: auto;
37
+
max-width: 720px;
38
+
31
39
font: var(--font-size) "Times New Roman";
32
40
font-family: serif;
33
41
-webkit-font-smoothing: antialiased;
34
42
-moz-font-smoothing: antialiased;
43
+
text-align: left;
44
+
word-wrap: break-word;
45
+
overflow-wrap: break-word;
46
+
line-height: 1.5;
35
47
36
48
background-color: var(--background-color);
37
49
color: var(--text-color);
38
50
}
39
51
40
-
.root {
41
-
display: flex;
42
-
flex-direction: column;
43
-
align-content: space-between;
44
-
justify-content: space-between;
45
-
46
-
// text-align: center;
47
-
max-width: 40em;
48
-
margin: auto;
49
-
//
50
-
//
51
-
height: 100%;
52
+
main {
53
+
padding: 2em 0;
52
54
}
53
55
54
-
.content {
55
-
padding: 2em;
56
+
content {
56
57
line-height: 1.5;
57
58
}
58
59
59
-
.header {
60
-
margin-bottom: 10px;
61
-
62
-
font-size: 4rem;
63
-
font-weight: 700;
64
-
line-height: normal;
65
-
}
66
-
67
-
.footer {
68
-
padding: 2em;
69
-
// margin-bottom: 10px;
60
+
footer {
61
+
padding: 2em 0;
70
62
71
-
// align-self: center;
72
63
font-family: Recursive, monospace;
73
64
font-size: small;
74
65
font-variation-settings:
···
80
71
color: var(--color-subtle);
81
72
}
82
73
83
-
.smaller {
74
+
header {
75
+
line-height: normal;
76
+
77
+
h1 {
78
+
font-size: 3.8rem;
79
+
font-weight: 700;
80
+
margin-bottom: 10px;
81
+
}
82
+
}
83
+
84
+
small {
84
85
font-size: smaller;
85
86
font-family: Recursive, monospace;
86
87
font-variation-settings: