Skip to content

Commit c041d35

Browse files
jackreicheltjackreichelt
committed
Responsiveness
1 parent c7b5a32 commit c041d35

File tree

2 files changed

+71
-72
lines changed

2 files changed

+71
-72
lines changed

‎index.html‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body>
1010
<header>
11-
<img src="assets/logos/python-logo.svg" alt="Python Snake" class="">
11+
<img src="assets/logos/python-logo.svg" alt="Python Snake">
1212
<div>
1313
<h1>Python Australia Community</h1>
1414
<p class="intro">Python Australia Community is a community-run organisation dedicated to bringing together Python enthusiasts from across the country. We aim to connect Python-appreciators with local meetups, events, and initiatives to help grow and connect the Python community in Australia.</p>
@@ -32,76 +32,92 @@ <h2>Local Python Meetups</h2>
3232
<div class="meetup-grid">
3333
<!-- Row 1 -->
3434
<div class="meetup-cell">
35-
<div class="meetup-header">
35+
<a href="https://python.sydney/" class="meetup-header">
3636
<img src="assets/logos/Sydney-Python-Logo-transparent.png" alt="SydPy (Sydney Python) Logo" class="meetup-logo rounded">
37-
<a href="https://python.sydney/"><h3>SydPy (Sydney Python Meetup)</h3></a>
38-
</div>
37+
<h3>SydPy (Sydney Python Meetup)</h3>
38+
</a>
3939
<p class="blurb">SydPy Meetup runs monthly in the Sydney CBD, follow our <a src="https://luma.com/sydneypython">Luma calendar</a> for events alerts.</p><p>We welcome Python-appreciators of all skill levels from all sectors. From students, to pro-devs, data scientists to UX engineers, we'd love to have you join us!</p>
4040
<p class="details">Frequency: Monthly<br>
4141
Location: Sydney, Central</p>
4242
<img src="assets/photos/sydpy-photo.jpg" alt="Sydney Meetup Event" class="meetup-photo">
4343
</div>
4444
<div class="meetup-cell">
45-
<img src="assets/logos/python-wa-logo.svg" alt="Python WA" class="meetup-logo">
46-
<a href="https://pythonwa.com/"><h3>Python WA</h3></a>
45+
<a href="https://pythonwa.com/" class="meetup-header">
46+
<img src="assets/logos/python-wa-logo.svg" alt="Python WA" class="meetup-logo">
47+
<h3>Python WA</h3>
48+
</a>
4749
<p class="blurb">Python WA meets every months for talks and social events. All Python fans welcome!</p>
4850
<p class="details">Frequency: Monthly<br>
4951
Location: Perth, Western Australia</p>
5052
<img src="assets/photos/wa-meetup.jpg" alt="Perth Meetup Event" class="meetup-photo">
5153
</div>
5254
<div class="meetup-cell">
53-
<img src="assets/photos/melbourne-python-logo.png" alt="Melbourne Python Meetup Logo" class="meetup-logo">
54-
<h3>MelPy (Melbourne Python Meetup)</h3>
55+
<a href="" class="meetup-header">
56+
<img src="assets/photos/melbourne-python-logo.png" alt="Melbourne Python Meetup Logo" class="meetup-logo">
57+
<h3>MelPy (Melbourne Python Meetup)</h3>
58+
</a>
5559
<p class="blurb">Melbourne Python Meetup gathers every second month, featuring guest speakers and hands-on coding sessions. All are welcome!</p>
5660
<p class="details">Frequency: Monthly<br>
5761
Location: Melbourne, SUBURB</p>
5862
<img src="assets/photos/melbourne-meetup.jpg" alt="Melbourne Meetup Event" class="meetup-photo">
5963
</div>
6064
<!-- Row 2 -->
6165
<div class="meetup-cell">
62-
<img src="assets/logos/photos/brisbane-python-logo.png" alt="Brisbane Python Meetup Logo" class="meetup-logo">
63-
<h3>Brisbane Python Meetup</h3>
66+
<a href="" class="meetup-header">
67+
<img src="assets/logos/photos/brisbane-python-logo.png" alt="Brisbane Python Meetup Logo" class="meetup-logo">
68+
<h3>Brisbane Python Meetup</h3>
69+
</a>
6470
<p class="blurb">Brisbane Python Meetup is a friendly group meeting quarterly to share Python projects and ideas. Newcomers always welcome.</p>
6571
<p class="details">Frequency: Quarterly<br>
6672
Location: Brisbane, SUBURB</p>
6773
<img src="assets/brisbane-meetup.jpg" alt="Brisbane Meetup Event" class="meetup-photo">
6874
</div>
6975
<div class="meetup-cell">
70-
<img src="assets/logos/adelaide-python-logo.png" alt="Adelaide Python Meetup Logo" class="meetup-logo">
71-
<h3>Adelaide Python Meetup</h3>
76+
<a href="" class="meetup-header">
77+
<img src="assets/logos/adelaide-python-logo.png" alt="Adelaide Python Meetup Logo" class="meetup-logo">
78+
<h3>Adelaide Python Meetup</h3>
79+
</a>
7280
<p class="blurb">Adelaide Python Meetup is a friendly group meeting quarterly to share Python projects and ideas. Newcomers always welcome.</p>
7381
<p class="details">Frequency: Quarterly<br>
7482
Location: Adelaide, SUBURB</p>
7583
<img src="assets/adelaide-meetup.jpg" alt="Adelaide Meetup Event" class="meetup-photo">
7684
</div>
7785
<div class="meetup-cell">
78-
<img src="assets/logos/canberra-python-logo.png" alt="Canberra Python Meetup Logo" class="meetup-logo">
79-
<h3>Canberra Python Meetup</h3>
86+
<a href="" class="meetup-header">
87+
<img src="assets/logos/canberra-python-logo.png" alt="Canberra Python Meetup Logo" class="meetup-logo">
88+
<h3>Canberra Python Meetup</h3>
89+
</a>
8090
<p class="blurb">Canberra Python Meetup runs monthly and welcomes Pythonistas of all skill levels. Join us for talks, workshops, and networking in the heart of Canberra.</p>
8191
<p class="details">Frequency: Monthly<br>
8292
Location: Canberra, ANU</p>
8393
<img src="assets/photos/canberra-meetup.jpg" alt="Canberra Meetup Event" class="meetup-photo">
8494
</div>
8595
<!-- Row 3 -->
8696
<div class="meetup-cell">
87-
<img src="assets/logos/hobart-python-logo.png" alt="Hobart Python Meetup Logo" class="meetup-logo">
88-
<h3>Hobart Python Meetup</h3>
97+
<a href="" class="meetup-header">
98+
<img src="assets/logos/hobart-python-logo.png" alt="Hobart Python Meetup Logo" class="meetup-logo">
99+
<h3>Hobart Python Meetup</h3>
100+
</a>
89101
<p class="blurb">Hobart Python Meetup meets every two months for talks and social events. All Python fans welcome!</p>
90102
<p class="details">Frequency: Bi-monthly<br>
91103
Location: Hobart, SUBURB</p>
92104
<img src="assets/photos/hobart-meetup.jpg" alt="Hobart Meetup Event" class="meetup-photo">
93105
</div>
94106
<div class="meetup-cell">
95-
<img src="assets/logos/darwin-python-logo.png" alt="Darwin Python Meetup Logo" class="meetup-logo">
96-
<h3>Darwin Python Meetup</h3>
107+
<a href="" class="meetup-header">
108+
<img src="assets/logos/darwin-python-logo.png" alt="Darwin Python Meetup Logo" class="meetup-logo">
109+
<h3>Darwin Python Meetup</h3>
110+
</a>
97111
<p class="blurb">Darwin Python Meetup is a friendly group meeting quarterly to share Python projects and ideas. Newcomers always welcome.</p>
98112
<p class="details">Frequency: Quarterly<br>
99113
Location: Darwin, SUBURB</p>
100114
<img src="assets/photos/darwin-meetup.jpg" alt="Darwin Meetup Event" class="meetup-photo">
101115
</div>
102116
<div class="meetup-cell">
103-
<img src="images/goldcoast-python-logo.png" alt="Gold Coast Python Meetup Logo" class="meetup-logo">
104-
<h3>Gold Coast Python Meetup</h3>
117+
<a href="" class="meetup-header">
118+
<img src="images/goldcoast-python-logo.png" alt="Gold Coast Python Meetup Logo" class="meetup-logo">
119+
<h3>Gold Coast Python Meetup</h3>
120+
</a>
105121
<p class="blurb">Gold Coast Python Meetup runs monthly and welcomes Pythonistas of all skill levels. Join us for talks, workshops, and networking in the heart of the Gold Coast.</p>
106122
<p class="details">Frequency: Monthly<br>
107123
Location: Gold Coast, SUBURB</p>

