From 8d3fca59e26b90709ab0fdbd2f14a2294d989eb2 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:31:47 -0400
Subject: [PATCH] Style updates to features

---
 css/style.css | 29 ++++++++++++++++++++++-------
 features.html | 18 +++++++++---------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/css/style.css b/css/style.css
index a3c0497..e243697 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,7 @@
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
 @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
 
+/* Global Styles */
 
 body {
     background-color: #222;
@@ -23,7 +24,7 @@ footer {
     font-family: "Source Sans 3", sans-serif; 
 }
 
-.jumbotron, .card-header {
+.jumbotron {
     color: white;
     border: 1px white solid;
     font-family: "Source Sans 3", sans-serif;
@@ -45,9 +46,15 @@ footer {
     color: white;
 }
 
-.card-header {
-    background: #946beb;
+#reduce-motion-switch:checked {
+    background-color: #946beb;
+    border-color: white;
 }
+#reduce-motion-switch {
+    border-color: #946beb;
+}
+
+/* Homepage Styles */
 
 #screen-blank {
     position: absolute;
@@ -56,7 +63,11 @@ footer {
     left: 0;
 }
 
-/* Features Page */
+/* Features Page Styles */
+
+#feature-jumbotron {
+    background: #333;
+}
 
 .row.feature-list-item {
     padding: 0.5rem;
@@ -68,10 +79,14 @@ footer {
     display: none;
 }
 
-.feature-detail-container#active-feature-detail {
+#active-feature-detail {
     display: inherit;
 }
 
-#feature-jumbotron {
-    background: #333;
+.feature-list-item {
+    border: 1px transparent solid;
+}
+
+#active-feature-item {
+    border: 1px white solid;
 }
\ No newline at end of file
diff --git a/features.html b/features.html
index 2070f72..0f59929 100644
--- a/features.html
+++ b/features.html
@@ -176,7 +176,7 @@
 
                     <!-- Right Column -->
                     <div class="col-8" id="feature-detail-column">
-                        <div class="feature-detail-container rounded-3" id="active-feature-detail">
+                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="active-feature-detail">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
@@ -185,9 +185,9 @@
                             </div>
 
                             <!-- Feature Detail Container -->
-                            <div class="row rounded-3 py-2 m-1" id="feature-details-container">
+                            <div class="row py-2 m-1 rounded-3 feature-text-container">
                                 <div class="col">
-                                    <h4>Don't waste time on setup</h4>
+                                    <h4 >Don't waste time on setup</h4>
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                     exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
@@ -198,7 +198,7 @@
                             </div>
                         </div>
 
-                        <div class="feature-detail-container rounded-3" id="">
+                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
@@ -207,7 +207,7 @@
                             </div>
 
                             <!-- Feature Detail Container -->
-                            <div class="row rounded-3 py-2 m-1" id="feature-details-container">
+                            <div class="row rounded-3 py-2 m-1">
                                 <div class="col">
                                     <h4>Don't waste time on setup #2</h4>
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -220,7 +220,7 @@
                             </div>
                         </div>
 
-                        <div class="feature-detail-container rounded-3" id="">
+                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
@@ -229,7 +229,7 @@
                             </div>
 
                             <!-- Feature Detail Container -->
-                            <div class="row rounded-3 py-2 m-1" id="feature-details-container">
+                            <div class="row rounded-3 py-2 m-1">
                                 <div class="col">
                                     <h4>Don't waste time on setup #3</h4>
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
@@ -242,7 +242,7 @@
                             </div>
                         </div>
 
-                        <div class="feature-detail-container rounded-3" id="">
+                        <div class="feature-detail-container rounded-3 p-3 my-gradient gradient-spin" id="">
                             <!-- Image/Video Container -->
                             <div class="row" id="feature-media-container">
                                 <div class="col">
@@ -251,7 +251,7 @@
                             </div>
 
                             <!-- Feature Detail Container -->
-                            <div class="row rounded-3 py-2 m-1" id="feature-details-container">
+                            <div class="row rounded-3 py-2 m-1">
                                 <div class="col">
                                     <h4>Don't waste time on setup #4</h4>
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor