Homepage fix (#104)

* made changes based on comments

* css linter

* Moved blocks into own spaces (#105)

* Moved blocks into own spaces

Moved the different content blocks into their own files

* Added fullwidth parameter

* Fixed issue with end tag

* Fixed a typo

* Added containers

* Moved the container class

* Fixed some linting issues

* mobile changes

* Mobile adjustments

* Update home.css

* mobile adjustments

* linting

---------

Co-authored-by: Steve Goode <52213009+SociableSteve@users.noreply.github.com>

Author: MariamM110

assets/style/bioconductor.css

@@ -8,6 +8,7 @@ body {
 main {
   background: var(--neutral-n50);
   margin: 1rem 0;
+  overflow: hidden;
 }
 
 .container {

assets/style/buttons.css

@@ -7,8 +7,9 @@
   display: block;
   width: fit-content;
   transition: 0.3s;
-  padding: 0.6rem 0.8rem;
+  padding: 0.1rem 0.8rem;
   border-radius: 8rem;
+  text-decoration: none;
 }
 
 .white-button:hover {

assets/style/footer.css

@@ -8,7 +8,7 @@ footer {
   border-width: 0.625rem 0 0; /* 10px */
   border-image: var(--gradient-brandreverse) 1;
   color: #fff;
-  font-size: 0.7rem;
+  font-size: 1rem;
   height: auto;
   box-sizing: border-box;
 }
@@ -26,12 +26,14 @@ footer * {
 .link-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  margin-bottom: 3.5rem;
 }
 
 .link-container-inner {
   display: flex;
   justify-content: flex-start;
   width: 100%;
+  margin-bottom: 1rem;
 }
 
 :is(.link-container-inner nav) {
@@ -80,6 +82,7 @@ footer * {
 
   .link-container {
     display: block;
+    margin-bottom: 0;
   }
 
   :is(.link-container-inner nav) {

assets/style/header.css

@@ -70,7 +70,7 @@ header {
   outline: none;
   background-color: transparent;
   padding-left: 0.25rem;
-  padding-top: 3px;
+  padding-top: 5px;
 }
 
 input::placeholder {
@@ -224,6 +224,7 @@ input:focus::placeholder {
     width: 100%;
     border-radius: 0%;
     align-items: center;
+    padding: 1.5rem 0;
   }
 
   .get-started {

assets/style/hero.css

@@ -3,7 +3,12 @@
   margin: 0 auto;
   text-align: center;
   background-color: white;
-  padding: 4.5rem 0;
+  padding-top: 2rem;
+}
+
+.homepage-container {
+  padding-top: 2rem;
+  padding-bottom: 4rem;
 }
 
 .hero h1 {
@@ -29,8 +34,21 @@ a.button-hero {
   text-decoration: none;
 }
 
+.mobile-break {
+  display: none;
+}
+
 @media screen and (width <= 768px) {
+  .homepage-container {
+    padding: 1rem 0.5rem;
+  }
+
+  .mobile-break {
+    display: block;
+  }
+
   .hero p {
-    font-size: 1rem;
+    margin: 0;
+    margin-bottom: 1rem;
   }
 }