fixed organization and styling

pages/static/pages/css/styles.css

@@ -92,6 +92,23 @@ body {
   color: #444;
 }
 
+#progress {
+  width: 100%;
+  background-color: #eee;
+  border-radius: 50px;
+}
+
+#bar {
+  width: 1%;
+  height: 50px;
+  background-color: #0000ff ;
+  text-align: center;
+  line-height: 50px;
+  color: white;
+  border-radius: 50px;
+  transition: all 1s;
+}
+
 /* mobile styles */
 
 @media (max-width: 768px) {

pages/templates/pages/index.html

@@ -3,24 +3,6 @@
 {% block title %}Home{% endblock title %}
 {% block css %}
     <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
-    <style>
-    #progress {
-      width: 100%;
-      background-color: #eee;
-      border-radius: 50px;
-    }
-
-    #bar {
-      width: 1%;
-      height: 50px;
-      background-color: #0000ff ;
-      text-align: center;
-      line-height: 50px;
-      color: white;
-      border-radius: 50px;
-      transition: all 1s;
-    }
-    </style>
 {% endblock css %}
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
@@ -45,7 +27,7 @@
     </div>
 </div>
 
-<br><br><br>
+{% if bar %}
   <div class="container news">
       <h1 class="text-center font-weight-bold">{{ bar.name }}!</h1>
       <br><br>
@@ -73,4 +55,5 @@
       });
       </script>
   </div>
+{% endif %}
 {% endblock content %}

pages/views.py

@@ -12,7 +12,13 @@ def index(request):
         stories = []
         bar = None
 
-    return render(request, 'pages/index.html', {'stories': stories, 'animate': True, 'bar': bar})
+    context = {
+        'stories': stories,
+        'animate': True,
+        'bar': bar
+    }
+
+    return render(request, 'pages/index.html')
 
 
 def council(request):