Skip to content

Commit 8b30cc6

Browse files
localhost433localhost433
committed
Style updates
site wide font, dark mode in blog section
1 parent 0f2ad29 commit 8b30cc6

5 files changed

Lines changed: 152 additions & 130 deletions

File tree

‎about.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>About - Robin's Site</title>
88
<link rel="stylesheet" href="css/shared.css" />
9-
<link rel="stylesheet" href="css/about.css" />
9+
<link rel="stylesheet" href="css/home.css" />
1010
<meta http-equiv="Content-Security-Policy" content="
1111
default-src 'self';
1212
script-src 'self' https://cdn.jsdelivr.net;
@@ -62,7 +62,6 @@ <h2>Tech Stack</h2>
6262

6363
<script src="js/theme.js"></script>
6464
<script src="js/header-footer.js"></script>
65-
<script src="js/about.js"></script>
6665
</body>
6766

6867
</html>

‎blog.html‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8"/>
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6-
<title>Blog – Robin's Site</title>
7-
8-
<link rel="stylesheet" href="css/shared.css"/>
9-
<link rel="stylesheet" href="css/blog.css"/>
10-
11-
<meta http-equiv="Content-Security-Policy"
12-
content="default-src 'self';
13-
script-src 'self' https://cdn.jsdelivr.net;
14-
connect-src 'self';
15-
style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net;
16-
font-src 'self' https://cdn.jsdelivr.net;
17-
img-src 'self' data:;">
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Blog – Robin's Site</title>
8+
9+
<link rel="stylesheet" href="css/shared.css" />
10+
<link rel="stylesheet" href="css/blog.css" />
11+
12+
<meta http-equiv="Content-Security-Policy" content="
13+
default-src 'self';
14+
script-src 'self' https://cdn.jsdelivr.net;
15+
style-src 'self' 'unsafe-inline';
16+
connect-src 'self';
17+
font-src 'self';
18+
img-src 'self' data:;">
1819
</head>
1920

2021
<body>
21-
<header id="header-placeholder"></header>
22+
<header id="header-placeholder"></header>
2223

23-
<!-- Tag filter shown ABOVE post list -->
24-
<section id="tag-filter">
25-
<strong>Filter by Tag:</strong>
26-
<div id="tag-buttons"></div>
27-
</section>
24+
<section id="tag-filter">
25+
<strong>Filter by Tag:</strong>
26+
<div id="tag-buttons"></div>
27+
</section>
2828

29-
<section id="posts-list">
30-
<!-- Posts load here -->
31-
</section>
29+
<section id="posts-list"></section>
3230

33-
<footer id="footer-placeholder"></footer>
31+
<footer id="footer-placeholder"></footer>
3432

35-
<script src="js/theme.js"></script>
36-
<script src="js/header-footer.js"></script>
37-
<script src="js/blog.js"></script>
33+
<!-- necessary script order: -->
34+
<script src="js/theme.js"></script>
35+
<script src="js/header-footer.js"></script>
36+
<script src="js/blog.js"></script>
3837
</body>
39-
</html>
38+
39+
</html>

‎css/about.css‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎css/blog.css‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,41 @@
1-
/* imports shared.css automatically through <link> order */
2-
#posts-list{ margin-top:2rem; }
1+
#posts-list {
2+
margin-top: 2rem;
3+
}
4+
5+
/* stack things vertically */
6+
.post-entry {
7+
margin-bottom: 1.6rem;
8+
}
9+
10+
.post-title {
11+
display: block;
12+
font-size: 1.25rem;
13+
color: #0055aa;
14+
margin-bottom: 0.25rem;
15+
}
316

