Skip to content

Commit ab19681

Browse files
localhost433localhost433
committed
CSS changes
1 parent dcd92cf commit ab19681

3 files changed

Lines changed: 131 additions & 101 deletions

File tree

‎css/blog.css‎

Lines changed: 94 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,145 @@
11
/* ==========================================================================
22
BLOG LISTING PAGE
3-
========================================================================== */
3+
Shared-compatible version
4+
========================================================================== */
45

56
/* Remove default list spacing */
67
#posts-list {
78
margin-top: 0;
9+
padding: 0;
10+
list-style: none;
811
}
912

10-
/* Stack each entry vertically */
11-
.post-entry {
12-
margin-bottom: 1.5rem;
13+
/* Individual blog post entries */
14+
.post-item {
15+
margin-bottom: 2rem;
16+
padding-bottom: 1rem;
17+
border-bottom: 1px solid #ddd;
18+
}
19+
20+
.dark-mode .post-item {
21+
border-color: #444;
1322
}
1423

1524
/* Title & Meta */
16-
.post-title {
17-
display: block;
25+
.post-item h2 {
26+
margin: 0 0 0.25rem;
1827
font-size: 1.5rem;
19-
color: #0055aa;
20-
margin-bottom: 0.25rem;
2128
}
2229

23-
.post-meta-inline {
24-
display: block;
30+
.post-item a {
31+
color: var(--link-color, #0055aa);
32+
text-decoration: none;
33+
}
34+
35+
.post-item a:hover {
36+
text-decoration: underline;
37+
}
38+
39+
.post-meta {
2540
font-size: 0.9rem;
2641
color: #555;
27-
margin-bottom: 0.5rem;
2842
}
2943

30-
/* Tag row under each entry */
31-
.tags-container {
32-
margin-top: 0.5rem;
44+
.dark-mode .post-meta {
45+
color: #aaa;
3346
}
3447

35-
.tag-button {
36-
position: relative;
37-
z-index: 0;
38-
height: 3rem;
39-
background-color: #88bbff;
40-
padding: 0 1.5rem;
41-
color: #000;
42-
text-align: center;
43-
line-height: 3rem;
44-
overflow: hidden;
45-
transition: transform 0.2s, background-color 0.2s ease;
46-
}
47-
48-
.tag-button::after {
49-
content: '';
50-
position: absolute;
51-
left: 0;
52-
top: 0;
53-
z-index: -10;
54-
height: 100%;
55-
width: 100%;
56-
background-color: #88bbff;
57-
transform: scale(1);
58-
opacity: 1;
59-
transition: transform 0.5s, opacity 0.5s;
48+
/* Tags */
49+
.post-tag {
50+
display: inline-block;
51+
background-color: #eee;
52+
color: #555;
53+
font-size: 0.85rem;
54+
border: none;
55+
padding: 0.5rem 1rem;
56+
/* Updated padding */
57+
margin: 0.2rem 0.3rem 0.2rem 0;
58+
border-radius: 0.5rem;
59+
/* Optional: Add rounded corners for better aesthetics */
60+
}
61+
62+
.post-tag:hover {
63+
background-color: #ddd;
6064
}
6165

62-
.tag-button:active {
63-
transform: scale(0.95);
66+
.dark-mode .post-tag {
67+
background-color: #555;
68+
color: #eee;
6469
}
6570

66-
.tag-button:active::after {
67-
transform: scale(1.25, 1.5);
68-
opacity: 0;
71+
.dark-mode .post-tag:hover {
72+
background-color: #666;
6973
}
7074

71-
.tag-button.selected {
72-
background-color: #3399ff;
75+
/* Search bar */
76+
#search-box {
77+
width: 100%;
78+
max-width: 400px;
79+
padding: 0.75rem 1rem;
80+
font-size: 1rem;
81+
font-family: inherit;
82+
background: #ffffff;
83+
color: #222;
84+
border-radius: 15px;
85+
transition: border 0.3s, box-shadow 0.3s;
7386
}
7487

75-
.dark-mode .tag-button.selected {
76-
background-color: #0055aa;
77-
color: #fff;
88+
#search-box:focus {
89+
outline: none;
7890
}
7991

80-
/* Prev/Next buttons */
81-
#posts-navigation {
92+
.dark-mode #search-box {
93+
background: #222;
94+
color: #f0f0f0;
95+
}
96+
97+
/* Pagination buttons */
98+
#pagination-controls {
8299
display: flex;
83100
justify-content: space-between;
84101
margin-top: 2rem;
85102
}
86103

87-
#prev-button,
88-
#next-button {
89-
padding: 0.75rem 1.5rem;
90-
background-color: #88bbff;
91-
color: #000;
104+
/* Match the theme-toggle style for pagination buttons */
105+
#prev-page,
106+
#next-page {
107+
font-family: inherit;
108+
font-size: 1rem;
109+
padding: 0.5rem 1rem;
92110
border: none;
93-
text-decoration: none;
94-
text-align: center;
95-
transition: background-color 0.3s;
111+
border-radius: 15px;
112+
background-color: #ccddee;
113+
color: #0055aa;
114+
cursor: pointer;
115+
transition: background-color 0.2s ease;
96116
}
97117

98-
#prev-button:hover,
99-
#next-button:hover {
100-
background-color: #3399ff;
118+
#prev-page:hover,
119+
#next-page:hover {
120+
background-color: #88bbff;
101121
}
102122

103-
#prev-button:disabled,
104-
#next-button:disabled {
123+
#prev-page:disabled,
124+
#next-page:disabled {
105125
background-color: #ccc;
106126
cursor: not-allowed;
107127
}
108128

109-
.dark-mode #prev-button,
110-
.dark-mode #next-button {
111-
background-color: #0055aa;
112-
color: #fff;
129+
/* Dark mode: match theme-toggle hover */
130+
.dark-mode #prev-page,
131+
.dark-mode #next-page {
132+
background-color: #333;
133+
color: #eee;
113134
}
114135

115-
.dark-mode #prev-button:hover,
116-
.dark-mode #next-button:hover {
117-
background-color: #003377;
136+
.dark-mode #prev-page:hover,
137+
.dark-mode #next-page:hover {
138+
background-color: #666;
118139
}
119140

120-
.dark-mode #prev-button:disabled,
121-
.dark-mode #next-button:disabled {
141+
.dark-mode #prev-page:disabled,
142+
.dark-mode #next-page:disabled {
122143
background-color: #555;
123144
cursor: not-allowed;
124145
}

