fixed spacing and anim

notes/templates/notes/meeting.html

@@ -5,7 +5,7 @@
 {% endblock css %}
 
 {% block content %}
-<div class="container">
+<div class="container mt-5">
     {{html|safe}}
 </div>
 {% endblock content %}

notes/templates/notes/test.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
 {% endblock css %}
 {% block content %}
-<div class="container">
+<div class="container mt-5">
     {{html|safe}}
 </div>
 {% endblock content %}

pages/static/pages/css/styles.css

@@ -1,30 +1,33 @@
-html {
-    overflow-x: hidden;
-}
-
-nav {
-    transform: translateY(-70px);
-    z-index: 10;
-    animation: nav-slide 0.75s ease-in-out forwards;
-    animation-delay: 1s;
-}
-
-@keyframes nav-slide {
-    0% {
-         transform: translateY(-70px);
-    }
-
-    100% {
-         transform: translateY(0px);
-    }
-}
-
-
-.jumbotron {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-    background-image: url('img/hero.png')
+html {
+    overflow-x: hidden;
+}
+
+nav {
+    z-index: 10;
+}
+
+.animated-navbar {
+    transform: translateY(-70px);
+    animation: nav-slide 0.75s ease-in-out forwards;
+    animation-delay: 1s;
+}
+
+@keyframes nav-slide {
+    0% {
+         transform: translateY(-70px);
+    }
+
+    100% {
+         transform: translateY(0px);
+    }
+}
+
+
+.jumbotron {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    background-image: url('img/hero.png')
 }

pages/templates/pages/base.html

@@ -19,8 +19,8 @@
             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
 
-        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-            <a class="navbar-brand" href="{% url 'index' %}"><img style="width: 50px;" src="{% static 'pages/css/img/TJLogo.png' %}">&emsp;Class of 2023</a>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark {% if animate %}animated-navbar{% endif %}">
+            <a class="navbar-brand" href="{% url 'index' %}"><img style="width: 40px;" src="{% static 'pages/css/img/TJLogo.png' %}">&emsp;Class of 2023</a>
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks">
                 <span class="navbar-toggler-icon"></span>
             </button>

pages/templates/pages/council.html

@@ -5,7 +5,7 @@
 {% endblock css %}
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
-    <div class="container">
+    <div class="container mt-5">
     <h1 class="display-4">The Class Council</h1>
     <p class="lead">We are here to serve you.</p>
     </div>

pages/templates/pages/events.html

@@ -5,7 +5,7 @@
 {% endblock css %}
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
-    <div class="container">
+    <div class="container mt-5">
     <h1 class="display-4">Events</h1>
     <p class="lead">Come and join your friends!</p>
     </div>

pages/templates/pages/index.html

@@ -1,13 +1,13 @@
-{% extends 'pages/base.html' %}
-{% load static %}
-{% block css %}
-    <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
-{% endblock css %}
-{% block content %}
-<div class="jumbotron jumbotron-fluid">
-  <div class="container">
-    <h1 class="display-4">2023 Class Council</h1>
-    <p class="lead">We work for you.</p>
-  </div>
-</div>
-{% endblock content %}
+{% extends 'pages/base.html' %}
+{% load static %}
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
+{% endblock css %}
+{% block content %}
+<div class="jumbotron jumbotron-fluid">
+  <div class="container mt-5">
+    <h1 class="display-4">2023 Class Council</h1>
+    <p class="lead">We work for you.</p>
+  </div>
+</div>
+{% endblock content %}

pages/views.py

@@ -3,7 +3,7 @@ from django.shortcuts import render
 
 # Create your views here.
 def index(request):
-    return render(request, 'pages/index.html')
+    return render(request, 'pages/index.html', context={'animate': True})
 
 
 def council(request):