Design finalising

hbbs/static/css/styles.css

@@ -1,28 +1,32 @@
+/* GRID DEBUG MODE */
+/* html * { */
+/*   border: 1px black solid; */
+/* } */
+
 @font-face {
   font-family: "Compagnon Roman";
   src: url("../fonts/Compagnon-Roman.woff") format("woff");
   font-style: normal;
 }
 
-@keyframes gradient {
+a {
-  0% {
+  color: white;
-    background-color: pink;
+}
-  }
+
-  25% {
+html {
-    background-color: lightgreen;
+  background: rgb(4, 0, 255);
-  }
-  50% {
-    background-color: lightblue;
-  }
-  100% {
-    background-color: cornsilk;
-  }
 }
 
 body {
   font-family: "Compagnon Roman", serif;
-  animation-name: gradient;
+  background: linear-gradient(
-  animation-duration: 120s;
+    0deg,
+    rgba(4, 0, 255, 1) 1%,
+    rgba(255, 0, 255, 1) 86%
+  );
+  font-size: 1.4rem;
+  line-height: 1.2;
+  color: white;
 }
 
 @media (max-width: 768px) {
@@ -35,15 +39,59 @@ ul {
   padding-left: 0;
 }
 
-#collection-list li {
+#navbar-list {
-  list-style-type: circle;
+  margin: 5px;
+}
+
+#collection-list li::before {
+  content: " ⃝ ";
+  color: magenta;
 }
 
-#content p,
 ul {
   margin: 0;
 }
 
+#content p {
+  margin: 5px;
+}
+
 .no-style-list {
   list-style: none;
 }
+
+#programmes-list h1,
+#programmes-list h2 {
+  font-size: 1.4rem;
+}
+
+#programmes-list h2 {
+  padding-left: 50px;
+}
+
+#films-list li::before {
+  content: " ⃝ ";
+  color: magenta;
+}
+
+#programmes-list li * {
+  margin-bottom: 0;
+}
+
+#programmes-list li:nth-child(2) {
+  margin-top: 10px;
+}
+
+#hbbs-logo,
+#hbbs-bubbles-top,
+#hbbs-bubbles-bottom {
+  width: 100%;
+}
+
+#hbbs-bubbles-bottom {
+  margin-top: 10px;
+}
+
+.film-indent {
+  padding-left: 25px;
+}

hbbs/templates/collection.html

@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<ul id="collection-list">
+<ul id="collection-list" class="no-style-list">
 {% for film in collection %}
   <li>{{ film.Title }}</li>
 {% endfor %}

hbbs/templates/layout.html

@@ -30,7 +30,7 @@
         <div id="navigation" class="col-md-4">
           <img
             id="hbbs-logo"
-            class="img-fluid mx-auto d-block"
+            class="img-fluid"
             src="/static/images/hbbs_logo.png"
             alt="hbbs logo"
           />
@@ -44,7 +44,7 @@
         <div id="content" class="col-md-4">
           <img
             id="hbbs-bubbles-top"
-            class="img-fluid mx-auto d-block"
+            class="img-fluid"
             src="/static/images/bubbles_1_outline.png"
             alt="hbbs bubbles 1"
           />
@@ -55,7 +55,7 @@
 
           <img
             id="hbbs-bubbles-bottom"
-            class="img-fluid mx-auto d-block"
+            class="img-fluid"
             src="/static/images/bubbles_2_outline.png"
             alt="hbbs bubbles 2"
           />

hbbs/templates/programmes.html

@@ -1,14 +1,14 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<ul class="no-style-list">
+<ul id="programmes-list" class="no-style-list">
 {% for programme in programmes %}
   <li>
-    <h1> <a href="/programme/{{ programme.title | replace(' ', '-') | lower }}/">{{ programme.title }}</a> </h1>
+    <h1> <a href="/programme/{{ programme.title | replace(' ', '-') | lower }}/">/{{ programme.title }}</a> </h1>
     <h2> {{ programme.tagline }} </h2>
-    <ul class="no-style-list">
+    <ul id="films-list" class="no-style-list">
       {% for film in programme.films %}
-        <li>{{ film }}</li>
+        <li><span class="film-indent">{{ film }}</span></li>
       {% endfor %}
     </ul>
   </li>