‎style/style.css‎

Lines changed: 35 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,22 @@ a:hover, a:focus {
2121
/* Discord Promo Section */
2222

2323
.discord-promo {
24-
background: var(--python-yellow);
25-
padding: 2rem 1rem;
26-
margin: 2rem auto 2.5rem auto;
27-
border-radius: 14px;
28-
max-width: 900px;
29-
box-shadow: 0 4px 24px var(--faint-shadow);
24+
display: flex;
25+
align-content: center;
26+
justify-content: center;
27+
margin: 2rem;
3028
}
3129

3230
.discord-container {
3331
display: flex;
34-
align-items: center;
35-
gap: 2rem;
3632
flex-wrap: wrap;
33+
gap: 2rem;
34+
align-items: center;
35+
padding: 2rem 1rem;
36+
background: var(--python-yellow);
37+
border-radius: 14px;
38+
max-width: 900px;
39+
box-shadow: 0 4px 24px var(--faint-shadow);
3740
}
3841

3942
.discord-logo {
@@ -93,7 +96,6 @@ a:hover, a:focus {
9396
body {
9497
font-family: 'Segoe UI', Arial, sans-serif;
9598
margin: 0;
96-
margin-bottom: 2rem;
9799
background: #f7f7f7;
98100
color: var(--dark-text);
99101
}
@@ -107,12 +109,14 @@ header {
107109
text-align: center;
108110

109111
img {
110-
margin-left: -56px;
111-
margin-top: -56px;
112+
padding: 20px;
113+
margin-left: -76px;
114+
margin-top: -76px;
112115
justify-self: start;
113116
align-self: flex-start;
114117
max-height: 10rem;
115118
transition: transform 0.4s ease-in-out;
119+
z-index: 2;
116120

117121
&:hover {
118122
transform: translate(76px, 76px);
@@ -131,7 +135,8 @@ header {
131135
}
132136

133137
div {
134-
padding: 1rem 0.5rem;
138+
margin-left: -76px;
139+
padding: 1.5rem 0rem;
135140
width: 100%;
136141
}
137142

@@ -148,24 +153,26 @@ header {
148153
}
149154

150155
main {
151-
max-width: 1200px;
152-
margin: 0 auto;
153-
padding-bottom: 2rem;
156+
display: flex;
157+
flex-direction: column;
158+
padding: 0 4rem 2rem;
159+
row-gap: 2rem;
154160
}
155161

156162
.meetups h2 {
163+
margin: 0px;
157164
font-size: 2rem;
158-
margin-bottom: 2rem;
159165
color: var(--python-blue);
160166
text-align: left;
161167
}
162168

163169
.meetup-grid {
164170
display: grid;
165171
grid-template-columns: repeat(3, 1fr);
166-
grid-template-rows: repeat(3, 1fr);
172+
grid-auto-flow: row;
173+
grid-auto-rows: min-content;
167174
column-gap: 2rem;
168-
row-gap: 3.5rem;
175+
row-gap: 2rem;
169176
}
170177

171178

@@ -177,14 +184,14 @@ main {
177184
flex-direction: column;
178185
padding: 1.2rem 1rem 1rem 1rem;
179186
transition: box-shadow 0.2s;
180-
min-height: 240px;
181-
height: 100%;
182187

183188
&:hover {
184189
box-shadow: 0 4px 20px color-mix(in oklab, var(--python-blue), transparent 50%);
185190
}
186191

187192
.meetup-header {
193+
font-size: 0.8rem;
194+
text-align: center;
188195
display: flex;
189196
column-gap: 1rem;
190197
align-items: center;
@@ -235,46 +242,22 @@ main {
235242
}
236243

237244
@media (max-width: 900px) {
238-
.meetup-cell {
239-
min-height: 180px;
240-
}
241-
.meetup-photo {
242-
height: 90px;
243-
}
244-
}
245-
246-
@media (max-width: 600px) {
247-
.meetup-cell {
248-
min-height: 120px;
249-
}
250-
.meetup-photo {
251-
height: 60px;
245+
.discord-promo {
246+
margin: 2rem;
252247
}
253-
}
254248

255-
@media (max-width: 900px) {
256249
.meetup-grid {
257250
grid-template-columns: repeat(2, 1fr);
258-
grid-template-rows: repeat(5, 1fr);
259-
gap: 1.2rem;
260251
}
261252
}
262253

263254
@media (max-width: 600px) {
264-
.meetup-grid {
265-
grid-template-columns: 1fr;
266-
grid-template-rows: repeat(9, 1fr);
267-
gap: 1rem;
255+
main {
256+
padding: 0 2rem 1rem;
268257
}
269-
.meetup-cell {
270-
padding: 1rem 0.5rem;
271-
}
272-
.meetup-logo {
273-
width: 50px;
274-
height: 50px;
275-
}
276-
.meetup-photo {
277-
max-width: 100%;
278-
height: 80px;
258+
259+
.meetup-grid {
260+
grid-template-columns: repeat(1, 1fr);
261+
row-gap: 1rem;
279262
}
280263
}

0 commit comments

Comments
 (0)