Skip to content

Commit fc9c327

Browse files
KeziiKezii
committed
optimize for small screens
1 parent bbd7098 commit fc9c327

3 files changed

Lines changed: 199 additions & 47 deletions

File tree

‎sass/index.scss‎

Lines changed: 79 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -59,39 +59,6 @@
5959
color: #5f5f5f;
6060
}
6161

62-
@media (max-width: 1200px) {
63-
#youtube {
64-
width: 420px;
65-
height: 236.25px;
66-
}
67-
68-
#main_content {
69-
font-size: 18px;
70-
}
71-
}
72-
73-
@media (max-width: 850px) {
74-
#main_container {
75-
flex-direction: column;
76-
}
77-
78-
#main_content {
79-
padding: 0;
80-
}
81-
82-
#main_text {
83-
margin-bottom: 40px;
84-
margin-top: 40px;
85-
margin-left: 10px;
86-
margin-right: 10px;
87-
}
88-
}
89-
90-
@media (max-width: 600px) {
91-
#youtube {
92-
width: 100%;
93-
}
94-
}
9562

9663

9764
/* Countdown Container */
@@ -139,4 +106,83 @@
139106
text-align: center;
140107
font-size: 2rem;
141108
color: #ff0000;
109+
}
110+
111+
@media (max-width: 1200px) {
112+
#youtube {
113+
width: 420px;
114+
height: 236.25px;
115+
}
116+
117+
#main_content {
118+
font-size: 18px;
119+
}
120+
}
121+
122+
@media (max-width: 850px) {
123+
#main_container {
124+
flex-direction: column;
125+
}
126+
127+
#main_content {
128+
padding: 0;
129+
}
130+
131+
#main_text {
132+
margin-bottom: 40px;
133+
margin-top: 40px;
134+
margin-left: 10px;
135+
margin-right: 10px;
136+
}
137+
}
138+
139+
@media (max-width: 600px) {
140+
#youtube {
141+
width: 100%;
142+
}
143+
}
144+
145+
@media (max-width: 350px) {
146+
#main_text {
147+
font-size: 16px;
148+
}
149+
150+
#right_content {
151+
152+
padding: 15px;
153+
margin: 15px;
154+
}
155+
156+
.countdown-wrapper {
157+
gap: 10px;
158+
padding: 10px;
159+
}
160+
161+
.time-block {
162+
min-width: 0;
163+
}
164+
165+
.time-number {
166+
font-size: 2em;
167+
}
168+
169+
.time-label {
170+
font-size: 0.8em;
171+
}
172+
}
173+
174+
@media (max-width: 230px) {
175+
.time-number {
176+
font-size: 1.5em;
177+
margin-bottom: 0px;
178+
}
179+
180+
.time-label {
181+
font-size: 0.6em;
182+
}
183+
184+
.countdown-wrapper {
185+
gap: 5px;
186+
padding: 5px;
187+
}
142188
}

‎sass/main.scss‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,11 @@ header {
8888
color: white;
8989
}
9090

91+
#license_text {
92+
padding-left: 10px;
93+
padding-right: 10px;
94+
}
95+
9196
#telegram_button {
9297
background: #34ace1;
9398
color: white;
@@ -131,6 +136,11 @@ header {
131136
color: #fff;
132137
}
133138

139+
svg {
140+
width: 24px;
141+
height: 24px;
142+
}
143+
134144
svg path {
135145
fill: #fff;
136146
display: flex;
@@ -193,6 +203,10 @@ header {
193203
}
194204

195205
@media (max-width: 1200px) {
206+
#telegram_li {
207+
margin-top: 10px;
208+
}
209+
196210
.social_sponsor {
197211
flex-direction: column;
198212
align-items: center;
@@ -244,4 +258,96 @@ header {
244258
padding-left: 0.5em;
245259
padding-right: 0.5em;
246260
}
261+
262+
.license {
263+
font-size: 18px;
264+
}
265+
}
266+
267+
@media (max-width: 350px) {
268+
269+
.social-links {
270+
gap: 0.5rem;
271+
}
272+
273+
.social-link a {
274+
width: 30px;
275+
height: 30px;
276+
font-size: 21px;
277+
278+
svg {
279+
width: 20px;
280+
height: 20px;
281+
}
282+
}
283+
284+
#logo img {
285+
max-width: 150px;
286+
position: absolute;
287+
top: 50px;
288+
}
289+
290+
.sponsor img {
291+
max-width: 80px;
292+
padding-left: 0.5em;
293+
padding-right: 0.5em;
294+
}
295+
296+
.license {
297+
font-size: 16px;
298+
}
299+
300+
.sponsor {
301+
margin: 0;
302+
margin-bottom: 10px;
303+
margin-top: 10px;
304+
}
305+
}
306+
307+
@media (max-width: 280px) {
308+
#logo img {
309+
max-width: 120px;
310+
}
311+
312+
.sponsor img {
313+
max-width: 60px;
314+
padding-left: 0.5em;
315+
padding-right: 0.5em;
316+
}
317+
318+
.license {
319+
font-size: 14px;
320+
}
321+
}
322+
323+
@media (max-width: 230px) {
324+
#logo img {
325+
max-width: 100px;
326+
}
327+
328+
.sponsor img {
329+
max-width: 50px;
330+
padding-left: 0.5em;
331+
padding-right: 0.5em;
332+
}
333+
334+
.social-link a {
335+
width: 25px;
336+
height: 25px;
337+
font-size: 18px;
338+
339+
svg {
340+
width: 15px;
341+
height: 15px;
342+
}
343+
}
344+
345+
.license {
346+
font-size: 12px;
347+
}
348+
349+
.sponsor {
350+
351+
margin-top: 0;
352+
}
247353
}

