WIP mucking our way through the image layouts

hbbs/static/css/styles.css

@@ -5,29 +5,16 @@
   font-style: normal;
 }
 
-@keyframes gradient {
+#hbbs-logo {
-  0% {
+  opacity: 0.75;
-    background-color: pink;
-  }
-  25% {
-    background-color: lightgreen;
-  }
-  50% {
-    background-color: lightblue;
-  }
-  100% {
-    background-color: cornsilk;
-  }
 }
 
 body {
   font-family: "Compagnon Roman", serif;
-  animation-name: gradient;
-  animation-duration: 120s;
 }
 
 @media (max-width: 768px) {
-  #hbbs-logo-invisible {
+  #hbbs-bubbles-top {
     display: none !important;
   }
 }
@@ -41,7 +28,8 @@ ul li {
 }
 
 #hbbs-logo,
-#hbbs-logo-invisible {
+#hbbs-bubbles-top,
+#hbbs-bubbles-bottom {
   width: 90%;
 }
 

hbbs/templates/layout.html

@@ -31,7 +31,7 @@
           <img
             id="hbbs-logo"
             class="img-fluid mx-auto d-block"
-            src="/static/images/logo.png"
+            src="/static/images/logo.svg"
             alt="hbbs logo"
           />
           <ul>
@@ -42,15 +42,24 @@
           </ul>
         </div>
         <div id="content" class="col-md-4">
-          <!-- We're sorry... -->
           <img
-            id="hbbs-logo-invisible"
+            id="hbbs-bubbles-top"
             class="img-fluid mx-auto d-block"
-            src="/static/images/logo-invishack.png"
+            src="/static/images/bubbles-top.jpg"
-            alt="hbbs logo invisible"
+            alt="hbbs bubbles 1"
           />
+
+          <div id="content-block">
             {% block content %}{% endblock %}
           </div>
+
+          <img
+            id="hbbs-bubbles-bottom"
+            class="img-fluid mx-auto d-block"
+            src="/static/images/bubbles-bottom.jpg"
+            alt="hbbs bubbles 2"
+          />
+        </div>
       </div>
     </div>
   </body>