Skip to content

Commit 1a3f8bc

Browse files
cleberhenselcleberhensel
committed
Refactor CSS structure by removing main.css and introducing main.scss for improved styling organization; update default layout to reference new stylesheet.
1 parent 7d73712 commit 1a3f8bc

3 files changed

Lines changed: 231 additions & 3 deletions

File tree

‎_layouts/default.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
77
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
8-
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
8+
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
99
{% include google-analytics.html %}
1010
{% seo %}
1111
<script type="application/ld+json">

‎assets/css/main.css‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎assets/main.scss‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
---
2+
---
3+
4+
@import "minima";
5+
6+
@import "variables";
7+
@import "navigation";
8+
@import "podcast-player";
9+
@import "progress-tracker";
10+
@import "breadcrumbs";
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
font-family: $font-family;
18+
font-size: $font-size-base;
19+
line-height: 1.6;
20+
color: $text-color;
21+
background: $background-color;
22+
margin: 0;
23+
padding: 0;
24+
}
25+
26+
.site-header {
27+
background: $primary-color;
28+
color: white;
29+
padding: $spacing-md $spacing-lg;
30+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
31+
position: sticky;
32+
top: 0;
33+
z-index: 1000;
34+
35+
.header-content {
36+
max-width: $container-max-width;
37+
margin: 0 auto;
38+
display: flex;
39+
justify-content: space-between;
40+
align-items: center;
41+
}
42+
43+
.site-title {
44+
margin: 0;
45+
font-size: $font-size-h2;
46+
47+
a {
48+
color: white;
49+
text-decoration: none;
50+
}
51+
}
52+
53+
.main-nav {
54+
display: flex;
55+
gap: $spacing-lg;
56+
57+
a {
58+
color: white;
59+
text-decoration: none;
60+
61+
&:hover {
62+
text-decoration: underline;
63+
}
64+
}
65+
}
66+
}
67+
68+
.container {
69+
max-width: $container-max-width;
70+
margin: 0 auto;
71+
display: flex;
72+
padding: $spacing-lg;
73+
gap: $spacing-xl;
74+
}
75+
76+
.content {
77+
flex: 1;
78+
min-width: 0;
79+
}
80+
81+
.lesson-content,
82+
.module-content,
83+
.exercise-content {
84+
background: white;
85+
padding: $spacing-xl;
86+
border-radius: 8px;
87+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
88+
89+
header {
90+
margin-bottom: $spacing-xl;
91+
padding-bottom: $spacing-lg;
92+
border-bottom: 2px solid $border-color;
93+
94+
h1 {
95+
margin: 0 0 $spacing-md 0;
96+
font-size: $font-size-h1;
97+
color: $text-color;
98+
}
99+
100+
.lesson-meta,
101+
.module-meta,
102+
.exercise-meta {
103+
display: flex;
104+
gap: $spacing-lg;
105+
color: $text-light;
106+
font-size: $font-size-small;
107+
margin-top: $spacing-sm;
108+
}
109+
}
110+
}
111+
112+
.lesson-navigation {
113+
margin: $spacing-xl 0;
114+
padding: $spacing-lg;
115+
background: #f9f9f9;
116+
border-radius: 8px;
117+
display: flex;
118+
justify-content: space-between;
119+
120+
a {
121+
color: $primary-color;
122+
text-decoration: none;
123+
font-weight: bold;
124+
125+
&:hover {
126+
text-decoration: underline;
127+
}
128+
}
129+
}
130+
131+
.exercises {
132+
margin-top: $spacing-xl;
133+
134+
h2 {
135+
font-size: $font-size-h2;
136+
margin-bottom: $spacing-lg;
137+
}
138+
139+
.exercise-card {
140+
background: white;
141+
padding: $spacing-lg;
142+
border: 1px solid $border-color;
143+
border-radius: 8px;
144+
margin-bottom: $spacing-md;
145+
146+
h3 {
147+
margin: 0 0 $spacing-sm 0;
148+
font-size: $font-size-h3;
149+
}
150+
151+
a {
152+
color: $primary-color;
153+
text-decoration: none;
154+
155+
&:hover {
156+
text-decoration: underline;
157+
}
158+
}
159+
}
160+
}
161+
162+
.lesson-actions {
163+
margin-top: $spacing-xl;
164+
padding-top: $spacing-lg;
165+
border-top: 1px solid $border-color;
166+
167+
.mark-lesson-complete {
168+
background: $success-color;
169+
color: white;
170+
border: none;
171+
padding: $spacing-sm $spacing-lg;
172+
border-radius: 4px;
173+
font-size: $font-size-base;
174+
cursor: pointer;
175+
transition: background 0.2s;
176+
177+
&:hover {
178+
background: darken($success-color, 10%);
179+
}
180+
181+
&:disabled {
182+
background: $text-light;
183+
cursor: not-allowed;
184+
}
185+
}
186+
}
187+
188+
.site-footer {
189+
background: $secondary-color;
190+
color: white;
191+
padding: $spacing-lg;
192+
margin-top: $spacing-xl;
193+
text-align: center;
194+
195+
.footer-content {
196+
max-width: $container-max-width;
197+
margin: 0 auto;
198+
}
199+
}
200+
201+
@media (max-width: $breakpoint-tablet) {
202+
.container {
203+
flex-direction: column;
204+
padding: $spacing-md;
205+
}
206+
207+
.lesson-content,
208+
.module-content,
209+
.exercise-content {
210+
padding: $spacing-lg;
211+
}
212+
213+
.site-header {
214+
.header-content {
215+
flex-direction: column;
216+
gap: $spacing-md;
217+
}
218+
}
219+
}
220+
221+
@media (max-width: $breakpoint-mobile) {
222+
.lesson-content,
223+
.module-content,
224+
.exercise-content {
225+
header h1 {
226+
font-size: $font-size-h2;
227+
}
228+
}
229+
}
230+

0 commit comments

Comments
 (0)