Ditched bootstrap

interface/templates/base.html

@@ -6,49 +6,45 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
-
     <link rel="stylesheet" href="{% static 'interface/css/polyphonic.css' %}"></link>
-    <script src="https://kit.fontawesome.com/c837098e5b.js" crossorigin="anonymous"></script>
     <title>{% block title %}Polyphonic{% endblock %}</title>
   </head>
   <body>
 
-    {% block header %}
-    <nav class="navbar navbar-expand-lg navbar-dark">
-    <a class="navbar-brand" href="/"><i class="fas fa-random"></i> Polyphonic</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <span class="navbar-text">Virtual Ensemble Manager</span>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent"></div>
-        <ul class="navbar-nav ml-auto">
+  <div class="main">
+    {% block navigation %}
+    <nav class="navigation">
+      <div>
+        <a class="brand" href="/"><i class="fas fa-random smhide"></i> Polyphonic</a>
+        <span class="mdhide">Virtual Ensemble Manager</span>
+      </div>
+      <ul class="nav-buttons">
         {% if request.ensemble_id %}
         <li class="nav-item">
-            <a class="nav-link" href="{% url 'my_projects' %}"><i class="fas fa-music"></i> My Projects</a>
+          <a class="nav-link" href="{% url 'my_projects' %}"><i class="fas fa-music"></i> <span class="">My
+              Projects</span></a>
         </li>
         <li class="nav-item">
-            <a class="nav-link" href="{% url 'register' %}"><i class="fas fa-users"></i> Change Ensemble</a>
+          <a class="nav-link" href="{% url 'register' %}"><i class="fas fa-users"></i> <span class="">Change
+              Ensemble</span></a>
         </li>
         {% endif %}
         <li class="nav-item">
-            <a class="nav-link" href=""><i class="fas fa-question"></i> About</a>
+          <a class="nav-link" href=""><i class="fas fa-question"></i> <span class="">About</span></a>
         </li>
-        </ul>
-    </div>
+      </ul>
     </nav>
     {% endblock %}
-    
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    
-    {% block content %}
-    <h1>No content!</h1>
-    {% endblock %}
+  
+    <div class="content">
+      {% block content %}
+      <h1>No content!</h1>
+      {% endblock %}
+    </div>
+  </div>
 
-    <!-- Optional JavaScript -->
-    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+  <!-- late load scripts -->
+  <script src="https://kit.fontawesome.com/c837098e5b.js" crossorigin="anonymous"></script>
+  
   </body>
 </html>