-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
feature: Standardize text container styles #26
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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; | ||
max-width: 800px; | ||
text-align: center; | ||
} | ||
|
||
.landingBackground { | ||
padding: 1px; /* hack to prevent margin collapse */ | ||
background-image: url("/landing-background.jpg"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; | ||
} | ||
|
||
|
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; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Little bit of CSS/DOM simplification. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -13,11 +13,26 @@ | |
} | ||
|
||
body { | ||
width: 100vw; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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; |
||
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; | ||
} |
There was a problem hiding this comment.
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).