From 029136a41322c7b58c4daeca91568977da8a7b4b Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Wed, 21 Sep 2022 18:14:07 -0400
Subject: [PATCH] Moved gen art css over to separate file to clean up
 index.html

---
 src/layouts/index.html            | 120 +-----------------------------
 src/layouts/partials/head.html    |   1 +
 src/static/css/generative-art.css |  97 ++++++++++++++++++++++++
 3 files changed, 99 insertions(+), 119 deletions(-)
 create mode 100644 src/static/css/generative-art.css

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 65a9a13..8cc145d 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -4,34 +4,6 @@
 
 <style>
 
-  #gen-art-1{
-    position:absolute;
-    width:15vw;
-    height: 12.5vw;
-    right: 5.8vw;
-    top:300px;
-    z-index: 0;
-    background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-  #gen-art-2{
-    position:absolute;
-    width:17vw;
-    height: 10vw;
-    right: 16.3vw;
-    top:33.3vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
-    background-attachment: fixed;
-    background-position: right;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-
   #hero-grid-system{
     position:absolute;
     width:100%;
@@ -106,38 +78,8 @@
 
 <!-- Package Section: Before -->
 
-<style>
-  .gen-art-3{
-    background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-    position: absolute;
-    margin-top: 16vw;
-    right: 22vw;
-    width: 26vw;
-    height: 16vw;
-    z-index:2;
-  }
-
-  .gen-art-3{
-    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;
-    position: absolute;
-    margin-top: 12.5vw;
-    right: 16.8vw;
-    width: 29vw;
-    height: 28vw;
-    z-index:1;
-  }
-</style>
-
 <section>
-  <div class="gen-art-3 light-gray-bg"></div>
+  <div class="gen-art" id="gen-art-3"></div>
   <div class="container package_before">
     <div class="row">
       <div class="col">
@@ -172,66 +114,6 @@
 
 <!-- Statistics -->
 
-<style>
-
-  #gen-art-5{
-    position:absolute;
-    width:24.275vw;
-    height: 17.857vw;
-    margin-top: 20vw;
-    right: 8.371vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/glass-triangles.jpg");
-    background-attachment: fixed;
-    background-position: right;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-
-  #gen-art-6{
-    position:absolute;
-    width: 13.560vw;
-    height: 26.897vw;
-    margin-top: 50vw;
-    right: 37.667vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/candy-land.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-
-  #gen-art-7{
-    position:absolute;
-    width: 17.504vw;
-    height: 26.897vw;
-    margin-top: 70vw;
-    left: 8.371vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
-    background-attachment: fixed;
-    background-position: top;
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
-
-  #gen-art-8{
-    position:absolute;
-    width: 8.371vw;
-    height: 8.371vw;
-    margin-top: 90vw;
-    left: 20.8vw;
-    z-index: 0;
-    background-image: url("/Images/gen-art/pixel-mouth.jpg");
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: repeat;
-    background-size: cover;
-  }
-
-</style>
-
 <section class="statistics" style="padding-top: 8.371vw !important; padding-bottom: 8.371vw !important;">
 
 <!-- Generative Art for this section -->
diff --git a/src/layouts/partials/head.html b/src/layouts/partials/head.html
index 901535d..a79484b 100644
--- a/src/layouts/partials/head.html
+++ b/src/layouts/partials/head.html
@@ -51,6 +51,7 @@
     <link rel="stylesheet" href="/css/style.css">
     <link rel="stylesheet" href="/css/typography.css">
     <link rel="stylesheet" href="/css/navbar.css">
+    <link rel="stylesheet" href="/css/generative-art.css">
     <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
     <link href="https://file.myfontastic.com/Fd33ifaooDVpESwnDXETgR/icons.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/src/static/css/generative-art.css b/src/static/css/generative-art.css
new file mode 100644
index 0000000..cb55c2b
--- /dev/null
+++ b/src/static/css/generative-art.css
@@ -0,0 +1,97 @@
+#gen-art-1{
+  position:absolute;
+  width:15vw;
+  height: 12.5vw;
+  right: 5.8vw;
+  top:300px;
+  z-index: 0;
+  background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: repeat;
+  background-size: cover;
+}
+
+#gen-art-2{
+  position:absolute;
+  width:17vw;
+  height: 10vw;
+  right: 16.3vw;
+  top:33.3vw;
+  z-index: 0;
+  background-image: url("/Images/gen-art/gen-art-_0013_DALL·E 2022-09-01 11.17.52 - macro red world of pastel geometric shapes.png.jpg");
+  background-attachment: fixed;
+  background-position: right;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+#gen-art-3{
+  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;
+  position: absolute;
+  margin-top: 12.5vw;
+  right: 16.8vw;
+  width: 29vw;
+  height: 28vw;
+  z-index:1;
+}
+
+#gen-art-5{
+  position:absolute;
+  width:24.275vw;
+  height: 17.857vw;
+  margin-top: 20vw;
+  right: 8.371vw;
+  z-index: 0;
+  background-image: url("/Images/gen-art/glass-triangles.jpg");
+  background-attachment: fixed;
+  background-position: right;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+#gen-art-6{
+  position:absolute;
+  width: 13.560vw;
+  height: 26.897vw;
+  margin-top: 50vw;
+  right: 37.667vw;
+  z-index: 0;
+  background-image: url("/Images/gen-art/candy-land.jpg");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+#gen-art-7{
+  position:absolute;
+  width: 17.504vw;
+  height: 26.897vw;
+  margin-top: 70vw;
+  left: 8.371vw;
+  z-index: 0;
+  background-image: url("/Images/gen-art/gen-art-_0007_DALL·E 2022-09-01 10.00.15 - futuristic billboard of japanese writing in neon lit city.png.jpg");
+  background-attachment: fixed;
+  background-position: top;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+#gen-art-8{
+  position:absolute;
+  width: 8.371vw;
+  height: 8.371vw;
+  margin-top: 90vw;
+  left: 20.8vw;
+  z-index: 0;
+  background-image: url("/Images/gen-art/pixel-mouth.jpg");
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: repeat;
+  background-size: cover;
+}