Skip to content
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

Jump to bottom

feature: Standardize text container styles #26

Merged
merged 2 commits into from
Oct 31, 2023
Merged

feature: Standardize text container styles #26

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5de10d5
Standardize text container styles, fix gradiant background
WillBAnders Oct 31, 2023
f3690d4
Change width to be 100%, not 100vw, to avoid scrollbar issues on Chrome
WillBAnders Oct 31, 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
29 changes: 5 additions & 24 deletions src/app/Home.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,14 @@
.landingBackground h1 {
font-size: 2em;
margin-bottom: 1rem;
margin-left: 1em;
margin-right: 1em;
}

.landingBackground h2 {
font-size: 1.5em;
margin-bottom: 0.5rem;
margin-left: 1em;
margin-right: 1em;
}

.landingBackground p {
margin-bottom: 0.5rem;
margin-left: 1em;
margin-right: 1em;
}

.centerText {
.content {
margin: 0 auto;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .content class is currently the same for each page, but I'm opting not to condense these as that may not be true for long. If we find this is common for other pages too we can abstract it then (WET - Write Everything Twice).

max-width: 800px;
text-align: center;
}

.landingBackground {
padding: 1px; /* hack to prevent margin collapse */
background-image: url("/landing-background.jpg");
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is... dumb. There are better way to do this, but the background image doesn't really work with the navbar (because the navbar takes up height causing the image to go past the bottom of the page) and it's a larger overhaul to address that. Will revisit this problem later; we may end up changing how this background image is used anyways.

background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}


23 changes: 5 additions & 18 deletions src/app/about/About.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,9 @@
.about {
.content {
margin: 0 auto;
max-width: 800px;
text-align: center;
}

/* CSS Modules recommends camelCase
See: https://github.com/css-modules/css-modules#naming */
.imageContainer {
display: flex;
justify-content: center;
margin-top: 2rem;
}

.title {
margin-bottom: 5rem;
font-size: 3rem;
}


.description {
margin: 0 auto;
max-width: 1000px;
.image {
margin: auto;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Little bit of CSS/DOM simplification.

24 changes: 11 additions & 13 deletions src/app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import styles from "./About.module.css";

export default function About() {
return (
<main className={styles.about}>
<h1 className={styles.title}>About</h1>
<div className={styles.descriptionContainer}>
<p className={styles.description}>
<main className={styles.content}>
<h1>About</h1>
<div>
<p>
We are an organization that helps students learn and apply software
engineering principles to real-world applications. We host weekly
workshops on topics like software design to help bridge the gap
Expand All @@ -16,15 +16,13 @@ export default function About() {
careers in software development.
</p>
</div>

<div className={styles.imageContainer}>
<Image
src="fall_2022_planning_meeting.jpg"
alt="SSD members (about 30) at our Fall 2022 planning meeting in CISE."
height={600}
width={600}
/>
</div>
<Image
className={styles.image}
src="fall_2022_planning_meeting.jpg"
alt="SSD members (about 30) at our Fall 2022 planning meeting in CISE."
height={600}
width={600}
/>
</main>
);
}
17 changes: 16 additions & 1 deletion src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,26 @@
}

body {
width: 100vw;
Copy link
Contributor

@angel1254mc angel1254mc Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Question]: On Firefox this works like a charm but on Chrome vertical scrollbars factor into the total view-width of the page, forcing a horizontal scrollbar at the bottom :'(. Is there any way we could omit the width property to prevent this or set it to width: 100%? (for both this and landingBackground)

image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like Firefox and Safari are correct according to the spec, Chrome is off in wonderland. Sigh, this is easily the most painful part of web development. Good catch though; width: 100% should be fine in our use case (but is not generally equivalent).

height: 100vh;
color: var(--theme-color-text);
background: linear-gradient(
to bottom right,
var(--background-gradiant-dark),
var(--background-gradiant-light)
)
) fixed;
}

h1 {
margin: 0.75em 4px;
font-size: 2em;
}

h2 {
margin: 0.75em 4px;
font-size: 1.5em;
}

p {
margin: 0.75em 4px;
}
32 changes: 17 additions & 15 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,22 @@ import styles from "./Home.module.css";

export default function Home() {
return (
<main className={`${styles.centerText} ${styles.landingBackground}`}>
<h1>Society of Software Developers</h1>
<h2>Software Development & Design</h2>
<p>
We are an organization that helps students learn and apply software
engineering principles to real-world applications. We host weekly
workshops on topics like software design to help bridge the gap between
what students need to know for industry and what they&apos;re taught in
classes. These concepts help with building complex software systems and
better prepare members for team projects, internships, and careers in
software development.
</p>
<h2>Fall 2023 Meetings</h2>
<p>Tuesday, 6:15pm in CISE A101 and over Zoom</p>
</main>
<div className={styles.landingBackground}>
<main className={styles.content}>
<h1>Society of Software Developers</h1>
<h2>Software Development & Design</h2>
<p>
We are an organization that helps students learn and apply software
engineering principles to real-world applications. We host weekly
workshops on topics like software design to help bridge the gap
between what students need to know for industry and what they&apos;re
taught in classes. These concepts help with building complex software
systems and better prepare members for team projects, internships, and
careers in software development.
</p>
<h2>Fall 2023 Meetings</h2>
<p>Tuesday, 6:15pm in CISE A101 and over Zoom</p>
</main>
</div>
);
}
Loading