4-
.post-entry{
5-
display:flex; justify-content:space-between; flex-wrap:wrap;
6-
margin-bottom:1.6rem;
17+
.post-meta-inline {
18+
display: block;
19+
font-size: 0.85rem;
20+
color: #777;
21+
margin-bottom: 0.5rem;
722
}
823

9-
.post-title{font-size:1.25rem; color:#0055aa;}
10-
.post-meta-inline{font-size:.85rem; color:#777;}
24+
/* if you still render tags on the list page */
25+
.tags-container {
26+
margin-top: 0.3rem;
27+
}
28+
29+
#tag-filter {
30+
margin-top: 3rem;
31+
}
32+
33+
.dark-mode,
34+
.dark-mode body {
35+
background-color: #0e0e0e;
36+
color: #f1f1f1;
37+
}
1138

12-
#tag-filter{margin-top:3rem;}
39+
.dark-mode a {
40+
color: #88aaff;
41+
}

‎css/shared.css‎

Lines changed: 86 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,99 @@
11
/* --- Base site-wide styles ------------------------------------------- */
2-
html { box-sizing:border-box; font-size:16px; }
3-
*,*::before,*::after { box-sizing:inherit; }
2+
html {
3+
box-sizing: border-box;
4+
font-size: 16px;
5+
}
6+
7+
*,
8+
*::before,
9+
*::after {
10+
box-sizing: inherit;
11+
}
412

5-
body{
6-
font-family:Georgia,'Noto Serif','Noto Sans SC','Microsoft YaHei',
7-
'Hiragino Sans GB',serif;
8-
max-width:800px; margin:auto; padding:2rem;
9-
background:#f9f9f9; color:#333; line-height:1.8;
13+
input,
14+
textarea,
15+
button {
16+
font-family: inherit;
1017
}
1118

12-
a { color:#0055aa; text-decoration:none; font-weight:600; }
13-
a:hover { text-decoration:underline; }
19+
body {
20+
font-family: Georgia, 'Noto Serif', 'Noto Sans SC', 'Microsoft YaHei',
21+
'Hiragino Sans GB', serif;
22+
max-width: 800px;
23+
margin: auto;
24+
padding: 2rem;
25+
background: #f9f9f9;
26+
color: #333;
27+
line-height: 1.8;
28+
}
29+
30+
a {
31+
color: #0055aa;
32+
text-decoration: none;
33+
font-weight: 600;
34+
}
1435

15-
.header-title{font-size:2rem; margin-bottom:.5rem;}
16-
.header-row p{font-size:1.2rem; color:#555}
36+
a:hover {
37+
text-decoration: underline;
38+
}
39+
40+
.header-title {
41+
font-size: 2rem;
42+
margin-bottom: .5rem;
43+
}
44+
45+
.header-row p {
46+
font-size: 1.2rem;
47+
color: #555
48+
}
1749

1850
/* --- Tag chips ------------------------------------------------------- */
19-
.post-tag{
20-
display:inline-block; background:#eef; color:#336;
21-
font-size:.8rem; padding:.2rem .55rem; border-radius:.6rem;
22-
margin:.3rem .4rem .3rem 0;
51+
.post-tag {
52+
display: inline-block;
53+
background: #eef;
54+
color: #336;
55+
font-size: .8rem;
56+
padding: .2rem .55rem;
57+
border-radius: .6rem;
58+
margin: .3rem .4rem .3rem 0;
2359
}
2460

2561
/* --- Filter buttons (blog list) -------------------------------------- */
26-
.tag-button{
27-
background:#ddeeff; border:none; border-radius:.5rem;
28-
padding:.4rem .8rem; font-size:.85rem; cursor:pointer; margin:.25rem;
62+
.tag-button {
63+
background: #ddeeff;
64+
border: none;
65+
border-radius: .5rem;
66+
padding: .4rem .8rem;
67+
font-size: .85rem;
68+
cursor: pointer;
69+
margin: .25rem;
70+
}
71+
72+
.tag-button:hover {
73+
background: #ccddee;
2974
}
30-
.tag-button:hover{background:#ccddee;}
3175

3276
/* --- Dark-mode toggleable rules -------------------------------------- */
33-
.dark-mode, .dark-mode body{background:#0e0e0e; color:#f1f1f1;}
34-
.dark-mode a{color:#88aaff;}
35-
.dark-mode .post-tag{background:#223;color:#ccf;}
36-
.dark-mode .tag-button{background:#334455;color:#ddeeff;}
37-
.dark-mode .tag-button:hover{background:#445566;}
77+
.dark-mode,
78+
.dark-mode body {
79+
background: #0e0e0e;
80+
color: #f1f1f1;
81+
}
82+
83+
.dark-mode a {
84+
color: #88aaff;
85+
}
86+
87+
.dark-mode .post-tag {
88+
background: #223;
89+
color: #ccf;
90+
}
91+
92+
.dark-mode .tag-button {
93+
background: #334455;
94+
color: #ddeeff;
95+
}
96+
97+
.dark-mode .tag-button:hover {
98+
background: #445566;
99+
}

0 commit comments

Comments
 (0)