Skip to content

Commit ab4a455

Browse files
andrewhong04andrewhong04
authored
Merge pull request #17 from pygame-community/css-cleanup
Some design changes & CSS refactoring
2 parents ec8d28d + df93cb4 commit ab4a455

File tree

7 files changed

+42
-122
lines changed

7 files changed

+42
-122
lines changed

‎src/assets/six-shooter-1.png‎

-381 KB
Binary file not shown.

‎src/components/get-involved.tsx‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,13 @@ import Button from '@/components/button';
44
export default function GetInvolved() {
55
return (
66
<div className={styles.getinvolved}>
7-
<div className={styles.showcasecontainer}>
8-
<div className={styles.showcaseimage} />
9-
<a href="https://plasmastarfish.itch.io/six-shooter">
10-
<p>&quot;Six Shooter&quot; by plasmastarfish</p>
11-
</a>
12-
</div>
13-
<div>
14-
<div className={styles.card}>
15-
<div className={styles.label}>Get Involved</div>
16-
Join the global team behind the most popular Python game framework. Ranging from documentation revisions to
17-
introducing new features to the pygame API.
18-
<div style={{ display: 'flex', marginTop: '10px' }}>
19-
<Button text="GitHub" fontSize="1.2rem" link="https://github.com/pygame-community" />
20-
<Button text="Discord" fontSize="1.2rem" link="https://discord.gg/pygame" />
21-
</div>
7+
<div className={styles.card}>
8+
<div className={styles.label}>Get Involved</div>
9+
Join the global team behind the most popular Python game framework. Ranging from documentation revisions to
10+
introducing new features to the pygame API.
11+
<div style={{ display: 'flex', marginTop: '10px' }}>
12+
<Button text="GitHub" fontSize="1.2rem" link="https://github.com/pygame-community" />
13+
<Button text="Discord" fontSize="1.2rem" link="https://discord.gg/pygame" />
2214
</div>
2315
</div>
2416
</div>

‎src/components/powered.tsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { MouseEvent } from 'react';
1+
import React from 'react';
2+
import Head from 'next/head';
23
import styles from '@/styles/powered.module.css';
34
import drawnDownAbyss1 from '@/assets/drawn-down-abyss-1.png';
45
import froggo1 from '@/assets/froggo-swing-n-grapple-1.png';
@@ -66,26 +67,33 @@ class Powered extends React.Component<any, any> {
6667
}
6768

6869
return (
69-
<div
70-
className={styles.powered}
71-
style={{
72-
backgroundImage: `url(${currentGame.image})`,
73-
}}
74-
>
75-
<div className={styles.poweredcontainer}>
76-
<div className={styles.header}>Pygame Powered</div>
77-
Over the many years pygame has been around, there have been amazing projects created by the community.
78-
<div className={styles.poweredcards}>
79-
{games.map((data, key) => {
80-
return (
81-
<div key={key} onMouseEnter={this.changeBackground} data-info={key}>
82-
<PoweredCard name={data.name} author={data.author} link={data.mainlink} />
83-
</div>
84-
);
85-
})}
70+
<>
71+
<Head>
72+
{games.map((data, key) => {
73+
return <link key={key} rel="preload" href={data.image} as="image" />;
74+
})}
75+
</Head>
76+
<div
77+
className={styles.powered}
78+
style={{
79+
backgroundImage: `url(${currentGame.image})`,
80+
}}
81+
>
82+
<div className={styles.poweredcontainer}>
83+
<div className={styles.header}>Pygame Powered</div>
84+
Over the many years pygame has been around, there have been amazing projects created by the community.
85+
<div className={styles.poweredcards}>
86+
{games.map((data, key) => {
87+
return (
88+
<div key={key} onMouseEnter={this.changeBackground} data-info={key}>
89+
<PoweredCard name={data.name} author={data.author} link={data.mainlink} />
90+
</div>
91+
);
92+
})}
93+
</div>
8694
</div>
8795
</div>
88-
</div>
96+
</>
8997
);
9098
}
9199
}

