Feat/homepage content (#81)

* html

* hero

* hero button

* hero section

* page content added

* flex on the content section

* added svgs

* set margins for headings

* finished responsive design

* finished responsive design

* linter errors

* cleanup

* changing back buttons

* changing to rem

* Update bioconductor-v2.css

* merge fix

* liner fixes

Author: bp289

assets/images/icons/svgs/DNA.svg

@@ -21,12 +21,6 @@
   box-shadow: 0 5px 4px 0 rgba(0 0 0 / 18%) inset;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .button-hero {
-    transition: none;
-  }
-}
-
 .brand-border-button {
   background-image: var(--gradient-brand);
   border-radius: 8rem;
@@ -70,16 +64,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .brand-border-button:hover {
-    color: var(--primary-p400);
-  }
-
-  .brand-border-button:hover svg path {
-    stroke: var(--primary);
-  }
-
-  .brand-border-button:hover span {
-    background: #fff;
-    color: var(--primary-p400);
+  .brand-border-button,
+  .brand-border-button svg path,
+  .brand-border-button span,
+  .button-hero {
+    transition: none;
   }
 }

assets/images/icons/svgs/Packages.svg

@@ -29,7 +29,8 @@ h6,
 .text-h5,
 .text-h6 {
   line-height: 120%;
-  margin-bottom: 0.3rem; /* 5px  */
+  margin-block-end: 0.5rem;
+  margin-block-start: 0.5rem;
 }
 
 h1,
@@ -107,8 +108,6 @@ h6,
 p,
 a,
 .base {
-  margin-top: 0;
-  margin-bottom: 0;
   font-size: 1rem; /* 16px */
   line-height: 130%;
   letter-spacing: 0;

assets/style/buttons.css

@@ -1,3 +1,43 @@
+.information-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  background-color: inherit;
+  gap: 2rem;
+}
+
+.news,
+.packages,
+.about-bioconductor {
+  max-width: 24rem;
+  min-width: 24rem;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.information-container section * {
+  text-align: start;
+}
+
+.news p {
+  border-left: 3px solid;
+  border-color: var(--primary);
+  padding-left: 12px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+
+.info-section-button-padding {
+  width: fit-content;
+}
+
+.info-section-button-padding .brand-border-button {
+  height: 2.5rem;
+}
+
 .learn-gradient {
   background-image: var(--gradient-brand);
   border-radius: 4px;
@@ -92,6 +132,12 @@
   .button-padding {
     width: 60%;
   }
+
+  .information-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {