Remove nested CSS

RobbieTheWagner · Nov 20, 2024 · 64519f9 · 64519f9
1 parent 6d48898
commit 64519f9
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 85 deletions.
diff --git 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
@@ -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"