forest
/
serverscoop-site
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

small style fixes to desktop view

This commit is contained in:
forest 2021-08-01 00:30:39 -05:00
parent 651830c3c5
commit bdddb9e7aa
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -24,8 +24,8 @@
</div> </div>
</header> </header>
<div class="vertical"> <div class="vertical align-center">
<div class="splash expand space-between"> <div class="splash space-between">
<div class="splash-text-content"> <div class="splash-text-content">
<h1 > <h1 >

33
static/serverscoop.css
View File

@ -5,6 +5,8 @@ body {
justify-content: center; justify-content: center;
background-color: var(--background); background-color: var(--background);
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
margin: 0;
padding: 0;
} }
main { main {
@ -20,7 +22,8 @@ main {
} }
@media screen and (max-width: 786px) { @media screen and (max-width: 786px) {
main { main {
width: var(--width-mobile); padding: 0;
width: 100%;
} }
} }
@ -50,7 +53,7 @@ h3 {
header { header {
margin-top: 1.5vh; margin-top: 1.5vh;
margin-right: 8vw; margin-right: 220px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -74,6 +77,8 @@ header img {
width: 316px; width: 316px;
} }
@media screen and (max-width: 1280px) { @media screen and (max-width: 1280px) {
header { header {
margin-top: 0.4rem; margin-top: 0.4rem;
@ -103,6 +108,7 @@ header img {
.splash { .splash {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%;
margin-top: 2rem; margin-top: 2rem;
} }
@ -139,6 +145,17 @@ header img {
.splash > .button-links { .splash > .button-links {
display: none; 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) { @media screen and (max-width: 1280px) {
.splash { .splash {
margin-top: 0; margin-top: 0;
@ -168,8 +185,14 @@ header img {
margin-bottom: 80px; margin-bottom: 80px;
display: flex; display: flex;
} }
.pyramid-image {
right: 0;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.splash {
width: var(--width-mobile);
}
.splash-text-content { .splash-text-content {
text-align: initial; text-align: initial;
} }
@ -196,6 +219,7 @@ header img {
.button-link { .button-link {
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
padding: 15px 22px; padding: 15px 22px;
@ -225,7 +249,7 @@ header img {
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.background-tilt-top, .background-tilt-bottom { .background-tilt-top, .background-tilt-bottom {
width: var(--width-mobile); width: 100%;
} }
} }
@ -290,6 +314,9 @@ header img {
.main-content-footer p { .main-content-footer p {
max-width: 70%; max-width: 70%;
} }
.main-content-paragraph {
max-width: 80%;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.main-content h1 { .main-content h1 {