work on the layout template

static/css/main.css

@@ -10,7 +10,7 @@ body{
 
 
 .main-column-left {
-  padding: 5em;
+  padding: 2em 1em;
   float: left;
   width: 50%;
   background: red;
@@ -19,6 +19,7 @@ body{
 }
 
 .main-column-right {
+  padding: 2em 1em;
   float: right;
   width: 50%;
   background: purple;
@@ -32,31 +33,55 @@ body{
     clear: both;
 }
 
-ul {
+div.nav-bottom ul, div.nav-top ul {
   list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+li a.nav-button {
+  display: block;
   text-decoration: none;
+  padding: 0.25em;
+  font-family: sans-serif;
+  float: left;
+  width: 33.33%;
 }
 
 .nav-top {
   height: 1.5em;
   background: white;
   width: 100%;
-  display: inline-block;
   position: fixed;
-  border: 0.1em black solid;
 }
 
 .nav-bottom{
   height: 1.5em;
   background: white;
   width: 100%;
-  display: inline-block;
   bottom: 0;
   position: fixed;
-  border: 0.1em black solid;
   z-index: 10000;
 }
 
-.nav-buttons {
+a.librarian-names, a.file-names {
+  text-decoration: none;
+  padding: 0.3em;
+  color: black;
+}
+
+a.librarian-names:hover, a.file-names:hover {
+  color: white;
+}
+
+
+.file-names-container {
+  /* IE 9 */
+  -ms-transform: rotate(-90deg) translate(-78%, 0%);
+  /* Safari */
+  -webkit-transform: rotate(-90deg) translate(-78%, 0%);
+  /* Standard syntax */
+  transform: rotate(-90deg) translate(-80%, 0%);
+  transform-origin: top left;
 
 }

templates/layout.html

@@ -19,17 +19,21 @@
     <div class="main">
       <div class="main-column-left">
         {% for librarian in librarians %}
-        {{ librarian }} <br />
+        <a href="" class="librarian-names">{{ librarian }}</a>
         {% endfor %}
+        <br>
 
+        <div class="file-names-container">
         {% for file in filetoname_dict %}
-          {{file["debris"]}}<br>
+          <a href="" class="file-names">{{file["debris"]}}</a><br>
         {% endfor %}
+        </div>
       </div>
+
       <div class="main-column-right">
-        <p>aizjdsoiajdijazoidjiazjdijzad
+        aizjdsoiajdijazoidjiazjdijzad
         juzahdizahidhazihdzahdio
-      aoizjdiajdiajidzjaizj</p>
+      aoizjdiajdiajidzjaizj
         {% block content %}
         {% endblock content %}
       </div>