‎templates/base.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<li><a href="https://www.endsummercamp.org/index.php/ESC24-Domande_e_Risposte">FAQ</a></li>
2121
<!-- <li><a href="/faq">FAQ (2)</a></li> -->
2222
<li><a href="https://www.endsummercamp.org/index.php/Main_Page">Wiki</a></li>
23-
<li><a href="http://t.me/endsummercamp" id="telegram_button">Telegram</a></li>
23+
<li id="telegram_li"><a href="http://t.me/endsummercamp" id="telegram_button">Telegram</a></li>
2424
</ul>
2525
</nav>
2626
</header>
@@ -35,48 +35,48 @@
3535

3636
<ul class="social-links">
3737
<li class="wp-social-link wp-social-link-telegram social-link"><a href="https://t.me/endsummercamp"><svg
38-
width="24" height="24" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg"
39-
aria-hidden="true" focusable="false">
38+
viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
39+
focusable="false">
4040
<path
4141
d="M28.9700376,63.3244248 C47.6273373,55.1957357 60.0684594,49.8368063 66.2934036,47.2476366 C84.0668845,39.855031 87.7600616,38.5708563 90.1672227,38.528 C90.6966555,38.5191258 91.8804274,38.6503351 92.6472251,39.2725385 C93.294694,39.7979149 93.4728387,40.5076237 93.5580865,41.0057381 C93.6433345,41.5038525 93.7494885,42.63857 93.6651041,43.5252052 C92.7019529,53.6451182 88.5344133,78.2034783 86.4142057,89.5379542 C85.5170662,94.3339958 83.750571,95.9420841 82.0403991,96.0994568 C78.3237996,96.4414641 75.5015827,93.6432685 71.9018743,91.2836143 C66.2690414,87.5912212 63.0868492,85.2926952 57.6192095,81.6896017 C51.3004058,77.5256038 55.3966232,75.2369981 58.9976911,71.4967761 C59.9401076,70.5179421 76.3155302,55.6232293 76.6324771,54.2720454 C76.6721165,54.1030573 76.7089039,53.4731496 76.3346867,53.1405352 C75.9604695,52.8079208 75.4081573,52.921662 75.0095933,53.0121213 C74.444641,53.1403447 65.4461175,59.0880351 48.0140228,70.8551922 C45.4598218,72.6091037 43.1463059,73.4636682 41.0734751,73.4188859 C38.7883453,73.3695169 34.3926725,72.1268388 31.1249416,71.0646282 C27.1169366,69.7617838 23.931454,69.0729605 24.208838,66.8603276 C24.3533167,65.7078514 25.9403832,64.5292172 28.9700376,63.3244248 Z">
4242
</path>
4343
</svg><span class="social-link-label screen-reader-text">Telegram</span></a></li>
4444

4545
<li class="wp-social-link wp-social-link-youtube social-link"><a
46-
href="https://www.youtube.com/endsummercamp"><svg width="24" height="24" viewBox="0 0 24 24"
47-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
46+
href="https://www.youtube.com/endsummercamp"><svg viewBox="0 0 24 24" version="1.1"
47+
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
4848
<path
4949
d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z">
5050
</path>
5151
</svg><span class="social-link-label screen-reader-text">YouTube</span></a></li>
5252

5353
<li class="wp-social-link wp-social-link-twitch social-link"><a
54-
href="https://www.twitch.tv/endsummercamp"><svg width="24" height="24" viewBox="0 0 24 24"
55-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
54+
href="https://www.twitch.tv/endsummercamp"><svg viewBox="0 0 24 24" version="1.1"
55+
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
5656
<path
5757
d="M16.499,8.089h-1.636v4.91h1.636V8.089z M12,8.089h-1.637v4.91H12V8.089z M4.228,3.178L3,6.451v13.092h4.499V22h2.456 l2.454-2.456h3.681L21,14.636V3.178H4.228z M19.364,13.816l-2.864,2.865H12l-2.453,2.453V16.68H5.863V4.814h13.501V13.816z">
5858
</path>
5959
</svg><span class="social-link-label screen-reader-text">Twitch</span></a></li>
6060

6161
<li class="wp-social-link wp-social-link-github social-link"><a
62-
href="https://github.com/endsummercamp"><svg width="24" height="24" viewBox="0 0 24 24"
63-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
62+
href="https://github.com/endsummercamp"><svg viewBox="0 0 24 24" version="1.1"
63+
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
6464
<path
6565
d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z">
6666
</path>
6767
</svg><span class="social-link-label screen-reader-text">GitHub</span></a></li>
6868

6969
<li class="wp-social-link wp-social-link-instagram social-link"><a
70-
href="https://www.instagram.com/endsummercamp/"><svg width="24" height="24" viewBox="0 0 24 24"
71-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
70+
href="https://www.instagram.com/endsummercamp/"><svg viewBox="0 0 24 24" version="1.1"
71+
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
7272
<path
7373
d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z">
7474
</path>
7575
</svg><span class="social-link-label screen-reader-text">Instagram</span></a></li>
7676

7777
<li class="wp-social-link wp-social-link-facebook social-link"><a
78-
href="https://www.facebook.com/endsummercamp"><svg width="24" height="24" viewBox="0 0 24 24"
79-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
78+
href="https://www.facebook.com/endsummercamp"><svg viewBox="0 0 24 24" version="1.1"
79+
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
8080
<path
8181
d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z">
8282
</path>
@@ -91,7 +91,7 @@
9191

9292
</div>
9393
<div class="container license">
94-
<p> Copyright © 2005-2025 | End Summer Camp | CC BY-SA </p>
94+
<p id="license_text"> Copyright © 2005-2025 | End Summer Camp | CC BY-SA </p>
9595
</div>
9696
</body>
9797

0 commit comments

Comments
 (0)