thecoded.prof
CMU Coding Bootcamp
1/* Root Theme Variables */
2:root {
3 --background-color: #ffffff;
4 --text-color: #000000;
5 --link-color: #007bff;
6 --button-background: #007bff;
7 --button-color: #ffffff;
8 --title-color: #2c3e50; /* Light theme title color */
9 --font-size: 16px; /* Default font size */
10 --layout-spacing: 1rem; /* Default spacing */
11 --transition-duration: 300ms;
12}
13
14/* Dark Theme Variables */
15[data-theme="dark"] {
16 --background-color: #121212;
17 --text-color: #ffffff;
18 --link-color: #80d8ff;
19 --button-background: #333333;
20 --button-color: #ffffff;
21 --title-color: #f9f9f9; /* Dark theme title color */
22}
23
24h1,
25h2,
26h3,
27h4,
28h5,
29h6 {
30 margin-bottom: var(--spacing);
31}
32
33/* General Body Styles */
34body {
35 margin: 0;
36 background-color: var(--background-color);
37 color: var(--text-color);
38 font-family: 'Arial', sans-serif;
39 font-size: var(--font-size);
40 line-height: 1.5;
41 transition: background-color var(--transition-duration), color var(--transition-duration);
42}
43
44/* Links */
45a {
46 color: var(--link-color);
47 text-decoration: none;
48}
49
50a:hover {
51 color: #0056b3;
52}
53
54/* Buttons */
55button {
56 background-color: var(--button-background);
57 color: var(--button-color);
58 border: none;
59 padding: 10px 15px;
60 border-radius: 5px;
61 cursor: pointer;
62 transition: background-color 0.3s ease;
63 margin: var(--spacing);
64}
65
66button:hover {
67 background-color: #0056b3;
68}
69
70/* Header */
71.blog-header {
72 padding: 1rem;
73 background-color: #f8f9fa;
74 border-bottom: 1px solid #e9ecef;
75 text-align: center;
76 display: flex;
77 align-items: center;
78 flex-direction: column;
79 width: 100%;
80 position: relative;
81 box-sizing: border-box;
82}
83
84.blog-header h1 {
85 margin: 0;
86 color: var(--text-color);
87}
88
89.blog-header nav {
90 width: 100%;
91 background-color: #d3d3d3;
92 display: flex;
93 padding: 10px;
94 justify-content: center;
95 margin-top: 1rem;
96 box-sizing: border-box;
97}
98
99.blog-header nav ul {
100 list-style: none;
101 padding: 0;
102 margin: 0;
103 display: flex;
104 gap: 3rem;
105 justify-content: center;
106 align-items: center;
107}
108
109.blog-header nav a {
110 font-weight: bold;
111 color: var(--text-color);
112 transition: background-color 0.3s, color 0.3s;
113}
114
115.blog-header nav a:hover {
116 color: var(--link-color);
117}
118
119/* Theme Toggle Switch */
120.toggle-switch {
121 position: absolute;
122 top: 10px;
123 right: 10px;
124 display: flex;
125 align-items: center;
126 gap: 0.5rem;
127 cursor: pointer;
128}
129
130.toggle-switch .slider {
131 position: relative;
132 width: 50px;
133 height: 24px;
134 background-color: #ddd;
135 border-radius: 12px;
136 transition: background-color 0.3s;
137}
138
139.toggle-switch .slider::before {
140 content: "";
141 position: absolute;
142 width: 20px;
143 height: 20px;
144 background-color: white;
145 border-radius: 50%;
146 top: 2px;
147 left: 2px;
148 transition: transform 0.3s;
149}
150
151.toggle-switch .slider.dark {
152 background-color: #555;
153}
154
155.toggle-switch .slider.dark::before {
156 transform: translateX(26px);
157}
158
159/* New Post Button */
160.new-post-container {
161 display: flex;
162 justify-content: flex-end;
163 margin: 1rem 2rem;
164}
165
166.new-post-button {
167 background-color: var(--button-background);
168 color: var(--button-color);
169 padding: 0.6rem 1.2rem;
170 border: none;
171 border-radius: 25px;
172 cursor: pointer;
173 font-size: 1rem;
174 font-weight: bold;
175 display: flex;
176 align-items: center;
177 justify-content: center;
178 transition: background-color 0.3s ease;
179}
180
181.new-post-button:hover {
182 background-color: #0056b3;
183}
184
185/* Blog Post Title */
186.blogPost__title {
187 font-size: 2rem;
188 margin-bottom: 0.5rem;
189 color: var(--title-color); /* Use theme variable */
190}
191
192.blogPost__meta {
193 color: var(--text-color);
194 font-size: 0.9em;
195}
196
197.blogPost__content {
198 font-size: 1em;
199 line-height: 1.5;
200}
201
202/* Responsive Styles */
203@media (max-width: 768px) {
204 .blog-header {
205 padding: 1rem;
206 flex-direction: column;
207 }
208
209 .blog-header nav ul {
210 flex-direction: column;
211 gap: 1rem;
212 padding: 1rem;
213 }
214
215 .toggle-switch {
216 position: relative;
217 top: 0;
218 right: 0;
219 margin-top: 1rem;
220 }
221}
222
223/* Print Styles */
224@media print {
225 /* Hide non-essential elements */
226 body * {
227 visibility: hidden;
228 }
229
230 .main-content,
231 .main-content * {
232 visibility: visible;
233 }
234
235 /* Hide the toggle switch and header */
236 .blog-header,
237 .toggle-switch {
238 display: none;
239 }
240
241 /* Adjust background and layout */
242 body {
243 background-color: white !important;
244 color: black;
245 }
246
247 .blogPost {
248 width: 100% !important;
249 max-width: none;
250 box-shadow: none;
251 background: white;
252 color: black;
253 padding: 1rem;
254 border-radius: 0;
255 }
256}