More blundering through design

hbbs/server.py

@@ -45,7 +45,7 @@ def programmes():
     return render_template("programmes.html", programmes=programmes)
 
 
-@app.route("/programme/<name>")
+@app.route("/programme/<name>/")
 def programme(name):
     cleaned_name = name.replace("-", " ").lower()
     programmes = get_programmes()

hbbs/static/css/styles.css

@@ -1,16 +1,28 @@
 @font-face {
   font-family: "Compagnon Roman";
-  src: url("fonts/Compagnon-Roman.woff") format("woff");
+  src: url("../fonts/Compagnon-Roman.woff") format("woff");
-  font-weight: bold;
   font-style: normal;
 }
 
-#hbbs-logo {
+@keyframes gradient {
-  opacity: 0.75;
+  0% {
+    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) {
@@ -23,16 +35,15 @@ ul {
   padding-left: 0;
 }
 
-ul li {
+#collection-list li {
+  list-style-type: circle;
+}
+
+#content p,
+ul {
+  margin: 0;
+}
+
+.no-style-list {
   list-style: none;
 }
-
-#hbbs-logo,
-#hbbs-bubbles-top,
-#hbbs-bubbles-bottom {
-  width: 90%;
-}
-
-html * {
-  border: 1px black solid;
-}

hbbs/static/images/logo.svg

@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 595.2 159.3" style="enable-background:new 0 0 595.2 159.3;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;}
-</style>
-<path class="st0" d="M20.6,4.1v25.6h0.8c2.8-5.8,8.4-8.2,19.1-8.2c10.1,0,15.8,1.6,19.7,5.7c3.9,4,5,8.2,5,18.8v22.2h-17V46.1
-	c0-9.9-2-11.7-13.2-11.7c-12,0-14.4,2.4-14.4,14.5v19.4h-17V4.1H20.6z"/>
-<path class="st0" d="M128.2,25.8c4.6,3.4,5.9,7.5,5.9,18.9c0,12.5-1.2,16.7-5.3,20.2c-4.3,3.6-10,4.5-26.8,4.5c-17,0-22.7-1-27-4.5
-	c-4.2-3.5-5.3-7.7-5.3-20.9c0-10.7,1.3-15,5.9-18.3c4.2-3.1,10.9-4.1,26.3-4.1C117.4,21.6,124,22.7,128.2,25.8z M86.7,45.9
-	c0,6.1,0.8,8.1,3.8,9.3c2.1,1,6,1.4,11.4,1.4c12.9,0,15.1-1.6,15.1-11.2c0-6.2-1-8.4-4.1-9.6c-2.1-0.9-6.2-1.3-11-1.3
-	C89,34.4,86.7,36.2,86.7,45.9z"/>
-<path class="st0" d="M154.7,22.8v6.8h0.9c2.5-5.5,8.3-8,18.4-8c11,0,17,2.8,20.7,9.5c2.9-6.8,8.5-9.5,19.6-9.5
-	c9.4,0,15,1.7,18.9,5.9c3.9,4,4.8,7.8,4.8,19.5v21.2h-17V47c-0.1-7.6-0.3-8.5-1.9-10.1c-1.7-1.7-4.6-2.5-9.6-2.5
-	c-5.1,0-8.3,0.9-10.1,2.9c-1.9,2.1-2.5,4.8-2.5,12.2v18.7h-17V47c0-7.1-0.2-8.4-1.8-10.1c-1.5-1.7-4.5-2.5-9.4-2.5
-	c-5.1,0-8.5,0.9-10.4,2.8s-2.5,4.8-2.5,12.3v18.7h-17V22.8H154.7z"/>
-<path class="st0" d="M303.4,53.7c-1.2,12.6-7.5,15.7-31.8,15.7c-13.2,0-19.4-1.2-23.6-4.2c-4.4-3.4-5.8-7.9-5.8-19.5
-	c0-12.2,1.3-16.7,6.2-20.1c4.4-3.1,10.1-4,24.9-4c15.4,0,20.8,1,24.9,4.3c4,3.4,5.6,8.5,5.6,18.7c0,0.6,0,2.7-0.1,4.6h-44.4
-	c0,4.6,0.5,6.2,2.1,7.4c1.8,1.3,5.4,1.9,11.5,1.9c10.9,0,12.9-0.8,13.6-4.8H303.4z M286.7,39.9c-0.1-3.6-0.3-4.4-1.3-5.5
-	c-1.5-1.6-5-2.3-11.7-2.3c-11.4,0-14.1,1.4-14.3,7.8H286.7z"/>
-<path class="st0" d="M325.4,4.1v24.7h0.8c3.4-5.7,7.7-7.3,19-7.3c11.2,0,17.6,1.2,21.5,4.2c4.4,3.4,5.8,7.8,5.8,19.6
-	c0,11.3-1.2,16-5,19.3c-3.7,3.4-10.1,4.7-21.8,4.7c-12.7,0-17-1.4-20.4-7.1h-0.9v6h-16.1V4.1H325.4z M328.6,36.1
-	c-2.4,1.4-3.2,3.7-3.2,9.6c0,6.4,1,8.6,4.4,9.7c2.1,0.7,6.4,1.2,11,1.2c6.2,0,10.3-0.7,12.1-2c1.9-1.3,2.6-3.8,2.6-9.5
-	c0-6.1-1-8.2-4-9.4c-2.2-0.8-6.3-1.2-11-1.2C334.6,34.3,330.5,34.9,328.6,36.1z"/>
-<path class="st0" d="M393.3,22.8v6.8h0.9c3.2-5.8,8-8,17.5-8c13.7,0,18.4,4.6,18.4,18.3V43H414c0-6.7-1.9-8.6-8.9-8.6
-	c-3.8,0-7,1.2-8.7,3.3c-1.6,2.2-2.1,4.7-2.1,11.7v18.8h-17V22.8H393.3z"/>
-<path class="st0" d="M493.5,53.7c-1.2,12.6-7.5,15.7-31.8,15.7c-13.2,0-19.4-1.2-23.6-4.2c-4.4-3.4-5.8-7.9-5.8-19.5
-	c0-12.2,1.3-16.7,6.2-20.1c4.4-3.1,10.1-4,24.9-4c15.4,0,20.8,1,24.9,4.3c4,3.4,5.6,8.5,5.6,18.7c0,0.6,0,2.7-0.1,4.6h-44.4
-	c0,4.6,0.5,6.2,2.1,7.4c1.8,1.3,5.4,1.9,11.5,1.9c10.9,0,12.9-0.8,13.6-4.8H493.5z M476.8,39.9c-0.1-3.6-0.3-4.4-1.3-5.5
-	c-1.5-1.6-5-2.3-11.7-2.3c-11.4,0-14.1,1.4-14.3,7.8H476.8z"/>
-<path class="st0" d="M511.3,22.8l10.4,33.1l12.1-33.1H550l12.2,32.5l10.7-32.5h18.1l-16.8,45.5h-23.2L542,41.5l-9.1,26.7h-22.7
-	l-16.8-45.5H511.3z"/>
-<path class="st0" d="M65.5,72v24.7h0.8c3.4-5.7,7.7-7.3,19-7.3c11.2,0,17.6,1.2,21.5,4.2c4.4,3.4,5.8,7.8,5.8,19.6
-	c0,11.3-1.2,16-5,19.3c-3.7,3.4-10.1,4.7-21.8,4.7c-12.7,0-17-1.4-20.4-7.1h-0.9v6H48.4V72H65.5z M68.6,103.9
-	c-2.4,1.4-3.2,3.7-3.2,9.6c0,6.4,1,8.6,4.4,9.7c2.1,0.7,6.4,1.2,11,1.2c6.2,0,10.3-0.7,12.1-2c1.9-1.3,2.6-3.8,2.6-9.5
-	c0-6.1-1-8.2-4-9.4c-2.2-0.8-6.3-1.2-11-1.2C74.6,102.2,70.5,102.8,68.6,103.9z"/>
-<path class="st0" d="M134.3,72v12.8h-17V72H134.3z M134.3,90.7v45.5h-17V90.7H134.3z"/>
-<path class="st0" d="M197.5,93.7c4.6,3.4,5.9,7.5,5.9,18.9c0,12.5-1.2,16.7-5.3,20.2c-4.3,3.6-10,4.5-26.8,4.5c-17,0-22.7-1-27-4.5
-	c-4.2-3.5-5.3-7.7-5.3-20.9c0-10.7,1.3-15,5.9-18.3c4.2-3.1,10.9-4.1,26.3-4.1C186.8,89.5,193.3,90.6,197.5,93.7z M156,113.8
-	c0,6.1,0.8,8.1,3.8,9.3c2.1,1,6,1.4,11.4,1.4c12.9,0,15.1-1.6,15.1-11.2c0-6.2-1-8.4-4.1-9.6c-2.1-0.9-6.2-1.3-11-1.3
-	C158.3,102.3,156,104,156,113.8z"/>
-<path class="st0" d="M223.9,121.6c0.3,3.9,3.6,5.1,14.2,5.1c11.1,0,14.2-1,14.2-4.2c0-1.8-1.4-3.1-3.9-3.4
-	c-2.3-0.2-6.5-0.3-23.3-0.3c-12.9-0.2-18.3-4.2-18.3-13.9c0-7,2.5-11.2,7.9-13.3c3.7-1.4,11.6-2.1,23.6-2.1c15.5,0,21.1,1,25,4.2
-	c2.4,1.9,3.3,4.3,3.7,9.8h-17.3c-0.4-1.4-0.6-1.7-1.2-2.1c-1.4-1-4.9-1.3-10.7-1.3c-10.7,0-13.9,0.9-13.9,3.7c0,1.8,1.3,2.8,4,3
-	c2.8,0.2,5.8,0.3,23.3,0.4c13.2,0.1,18.2,3.9,18.2,14.1c0,13-6.2,16-32.5,16c-16.5,0-22.2-1-26.2-4.7c-2.8-2.5-3.9-5.7-4-11H223.9z"
-	/>
-<path class="st0" d="M334.8,117.9c-0.3,7.6-1.2,10.9-4.2,13.8c-4.3,4.4-9.9,5.6-27.8,5.6c-13.9,0-19.8-1-24.3-4.2
-	c-4.4-3.1-5.9-8-5.9-20c0-11,1.3-15.8,5.4-19c4.3-3.6,10.3-4.6,25.7-4.6c15.1,0,21.7,1.2,26,4.7c3.7,2.9,4.9,6.4,5.2,15h-17.3
-	c-0.6-5.2-3.9-6.9-13.9-6.9c-11.8,0-14,1.8-14,11.3c0,6,1,8.3,4,9.5c2,0.9,5.7,1.3,10.2,1.3c10,0,12.9-1.3,13.6-6.5H334.8z"/>
-<path class="st0" d="M396.6,93.7c4.6,3.4,5.9,7.5,5.9,18.9c0,12.5-1.2,16.7-5.3,20.2c-4.3,3.6-10,4.5-26.8,4.5c-17,0-22.7-1-27-4.5
-	c-4.2-3.5-5.3-7.7-5.3-20.9c0-10.7,1.3-15,5.9-18.3c4.2-3.1,10.9-4.1,26.3-4.1C385.8,89.5,392.4,90.6,396.6,93.7z M355.1,113.8
-	c0,6.1,0.8,8.1,3.8,9.3c2.1,1,6,1.4,11.4,1.4c12.9,0,15.1-1.6,15.1-11.2c0-6.2-1-8.4-4.1-9.6c-2.1-0.9-6.2-1.3-11-1.3
-	C357.4,102.3,355.1,104,355.1,113.8z"/>
-<path class="st0" d="M464.4,93.7c4.6,3.4,5.9,7.5,5.9,18.9c0,12.5-1.2,16.7-5.3,20.2c-4.3,3.6-10,4.5-26.8,4.5c-17,0-22.7-1-27-4.5
-	c-4.2-3.5-5.3-7.7-5.3-20.9c0-10.7,1.3-15,5.9-18.3c4.2-3.1,10.9-4.1,26.3-4.1C453.6,89.5,460.1,90.6,464.4,93.7z M422.8,113.8
-	c0,6.1,0.8,8.1,3.8,9.3c2.1,1,6,1.4,11.4,1.4c12.9,0,15.1-1.6,15.1-11.2c0-6.2-1-8.4-4.1-9.6c-2.1-0.9-6.2-1.3-11-1.3
-	C425.1,102.3,422.8,104,422.8,113.8z"/>
-<path class="st0" d="M474.8,90.7h16.1v6.2h0.9c3-5.6,7.8-7.3,20.9-7.3c11.7,0,17.8,1.3,21.6,5c3.7,3.3,4.7,7.6,4.7,19.1
-	c0,19.8-4.4,23.6-27.1,23.6c-11.5,0-15.9-1.6-19.2-7h-0.8v24.8h-17V90.7z M491.8,113.9c0,8.8,2.5,10.6,15.1,10.6
-	c6.5,0,10.6-0.7,12.4-2c2-1.4,2.6-3.8,2.6-9.8c0-8.7-2.3-10.4-14.4-10.4C493.9,102.3,491.8,103.8,491.8,113.9z"/>
-</svg>

