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

small style fixes to desktop view

Browse Source
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>
</header>
<div class="vertical">
<div class="splash expand space-between">
<div class="vertical align-center">
<div class="splash space-between">
<div class="splash-text-content">
<h1 >

33
static/serverscoop.css
View File

@ -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 {