with the test book (69) on the front page

web/app/main.py

 # route for index page
 @main.route('/')
 def index():
-    tools = Resource.query.filter_by(type='tool').order_by(func.random()).limit(1).all()
-    books = Resource.query.filter_by(type='book').order_by(func.random()).limit(1).all()
-    tools2 = Resource.query.filter_by(type='tool').order_by(func.random()).limit(1).all()
-    books2 = Resource.query.filter_by(type='book').order_by(func.random()).limit(1).all()
+    tools = Resource.query.filter_by(type='tool').order_by(func.random()).limit(6).all()
+    books = Resource.query.filter_by(type='book').order_by(func.random()).limit(6).all()
     with open('content/home.md', 'r') as f:
         text = f.read()
         text = markdown.markdown(text)
-        book_showcase = get_book('69')
-        book_showcase_relationships = get_relationships('69')
-        return render_template('index.html', text=text, tools=tools, book=book_showcase, book_relationships=book_showcase_relationships)
+    book_showcase = get_book('69')
+    book_showcase_relationships = get_relationships('69')
+    return render_template('index.html', text=text, tools=tools, books=books, book=book_showcase, book_relationships=book_showcase_relationships)
 
 # route for profile page
 @main.route('/profile')

web/app/static/styles/main.css

 .col-span-2 {
   grid-column: span 2 / span 2;
 }
-.col-span-3 {
-  grid-column: span 3 / span 3;
-}
 .row-span-2 {
   grid-row: span 2 / span 2;
 }
 .row-span-3 {
   grid-row: span 3 / span 3;
 }
-.row-span-1 {
-  grid-row: span 1 / span 1;
-}
 .row-start-1 {
   grid-row-start: 1;
 }
 .m-16 {
   margin: 4rem;
 }
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
 .mb-16 {
   margin-bottom: 4rem;
 }
 .ml-auto {
   margin-left: auto;
 }
+.mr-2 {
+  margin-right: 0.5rem;
+}
 .mr-8 {
   margin-right: 2rem;
 }
 .mt-4 {
   margin-top: 1rem;
 }
-.mr-2 {
-  margin-right: 0.5rem;
-}
 .block {
   display: block;
 }
 .inline-block {
   display: inline-block;
 }
