Skip to content

Commit 97a1261

Browse files
jackreicheltjackreichelt
committed
CSS tweaks and cleanup
1 parent bfe84af commit 97a1261

File tree

2 files changed

+74
-71
lines changed

2 files changed

+74
-71
lines changed

‎index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ <h1>Python Australia</h1>
2323
</header>
2424

2525
<section class="promo">
26-
<div class="promo-container discord-container">
27-
<img src="assets/logos/pyaus-logo.svg" alt="Discord Logo" class="promo-logo">
28-
<div class="promo-info discord-promo-color">
26+
<div class="discord">
27+
<img src="assets/logos/pyaus-logo.svg" alt="Discord Logo" class="promo-logo discord">
28+
<div class="promo-info discord">
2929
<h2>Join the Python Australia Community Discord!</h2>
3030
<p>Connect with Python enthusiasts from all over Australia. Our Discord server is the perfect place to chat, get notified about events in your area, and discover new ways to get involved in the community. Please remember to abide by our <a href="https://policies.python.org/python.org/code-of-conduct/">Code of Conduct</a> (courtesy of the PSF).</p>
3131
<a href="https://discord.gg/HNt6YddsaK" class="promo-link" target="_blank">Join the Python Australia Discord</a>
@@ -34,10 +34,10 @@ <h2>Join the Python Australia Community Discord!</h2>
3434
</section>
3535

3636
<section class="promo">
37-
<div class="promo-container github-border github-promo-colour">
38-
<img src="assets/logos/github.svg" alt="Github Logo" class="promo-logo github-border github-promo-colour">
37+
<div class="github">
38+
<img src="assets/logos/github.svg" alt="Github Logo" class="promo-logo github">
3939
<!-- TODO: would be great if this SVG was a better colour -->
40-
<div class="promo-info github-promo-colour">
40+
<div class="promo-info github">
4141
<h2>Python Australia Github</h2>
4242
<p>
4343
<!-- TODO: need to gind better wording for this-->

‎style/style.css‎

Lines changed: 68 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -32,95 +32,102 @@ body {
3232
color: light-dark(var(--dark-text), var(--light-text));
3333
}
3434

35-
/* General link colour */
3635
a {
37-
color: var(--python-blue);
3836
text-decoration: underline;
39-
transition: color 0.2s;
4037
}
41-
a:hover, a:focus {
42-
color: var(--python-blue);
43-
text-decoration: underline;
44-
}
45-
/* Discord Promo Section */
4638

4739
.promo {
4840
display: flex;
4941
align-content: center;
5042
justify-content: center;
5143
margin: 2rem;
52-
}
5344

54-
.promo-container {
55-
display: flex;
56-
flex-wrap: wrap;
57-
gap: 2rem;
58-
align-items: center;
59-
padding: 2rem 1rem;
60-
background: light-dark(var(--python-yellow), var(--dark-background));
61-
border-radius: 14px;
62-
max-width: 900px;
63-
box-shadow: 0 4px 24px var(--faint-shadow);
64-
border: 2px solid light-dark(var(--python-yellow), var(--dark-yellow));
65-
}
45+
>div {
46+
display: flex;
47+
flex-wrap: wrap;
48+
gap: 2rem;
49+
align-items: center;
50+
padding: 2rem 1rem;
51+
border-radius: 14px;
52+
max-width: 900px;
53+
box-shadow: 0 4px 24px var(--faint-shadow);
54+
55+
&.discord {
56+
background: light-dark(var(--python-yellow), var(--dark-background));
57+
border: 2px solid light-dark(var(--python-yellow), var(--dark-yellow));
58+
color: light-dark(var(--dark-text), var(--light-text))
59+
}
6660

61+
&.github {
62+
background: light-dark(var(--light-background), var(--dark-background));
63+
border: 2px solid light-dark(var(--dark-background), var(--light-background));
64+
}
6765

66+
h2 {
67+
color: light-dark(var(--python-blue), var(--python-yellow));
68+
}
69+
}
70+
}
6871