hbbs/templates/about.html

@@ -5,7 +5,7 @@
   This isn’t another link dump, nor is it an all-you-can-eat streaming site. We
   have files and we want to share them. The homebrew bioscoop offers programmes
   made by viewers, for viewers. Our programmes are cu- rated playlists of films
-  in our collection. Playlists that en- courage play, sociality through the
+  in our collection. Playlists that encourage play, sociality through the
   things we share. Download a programme, watch it, make a programme, share it.
 </p>
 {% endblock %}

hbbs/templates/collection.html

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

hbbs/templates/layout.html

@@ -31,10 +31,10 @@
           <img
             id="hbbs-logo"
             class="img-fluid mx-auto d-block"
-            src="/static/images/logo.svg"
+            src="/static/images/hbbs_logo.png"
             alt="hbbs logo"
           />
-          <ul>
+          <ul id="navbar-list" class="no-style-list">
             <li><a href="/">About</a></li>
             <li><a href="/programmes">Programmes</a></li>
             <li><a href="/collection">Collection</a></li>
@@ -45,7 +45,7 @@
           <img
             id="hbbs-bubbles-top"
             class="img-fluid mx-auto d-block"
-            src="/static/images/bubbles-top.jpg"
+            src="/static/images/bubbles_1_outline.png"
             alt="hbbs bubbles 1"
           />
 
@@ -56,7 +56,7 @@
           <img
             id="hbbs-bubbles-bottom"
             class="img-fluid mx-auto d-block"
-            src="/static/images/bubbles-bottom.jpg"
+            src="/static/images/bubbles_2_outline.png"
             alt="hbbs bubbles 2"
           />
         </div>

hbbs/templates/participate.html

@@ -1,5 +1,5 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<p>Invite only for now...</p>
+  <p>We're lurking in <a href="https://cell.hbbs.decentral1.se">cell.hbbs.decentral1.se</a>...</p>
 {% endblock %}

hbbs/templates/programme.html

@@ -3,7 +3,7 @@
 {% block content %}
 <h1> <a href="/programme/{{ programme.title | replace(' ', '-') | lower }}">{{ programme.title }}</a> </h1>
 <h2> {{ programme.tagline }} </h2>
-<ul>
+<ul class="no-style-list">
   {% for film in programme.films %}
     <li>{{ film }}</li>
   {% endfor %}

hbbs/templates/programmes.html

@@ -1,12 +1,12 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<ul>
+<ul 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>
+    <ul class="no-style-list">
       {% for film in programme.films %}
         <li>{{ film }}</li>
       {% endfor %}