Skip to content

Commit e285cde

Browse files
realprogrammersusevimrealprogrammersusevim
committed
style: css updates center header
1 parent f9613c0 commit e285cde

2 files changed

Lines changed: 109 additions & 33 deletions

File tree

‎static/css/style.css‎

Lines changed: 102 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,123 @@
11
/* General Styles */
22
body {
3-
font-family: 'Courier New', Courier, monospace; /* Programmer vibe */
3+
font-family: 'Lora', serif; /* Classic serif font for readability */
4+
line-height: 1.7;
45
margin: 0;
56
padding: 0;
6-
background-color: #f7f9fc; /* Light background for contrast */
7-
color: #333; /* Darker text for better readability */
7+
background-color: #f0f0f0; /* Light gray background */
8+
color: #333; /* Dark gray for text */
89
display: flex;
910
flex-direction: column;
1011
min-height: 100vh; /* Full height for footer positioning */
1112
}
1213

1314
header {
14-
background: #2a2a2a; /* Dark header */
15-
color: #ffffff;
15+
background: #fff; /* White header */
16+
color: #333;
1617
padding: 15px 20px;
17-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
18+
border-bottom: 1px solid #ddd;
19+
width: 100%;
20+
box-sizing: border-box;
21+
}
22+
23+
/* Use a clean sans-serif for headings */
24+
h1, h2, h3 {
25+
font-family: 'Lato', sans-serif;
26+
}
27+
28+
h1 a, h2 a, h3 a {
29+
color: inherit;
30+
text-decoration: none;
31+
}
32+
33+
h1 a:hover, h2 a:hover, h3 a:hover {
34+
color: #0056b3; /* Change color on hover to indicate link */
35+
text-decoration: none;
36+
}
37+
38+
code {
39+
font-family: 'Courier New', Courier, monospace;
40+
background-color: #eee;
41+
padding: 2px 4px;
42+
border-radius: 4px;
1843
}
1944

2045
header h1 {
2146
margin: 0;
2247
font-size: 24px; /* Larger title */
48+
text-align: center;
49+
}
50+
51+
header h1 a {
52+
color: inherit;
53+
text-decoration: none;
54+
}
55+
56+
header h1 a:hover {
57+
color: inherit;
58+
}
59+
60+
nav {
61+
text-align: center;
62+
margin-top: 10px;
2363
}
2464

2565
nav a {
26-
color: #ffffff;
66+
color: #333; /* Match header text color */
2767
margin: 0 15px;
2868
text-decoration: none;
29-
font-weight: bold; /* Bold navigation links */
69+
font-weight: normal; /* Less bold */
3070
}
3171

32-
nav a:hover {
72+
a {
73+
color: #0056b3; /* A standard blue for links */
74+
text-decoration: none;
75+
}
76+
77+
a:hover, nav a:hover {
3378
text-decoration: underline; /* Underline on hover */
3479
}
3580

3681
main {
3782
flex: 1; /* Allow main to grow and push footer down */
38-
padding: 20px;
39-
max-width: 800px; /* Center the content */
40-
margin: auto; /* Center the main section */
83+
padding: 20px 40px;
84+
max-width: 720px; /* Optimal for reading */
85+
margin: 20px auto; /* Center the main section with some top/bottom margin */
86+
background-color: #fff; /* White "page" for content */
87+
border: 1px solid #ddd;
88+
width: 100%;
89+
box-sizing: border-box;
4190
}
4291

4392
h2 {
44-
border-bottom: 2px solid #007BFF; /* Add a line below the heading */
45-
padding-bottom: 5px; /* Space between heading and content */
93+
border-bottom: 1px solid #eee; /* Lighter, more minimal border */
94+
padding-bottom: 10px; /* Space between heading and content */
95+
margin-top: 0;
4696
}
4797

48-
ul {
98+
/* Styling for post list on index page */
99+
main > ul {
49100
list-style: none; /* Remove default list styles */
50101
padding: 0;
51102
}
52103

53-
li {
54-
background: #ffffff; /* White background for posts */
55-
margin: 15px 0; /* Space between posts */
56-
padding: 15px; /* Padding inside post items */
57-
border-radius: 8px; /* Rounded corners */
58-
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
59-
transition: transform 0.2s; /* Smooth hover effect */
104+
main > ul > li {
105+
background: none;
106+
margin: 0; /* Space between posts */
107+
padding: 25px 0; /* Padding inside post items */
108+
border-radius: 0; /* Rounded corners */
109+
border: none; /* Subtle border for separation */
110+
border-bottom: 1px solid #eee; /* Separator for posts */
111+
transition: none;
60112
}
61113

62-
li:hover {
63-
transform: translateY(-2px); /* Lift effect on hover */
114+
main > ul > li:last-child {
115+
border-bottom: none;
116+
}
117+
118+
main > ul > li:hover {
119+
border-color: transparent; /* Darken border on hover */
120+
background-color: #fafafa; /* Subtle hover effect */
64121
}
65122

66123
h3 {
@@ -74,24 +131,37 @@ blockquote {
74131
margin: 20px 0; /* Space around blockquotes */
75132
padding-left: 20px; /* Space for the vertical line */
76133
color: #555; /* Slightly lighter text color */
77-
font-style: italic; /* Italic text for emphasis */
78-
border-left: 4px solid #007BFF; /* Colored vertical line */
79-
background-color: #f0f8ff; /* Light background color for blockquotes */
134+
font-style: italic; /* More traditional academic style */
135+
border-left: 4px solid #ddd; /* Lighter border */
136+
background-color: transparent; /* More minimal blockquote */
80137
padding: 10px 20px; /* Padding inside blockquotes */
81-
border-radius: 5px; /* Rounded corners for blockquote */
138+
border-radius: 0; /* Sharp corners */
139+
}
140+
141+
blockquote footer {
142+
font-style: normal;
143+
margin-top: 10px;
144+
color: #777;
82145
}
83146

84147
footer {
85148
text-align: center;
86-
padding-top: 15px;
87-
padding-bottom: 15px;
88-
background: #2a2a2a; /* Dark footer */
89-
color: white;
149+
padding: 20px;
150+
background: #fff; /* Match header */
151+
color: #333; /* Match header */
90152
position: relative; /* Allows footer to sit properly */
91153
margin-top: auto; /* Pushes footer to the bottom */
92154
width: 100%; /* Full width */
155+
border-top: 1px solid #ddd; /* Subtle border */
156+
box-sizing: border-box;
93157
}
94158

95159
footer p {
96160
margin: 0; /* Remove margin from footer text */
97161
}
162+
163+
/* Style for permalinks */
164+
p > a[href^="/post/"] {
165+
font-size: 0.9em;
166+
color: #666;
167+
}

‎templates/base.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>{% block title %}Jonathan's Blog{% endblock %}</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&display=swap"
11+
rel="stylesheet"
12+
/>
713
<link rel="stylesheet" href="/static/css/style.css" />
814
<link rel="icon" href="/static/imgs/favicon.ico" />
915
<link
@@ -15,7 +21,7 @@
1521
</head>
1622
<body>
1723
<header>
18-
<h1>Jonathan's Blog</h1>
24+
<h1><a href="/">Jonathan's Blog</a></h1>
1925
<nav>
2026
<a href="/">Home</a>
2127
<a href="/about">About</a>

0 commit comments

Comments
 (0)