From bdddb9e7aa76c666781eaea0de486bbe3900eb62 Mon Sep 17 00:00:00 2001
From: forest <forest.n.johnson@gmail.com>
Date: Sun, 1 Aug 2021 00:30:39 -0500
Subject: [PATCH] small style fixes to desktop view

---
 index.html             |  4 ++--
 static/serverscoop.css | 33 ++++++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index d9328b4..0bccddc 100644
--- a/index.html
+++ b/index.html
@@ -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 >
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 {