+.flex {
+  display: flex;
+}
+.table {
+  display: table;
+}
 .grid {
   display: grid;
 }
 .h-10 {
   height: 2.5rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .h-20 {
   height: 5rem;
 }
 .h-screen {
   height: 100vh;
 }
-.h-\[50rem\] {
-  height: 50rem;
-}
-.h-\[25rem\] {
-  height: 25rem;
-}
-.h-\[clamp\(20rem\2c 30rem\2c 40rem\)\] {
-  height: clamp(20rem,30rem,40rem);
-}
-.h-12 {
-  height: 3rem;
-}
-.max-h-\[30rem\] {
-  max-height: 30rem;
-}
 .w-10 {
   width: 2.5rem;
 }
 .w-40 {
   width: 10rem;
 }
-.w-\[25rem\] {
-  width: 25rem;
+.w-52 {
+  width: 13rem;
 }
-.w-\[30rem\] {
-  width: 30rem;
+.w-\[20rem\] {
+  width: 20rem;
 }
-.w-full {
-  width: 100%;
+.w-\[25rem\] {
+  width: 25rem;
 }
 .w-\[32rem\] {
   width: 32rem;
 }
-.w-60 {
-  width: 15rem;
-}
-.w-52 {
-  width: 13rem;
+.w-full {
+  width: 100%;
 }
-.min-w-\[35rem\] {
-  min-width: 35rem;
+.min-w-\[10rem\] {
+  min-width: 10rem;
 }
 .min-w-\[32rem\] {
   min-width: 32rem;
 .max-w-\[65ch\] {
   max-width: 65ch;
 }
-.max-w-\[20rem\] {
-  max-width: 20rem;
-}
 .shrink-0 {
   flex-shrink: 0;
 }
 .grid-flow-col {
   grid-auto-flow: column;
 }
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
 .grid-cols-\[2fr\2c 1fr\] {
   grid-template-columns: 2fr 1fr;
 }
-.items-start {
-  align-items: flex-start;
-}
-.justify-start {
-  justify-content: flex-start;
-}
 .justify-between {
   justify-content: space-between;
 }
 .p-1 {
   padding: 0.25rem;
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .p-4 {
   padding: 1rem;
 }
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.pb-8 {
-  padding-bottom: 2rem;
-}
-.pl-44 {
-  padding-left: 11rem;
+.pb-12 {
+  padding-bottom: 3rem;
 }
-.pl-20 {
-  padding-left: 5rem;
+.pl-16 {
+  padding-left: 4rem;
 }
 .pl-24 {
   padding-left: 6rem;
 }
-.pl-16 {
-  padding-left: 4rem;
-}
-.pt-3 {
-  padding-top: 0.75rem;
+.pl-44 {
+  padding-left: 11rem;
 }
 .pt-4 {
   padding-top: 1rem;
 }
-.pl-12 {
-  padding-left: 3rem;
-}
-.pb-16 {
-  padding-bottom: 4rem;
-}
-.pb-12 {
-  padding-bottom: 3rem;
-}
 .text-center {
   text-align: center;
 }
   font-size: 0.75rem;
   line-height: 1rem;
 }
-.uppercase {
-  text-transform: uppercase;
-}
 .capitalize {
   text-transform: capitalize;
 }
-.italic {
-  font-style: italic;
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 .grayscale {
   --tw-grayscale: grayscale(100%);
     display: flex;
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
     grid-template-rows: repeat(3, minmax(0, 1fr));
   }
 
-  .lg\:grid-rows-2 {
-    grid-template-rows: repeat(2, minmax(0, 1fr));
-  }
-
-  .lg\:grid-rows-\[1fr\2c 1fr\] {
-    grid-template-rows: 1fr 1fr;
-  }
-
-  .lg\:grid-rows-\[1fr\2c 1fr\2c 1fr\] {
-    grid-template-rows: 1fr 1fr 1fr;
-  }
-
-  .lg\:grid-rows-\[3fr\2c 1fr\2c 1fr\] {
-    grid-template-rows: 3fr 1fr 1fr;
-  }
-
   .lg\:grid-rows-\[auto\2c auto\2c auto\] {
     grid-template-rows: auto auto auto;
   }

web/app/templates/base.html

     {% endif %}
 {% endmacro %}
 
+{% macro book_with_related(resource, relationships, pre_title='', post_title='Related') %}
+    <div class="w-full overflow-x-scroll my-8 pb-12 border-b-2 border-black">
+        <div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col" >
+            <div class=" w-40 pl-16 pt-4 row-start-1 ">
+                {% if pre_title == '' %}
+                <p>1 / 34</p>
+                {% else %}
+                <p>{{ pre_title }}</p>
+                {% endif %}
+            </div>
+            <div class="w-[32rem] shrink-0 row-start-1 row-span-3">
+                {{ resource_lead(resource) }}
+            </div>
+            <div class=" w-52 pl-24 pt-4 row-start-1 ">
+                {{ post_title }}
+            </div>
+            <div class="h-12">
+
+            </div>
+            {% if resource['name'] != 'practice' %}
+            <div class="w-52 pl-24 pt-4 ">
+                Related practices
+            </div>
+            {% endif %}
+            {% for relationship in relationships %}
+            <div class="shrink-0 min-w-[32rem] row-start-1">
+                {{ resource_lead(relationship) }}
+            </div>
+            {% endfor %}
+            <!-- <div class=""></div>
+            <div class="cell practice">
+                <h2>Collaborative writing</h2>
+            </div>
+            <div class="shrink-0 min-w-[32rem] row-start-1">
+                {{ resource_lead(resource) }}
+            </div>
+            <div class="shrink-0 min-w-[32rem] row-start-1">
+                {{ resource_lead(resource) }}
+            </div> -->
+        </div>
+    </div>
+{% endmacro %}
+
 {% macro resource_with_related(resource, pre_title='', post_title='Related') %}
     <div class="w-full overflow-x-scroll my-8 pb-12 border-b-2 border-black">
         <div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col" >

web/app/templates/index.html

 
     </div>
     
+    {{ book_with_related(book, book_relationships, 'Book', 'Related') }}
     
     {% for tool in tools %}