6972
.promo-logo {
7073
width: 90px;
7174
height: 90px;
7275
object-fit: contain;
73-
background-color: light-dark(var(--python-blue), var(--python-yellow));
7476
border-radius: 100%;
75-
border: 2px solid light-dark(var(--python-blue), var(--python-yellow));
7677
box-shadow: 0 2px 8px var(--faint-shadow);
78+
79+
&.discord {
80+
background-color: light-dark(var(--python-blue), var(--python-yellow));
81+
border: 2px solid light-dark(var(--python-blue), var(--python-yellow));
82+
}
83+
84+
&.github {
85+
background-color: var(--light-background);
86+
color: var(--light-background);
87+
border: 2px solid light-dark(var(--dark-text), var(--light-text));
88+
}
7789
}
7890

7991
.promo-info {
8092
flex: 1;
8193
min-width: 220px;
82-
}
8394

84-
.promo-info h2 {
85-
margin: 0 0 0.5rem 0;
86-
font-size: 1.7rem;
87-
letter-spacing: 1px;
88-
}
95+
h2 {
96+
margin: 0 0 0.5rem 0;
97+
font-size: 1.7rem;
98+
letter-spacing: 1px;
99+
}
89100

90-
.promo-info p {
91-
font-size: 1.1rem;
92-
margin-bottom: 1rem;
101+
p {
102+
font-size: 1.1rem;
103+
margin-bottom: 1rem;
104+
}
93105

94-
}
106+
a {
107+
text-align: center;
108+
}
95109

96-
.discord-promo-color {
97-
color: light-dark(var(--python-blue), var(--python-yellow));
110+
&.discord {
111+
p a {
112+
color: light-dark(var(--dark-blue), var(--python-yellow));
113+
text-decoration-color: light-dark(var(--python-blue), var(--python-yellow));
98114

99-
p a {
100-
color: light-dark(var(--dark-blue), var(--python-yellow));
101-
text-decoration-color: light-dark(var(--python-blue), var(--python-yellow));
115+
&:visited {
116+
color: light-dark(var(--darker-blue), var(--dark-yellow))
117+
}
118+
}
102119
}
103-
}
104-
.github-border {
105-
border: 2px solid light-dark(var(--github-light-grey), var(--github-light-grey));
106-
107-
}
108-
.github-promo-colour {
109-
background: light-dark(var(--github-light-grey), var(--dark-background));
110120

111-
h2 {
112-
text-decoration-color: light-dark(var(--dark-text), var(--github-light-grey));
121+
&.github {
122+
p a {
123+
color: light-dark(var(--dark-blue), var(--python-yellow));
124+
text-decoration-color: light-dark(var(--python-blue), var(--python-yellow));
113125

126+
&:visited {
127+
color: light-dark(var(--darker-blue), var(--dark-yellow))
128+
}
129+
}
114130
}
115-
p {
116-
text-decoration-color: light-dark(var(--dark-text), var(--github-light-grey));
117-
color: light-dark(var(--dark-text), var(--github-light-grey));
118-
}
119-
p a {
120-
color: light-dark(var(--dark-blue), var(--python-yellow));
121-
text-decoration-color: light-dark(var(--python-blue), var(--python-yellow));
122-
}
123-
124131
}
125132

126133
.promo-link {
@@ -133,11 +140,10 @@ a:hover, a:focus {
133140
text-decoration: none;
134141
font-size: 1.1rem;
135142
box-shadow: 0 2px 8px var(--faint-shadow);
136-
transition: background 0.2s, color 0.2s;
137-
}
138143

139-
.promo-link:hover {
140-
color: var(--light-text);
144+
&:hover {
145+
text-decoration: underline;
146+
}
141147
}
142148

143149
header {
@@ -308,9 +314,6 @@ main {
308314
}
309315

310316
@media (max-width: 900px) {
311-
.discord-promo {
312-
margin: 2rem;
313-
}
314317

315318
.meetup-grid {
316319
grid-template-columns: repeat(2, 1fr);
@@ -327,13 +330,13 @@ main {
327330
row-gap: 1rem;
328331
}
329332

330-
.discord-container {
333+
.promo>div {
331334
flex-direction: column;
332335
align-items: center;
333336
gap: 1rem;
334337
}
335338

336-
.discord-logo {
339+
.promo-logo {
337340
width: 70px;
338341
height: 70px;
339342
}

0 commit comments

Comments
 (0)