diff --git a/static/serverscoop.css b/static/serverscoop.css
index a22a9ed..eeacbd5 100644
--- a/static/serverscoop.css
+++ b/static/serverscoop.css
@@ -5,6 +5,8 @@ body {
justify-content: center;
background-color: var(--background);
font-family: var(--font-family-sans);
+ margin: 0;
+ padding: 0;
}
main {
@@ -20,7 +22,8 @@ main {
}
@media screen and (max-width: 786px) {
main {
- width: var(--width-mobile);
+ padding: 0;
+ width: 100%;
}
}
@@ -50,7 +53,7 @@ h3 {
header {
margin-top: 1.5vh;
- margin-right: 8vw;
+ margin-right: 220px;
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -74,6 +77,8 @@ header img {
width: 316px;
}
+
+
@media screen and (max-width: 1280px) {
header {
margin-top: 0.4rem;
@@ -103,6 +108,7 @@ header img {
.splash {
display: flex;
flex-direction: row;
+ width: 100%;
margin-top: 2rem;
}
@@ -139,6 +145,17 @@ header img {
.splash > .button-links {
display: none;
}
+/* on large screens, move the logo & splash stuff away from the left gutter a bit*/
+@media screen and (min-width: 1280px) {
+ .splash-text-content h1,
+ .splash-text-content p,
+ .button-links,
+ header img {
+ margin-left: 2rem;
+ }
+}
+
+/* on smaller screens move the button links out of the splash, below the pyramid image*/
@media screen and (max-width: 1280px) {
.splash {
margin-top: 0;
@@ -168,8 +185,14 @@ header img {
margin-bottom: 80px;
display: flex;
}
+ .pyramid-image {
+ right: 0;
+ }
}
@media screen and (max-width: 768px) {
+ .splash {
+ width: var(--width-mobile);
+ }
.splash-text-content {
text-align: initial;
}
@@ -196,6 +219,7 @@ header img {
+
.button-link {
font-family: var(--font-family-mono);
padding: 15px 22px;
@@ -225,7 +249,7 @@ header img {
}
@media screen and (max-width: 768px) {
.background-tilt-top, .background-tilt-bottom {
- width: var(--width-mobile);
+ width: 100%;
}
}
@@ -290,6 +314,9 @@ header img {
.main-content-footer p {
max-width: 70%;
}
+ .main-content-paragraph {
+ max-width: 80%;
+ }
}
@media screen and (max-width: 768px) {
.main-content h1 {