Skip to content

CSS refactoring #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 15, 2023
Merged

CSS refactoring #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ef7708
Cleanup some CSS
andrewhong04 Mar 7, 2023
64c831b
Push new inprogress pygame powered section
andrewhong04 Mar 7, 2023
1dd57da
Revert "Push new inprogress pygame powered section"
andrewhong04 Apr 15, 2023
5dca737
Remove Six Shooter
andrewhong04 Apr 15, 2023
df93cb4
Preload game background images
andrewhong04 Apr 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed src/assets/six-shooter-1.png
View file
Open in desktop
Binary file not shown.
22 changes: 7 additions & 15 deletions src/components/get-involved.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,13 @@ import Button from '@/components/button';
export default function GetInvolved() {
return (
<div className={styles.getinvolved}>
<div className={styles.showcasecontainer}>
<div className={styles.showcaseimage} />
<a href="https://plasmastarfish.itch.io/six-shooter">
<p>&quot;Six Shooter&quot; by plasmastarfish</p>
</a>
</div>
<div>
<div className={styles.card}>
<div className={styles.label}>Get Involved</div>
Join the global team behind the most popular Python game framework. Ranging from documentation revisions to
introducing new features to the pygame API.
<div style={{ display: 'flex', marginTop: '10px' }}>
<Button text="GitHub" fontSize="1.2rem" link="https://github.com/pygame-community" />
<Button text="Discord" fontSize="1.2rem" link="https://discord.gg/pygame" />
</div>
<div className={styles.card}>
<div className={styles.label}>Get Involved</div>
Join the global team behind the most popular Python game framework. Ranging from documentation revisions to
introducing new features to the pygame API.
<div style={{ display: 'flex', marginTop: '10px' }}>
<Button text="GitHub" fontSize="1.2rem" link="https://github.com/pygame-community" />
<Button text="Discord" fontSize="1.2rem" link="https://discord.gg/pygame" />
</div>
</div>
</div>
Expand Down
46 changes: 27 additions & 19 deletions src/components/powered.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { MouseEvent } from 'react';
import React from 'react';
import Head from 'next/head';
import styles from '@/styles/powered.module.css';
import drawnDownAbyss1 from '@/assets/drawn-down-abyss-1.png';
import froggo1 from '@/assets/froggo-swing-n-grapple-1.png';
Expand Down Expand Up @@ -66,26 +67,33 @@ class Powered extends React.Component<any, any> {
}

return (
<div
className={styles.powered}
style={{
backgroundImage: `url(${currentGame.image})`,
}}
>
<div className={styles.poweredcontainer}>
<div className={styles.header}>Pygame Powered</div>
Over the many years pygame has been around, there have been amazing projects created by the community.
<div className={styles.poweredcards}>
{games.map((data, key) => {
return (
<div key={key} onMouseEnter={this.changeBackground} data-info={key}>
<PoweredCard name={data.name} author={data.author} link={data.mainlink} />
</div>
);
})}
<>
<Head>
{games.map((data, key) => {
return <link key={key} rel="preload" href={data.image} as="image" />;
})}
</Head>
<div
className={styles.powered}
style={{
backgroundImage: `url(${currentGame.image})`,
}}
>
<div className={styles.poweredcontainer}>
<div className={styles.header}>Pygame Powered</div>
Over the many years pygame has been around, there have been amazing projects created by the community.
<div className={styles.poweredcards}>
{games.map((data, key) => {
return (
<div key={key} onMouseEnter={this.changeBackground} data-info={key}>
<PoweredCard name={data.name} author={data.author} link={data.mainlink} />
</div>
);
})}
</div>
</div>
</div>
</div>
</>
);
}
}
Expand Down
3 changes: 1 addition & 2 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Head from 'next/head';
import styles from '@/styles/Home.module.css';
import Navbar from '@/components/nav-bar';
import Hero from '@/components/hero';
import About from '@/components/about';
Expand All @@ -16,7 +15,7 @@ export default function Home() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<main>
<Navbar />
<Hero />
<About />
Expand Down
Empty file removed src/styles/Home.module.css
View file
Open in desktop
Empty file.
22 changes: 0 additions & 22 deletions src/styles/get-involved.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,3 @@
font-size: 3rem;
font-weight: 700;
}

.showcasecontainer {
font-size: 1rem;
font-weight: 400;
}

.showcaseimage {
width: 750px;
height: 600px;
border-radius: 10px;
background-image: url(../assets/six-shooter-1.png);
background-position: center center;
background-color: aliceblue;
background-repeat: no-repeat;
background-size: cover;
}

@media only screen and (max-width: 1500px) {
.showcasecontainer {
display: none;
}
}
71 changes: 7 additions & 64 deletions src/styles/hero.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,19 @@
}

.textcontainer {
font-size: 3.5rem;
}

.disclaimer {
font-size: 1rem;
font-size: 3vw;
}

.pipinstallcontainer {
width: max-content;
background-color: rgb(20, 20, 20);
border-radius: 0.25em;
padding: 0.25em 0.5em;

margin-top: 0.5em;
border-radius: 1vw;
padding: 1vw;
margin-top: 8px;
}

.pipinstall {
font-size: 1.2rem;
font-size: 1.2vw;
font-family: 'Source Code Pro', monospace;

overflow: hidden;
Expand All @@ -47,8 +42,8 @@
}

.showcaseimage {
width: 750px;
height: 600px;
width: 45vw;
height: 38vw;
border-radius: 10px;
background-color: aliceblue;
background-image: url(https://i.imgur.com/7mOk5E7.gif);
Expand Down Expand Up @@ -86,65 +81,13 @@
}
}

@media only screen and (max-width: 1500px) {
.textcontainer {
font-size: 3rem;
}

.pipinstall {
font-size: 1rem;
}

.showcasecontainer {
font-size: 0.7rem;
}

.showcaseimage {
width: 500px;
height: 400px;
}
}

@media only screen and (max-width: 1200px) {
.textcontainer {
font-size: 2.3rem;
}

.pipinstall {
font-size: 0.6rem;
}

.showcasecontainer {
font-size: 0.7rem;
}

.showcaseimage {
width: 375px;
height: 300px;
}
}

@media only screen and (max-width: 950px) {
.textcontainer {
font-size: 1.9rem;
}

.showcasecontainer {
display: none;
}
}

@media only screen and (max-width: 600px) {
.textcontainer {
font-size: 1.5rem;
}

.pipinstall {
font-size: 0.5rem;
padding: 15px;
border-radius: 10px;
}

.pipinstallcontainer,
.pipinstall {
display: none;
Expand Down