Scope footer styles to avoid leaking them in pre-rendered mode

Author: Ludwig Schubert

src/distill-components/distill-footer-template.js

@@ -13,45 +13,45 @@ export const footerTemplate = `
   contain: content;
 }
 
-.logo svg {
+.footer-container .logo svg {
   width: 24px;
   position: relative;
   top: 4px;
   margin-right: 2px;
 }
 
-.logo svg path {
+.footer-container .logo svg path {
   fill: none;
   stroke: rgba(255, 255, 255, 0.8);
   stroke-width: 3px;
 }
 
-.logo {
+.footer-container .logo {
   font-size: 17px;
   font-weight: 200;
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   margin-right: 6px;
 }
 
-.container {
+.footer-container {
   grid-column: text;
 }
 
-.nav {
+.footer-container .nav {
   font-size: 0.9em;
   margin-top: 1.5em;
 }
 
-.nav a {
+.footer-container .nav a {
   color: rgba(255, 255, 255, 0.8);
   margin-right: 6px;
   text-decoration: none;
 }
 
 </style>
 
-<div class='container'>
+<div class='footer-container'>
 
   <a href="/" class="logo">
     ${logo}