‎css/post.css‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,24 @@ article#post-content .post-meta {
4242
color: #0055aa;
4343
}
4444

45+
/* Comment Form – Updated to match style from shared.css / blog.css */
4546
#comment-form {
4647
margin-top: 1.5rem;
48+
display: flex;
49+
flex-direction: column;
50+
gap: 0.5rem;
51+
/* Spacing between input, textarea, and button */
4752
}
4853

4954
#comment-form button {
50-
align-self: flex-start;
51-
background-color: #99ccff;
52-
color: #0055aa;
53-
border: none;
55+
font-family: inherit;
56+
font-size: 1rem;
5457
padding: 0.5rem 1rem;
58+
border: none;
59+
border-radius: 15px;
60+
background-color: #ccddee;
61+
/* Matches .tag-button & theme-toggle */
62+
color: #0055aa;
5563
cursor: pointer;
5664
transition: background-color 0.2s ease;
5765
}
@@ -60,22 +68,20 @@ article#post-content .post-meta {
6068
background-color: #88bbff;
6169
}
6270

63-
#comment-form textarea {
71+
/* Match the rest of the pages’ input/textarea styles */
72+
#comment-form textarea,
73+
#comment-form input[type="text"] {
6474
background-color: #fff;
6575
color: #000;
76+
font-family: inherit;
77+
font-size: 1rem;
6678
padding: 0.8rem;
79+
border: none;
80+
border-radius: 5px;
81+
width: 100%;
6782
}
6883

69-
.post-location {
70-
font-size: 0.9rem;
71-
color: #555;
72-
margin: 1.5rem 0 0;
73-
text-align: right;
74-
}
75-
76-
/* ==========================================================================
77-
DARK MODE (POST-SPECIFIC)
78-
========================================================================== */
84+
/* Dark Mode (Post-specific) */
7985
.dark-mode #comments-section {
8086
background-color: #0055aa;
8187
color: #fff;
@@ -90,21 +96,23 @@ article#post-content .post-meta {
9096
}
9197

9298
.dark-mode #comment-form button {
93-
background-color: #0055aa;
94-
color: #def;
99+
background-color: #333;
100+
/* Matches dark-mode theme-toggle */
101+
color: #eee;
95102
}
96103

97104
.dark-mode #comment-form button:hover {
98-
background-color: #0055aa;
99-
/* Updated hover color */
105+
background-color: #666;
100106
}
101107

102-
.dark-mode #comment-form textarea {
103-
background-color: #0055aa;
104-
/* Updated to match dark mode styles */
108+
.dark-mode #comment-form textarea,
109+
.dark-mode #comment-form input[type="text"] {
110+
background-color: #555;
111+
/* Matches dark-mode input in shared.css */
105112
color: #eee;
106113
}
107114

115+
/* Placeholder in dark mode */
108116
.dark-mode #comment-form textarea::placeholder,
109117
.dark-mode #comment-form input::placeholder {
110118
color: #bbb;

‎css/shared.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ button,
9393
font-size: 1rem;
9494
padding: 0.5rem 1rem;
9595
border: none;
96-
background-color: #99ccff;
96+
border-radius: 15px;
97+
background-color: #ccddee;
9798
color: #0055aa;
9899
cursor: pointer;
99100
transition: background-color 0.2s ease;
@@ -102,7 +103,7 @@ button,
102103
button:hover,
103104
#theme-toggle:hover,
104105
.tag-button:hover {
105-
background-color: #ccddee;
106+
background-color: #88bbff;
106107
}
107108

108109
/* ==========================================================================
@@ -174,7 +175,7 @@ textarea {
174175
}
175176

176177
.dark-mode button {
177-
background-color: #555;
178+
background-color: #333;
178179
color: #eee;
179180
border: none;
180181
}
@@ -184,7 +185,7 @@ textarea {
184185
}
185186

186187
.dark-mode #theme-toggle {
187-
background-color: transparent;
188+
background-color: #333;
188189
color: #eee;
189190
border: none;
190191
}
@@ -200,7 +201,7 @@ textarea {
200201
}
201202

202203
.dark-mode .tag-button:hover {
203-
background-color: #777;
204+
background-color: #555;
204205
}
205206

206207
.dark-mode input[type="text"],
@@ -233,7 +234,7 @@ textarea {
233234
}
234235

235236
.dark-mode .post-tag:hover {
236-
background-color: #777;
237+
background-color: #555;
237238
}
238239

239240
.dark-mode .back-link {

0 commit comments

Comments
 (0)