From 64519f9fa783ed2264b09a917095a22b89f5e3e3 Mon Sep 17 00:00:00 2001
From: Robbie Wagner <rwwagner90@gmail.com>
Date: Wed, 20 Nov 2024 11:13:25 -0500
Subject: [PATCH] Remove nested CSS

---
 test-app/app/styles/app.css          | 135 +++++++++++----------------
 test-app/app/templates/docs/demo.hbs |   4 +-
 2 files changed, 54 insertions(+), 85 deletions(-)

diff --git a/test-app/app/styles/app.css b/test-app/app/styles/app.css
index 5c21042c..a338d854 100644
--- a/test-app/app/styles/app.css
+++ b/test-app/app/styles/app.css
@@ -31,102 +31,71 @@ button {
   transform: translateX(10px) translateY(-10px);
 }
 
-.demo-page {
-  a {
-    &.bottom-button {
-      background-color: transparent;
-      border: 2px solid black;
-      color: black;
-      cursor: pointer;
-      display: inline-block;
-      font-size: 0.7em;
-      font-weight: 500;
-      letter-spacing: 3px;
-      line-height: 1.3em;
-      padding: 1.25em 1.25em 1em 1em;
-      text-decoration: none;
-      text-transform: uppercase;
-      width: 150px;
-
-      &:hover {
-        border: 2px solid white;
-        color: white;
-      }
-    }
+.demo-page .panel {
+  background-color: rgb(248 250 252);
+  border-color: #d8d8d8;
+  border-style: solid;
+  border-width: 1px;
+  color: black;
+  font-size: 0.75em;
+  margin-bottom: 1.25rem;
+  padding: 1.25rem;
+  text-align: center;
+}
+
+.demo-page .button.dark {
+  background: white;
+  color: black;
+}
+
+@media (width <= 568px) {
+  .demo-page .button {
+    display: block;
+    margin: 1em auto 0;
+  }
+}
+
+.demo-page .page-title {
+  color: black;
+  font-size: 50pt;
+
+  .ember-title {
+    font-family: Pacifico;
   }
+}
 
-  .panel {
-    background-color: rgb(248 250 252);
-    border-color: #d8d8d8;
-    border-style: solid;
-    border-width: 1px;
-    color: black;
-    font-size: 0.75em;
-    margin-bottom: 1.25rem;
-    padding: 1.25rem;
-    text-align: center;
+@media only screen and (width >= 40.0625em) {
+  .demo-page h1,
+  .demo-page h2,
+  .demo-page h3,
+  .demo-page h4,
+  .demo-page h5,
+  .demo-page h6 {
+    line-height: 1.4;
   }
 
-  .button.dark {
-    background: white;
-    color: black;
+  .demo-page h1 {
+    font-size: 2.75rem;
   }
 
-  @media (width <= 568px) {
-    .button {
-      display: block;
-      margin: 1em auto 0;
-    }
+  .demo-page h2 {
+    font-size: 2.3125rem;
   }
 
-  pre {
-    border: 1px solid rgb(0 0 0 / 15%);
-    line-height: 1.4em;
-    width: 100%;
+  .demo-page h3 {
+    font-size: 1.6875rem;
   }
 
-  .page-title {
-    color: black;
-    font-size: 50pt;
+  .demo-page h4 {
+    font-size: 1.4375rem;
+  }
 
-    .ember-title {
-      font-family: Pacifico;
-    }
+  .demo-page h5 {
+    font-size: 1.125rem;
   }
 
-  @media only screen and (width >= 40.0625em) {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      line-height: 1.4;
-    }
-
-    h1 {
-      font-size: 2.75rem;
-    }
-
-    h2 {
-      font-size: 2.3125rem;
-    }
-
-    h3 {
-      font-size: 1.6875rem;
-    }
-
-    h4 {
-      font-size: 1.4375rem;
-    }
-
-    h5 {
-      font-size: 1.125rem;
-    }
-
-    h6 {
-      font-size: 1rem;
-    }
+  .demo-page h6 {
+    font-size: 1rem;
   }
 }
 
diff --git a/test-app/app/templates/docs/demo.hbs b/test-app/app/templates/docs/demo.hbs
index d942bdea..9c0076cf 100644
--- a/test-app/app/templates/docs/demo.hbs
+++ b/test-app/app/templates/docs/demo.hbs
@@ -41,7 +41,7 @@
         Disable Scroll
       </div>
     </div>
-    <div class="docs-flex docs-flex-wrap">
+    {{!-- <div class="docs-flex docs-flex-wrap">
       <div class="docs-text-center docs-flex docs-justify-center docs-w-1/2">
         <a
           href="javascript:void(0)"
@@ -60,7 +60,7 @@
           Non-modal
         </a>
       </div>
-    </div>
+    </div> --}}
     <div class="docs-flex docs-justify-center">
       <a
         href="https://github.com/shipshapecode/shepherd"