proposal for inner content

rowers/templates/menu_analytics.html

@@ -1,3 +1,4 @@
+<h1>Analysis</h1>
 <ul class="cd-accordion-menu animated">
   <li class="has-children" id="fitness">
     <input type="checkbox" name="group-fitness" id="group-fitness">

rowers/templates/menu_demo.html

@@ -1,3 +1,4 @@
+<h1>Demo</h1>
 <ul class="cd-accordion-menu animated">
   <li><a href="#0">Link</a></li>
   <li class="has-children">

rowers/templates/menu_help.html

@@ -1,3 +1,4 @@
+<h1>Help</h1>
 <ul class="cd-accordion-menu animated">
   <li id="gettingstarted">
     <a href="">

rowers/templates/menu_plan.html

@@ -1,3 +1,4 @@
+<h1>Plan</h1>
 <ul class="cd-accordion-menu animated">
   <li class="has-children" id="sessions">
     <input type="checkbox" name="group-sessions" id="group-sessions">

rowers/templates/menu_profile.html

@@ -1,3 +1,4 @@
+<h1>Profile</h1>
 <ul class="cd-accordion-menu animated">
   <li id="manage-account">
     <a href="">

rowers/templates/menu_racing.html

@@ -1,3 +1,4 @@
+<h1>Racing</h1>
 <ul class="cd-accordion-menu animated">
   <li id="races-list">
     <a href="#0">

rowers/templates/menu_teams.html

@@ -1,3 +1,4 @@
+<h1>Teams</h1>
 <ul class="cd-accordion-menu animated">
   <li id="manage">
     <a href="">

rowers/templates/menu_workout.html

@@ -1,3 +1,4 @@
+<h1>Workout</h1>
 <ul class="cd-accordion-menu animated">
   <li class="has-children" id="workout">
     <input type="checkbox" name="group-workout" id="group-workout">

rowers/templates/menu_workouts.html

@@ -1,3 +1,4 @@
+<h1>Workouts</h1>
 <ul class="cd-accordion-menu animated">
   <li id="workouts-list">
     <a href="#0"><i class="fas fa-clipboard-list fa-fw"></i>&nbsp;Workouts List</a>

rowers/templates/redesign_analysis.html

@@ -4,14 +4,31 @@
 
 {% 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 <a href="">fermentum</a> 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 sideheader %}
+<ul class="main-content">
-<h1>Analysis</h1>
+  <li class="landscape"><img src="http://placehold.it/1200x1000" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape">
+    <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.
+      <ul>
+        <li>One</li>
+        <li>Two</li>
+        </ul>
+    </p>
+  </li>
+  <li class="landscape">
+    <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>
+  </li>
+</ul>
 {% endblock %}
 
 {% block sidebar %}

rowers/templates/redesign_plan.html

@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Plan</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_plan.html' %}

rowers/templates/redesign_profile.html

@@ -10,10 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Profile</h1>
-{% endblock %}
-
 {% block sidebar %}
 {% include 'menu_profile.html' %}
 {% endblock %}

rowers/templates/redesign_racing.html

@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Racing</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_racing.html' %}

rowers/templates/redesign_teams.html

@@ -10,10 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Teams</h1>
-{% endblock %}
-
 {% block sidebar %}
 {% include 'menu_teams.html' %}
 {% endblock %}

rowers/templates/redesign_workout.html

@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Workout</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_workout.html' %}

rowers/templates/redesign_workouts.html

@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Workouts</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_workouts.html' %}

static/css/styles2.css

@@ -342,12 +342,27 @@
       "user"
       "nav"
    "content"
-   "side-header"
    "sidebar"
    "ad"
    "footer";
 }
 
+.main-content {
+    list-style: none;
+    margin: 0;
+}
+
+.main-content li.landscape {
+    grid-column-end: span 2;
+}
+
+.main-content li img {
+    display: block;
+    width: 100%;
+    height: auto;
+    padding: 5px;
+}
+
 @media (max-width: 449px) {
     nav a {
         font-size: 0px;
@@ -365,7 +380,7 @@
     "header  header"
         "user user"
         "side-nav     nav"
-        "side-header content"
+        "sidebar content"
       "sidebar content"
       "ad      footer";
   }
@@ -381,6 +396,12 @@
       justify-content: space-between; 
   }
 
+   .main-content {
+       display: grid;
+       grid-template-columns: repeat(1,1fr);
+       grid-gap: 10px;
+   }
+
   
 }
 
@@ -392,7 +413,7 @@
     grid-template-areas: 
     "header header  user"
         "side-nav nav  nav"
-        "side-header content content"
+        "sidebar content content"
         "sidebar     content content"
         "sidebar     content content"
         "sidebar  footer footer"
@@ -407,7 +428,11 @@
      flex-direction: row; 
    }
 
-
+   .main-content {
+       display: grid;
+       grid-template-columns: repeat(2,1fr);
+       grid-gap: 10px;
+   }
 
 }
 

templates/newbase.html

@@ -221,12 +221,6 @@
         {% endblock %}
       </main>
 
-      <side-header class="sideheader">
-        {% block sideheader %}
-        <h1>Workouts</h1>
-        {% endblock %}
-      </side-header>
-      
       <aside class="side">
         {% block sidebar %}
         Related links