restore nested styles for components

ProjectEvergreen · Dec 23, 2020 · 25f3970 · 25f3970
1 parent d453d39
commit 25f3970
Show file tree

Hide file tree

Showing 7 changed files with 286 additions and 294 deletions.
diff --git a/www/components/banner/banner.css b/www/components/banner/banner.css
@@ -1,4 +1,3 @@
-/* TODO restore to nested styles */
 @keyframes fadeOut {
   from {
     opacity: 1;
@@ -19,73 +18,75 @@
   }
 }
 
-:host .banner {
-  background-color: #F6F2F4;
-  min-height: 60vh;
-}
-
-:host .content {
-  padding: 5vh 10px;
-  font-size:1.7rem;
-  text-align:center;
-}
-
-:host .content hr {
-  border-radius:25px;
-  border-style:none;
-  height:3px;
-  margin:0 auto;
-  background-color:white;
-  border:1px solid rgba(0, 0, 0, 0.6);
-  width: 160px;
-}
-
-:host .content h1 {
-  font-size:3.5rem;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
-}
-
-:host .content h3 {
-  padding-top: 10px;
-  text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
-}
-
-:host .content img {
-  width: 300px;
-  height: 300px;
-}
-
-:host .content span.off {
-  animation: 1s fadeOut ease-in-out;
-}
-
-:host .content span.on {
-  animation: 1s fadeIn linear;
-}
+:host {
 
-/* @media (max-width: 980px) {
   & .banner {
-    min-height: 40vh;
+    background-color: #F6F2F4;
+    min-height: 60vh;
 
     & .content {
-      font-size: 1.5rem;
+      padding: 5vh 10px;
+      font-size:1.7rem;
+      text-align:center;
+
+      & hr {
+        border-radius:25px;
+        border-style:none;
+        height:3px;
+        margin:0 auto;
+        background-color:white;
+        border:1px solid rgba(0, 0, 0, 0.6);
+        width: 160px;
+      }
+
       & h1 {
-        font-size: 3rem;
+        font-size:3.5rem;
+        text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
       }
+      & h3 {
+        padding-top: 10px;
+        text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
+      }
+
       & img {
-        width: 250px;
-        height: 250px;
+        width: 300px;
+        height: 300px;
       }
     }
+
+    & span.off {
+      animation: 1s fadeOut ease-in-out;
+    }
+
+    & span.on {
+      animation: 1s fadeIn linear;
+    }
   }
-}
 
-@media (max-width: 756px) {
-  & .banner {
-      padding:0px;
+  @media (max-width: 980px) {
+    & .banner {
+      min-height: 40vh;
 
       & .content {
-        margin-top: 0;
+        font-size: 1.5rem;
+        & h1 {
+          font-size: 3rem;
+        }
+        & img {
+          width: 250px;
+          height: 250px;
+        }
       }
+    }
+  }
+
+  @media (max-width: 756px) {
+    & .banner {
+       padding:0px;
+
+       & .content {
+         margin-top: 0;
+       }
+    }
   }
-} */
+}
diff --git a/www/components/card/card.css b/www/components/card/card.css
@@ -1,63 +1,65 @@
-/* TODO restore to nested styles */
-:host .card {
-  padding: 2.5rem;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: initial;
-  text-align: center;
-
-  @media(max-width:768px) {
-    padding:0;
+:host {
+
+  & .card {
+    padding: 2.5rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: initial;
+    text-align: center;
+
+    @media(max-width:768px) {
+      padding:0;
+    }
+
+    & .body {
+      padding:10px;
+    }
   }
-}
 
-:host .card .body {
-  padding:10px;
-}
 
-:host .card-xs {
-  margin: 0.25rem;
-  flex: 1 1 16.666%;
-  max-width: 250px;
+  & .card-xs {
+    margin: 0.25rem;
+    flex: 1 1 16.666%;
+    max-width: 250px;
+
+    @media (max-width: 1024px) {
+      max-width: 100%;
+    }
+  }
+  & .card-sm {
+    margin: 0.25rem;
+    flex: 1 1 25%;
+    max-width: 380px;
+
+    @media (max-width: 1024px) {
+      max-width: 100%;
+    }
+  }
+  & .card-md {
+    margin: 0.25rem;
+    flex: 1 1 33.333%;
+    max-width: 450px;
 
-  @media (max-width: 1024px) {
-    max-width: 100%;
+    @media (max-width: 1024px) {
+      max-width: 100%;
+    }
   }
-}
-:host .card-sm {
-  margin: 0.25rem;
-  flex: 1 1 25%;
-  max-width: 380px;
-
-  @media (max-width: 1024px) {
-    max-width: 100%;
+  & .card-full {
+    margin: 0.25rem;
+    flex: 1 1 33.333%;
   }
-}
-:host .card-md {
-  margin: 0.25rem;
-  flex: 1 1 33.333%;
-  max-width: 450px;
-
-  @media (max-width: 1024px) {
-    max-width: 100%;
+
+  & .card-img-top {
+    background-size: cover;
+    background-position-x: center;
+    background-position-y: center;
+    & img {
+      width: 100%;
+      max-width: 200px;
+    }
   }
-}
-:host .card-full {
-  margin: 0.25rem;
-  flex: 1 1 33.333%;
-}
-
-:host .card-img-top {
-  background-size: cover;
-  background-position-x: center;
-  background-position-y: center;
-}
-
-:host .card-img-top img {
-  width: 100%;
-  max-width: 200px;
 }
diff --git a/www/components/footer/footer.css b/www/components/footer/footer.css
@@ -1,22 +1,20 @@
-/* TODO restore to nested styles */
 :host {
   grid-area: footer;
-}
+  & .footer {
+    background-color: #192a27;
+    min-height: 30px;
+    padding-top: 10px;
 
-:host .footer {
-  background-color: #192a27;
-  min-height: 30px;
-  padding-top: 10px;
-}
+    & h4 {
+      width: 90%;
+      margin: 0 auto;
+      padding: 0;
+      text-align: center;
+    }
 
-:host h4 {
-  width: 90%;
-  margin: 0 auto;
-  padding: 0;
-  text-align: center;
-}
-
-:host a {
-  color: white;
-  text-decoration:none;
+    & a {
+      color: white;
+      text-decoration:none;
+    }
+  }
 }