Skip to content

Commit 8ed339d

Browse files
KeziiKezii
authored
Merge pull request #4 from kowalski7cc/feature/improve-style
Improve site responsiveness
2 parents 853f01f + 23d6e75 commit 8ed339d

File tree

7 files changed

+136
-128
lines changed

7 files changed

+136
-128
lines changed

‎sass/index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@
8181
text-align: center;
8282
min-width: 120px;
8383
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
84-
width: 100%;
8584
padding: 8px 15px;
8685
}
8786

‎sass/main.scss‎

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -28,34 +28,57 @@ body {
2828
header {
2929
padding-top: 20px;
3030
padding-bottom: 20px;
31+
margin: 2rem;
3132
min-height: 50px;
3233
text-align: right;
3334
display: flex;
3435
flex-direction: row;
3536
align-items: center;
37+
flex-wrap: nowrap;
38+
justify-content: space-between;
39+
40+
@media (max-width: 768px) {
41+
flex-wrap: wrap;
42+
43+
.button-overflow {
44+
display: block !important;
45+
}
46+
47+
.open {
48+
display: flex;
49+
width: 100%;
50+
flex-direction: column;
51+
justify-content: center;
52+
gap: 2rem;
53+
min-height: 50vh;
54+
}
55+
56+
}
57+
58+
.button-overflow {
59+
display: none;
60+
font-size: xx-large;
61+
}
3662

3763
nav {
64+
@media (max-width: 768px) {
65+
display: none;
66+
width: max-content;
67+
}
3868
margin-left: auto;
39-
}
69+
justify-content: flex-start;
70+
display: flex;
71+
flex-basis: auto;
72+
align-items: center;
73+
gap: 3rem;
4074

41-
ul {
42-
li a {
75+
a {
4376
color: #737373;
4477
text-decoration: none;
4578
font-size: 22px;
4679
font-weight: 500;
47-
margin: 0 10px;
4880
}
49-
50-
display: flex;
51-
list-style: none;
52-
text-align: right;
53-
flex-direction: row;
54-
}
55-
56-
li {
57-
display: inline;
58-
padding: 0 20px 0 20px;
81+
5982
}
6083
}
6184

@@ -65,7 +88,7 @@ header {
6588
}
6689

6790
#logo img {
68-
max-width: 200px;
91+
max-width: 5rem;
6992
}
7093

7194
.title {
@@ -77,9 +100,11 @@ header {
77100
}
78101

79102
.social_sponsor {
103+
align-items: center;
80104
background-color: #cbcbcb;
81105
display: flex;
82-
align-items: start;
106+
padding-top: 1rem !important;
107+
padding-bottom: 1rem !important;
83108
}
84109

85110
.license {
@@ -111,44 +136,49 @@ header {
111136
}
112137
}
113138

114-
#telegram_button {
139+
.button {
115140
background: #34ace1;
116141
color: white;
117142
transition: all .3s;
118143
padding: 8px 20px;
119144
border-radius: 3px;
145+
text-decoration: none;
120146
}
121147

122148
/* Contenitore della lista di icone social */
123149

124150
.social-links {
125151
display: flex;
152+
flex-wrap: wrap;
126153
gap: 1rem;
127-
list-style: none;
154+
align-items: center !important;
155+
justify-content: center;
128156
}
129157

130158
.social-link {
131159
margin: 0;
132160

133161
a {
134-
width: 40px;
135-
136162
/* Larghezza “cerchio” icona */
137-
height: 40px;
138-
163+
width: 40px;
164+
139165
/* Altezza “cerchio” icona */
140-
background-color: currentColor;
166+
height: 40px;
141167

142168
/* Colore di sfondo di default */
143-
border-radius: 50%;
144-
169+
background-color: currentColor;
170+
145171
/* Rende il contenitore circolare */
172+
border-radius: 50%;
173+
174+
/* Bianco */
146175
color: #fff;
147176

148-
/* Bianco */
149-
display: inline-block;
150177
text-align: center;
151-
font-size: 27px;
178+
display: flex;
179+
180+
justify-content: center;
181+
align-items: center;
152182

153183
svg {
154184
width: 24px;
@@ -157,7 +187,6 @@ header {
157187

158188
svg path {
159189
fill: #fff;
160-
display: flex;
161190
}
162191
}
163192
}
@@ -232,10 +261,6 @@ header {
232261
margin-top: 20px;
233262
}
234263

235-
.social-links {
236-
padding: 0;
237-
}
238-
239264
.license {
240265
text-align: center;
241266
}
@@ -247,17 +272,6 @@ header {
247272
}
248273

249274
@media (max-width: 600px) {
250-
#logo img {
251-
max-width: 150px;
252-
}
253-
254-
header ul {
255-
li {
256-
padding: 0;
257-
}
258-
259-
padding: 0;
260-
}
261275

262276
.section {
263277
padding: 0px;
@@ -286,10 +300,6 @@ header {
286300

287301
@media (max-width: 350px) {
288302

289-
.social-links {
290-
gap: 0.5rem;
291-
}
292-
293303
.social-link a {
294304
width: 30px;
295305
height: 30px;
@@ -301,12 +311,6 @@ header {
301311
}
302312
}
303313

304-
#logo img {
305-
max-width: 150px;
306-
position: absolute;
307-
top: 50px;
308-
}
309-
310314
.sponsor img {
311315
max-width: 80px;
312316
padding-left: 0.5em;

‎static/images/ESC.png‎

-26.6 KB
Loading

‎static/images/ESC.png.webp‎

3.79 KB
Loading

‎templates/base.html‎

Lines changed: 24 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -18,76 +18,31 @@
1818
<body>
1919
<div class="container">
2020
<header>
21-
<a href="/" id="logo" aria-label="Home"><img src="/images/ESC.png.webp" alt="Logo ESC"></a>
22-
<nav>
23-
<ul>
24-
<li><a href="/campeggio">Camp</a></li>
25-
<li><a href="/schedule">Contenuti</a></li>
26-
<li><a href="/faq">FAQ</a></li>
27-
<!-- <li><a href="/faq">FAQ (2)</a></li> -->
28-
<li><a href="https://www.endsummercamp.org/index.php/Main_Page">Wiki</a></li>
29-
<li id="telegram_li"><a href="http://t.me/endsummercamp" id="telegram_button">Telegram</a></li>
30-
</ul>
21+
<a href="/" id="logo" aria-label="Home">
22+
<img
23+
src="/images/ESC.png.webp"
24+
srcset="/images/ESC.png.webp 1x, /images/ESC.png 1x"
25+
alt="Logo dell'End Summer Camp">
26+
</a>
27+
<a onclick="toggleMenu()" class="button button-overflow">&#8801;</a>
28+
<nav id="main-nav">
29+
<a href="/campeggio">Camp</a>
30+
<a href="/schedule">Contenuti</a>
31+
<a href="/faq">FAQ</a>
32+
<a href="https://www.endsummercamp.org/index.php/Main_Page">Wiki</a>
33+
<a href="http://t.me/endsummercamp" class="button">Telegram</a>
3134
</nav>
3235
</header>
3336

34-
<section class="section">
37+
<section class="section" >
3538
{% block content %} {% endblock %}
3639
</section>
3740

3841
</div>
3942

40-
<div class="container social_sponsor">
43+
<div class="container social_sponsor" >
4144

42-
<ul class="social-links">
43-
<li class="wp-social-link wp-social-link-telegram social-link"><a href="https://t.me/endsummercamp"
44-
aria-label="gruppo telegram"><svg viewBox="0 0 128 128" version="1.1"
45-
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
46-
<path
47-
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">
48-
</path>
49-
</svg><span class="social-link-label screen-reader-text">Telegram</span></a></li>
50-
51-
<li class="wp-social-link wp-social-link-youtube social-link"><a
52-
href="https://www.youtube.com/endsummercamp" aria-label="youtube"><svg viewBox="0 0 24 24"
53-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
54-
<path
55-
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">
56-
</path>
57-
</svg><span class="social-link-label screen-reader-text">YouTube</span></a></li>
58-
59-
<li class="wp-social-link wp-social-link-twitch social-link"><a href="https://www.twitch.tv/endsummercamp"
60-
aria-label="twitch"><svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
61-
aria-hidden="true" focusable="false">
62-
<path
63-
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">
64-
</path>
65-
</svg><span class="social-link-label screen-reader-text">Twitch</span></a></li>
66-
67-
<li class="wp-social-link wp-social-link-github social-link"><a href="https://github.com/endsummercamp"
68-
aria-label="github"><svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
69-
aria-hidden="true" focusable="false">
70-
<path
71-
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">
72-
</path>
73-
</svg><span class="social-link-label screen-reader-text">GitHub</span></a></li>
74-
75-
<li class="wp-social-link wp-social-link-instagram social-link"><a
76-
href="https://www.instagram.com/endsummercamp/" aria-label="instagram"><svg viewBox="0 0 24 24"
77-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
78-
<path
79-
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">
80-
</path>
81-
</svg><span class="social-link-label screen-reader-text">Instagram</span></a></li>
82-
83-
<li class="wp-social-link wp-social-link-facebook social-link"><a
84-
href="https://www.facebook.com/endsummercamp" aria-label="facebook"><svg viewBox="0 0 24 24"
85-
version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
86-
<path
87-
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">
88-
</path>
89-
</svg><span class="social-link-label screen-reader-text">Facebook</span></a></li>
90-
</ul>
45+
{% include "socials.html" %}
9146

9247
<div class="sponsor">
9348
<a href="https://crunchlab.it/"><img src="/images/CRUNCHLAB.png.webp" alt="CRUNCHLAB"></a>
@@ -99,6 +54,14 @@
9954
<div class="container license">
10055
<p id="license_text"> Copyright © 2005-2025 | End Summer Camp | CC BY-SA <span class="source-link"><a href="https://github.com/endsummercamp/endsummercamp.github.io">Website Source</a></span></p>
10156
</div>
57+
58+
<script>
59+
function toggleMenu() {
60+
console.log("Menu toggled");
61+
const nav = document.querySelector("#main-nav");
62+
nav.classList.toggle("open");
63+
}
64+
</script>
10265
</body>
10366

10467
</html>

‎templates/index.html‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
11
{% extends "base.html" %}
22

33
{% block content %}
4-
<!-- <h1 class="title">
5-
{{ section.title }}
6-
</h1> -->
7-
<!-- <ul> -->
8-
<!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->
9-
<!-- {% for page in section.pages %}
10-
<li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
11-
{% endfor %} -->
12-
<!-- </ul> -->
134

145
<link rel="stylesheet" href="index.css">
156
<link rel="stylesheet" href="lite-yt-embed.css" />
167
<script src="lite-yt-embed.js"></script>
178

189

19-
<div id="main_container">
10+
<div id="main_container" >
2011
<div id="main_content">
2112
<div id="youtube_frame">
2213
<lite-youtube videoid="UMzpQJ53cXQ" id="youtube"
23-
playlabel="End Summer Camp: Hacking, Free Software, DIY Since 2005"></lite-youtube>
14+
playlabel="End Summer Camp: Hacking, Free Software, DIY Since 2005"></lite-youtube>
2415
</div>
2516
<div id="main_text">
26-
ESC è un incontro non-profit di persone interessate all’<a
17+
End Summer Camp (ESC) è un incontro non-profit di persone interessate all’<a
2718
href="http://it.wikipedia.org/wiki/Hacking">Hacking</a>, al <a
2819
href="http://it.wikipedia.org/wiki/Copyleft">Software Libero</a> e al <a
2920
href="http://it.wikipedia.org/wiki/Maker">DIY</a>. Il contenuto

0 commit comments

Comments
 (0)