second attempt

rowers/templates/redesign.html

@@ -4,7 +4,8 @@
 
 {% block main %}
 <h1>Main</h1>
-<p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh fermentum in.</p>
+<p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
+</p>
 {% endblock %}
 
 {% block sidebar %}

static/css/style3.css

@@ -0,0 +1,125 @@
+* {box-sizing: border-box;}
+
+    .wrapper {
+        max-width: 1400px;
+        margin: 0 auto;
+        font: 1.2em Helvetica, arial, sans-serif;
+    }
+
+    .wrapper > * {
+        border: 2px solid #f08c00;
+        padding: 5px;
+    }
+
+    nav ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    header ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    aside ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    user ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: flex-end;
+    }
+    
+.main-head {
+  grid-area: header;
+}
+.main-user {
+    grid-area: user;
+}
+
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+.wrapper {
+  display: grid;
+  grid-gap: 2px;
+  grid-template-areas: 
+  "header"
+   "user"
+   "nav"
+   "content"
+   "sidebar"
+   "ad"
+   "footer";
+}
+
+@media (max-width: 449px) {
+    nav a {
+        font-size: 0px;
+    }
+
+    nav a i {
+        font-size: 20px;
+    }
+}
+
+@media (min-width: 450px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: 
+    "header  header"
+        "user user"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+  header ul {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  
+}
+@media (min-width: 768px) {
+  .wrapper {
+    grid-template-columns: 1fr 5fr 1fr;
+    grid-template-areas: 
+    "header header  header user"
+        "nav nav nav nav"
+      "sidebar    content content content"
+      "sidebar    content content content"
+      "ad footer  footer footer"
+   }
+   nav ul {
+     flex-direction: row;
+   }
+   header ul {
+     flex-direction: row;
+   }
+
+}

static/css/styles2.css

@@ -15,6 +15,8 @@
         list-style: none;
         margin: 0;
         padding: 0;
+      display: flex;
+      justify-content: space-between;
     }
 
     header ul {
@@ -33,6 +35,8 @@
         list-style: none;
         margin: 0;
         padding: 0;
+        display: flex;
+        justify-content: flex-end;
     }
     
 .main-head {
@@ -46,7 +50,7 @@
   grid-area: content;
 }
 .main-nav {
-  grid-area: nav;
+    grid-area: nav;
 }
 .side {
   grid-area: sidebar;
@@ -70,8 +74,17 @@
    "footer";
 }
 
+@media (max-width: 449px) {
+    nav a {
+        font-size: 0px;
+    }
 
-@media (min-width: 750px) {
+    nav a i {
+        font-size: 20px;
+    }
+}
+
+@media (min-width: 450px) {
   .wrapper {
     grid-template-columns: 1fr 3fr;
     grid-template-areas: 
@@ -81,29 +94,40 @@
       "sidebar content"
       "ad      footer";
   }
+
   nav ul {
-    display: flex;
+      display: flex;
-    justify-content: space-between;
+      justify-content: space-between;
   }
+
   header ul {
-    display: flex;
+/*      flex-direction: row;*/
-    justify-content: space-between;
+      display: flex;
+      justify-content: space-between; 
   }
 
   
 }
-@media (min-width: 800px) {
+
+
+
+@media (min-width: 768px) {
   .wrapper {
-    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-columns: 1fr 5fr 1fr;
     grid-template-areas: 
-      "header header  user"
+    "header header  header user"
-      "nav    content sidebar"
+        "nav nav nav nav"
-      "nav    content ad"
+      "sidebar    content content content"
-      "footer footer  footer"
+      "sidebar    content content content"
-   }
+      "ad footer  footer footer"
-   nav ul {
-     flex-direction: column;
    }
+
+  nav ul {
+      flex-direction: row;
+/*      display: flex;
+      justify-content: space-between; */
+  }
+
    header ul {
      flex-direction: row; 
    } 

static/css/text2.css

@@ -126,20 +126,6 @@ figure {
 ----------------------------------------------
 */
 
-a {
-/*  color: #fff; */
-  text-decoration: none;
-}
-
-
-a:visited { color:#000; }
-
-a:link { color: #000; }
-
-
-a:hover {
-  text-decoration: underline;
-}
 
 p {
 /*  border: 1px solid #666; */
@@ -148,12 +134,8 @@ p {
   text-align: left;
 }
 
+
 i {
-    text-decoration: none;
     font-size: 2em;
-    color: #27aae1;
 }
 
-i:hover {
-    color: #1c75bc;
-}

templates/newbase.html

@@ -115,28 +115,41 @@
             <a href="/rowers/help" title="Help">
               <i class="fas fa-question"></i>
             </a>
-	    {% if user.is_authenticated %}
+          </li>
-            <a class="icon-link" href="/rowers/me/edit" title="Account">
+	  {% if user.is_authenticated %}
+          <li>
+            <a href="/rowers/me/edit" title="Account">
               <i class="fas fa-user"></i>
             </a>
+          </li>
+          <li>
             <a href="{% url 'logout' %}?next=/login" title="Log Out">
               <i class="fas fa-sign-out-alt"></i>
             </a>
-	    {% else %}
+          </li>
+	  {% else %}
+          <li>
 	    <a href="{% url 'login' %}" title="Log In">
               <i class="fas fa-sign-in-alt"></i>
             </a>
-	    {% endif %}
           </li>
+	    {% endif %}
         </ul>
       </user>
       <nav class="main-nav">
         <ul>
-          <li><p><a href=""><i class="fas fa-file-upload"></i>&nbsp;Upload</a></p></li>
+          <li><p><a href="">
-          <li><p><a href=""><i class="fas fa-clipboard-list"></i>&nbsp;Workouts</a></p></li>
+                <i class="fas fa-file-upload"></i>
-          <li><p><a href=""><i class="fas fa-calendar-alt"></i>&nbsp;Plan</a></p></li>
+                &nbsp;Upload</a></p></li>
-          <li><p><a href=""><i class="fas fa-flag-checkered"></i>&nbsp;Racing</a></p></li>
+          <li><p><a href="">
-          <li><p><a href=""><i class="fas fa-bullhorn"></i>&nbsp;Team</a></p></li>
+                <i class="fas fa-clipboard-list"></i>
+                &nbsp;Workouts</a></p></li>
+          <li><p><a href="">
+                <i class="fas fa-calendar-alt"></i>&nbsp;Plan</a></p></li>
+          <li><p><a href="">
+                <i class="fas fa-flag-checkered"></i>&nbsp;Racing</a></p></li>
+          <li><p><a href="">
+                <i class="fas fa-bullhorn"></i>&nbsp;Team</a></p></li>
         </ul>
    </nav>
    <main class="content">