‎src/pages/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Head from 'next/head';
2-
import styles from '@/styles/Home.module.css';
32
import Navbar from '@/components/nav-bar';
43
import Hero from '@/components/hero';
54
import About from '@/components/about';
@@ -16,7 +15,7 @@ export default function Home() {
1615
<meta name="viewport" content="width=device-width, initial-scale=1" />
1716
<link rel="icon" href="/favicon.ico" />
1817
</Head>
19-
<main className={styles.main}>
18+
<main>
2019
<Navbar />
2120
<Hero />
2221
<About />

‎src/styles/Home.module.css‎

Whitespace-only changes.

‎src/styles/get-involved.module.css‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,3 @@
2828
font-size: 3rem;
2929
font-weight: 700;
3030
}
31-
32-
.showcasecontainer {
33-
font-size: 1rem;
34-
font-weight: 400;
35-
}
36-
37-
.showcaseimage {
38-
width: 750px;
39-
height: 600px;
40-
border-radius: 10px;
41-
background-image: url(../assets/six-shooter-1.png);
42-
background-position: center center;
43-
background-color: aliceblue;
44-
background-repeat: no-repeat;
45-
background-size: cover;
46-
}
47-
48-
@media only screen and (max-width: 1500px) {
49-
.showcasecontainer {
50-
display: none;
51-
}
52-
}

‎src/styles/hero.module.css‎

Lines changed: 7 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,19 @@
99
}
1010

1111
.textcontainer {
12-
font-size: 3.5rem;
13-
}
14-
15-
.disclaimer {
16-
font-size: 1rem;
12+
font-size: 3vw;
1713
}
1814

1915
.pipinstallcontainer {
2016
width: max-content;
2117
background-color: rgb(20, 20, 20);
22-
border-radius: 0.25em;
23-
padding: 0.25em 0.5em;
24-
25-
margin-top: 0.5em;
18+
border-radius: 1vw;
19+
padding: 1vw;
20+
margin-top: 8px;
2621
}
2722

2823
.pipinstall {
29-
font-size: 1.2rem;
24+
font-size: 1.2vw;
3025
font-family: 'Source Code Pro', monospace;
3126

3227
overflow: hidden;
@@ -47,8 +42,8 @@
4742
}
4843

4944
.showcaseimage {
50-
width: 750px;
51-
height: 600px;
45+
width: 45vw;
46+
height: 38vw;
5247
border-radius: 10px;
5348
background-color: aliceblue;
5449
background-image: url(https://i.imgur.com/7mOk5E7.gif);
@@ -86,65 +81,13 @@
8681
}
8782
}
8883

89-
@media only screen and (max-width: 1500px) {
90-
.textcontainer {
91-
font-size: 3rem;
92-
}
93-
94-
.pipinstall {
95-
font-size: 1rem;
96-
}
97-
98-
.showcasecontainer {
99-
font-size: 0.7rem;
100-
}
101-
102-
.showcaseimage {
103-
width: 500px;
104-
height: 400px;
105-
}
106-
}
107-
108-
@media only screen and (max-width: 1200px) {
109-
.textcontainer {
110-
font-size: 2.3rem;
111-
}
112-
113-
.pipinstall {
114-
font-size: 0.6rem;
115-
}
116-
117-
.showcasecontainer {
118-
font-size: 0.7rem;
119-
}
120-
121-
.showcaseimage {
122-
width: 375px;
123-
height: 300px;
124-
}
125-
}
126-
12784
@media only screen and (max-width: 950px) {
128-
.textcontainer {
129-
font-size: 1.9rem;
130-
}
131-
13285
.showcasecontainer {
13386
display: none;
13487
}
13588
}
13689

13790
@media only screen and (max-width: 600px) {
138-
.textcontainer {
139-
font-size: 1.5rem;
140-
}
141-
142-
.pipinstall {
143-
font-size: 0.5rem;
144-
padding: 15px;
145-
border-radius: 10px;
146-
}
147-
14891
.pipinstallcontainer,
14992
.pipinstall {
15093
display: none;

0 commit comments

Comments
 (0)