Skip to content

Commit 7839d42

Browse files
marvinschmittmarvinschmitt
committed
update zola styles (experimental)
1 parent 9c9a537 commit 7839d42

File tree

2 files changed

+117
-37
lines changed

2 files changed

+117
-37
lines changed

‎website/templates/base.html‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
{#- meta tags #}
5-
<meta charset="utf-8" />
6-
<meta http-equiv="x-ua-compatible" content="ie=edge" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<meta name="base" content="{{ config.base_url | safe }}" />
9-
<meta name="HandheldFriendly" content="True" />
10-
<meta name="color-scheme" content="dark light">
11-
<meta name="theme-color" media="(prefers-color-scheme: dark)">
12-
<meta name="theme-color" media="(prefers-color-scheme: light)">
13-
{#- Security: CSP, referrer #}
14-
{%- if config.extra.security_header_referrer %}
15-
<meta name="referrer" content="{{ config.extra.security_header_referrer | safe }}" />
16-
{%- endif %}
17-
{%- if config.extra.security_header_csp %}
18-
<meta http-equiv="Content-Security-Policy" content="{{ config.extra.security_header_csp | safe }}" />
19-
{%- endif %}
20-
{#- Style Sheets #}
21-
{% set css = load_data(path="templates/partials/styles.css") %}
22-
<style>{{ css | safe }}</style>
23-
</head>
3+
<head>
4+
{#- meta tags #}
5+
<meta charset="utf-8" />
6+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="base" content="{{ config.base_url | safe }}" />
9+
<meta name="HandheldFriendly" content="True" />
10+
<meta name="color-scheme" content="dark light">
11+
<meta name="theme-color" media="(prefers-color-scheme: dark)">
12+
<meta name="theme-color" media="(prefers-color-scheme: light)">
13+
{#- Security: CSP, referrer #}
14+
{%- if config.extra.security_header_referrer %}
15+
<meta name="referrer" content="{{ config.extra.security_header_referrer | safe }}" />
16+
{%- endif %}
17+
{%- if config.extra.security_header_csp %}
18+
<meta http-equiv="Content-Security-Policy" content="{{ config.extra.security_header_csp | safe }}" />
19+
{%- endif %}
20+
21+
{# Add Google Fonts Inter #}
22+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
23+
24+
{#- Style Sheets #}
25+
{% set css = load_data(path="templates/partials/styles.css") %}
26+
<style>{{ css | safe }}</style>
27+
</head>
2428
<body>
2529
{%- block header %}
2630
<header>

‎website/templates/partials/styles.css‎

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* set variables for light and dark mode*/
1+
/* Set variables for light and dark mode */
22
:root {
33
--layout-max-width: 50rem;
44
--background-color: #fffff4;
@@ -7,6 +7,12 @@
77
--link-color: #0366d6;
88
--link-visited-color: #5a3bb1;
99
--separator-color: #eaecef;
10+
--button-bg-color: #0366d6;
11+
--button-text-color: #fff;
12+
--hover-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
13+
--border-radius: 8px;
14+
--font-family: 'Inter', sans-serif;
15+
--font-size: 16px;
1016
}
1117

1218
@media (prefers-color-scheme: dark) {
@@ -17,22 +23,33 @@
1723
--link-color: #3e8df2;
1824
--link-visited-color: #9a76ff;
1925
--separator-color: #373644;
26+
--button-bg-color: #3e8df2;
2027
}
2128
}
2229

2330
body {
2431
margin: 0;
2532
background: var(--background-color);
2633
color: var(--text-color);
34+
font-family: var(--font-family);
35+
font-size: var(--font-size);
36+
line-height: 1.6;
2737
}
2838

2939
h2 {
3040
border-bottom: 1px solid var(--separator-color);
3141
padding-bottom: 0.3rem;
42+
margin-bottom: 1rem;
3243
}
3344

3445
a {
3546
color: var(--link-color);
47+
text-decoration: none;
48+
transition: color 0.2s ease-in-out;
49+
}
50+
51+
a:hover {
52+
color: var(--button-bg-color);
3653
}
3754

3855
a:visited {
@@ -42,52 +59,111 @@ a:visited {
4259
.content {
4360
max-width: var(--layout-max-width);
4461
margin: auto;
62+
padding: 1rem;
4563
}
4664

47-
/* Navigation/Top bar*/
65+
button, .btn {
66+
background-color: var(--button-bg-color);
67+
color: var(--button-text-color);
68+
padding: 0.6rem 1rem;
69+
border-radius: var(--border-radius);
70+
border: none;
71+
cursor: pointer;
72+
transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
73+
}
74+
75+
button:hover, .btn:hover {
76+
box-shadow: var(--hover-shadow);
77+
background-color: #005bb5; /* Slightly darker shade */
78+
}
79+
80+
/* Navigation/Top bar */
4881

4982
.navigation-container {
5083
background-color: var(--header-color);
84+
box-shadow: var(--hover-shadow);
85+
padding: 1rem 0;
5186
}
5287

5388
nav {
5489
display: flex;
55-
flex-direction: column;
56-
justify-content: center;
90+
justify-content: space-between;
5791
align-items: center;
58-
flex-grow: space-between;
59-
padding: 0.4rem;
60-
margin: auto;
6192
max-width: var(--layout-max-width);
93+
margin: auto;
6294
}
6395

6496
.top-bar--title {
65-
flex: 1;
66-
}
67-
68-
.top-bar--title>a[href] {
6997
font-size: 2rem;
70-
text-decoration: none;
7198
font-weight: bold;
7299
color: var(--text-color);
73100
}
74101

102+
.top-bar--links {
103+
display: grid;
104+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
105+
gap: 1rem;
106+
}
107+
75108
.top-bar--links a {
76-
color: var(--text-color);
77-
font-size: 1.4rem;
109+
font-size: 1.1rem;
78110
text-decoration: none;
111+
color: var(--link-color);
112+
transition: color 0.2s ease-in-out;
79113
}
80114

81115
.top-bar--links a:hover {
82116
text-decoration: underline;
117+
color: var(--button-bg-color);
83118
}
84119

85-
/* Hide the first heading to avoid double headings */
120+
/* Content tweaks */
86121
.content h1:first-child {
87-
display: none;
122+
display: none; /* Hide duplicate h1 */
123+
}
124+
125+
footer {
126+
background-color: var(--header-color);
127+
padding: 1rem 0;
128+
text-align: center;
88129
}
89130

90131
footer .c {
91132
display: flex;
92133
justify-content: center;
134+
gap: 1rem;
135+
padding: 1rem;
136+
}
137+
138+
footer a {
139+
color: var(--link-color);
140+
}
141+
142+
footer a:hover {
143+
color: var(--button-bg-color);
144+
}
145+
146+
/* Small tweaks for modern spacing */
147+
p {
148+
margin-bottom: 1.2rem;
149+
}
150+
151+
h2, h3 {
152+
margin-top: 2rem;
153+
margin-bottom: 1rem;
154+
}
155+
156+
/* Improve button-like link appearance */
157+
.btn {
158+
text-align: center;
159+
display: inline-block;
160+
padding: 0.8rem 1.5rem;
161+
border-radius: var(--border-radius);
162+
background-color: var(--button-bg-color);
163+
color: var(--button-text-color);
164+
}
165+
166+
.btn:hover {
167+
background-color: var(--link-color);
168+
box-shadow: var(--hover-shadow);
93169
}

0 commit comments

Comments
 (0)