Skip to content

Commit 4c70320

Browse files
beyonddreambeyonddream
committed
Update css style + misc changes
1 parent 9007c85 commit 4c70320

4 files changed

Lines changed: 98 additions & 117 deletions

File tree

‎_includes/layout.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<header>
1111
<nav>
1212
<div class="nav-brand">
13-
<a href="/">Beyond Dreamscape</a>
13+
<a href="/">Thoughts from beyond dreamscape</a>
1414
</div>
1515
</nav>
1616
</header>
@@ -24,7 +24,7 @@ <h1>{{ title }}</h1>
2424
</div>
2525
<footer>
2626
<div class="container">
27-
<p>&copy; {{ '' | date: '%Y' }} Beyond Dreamscape. All rights reserved.</p>
27+
<p>&copy; {% year %} Beyonddream. All rights reserved.</p>
2828
</div>
2929
</footer>
3030
</body>

‎eleventy.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
export default function(eleventyConfig) {
22
eleventyConfig.addPassthroughCopy("styles");
3+
4+
// Add shortcode for current year
5+
eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
36
};

‎index.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
---
22
layout: layout.html
33
---
4-
{% for post in collections.post %}
5-
<h2><a href="{{ post.url }}">{{ post.data.title }} [<time>{{ post.date | date: "%Y-%m-%d" }}</time>]</a></h2>
6-
{% endfor %}
4+
<ul class="post-list">
5+
{% for post in collections.post %}
6+
<li>
7+
<div class="post-header">
8+
<span class="post-date">{{ post.date | date: "%Y-%m-%d" }}</span>
9+
<a class="post-title" href="{{ post.url }}">{{ post.data.title }}</a>
10+
</div>
11+
{% if post.data.description %}
12+
<p>{{ post.data.description }}</p>
13+
{% endif %}
14+
</li>
15+
{% endfor %}
16+
</ul>

‎styles/bundle.css‎

Lines changed: 80 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -6,150 +6,118 @@
66
--accent-color: #8b5cf6;
77
--muted-text: #94a3b8;
88
}
9-
10-
body {
11-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
9+
10+
body {
11+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1212
background-color: var(--background-color);
1313
color: var(--text-color);
14-
line-height: 1.6;
14+
min-height: 100vh;
15+
display: flex;
16+
flex-direction: column;
1517
margin: 0;
1618
padding: 0;
17-
}
18-
19-
.container {
19+
}
20+
21+
.container {
2022
max-width: 800px;
2123
margin: 0 auto;
2224
padding: 2rem;
23-
}
24-
25-
header {
25+
}
26+
27+
header {
2628
background-color: var(--secondary-background);
2729
padding: 1rem 0;
28-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
29-
}
30-
31-
nav {
30+
margin-bottom: 2rem;
31+
}
32+
33+
nav {
3234
display: flex;
33-
justify-content: space-between;
35+
justify-content: center;
3436
align-items: center;
3537
max-width: 800px;
3638
margin: 0 auto;
3739
padding: 0 2rem;
38-
}
39-
40-
.nav-links {
40+
}
41+
42+
.nav-brand a {
43+
color: var(--primary-color);
44+
font-size: 1.5rem;
45+
font-weight: 700;
46+
text-decoration: none;
47+
}
48+
49+
.nav-links {
4150
display: flex;
4251
gap: 2rem;
43-
}
44-
45-
.nav-links a {
52+
}
53+
54+
.nav-links a {
4655
color: var(--text-color);
4756
text-decoration: none;
4857
font-weight: 500;
49-
}
50-
51-
.nav-links a:hover {
58+
}
59+
60+
.nav-links a:hover {
5261
color: var(--primary-color);
53-
}
54-
55-
article {
56-
margin: 2rem 0;
57-
}
58-
59-
h1 {
62+
}
63+
64+
main h1 {
6065
font-size: 2.5rem;
6166
color: var(--primary-color);
62-
margin-bottom: 1rem;
63-
}
64-
65-
h2 {
66-
font-size: 2rem;
67+
margin-bottom: 2rem;
68+
}
69+
70+
main h2 {
71+
margin-top: 2rem;
72+
}
73+
74+
main h2 a {
6775
color: var(--accent-color);
68-
margin: 2rem 0 1rem;
69-
}
70-
71-
h3 {
72-
font-size: 1.5rem;
73-
color: var(--text-color);
74-
margin: 1.5rem 0 1rem;
75-
}
76-
77-
p {
78-
margin-bottom: 1.5rem;
79-
font-size: 1.1rem;
80-
}
81-
82-
a {
83-
color: var(--primary-color);
8476
text-decoration: none;
85-
}
86-
87-
a:hover {
88-
text-decoration: underline;
89-
}
90-
91-
code {
92-
background-color: var(--secondary-background);
93-
padding: 0.2rem 0.4rem;
94-
border-radius: 4px;
95-
font-family: 'Fira Code', monospace;
96-
}
97-
98-
pre {
99-
background-color: var(--secondary-background);
100-
padding: 1rem;
101-
border-radius: 8px;
102-
overflow-x: auto;
103-
}
104-
105-
blockquote {
106-
border-left: 4px solid var(--primary-color);
107-
margin: 1.5rem 0;
108-
padding-left: 1rem;
109-
color: var(--muted-text);
110-
}
111-
112-
.post-meta {
77+
}
78+
79+
main h2 time {
11380
color: var(--muted-text);
114-
font-size: 0.9rem;
81+
font-size: 1rem;
82+
font-weight: normal;
83+
}
84+
85+
.post-list {
86+
list-style: none;
87+
padding: 0;
88+
}
89+
90+
.post-list li {
11591
margin-bottom: 2rem;
116-
}
117-
118-
.tag {
119-
background-color: var(--secondary-background);
120-
color: var(--text-color);
121-
padding: 0.2rem 0.6rem;
122-
border-radius: 4px;
123-
font-size: 0.9rem;
124-
margin-right: 0.5rem;
125-
}
126-
127-
.tag:hover {
128-
background-color: var(--primary-color);
129-
}
130-
131-
footer {
92+
padding-bottom: 2rem;
93+
border-bottom: 1px solid var(--secondary-background);
94+
}
95+
96+
footer {
13297
background-color: var(--secondary-background);
133-
padding: 2rem 0;
134-
margin-top: 4rem;
98+
padding: 1rem 0;
99+
margin-top: auto;
135100
text-align: center;
136101
color: var(--muted-text);
137-
}
138-
139-
@media (max-width: 768px) {
102+
}
103+
104+
footer .container {
105+
padding: 0 2rem; /* Add horizontal padding only */
106+
}
107+
108+
@media (max-width: 768px) {
140109
.container {
141-
padding: 1rem;
142-
}
143-
144-
h1 {
145-
font-size: 2rem;
110+
padding: 1rem;
146111
}
147112

148-
h2 {
149-
font-size: 1.5rem;
113+
nav {
114+
flex-direction: column;
115+
gap: 1rem;
116+
text-align: center;
150117
}
151118

152-
h3 {
153-
font-size: 1.25rem;
119+
.nav-links {
120+
flex-direction: column;
121+
gap: 1rem;
154122
}
155-
}
123+
}

0 commit comments

Comments
 (0)