Grid system for white paper page

src/layouts/page/white-paper.html

@@ -3,12 +3,14 @@
 {{- partial "white-paper-gen-art.html" -}}
 
 <!-- Hero Section -->
-<div class="section two-boxes hero-section">
+<div class="section two-boxes wp-hero-section">
   <div class="container">
     <div class="row">
       <div class="col" style="position: relative; z-index: 2;">
         <h1>White Paper</h1>
-        <p class="lead animated-5 animatedFadeInUp fadeInUp" style="background-color: #1a1a1a;">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
+        <div class="wp-lead-text-container animated-5 animatedFadeInUp fadeInUp p-4 black-bg">
+          <p class="lead" style="margin-bottom: 0px;">Open‐source is about the many coming together to create something great. In the spirit of that, we’re inviting developers, speculators, and enthusiasts alike to contribute to our white paper and help brew the future of the internet. This is our revolutionary undertaking to create equitable open‐source for web3, and we want you to be a part of laying its groundwork.</p>
+        </div>
         <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>

src/layouts/partials/head.html

@@ -66,6 +66,7 @@
     <link rel="stylesheet" href="/css/products.css">
     <link rel="stylesheet" href="/css/accordion.css">
     <link rel="stylesheet" href="/css/nebraska-man.css">
+    <link rel="stylesheet" href="/css/white-paper.css">
     <link rel="stylesheet" href="/css/spacing.css">
     <link
       rel="stylesheet"

src/layouts/partials/white-paper-gen-art.html

@@ -1,10 +1,3 @@
-<!-- Desktop -->
-
-<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-1"></div>
-<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="wp-gen-art-2"></div>
-<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-3"></div>
-<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-4"></div>
-
 <!-- Mobile -->
 
 <div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-wp-gen-art-1"></div>
@@ -14,63 +7,6 @@
 
 <style>
 
-  #wp-gen-art-1{
-    position:absolute;
-    width:34vw;
-    height: 18vw;
-    right: 5.8vw;
-    top:16.741vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/orange-pattern.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #wp-gen-art-2{
-    position:absolute;
-    width:34vw;
-    height: 12vw;
-    left: 5.8vw;
-    top:11.161vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/dream-tree.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #wp-gen-art-3{
-    position:absolute;
-    width:12vw;
-    height: 12vw;
-    border-radius: 200px;
-    left: 36vw;
-    top:16vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #wp-gen-art-4{
-    position:absolute;
-    width:45vw;
-    height: 7vw;
-    left: 36vw;
-    top:40vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/white-light-pattern.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
   #m-wp-gen-art-1{
     position:absolute;
     width:29vw;

src/static/css/white-paper.css

@@ -0,0 +1,93 @@
+/* Breakpoints for re-use*/
+
+@media only screen and (min-width: 1200px) {
+
+  .wp-hero-section{
+    background-image: url("/Images/wp-x-large-grid-generative-art.gif") !important;
+    background-attachment: scroll;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: cover;
+  }
+
+  .wp-lead-text-container{
+    border: 1px solid #949494 !important;
+    width: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20.8vw;
+    margin-top: 0.9vw;
+  }
+
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+  .wp-hero-section{
+    background-image: url("/Images/wp-large-grid-generative-art.gif") !important;
+    background-attachment: scroll;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+  .wp-lead-text-container{
+    border: 1px solid #949494 !important;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 25vw;
+    margin-top: 1.1vw;
+  }
+
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+  .wp-hero-section{
+    background-image: url("/Images/wp-large-grid-generative-art.gif") !important;
+    background-attachment: scroll;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+  .wp-lead-text-container{
+    border: 1px solid #949494 !important;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30vw;
+    margin-top: 0vw;
+  }
+
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+  .wp-hero-section{
+    background-image: url("/Images/wp-medium-grid-generative-art.gif") !important;
+    background-attachment: scroll;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+  .wp-lead-text-container{
+    border: 1px solid #949494 !important;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 47vw;
+    margin-top: -1vw;
+  }
+
+}
+
+@media only screen and (max-width: 576px) {
+
+}