Merge branch 'joel' into main

web/app/static/src/main.css

 }
 
 .cell {
-    @apply min-w-[14rem];
+    @apply max-h-[30vh] lg:max-h-none relative;
     @apply overflow-hidden;
 }
+/* 
+.cell::after {
+    content:'';
+    @apply absolute w-full h-[3rem] left-0 bottom-0;
+    background-color: red;
+} */
 .cell.size-1 {
     @apply min-w-[30rem];
 }
 }
 
 .cell {
-    @apply cell-margin relative;
+    @apply cell-margin ;
 }
 
+.cell .lead-inner-link {
+    @apply relative;
+}
+
+.cell .lead-inner-link::after {
+    content: '';
+    @apply absolute bottom-0 left-0 w-full h-[3rem] ;
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
+}
 
 .cell::before {
     content: '';
 }
 
 .facts > * {
-    @apply max-w-[65ch];
+    @apply lg:max-w-[65ch];
 }
 
 a:hover {
 }
 
 .huge-title {
-    @apply text-4xl lg:text-5xl;
+    @apply text-2xl lg:text-5xl;
 }
 .big-title {
-    @apply text-3xl lg:text-4xl;
+    @apply text-lg lg:text-4xl;
 }
 .medium-title {
-    @apply text-2xl lg:text-3xl;
+    @apply text-xl lg:text-3xl;
 }
 .small-title {
-    @apply text-xl lg:text-2xl;
+    @apply text-lg lg:text-2xl;
 }
 .big-text {
-    @apply text-xl ;
+    @apply text-base lg:text-xl ;
 }
 .small-text {
     @apply text-base;

web/app/static/styles/main.css

 .z-\[60\] {
   z-index: 60;
 }
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
 .row-start-1 {
   grid-row-start: 1;
 }
 .float-right {
   float: right;
 }
-.m-16 {
-  margin: 4rem;
+.-m-4 {
+  margin: -1rem;
 }
-.m-4 {
-  margin: 1rem;
+.m-1 {
+  margin: 0.25rem;
 }
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 .mr-2 {
   margin-right: 0.5rem;
 }
-.mr-auto {
-  margin-right: auto;
-}
 .mt-16 {
   margin-top: 4rem;
 }
 .h-14 {
   height: 3.5rem;
 }
-.h-20 {
-  height: 5rem;
-}
-.h-40 {
-  height: 10rem;
-}
 .h-5 {
   height: 1.25rem;
 }
 .w-10 {
   width: 2.5rem;
 }
-.w-20 {
-  width: 5rem;
-}
-.w-40 {
-  width: 10rem;
+.w-14 {
+  width: 3.5rem;
 }
 .w-48 {
   width: 12rem;
 .w-5 {
   width: 1.25rem;
 }
-.w-\[20rem\] {
-  width: 20rem;
-}
-.w-\[25rem\] {
-  width: 25rem;
-}
-.w-\[35rem\] {
-  width: 35rem;
+.w-\[12rem\] {
+  width: 12rem;
 }
-.w-\[4rem\] {
-  width: 4rem;
+.w-\[4\.5rem\] {
+  width: 4.5rem;
 }
 .w-\[calc\(100\%-2rem\)\] {
   width: calc(100% - 2rem);
 .w-full {
   width: 100%;
 }
-.w-\[20\] {
-  width: 20;
-}
 .min-w-\[5rem\] {
   min-width: 5rem;
 }
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
-.flex-wrap {
-  flex-wrap: wrap;
+.flex-col {
+  flex-direction: column;
 }
 .content-start {
   align-content: flex-start;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
 .gap-4 {
   gap: 1rem;
 }
+.gap-6 {
+  gap: 1.5rem;
+}
 .gap-8 {
   gap: 2rem;
 }
+.overflow-hidden {
+  overflow: hidden;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
 .border-l-2 {
   border-left-width: 2px;
 }
-.border-r-2 {
-  border-right-width: 2px;
-}
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
+.bg-purple-700\/50 {
+  background-color: rgb(126 34 206 / 0.5);
+}
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 .p-4 {
   padding: 1rem;
 }
-.p-8 {
-  padding: 2rem;
-}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   padding-left: 2rem;
   padding-right: 2rem;
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .py-3 {
   padding-top: 0.75rem;
 .pl-1 {
   padding-left: 0.25rem;
 }
+.pr-4 {
+  padding-right: 1rem;
+}
 .pr-40 {
   padding-right: 10rem;
 }
   font-size: 1.1rem;
   line-height: 1.22;
 }
+.text-lg {
+  font-size: 1.24rem;
+  line-height: 1.1;
+}
 .text-sm {
   font-size: 0.95rem;
   line-height: 1.35;
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.opacity-40 {
+  opacity: 0.4;
+}
 .grayscale {
   --tw-grayscale: grayscale(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .cell {
-  min-width: 14rem;
+  position: relative;
+  max-height: 30vh;
+}
+
+@media (min-width: 1024px) {
+
+  .cell {
+    max-height: none;
+  }
+}
+
+.cell {
   overflow: hidden;
 }
+/* 
+.cell::after {
+    content:'';
+    @apply absolute w-full h-[3rem] left-0 bottom-0;
+    background-color: red;
+} */
 .cell.size-1 {
   min-width: 30rem;
 }
 }
 
 .cell {
-  position: relative;
   padding: 1rem;
 }
 
+.cell .lead-inner-link {
+  position: relative;
+}
+
+.cell .lead-inner-link::after {
+    content: '';
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    height: 3rem;
+    width: 100%;
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
+}
 
 .cell::before {
     content: '';
 .facts h3 {
 }
 
-.facts > * {
-  max-width: 65ch;
+@media (min-width: 1024px) {
+
+  .facts > * {
+    max-width: 65ch;
+  }
 }
 
 a:hover {
 }
 
 .huge-title {
-  font-size: 3rem;
+  font-size: 1.85rem;
   line-height: 1;
 }
 
   }
 }
 .big-title {
-  font-size: 2rem;
-  line-height: 1;
+  font-size: 1.24rem;
+  line-height: 1.1;
 }
 @media (min-width: 1024px) {
 
   }
 }
 .medium-title {
-  font-size: 1.85rem;
-  line-height: 1;
+  font-size: 1.5rem;
+  line-height: 1.1;
 }
 @media (min-width: 1024px) {
 
   }
 }
 .small-title {
-  font-size: 1.5rem;
+  font-size: 1.24rem;
   line-height: 1.1;
 }
 @media (min-width: 1024px) {
   }
 }
 .big-text {
-  font-size: 1.5rem;
-  line-height: 1.1;
+  font-size: 1.1rem;
+  line-height: 1.22;
+}
+@media (min-width: 1024px) {
+
+  .big-text {
+    font-size: 1.5rem;
+    line-height: 1.1;
+  }
 }
 .small-text {
   font-size: 1.1rem;
 
  @media (min-width: 1024px) {
 
+  .lg\:static {
+    position: static;
+  }
+
+  .lg\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .lg\:row-span-3 {
     grid-row: span 3 / span 3;
   }
 
+  .lg\:float-right {
+    float: right;
+  }
+
+  .lg\:m-0 {
+    margin: 0px;
+  }
+
+  .lg\:m-16 {
+    margin: 4rem;
+  }
+
+  .lg\:m-4 {
+    margin: 1rem;
+  }
+
+  .lg\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
   .lg\:ml-\[13rem\] {
     margin-left: 13rem;
   }
     display: none;
   }
 
+  .lg\:h-20 {
+    height: 5rem;
+  }
+
+  .lg\:h-40 {
+    height: 10rem;
+  }
+
+  .lg\:w-20 {
+    width: 5rem;
+  }
+
+  .lg\:w-40 {
+    width: 10rem;
+  }
+
   .lg\:w-\[12rem\] {
     width: 12rem;
   }
 
+  .lg\:w-\[25rem\] {
+    width: 25rem;
+  }
+
   .lg\:w-\[30rem\] {
     width: 30rem;
   }
     width: 35rem;
   }
 
-  .lg\:w-\[25rem\] {
-    width: 25rem;
-  }
-
   .lg\:max-w-\[30rem\] {
     max-width: 30rem;
   }
     grid-template-rows: auto auto auto;
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .lg\:items-center {
+    align-items: center;
+  }
+
+  .lg\:gap-4 {
+    gap: 1rem;
+  }
+
   .lg\:border-r-2 {
     border-right-width: 2px;
   }
     padding: 0px;
   }
 
+  .lg\:py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .lg\:pr-8 {
     padding-right: 2rem;
   }
+
+  .lg\:text-xl {
+    font-size: 1.5rem;
+    line-height: 1.1;
+  }
+
+  .lg\:opacity-100 {
+    opacity: 1;
+  }
 }
 
 .sr-only{

web/app/templates/about.html

 
 {% block content %}
 
-<div id="about" class="cell-margin text max-w-[65ch]">
+<div class="cell-margin text max-w-[65ch] lg:m-16 text-lg lg:text-xl">
     {{ about_text|safe }}
 </div>
 
     {{ colophon_text | safe }}
 </div>
 
-{% endblock %}
+{% endblock %}

web/app/templates/base.html

 
 {% macro view_switch() %}
 
-    <div class="flex">
-        <a
-            href="{{ url_for(request.endpoint) }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
-            class="block link flex p-3 gap-2 {% if view != 'list' %} active {% endif %}"
-        >
-    
-            <div class="w-5 h-5 inline-block">
-                <svg width="100%" height="100%" viewBox="0 0 46 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <rect width="21" height="36" fill="black" />
-                    <rect x="27" width="19" height="14" fill="black" />
-                    <rect x="27" y="21" width="19" height="15" fill="black" />
-                </svg>
-    
-            </div>
-    
-            Expanded
-        </a>
-        <a
-            href="{{ url_for(request.endpoint) }}?view=list{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
-            class="block link flex p-3 gap-2 {% if view == 'list' %} active {% endif %}"
-        >
-            <div class="w-5 h-5  inline-block ">
-                <svg width="100%" height="100%" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M0 2H38" stroke="black" stroke-width="2.5" />
-                    <path d="M0 13H38" stroke="black" stroke-width="2.5" />
-                    <path d="M0 24H38" stroke="black" stroke-width="2.5" />
-                    <path d="M0 35H38" stroke="black" stroke-width="2.5" />
-                </svg>
-    
-            </div>
-    
-            List
-        </a>
-    </div>
+<div class="flex">
+    <a href="{{ url_for(request.endpoint) }}?view=regular{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
+        class="block link flex p-3 gap-2 {% if view != 'list' %} active {% endif %}">
+
+        <div class="w-5 h-5 inline-block">
+            <svg width="100%" height="100%" viewBox="0 0 46 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="21" height="36" fill="black" />
+                <rect x="27" width="19" height="14" fill="black" />
+                <rect x="27" y="21" width="19" height="15" fill="black" />
+            </svg>
+        </div>
+
+        Expanded
+    </a>
+    <a href="{{ url_for(request.endpoint) }}?view=list{% for key in request.args %}{% if key != 'view' %}&{{ key }}={{ request.args.get(key) }}{% endif %}{% endfor %}"
+        class="block link flex p-3 gap-2 {% if view == 'list' %} active {% endif %}">
+        <div class="w-5 h-5  inline-block ">
+            <svg width="100%" height="100%" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M0 2H38" stroke="black" stroke-width="2.5" />
+                <path d="M0 13H38" stroke="black" stroke-width="2.5" />
+                <path d="M0 24H38" stroke="black" stroke-width="2.5" />
+                <path d="M0 35H38" stroke="black" stroke-width="2.5" />
+            </svg>
+
+        </div>
+
+        List
+    </a>
+</div>
 
 {% endmacro %}
 
 {% macro menu(type) %}
-    <a 
-        class="block menuitem  w-48 " 
-        href="{{ url_for('main.index') }}{% if view == 'list' %}?view=list{% endif %}"
-        @click="menuOpen = false"
-    ><span>Experimental Publishing Compendium <span class="ml-3  inline-block -rotate-12 italic text-[#f52d2d]" style="text-shadow: 0 0 0.4rem white">beta</span></span>
-    </a>
+<a class="block menuitem  w-48 " href="{{ url_for('main.index') }}{% if view == 'list' %}?view=list{% endif %}"
+    @click="menuOpen = false"><span>Experimental Publishing Compendium <span
+            class="ml-3  inline-block -rotate-12 italic text-[#f52d2d]"
+            style="text-shadow: 0 0 0.4rem white">beta</span></span>
+</a>
 
-    <a href="{{ url_for('tool.get_tools') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title  {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
-        @click="menuOpen = false"
-        >
-        Tools
-        
-    </a>
+<a href="{{ url_for('tool.get_tools') }}{% if view == 'list' %}?view=list{% endif %}"
+    class="{{ 'active' if request.path == url_for('tool.get_tools') }} menuitem tool medium-title  {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
+    @click="menuOpen = false">
+    Tools
 
-    <a href="{{ url_for('practice.get_practices') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title   {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
-        @click="menuOpen = false"
-        >
-        Practices
-        
-    </a>
+</a>
 
-    <a href="{{ url_for('book.get_books') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book block   {% if type=='top' %} hidden lg:block {% else %} block {% endif %} "
-        @click="menuOpen = false"
-        >
-        Books
-        
-    </a>
+<a href="{{ url_for('practice.get_practices') }}{% if view == 'list' %}?view=list{% endif %}"
+    class="{{ 'active' if request.path == url_for('practice.get_practices') }} menuitem practice medium-title   {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
+    @click="menuOpen = false">
+    Practices
 
-    <a href="{{ url_for('main.about') }}{% if view == 'list' %}?view=list{% endif %}"
-        class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto    {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
-        @click="menuOpen = false"
-        >
-        About / <br> Contact
-        
-    </a>
+</a>
+
+<a href="{{ url_for('book.get_books') }}{% if view == 'list' %}?view=list{% endif %}"
+    class="{{ 'active' if request.path == url_for('book.get_books') }} menuitem medium-title book block   {% if type=='top' %} hidden lg:block {% else %} block {% endif %} "
+    @click="menuOpen = false">
+    Books
 
-    <!-- <div class="ml-auto mr-2">
+</a>
+
+<a href="{{ url_for('main.about') }}{% if view == 'list' %}?view=list{% endif %}"
+    class="ml-auto {{ 'active' if request.path == url_for('main.about') }} menuitem     {% if type=='top' %} hidden lg:block {% else %} block {% endif %}"
+    @click="menuOpen = false">
+    About / <br> Contact
+
+</a>
+
+<!-- <div class="ml-auto mr-2">
         {% if current_user.is_authenticated %}
         <a href="{{ url_for('create.create_resource') }}" class="block link">
             Add resource
         {% endif %}
     </div> -->
 
-    <form action="{{ url_for('search.basic_search') }}" class="hidden lg:block">
-        <label id="search-label" for="siteSearch" class="sr-only">Search</label>
-        <input type="text" name="query" class="text-center h-full text-base border-l-2 border-black pl-1" aria-labelledby="search-label"
-            placeholder="Search">
-        <input class="hidden" type="submit" value="Enter search" hidden />
-    </form>
+<form action="{{ url_for('search.basic_search') }}" class="hidden lg:block">
+    <label id="search-label" for="siteSearch" class="sr-only">Search</label>
+    <input type="text" name="query" class="text-center h-full text-base border-l-2 border-black pl-1" aria-labelledby="search-label"
+        placeholder="Search" hx-get="{{ url_for('search.basic_search') }}"
+        hx-trigger="keyup changed delay:500ms, search" hx-target="main" hx-select="main">
+    <input class="hidden" type="submit" hidden />
+</form>
+
 {% endmacro %}
 
 {% macro relationships_links(resource) %}
 
-    {% if resource.tools %}
-    <div class="">
-        <div class="px-4 mt-16 lg:mt-0">
-            Tools
-        </div>
-        {% for tool in resource.tools %}
-        <div class="cell">
-            {{ resource_lead(tool,size=2) }}
-        </div>
-        {% endfor %}
-    
+{% if resource.tools %}
+<div class="">
+    <div class="px-4 mt-16 lg:mt-0">
+        Tools
     </div>
-    {% endif %}
-    {% if resource.books %}
-    <div class="">
-        <div class="px-4 mt-16 lg:mt-0">
-            Books
-        </div>
-    
-        {% for book in resource.books %}
-        <div class="cell">
-            {{ resource_lead(book,size=2) }}
-        </div>
-        {% endfor %}
+    {% for tool in resource.tools %}
+    <div class="cell">
+        {{ resource_lead(tool,size=2) }}
     </div>
-    {% endif %}
-    {% if resource.practices %}
-    <div class="">
-        <div class="px-4 mt-16 lg:mt-0">
-            Practices
-        </div>
-    
-        {% for practice in resource.practices %}
-        <div class="cell">
-            {{ resource_lead(practice,size=2) }}
-        </div>
-        {% endfor %}
+    {% endfor %}
+
+</div>
+{% endif %}
+{% if resource.books %}
+<div class="">
+    <div class="px-4 mt-16 lg:mt-0">
+        Books
     </div>
-    {% endif %}
+
+    {% for book in resource.books %}
+    <div class="cell">
+        {{ resource_lead(book,size=2) }}
+    </div>
+    {% endfor %}
+</div>
+{% endif %}
+{% if resource.practices %}
+<div class="">
+    <div class="px-4 mt-16 lg:mt-0">
+        Practices
+    </div>
+
+    {% for practice in resource.practices %}
+    <div class="cell">
+        {{ resource_lead(practice,size=2) }}
+    </div>
+    {% endfor %}
+</div>
+{% endif %}
 
 {% endmacro %}
 
 {% macro resource_list(resource, loop, show_number=true) %}
 <div class="border-b-2 border-black">
-    <a class="flex gap-4 h-full py-1 hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
+    <a class="flex gap-6 h-full py-2  hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}" {% if
         resource['type']=='book' %} href="{{ url_for('book.show_book', book_id=resource['id']) }}" {% endif %} {% if
         resource['type']=='tool' %} href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" {% endif %} {% if
-        resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {% endif
-        %} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">
+        resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {%
+        endif %} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">
 
-        <div class="w-[4rem] shrink-0 lg:w-[12rem] text-center ">
+        <div class="w-[4.5rem] shrink-0 lg:w-[12rem] text-center ">
             {% if show_number %}
             {{loop.index}} / {{count}}
             {% else %}
         </div>
 
 
-        <div>
-            <span class="{{ resource.type }}">
+        <div class="">
+            <span class="{{ resource.type }} lg:text-xl pr-4">
                 {{ resource.name }}
             </span>
             {% if resource['year'] %}
+            <div class="">
                 {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
+            </div>
             {% endif %}
         </div>
     </a>
 {% endmacro %}
 
 {% macro resource_with_related(resource, loop, show_number=true) %}
-    <div class="w-full  border-b-2 border-black fade-right">
-        <div class="content w-full py-8   overflow-x-auto">
-            <div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col w-fit pr-40 " >
-                <div class="w-[4rem] shrink-0 lg:w-[12rem] text-center px-2 py-4 ">
-                    {% if show_number %}
-                    <p>{{loop.index}} / {{count}}</p>
-                    {% else %}
-                    <p class="capitalize">{{ resource['type'] }}</p>
-                    {% endif %}
+<div class="w-full  border-b-2 border-black fade-right">
+    <div class="content w-full py-8   overflow-x-auto">
+        <div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col w-fit pr-40 ">
+            <div class="w-[4.5rem] shrink-0 lg:w-[12rem] text-center px-2 py-4 ">
+                {% if show_number %}
+                <p>{{loop.index}} / {{count}}</p>
+                {% else %}
+                <p class="capitalize">{{ resource['type'] }}</p>
+                {% endif %}
+            </div>
+            <div class="cell w-[12rem] lg:w-[32rem] row-start-1 lg:row-span-3">
+                {{ resource_lead(resource) }}
+            </div>
+
+            {% if resource.tools %}
+            <div class="grid lg:grid-rows-1 grid-flow-col w-fit h-fit ">
+                <div class="related">
+                    Related<br>Tools
                 </div>
-                <div class="cell w-[20rem] lg:w-[32rem] row-start-1 lg:row-span-3">
-                    {{ resource_lead(resource) }}
+                {% for tool in resource.tools %}
+                <div class="cell w-[12rem] lg:w-[30rem]">
+                    {{ resource_lead(tool,size=2) }}
                 </div>
-    
-                {% if resource.tools %}
-                <div class="grid lg:grid-rows-1 grid-flow-col w-fit h-fit">
-                    <div class="related">
-                        Related<br>Tools
-                    </div>
-                    {% for tool in resource.tools %}
-                    <div class="cell w-[20rem] lg:w-[30rem]">
-                        {{ resource_lead(tool,size=2) }}
-                    </div>
-                    {% endfor %}
+                {% endfor %}
+            </div>
+            {% endif %}
+
+            {% if resource.books %}
+            <div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
+                <div class="related">
+                    Related<br>Books
                 </div>
-                {% endif %}
-    
-                {% if resource.books %}
-                <div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
-                    <div class="related">
-                        Related<br>Books
-                    </div>
-                    {% for book in resource.books %}
-                    <div class="cell w-[20] lg:w-[35rem]">
-                        {{ resource_lead(book,size=2) }}
-                    </div>
-                    {% endfor %}
+                {% for book in resource.books %}
+                <div class="cell w-[12rem] lg:w-[35rem]">
+                    {{ resource_lead(book,size=2) }}
                 </div>
-                {% endif %}
-                
-                {% if resource.practices %}
-                <div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
-                    <div class="related">
-                        Related<br>Practices
-                    </div>
-                    {% for practice in resource.practices %}
-                    <div class="cell w-[20rem] lg:w-[25rem]">
-                        {{ resource_lead(practice,size=2) }}
-                    </div>
-                    {% endfor %}
+                {% endfor %}
+            </div>
+            {% endif %}
+
+            {% if resource.practices %}
+            <div class="grid grid-rows-1 grid-flow-col w-fit h-fit">
+                <div class="related">
+                    Related<br>Practices
                 </div>
-                {% endif %}
-    
+                {% for practice in resource.practices %}
+                <div class="cell w-[12rem] lg:w-[25rem]">
+                    {{ resource_lead(practice,size=2) }}
+                </div>
+                {% endfor %}
             </div>
+            {% endif %}
+
         </div>
     </div>
+</div>
 {% endmacro %}
 
 {% macro popup_link(title,url) %}
-    <a href="{{ url }}" class="nav-link">
-        {{ title }}
-    </a>
+<a href="{{ url }}" class="nav-link">
+    {{ title }}
+</a>
 {% endmacro %}
 
 {% macro resource_lead(resource,size=1) %}
-        <a
-            class="block h-full hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}"
-
-            {% if resource['type'] == 'book' %}
-            href="{{ url_for('book.show_book', book_id=resource['id']) }}" 
-            {% endif %}
-            {% if resource['type'] == 'tool' %}
-            href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" 
-            {% endif %}
-            {% if resource['type'] == 'practice' %}
-            href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" 
-            {% endif %}
-            
-            hx-target="#modal-content" 
-            hx-select="main" 
-            hx-swap="innerHTML" 
+<a class="block lead-inner-link overflow-hidden h-full hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}"
+    {% if resource['type']=='book' %} href="{{ url_for('book.show_book', book_id=resource['id']) }}" {% endif %} {% if
+    resource['type']=='tool' %} href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" {% endif %} {% if
+    resource['type']=='practice' %} href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" {% endif
+    %} hx-target="#modal-content" hx-select="main" hx-swap="innerHTML" @click="openModal()">
+
+    {% if (resource.type == 'book') and (resource.references) %}
+    <img class="w-14 h-14 lg:w-20 lg:h-20 object-contain lg:float-right absolute opacity-40 lg:opacity-100 lg:static top-0 right-0 m-1 lg:m-4 grayscale rotate-[15deg]"
+        src="{{resource.references}}" alt="cover for {{ resource.name }}">
+    {% endif %}
 
-            @click="openModal()"
-            
-        >
+    <h2 class="{{ resource['type'] }} {% if size==1 %} big-title {% else %} small-title {% endif %} mb-2">{{
+        resource['name'] }}</h2>
 
-            {% if (resource.type == 'book') and (resource.references) %}
-                <img class="w-20 h-20 object-contain float-right m-4 grayscale rotate-[15deg]" src="{{resource.references}}" alt="cover for {{ resource.name }}">
-            {% endif %}
-            
-            <h2 class="{{ resource['type'] }} {% if size==1 %} big-title {% else %} small-title {% endif %} mb-2">{{ resource['name'] }}</h2>
-            
-            {% if resource['year'] %}
-                <div class="text-sm">
-                    {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
-                </div>
-            {% endif %}
+    {% if resource['year'] %}
+    <div class="text-sm">
+        {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
+    </div>
+    {% endif %}
 
-            <div class="{% if size==1 %} big-text {% else %} small-text {% endif %} mb-[1em]">
-                {{ resource['description'] | truncate(150) | safe }}
-            </div>
+    <div class="{% if size==1 %} big-text {% else %} small-text {% endif %} mb-[1em]">
+        {{ resource['description'] | truncate(150) | safe }}
+    </div>
 
-        </a>
-        {% if current_user.is_authenticated %}
-            <div class="">
-                {% if resource['type'] == 'tool' %}
-                <a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
-                    <span class="absolute top-0 left-0 text-xs">Edit</span>
-                </a>
-                {% elif resource['type'] == 'practice' %}
-                <a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
-                    <span class="absolute top-0 left-0 text-xs">Edit</span>
-                </a>
-                {% elif resource['type'] == 'book' %}
-                <a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
-                    <span class="absolute top-0 left-0 text-xs">Edit</span>
-                </a>
-                {% endif %}
-            </div>
-        {% endif %}
+</a>
+{% if current_user.is_authenticated %}
+<div class="">
+    {% if resource['type'] == 'tool' %}
+    <a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
+        <span class="absolute top-0 left-0 text-xs">Edit</span>
+    </a>
+    {% elif resource['type'] == 'practice' %}
+    <a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
+        <span class="absolute top-0 left-0 text-xs">Edit</span>
+    </a>
+    {% elif resource['type'] == 'book' %}
+    <a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
+        <span class="absolute top-0 left-0 text-xs">Edit</span>
+    </a>
+    {% endif %}
+</div>
+{% endif %}
 {% endmacro %}
 
 
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    
+
     <title>Experimental Publishing Compendium</title>
     <script src="{{ url_for('static',filename='js/alpine.min.js') }}" defer></script>
     <script src="{{ url_for('static',filename='js/htmx.min.js') }}"></script>
 </head>
 
 
-<body 
-    class="text-base overflow-y-scroll" 
-    x-data="base()" 
-    
-    hx-boost="true"
-    hx-select="#all"
-    hx-target="#all"
-    hx-swap="outerHTML"
-    hx-indicator="body"
->
+<body class="text-base overflow-y-scroll" x-data="base()" hx-boost="true" hx-select="#all" hx-target="#all"
+    hx-swap="outerHTML" hx-indicator="body">
     <div id="loading" class="loading pointer-events-none ">
         <!-- <div class="bg-white fixed top-0 left-0 w-full h-screen z-20"></div> -->
         <div class="bg fixed top-0 left-0 w-full h-screen z-30"></div>
     <div id="all">
         <header class="sticky top-0 z-10 bg-white  border-b-[2px] border-black flex justify-between w-full">
             <nav class=" lg:flex justify-center items-stretch w-full ">
-                
+
                 {{ menu('top') }}
-                
+
             </nav>
             <div class="burger h-14 cursor-pointer block lg:hidden p-4" @click="menuOpen = true">
                 <svg width="100%" height="100%" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
             </div>
         </header>
 
-        <menu 
-            class="fixed top-0 right-0 z-20 p-8 bg-white w-[calc(100%-2rem)] max-w-[30rem] h-screen"
-            x-show="menuOpen"
-            style="box-shadow: 0 0 2rem rgb(0,0,0,0.2);"
-            @click.outside = "menuOpen = false"
-            >
+        <div x-transition.opacity x-show="menuOpen" class="fixed z-20 top-0 left-0 w-full h-screen bg-purple-700/50">
+
+        </div>
+
+        <menu x-transition.opacity class="fixed top-0 right-0 z-20  bg-white w-[calc(100%-2rem)] max-w-[30rem] h-screen"
+            x-show="menuOpen" style="box-shadow: 0 0 2rem rgb(0,0,0,0.2);" @click.outside="menuOpen = false">
             {{ menu('side') }}
         </menu>
 
 
-    
+
         <!-- Begin page content -->
         <main>
             {% with messages = get_flashed_messages() %}
             {% if messages %}
-                <div class="alert alert-danger">
-                    {{ messages[0] }}
-                </div>
+            <div class="alert alert-danger">
+                {{ messages[0] }}
+            </div>
             {% endif %}
             {% endwith %}
             {% block content %}
         </main>
     </div>
 
-    <div id="modal" x-show="modalOpen"  class="modal h-screen  w-full fixed top-0 z-50 p-4 bg overscroll-none">
+    <div id="modal" x-show="modalOpen" class="modal h-screen  w-full fixed top-0 z-50 p-4 bg overscroll-none">
         <div class="cross cursor-pointer absolute top-10 right-10 w-10 h-10" @click="hideOverlay()">
             <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path>
             </svg>
         </div>
-        <div id="modal-content" @click.outside="hideOverlay()" x-ref="modal" class="content w-full overflow-y-auto h-full bg-white " >
+        <div id="modal-content" @click.outside="hideOverlay()" x-ref="modal"
+            class="content w-full overflow-y-auto h-full bg-white ">
 
         </div>
     </div>
     <!-- Sticky footer-->
     <footer class="std-margin mt-20 text-sm">
         <div class="container">
-            <span class="">© 2022–{{ moment().format('YYYY') }} <a href="https://copim.ac.uk/">COPIM</a> and licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License (CC BY 4.0)</a>.</span>
+            <span class="">© 2022–{{ moment().format('YYYY') }} <a href="https://copim.ac.uk/">COPIM</a> and licensed
+                under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0
+                    International License (CC BY 4.0)</a>.</span>
         </div>
     </footer>
     <!-- JavaScript -->
     <script src="{{ url_for('static',filename='js/main.js') }}"></script>
 </body>
 
-</html>
+</html>

web/app/templates/book.html

 
 {% block content %}
 
-    <div class="cell-margin grid mt-16 lg:grid-cols-2">
-        
-        <div class="left">
-            <div class="mb-2">Book</div>
-            <div class="border-r-2 border-black pr-8">
-                {% if resource.references %}
-                <div class="float-right">
-                    <img class="w-40 h-40 object-contain  m-16 rotate-[15deg]" src={{ resource.references }} alt="cover for {{ resource['Title'] }}">
+<div class="cell-margin grid mt-16 lg:grid-cols-2">
+
+    <div class="left">
+        <div class="mb-2">Book</div>
+        <div class="lg:border-r-2 border-black pr-8">
+            {% if resource.references %}
+            <div class="float-right">
+                <img class="w-14 h-14 lg:w-40 lg:h-40 object-contain  lg:m-16 rotate-[15deg]" src={{ resource.references
+                    }} alt="cover for {{ resource['Title'] }}">
+            </div>
+            {% endif %}
+
+            <h2 class="book huge-title mb-2 max-w-[30rem]">{% block title %} {{ resource.name }} {% endblock %}</h2>
+
+            {% if resource['Year'] %}
+            {{ resource['Year'] }}
+            {% endif %}
+            {% if resource['Authors'] %}
+            <div class="">
+                {% if resource['Authors']|length > 1 %}
+                <div class="">
+                    {% for author in resource['Authors'] %}
+                    {{ author }}</br>
+                    {% endfor %}
+                </div>
+                {% else %}
+                <div>
+                    {% for author in resource['Authors'] %}
+                    {{ author }}
+                    {% endfor %}
                 </div>
                 {% endif %}
-    
-                <h2 class="book huge-title mb-2 max-w-[30rem]">{% block title %} {{ resource.name }} {% endblock %}</h2>
-    
-                {% if resource['Year'] %}
-                {{ resource['Year'] }}
-                {% endif %}
-                {% if resource['Authors'] %}
+
+            </div>
+            {% endif %}
+
+
+            <div class="">
+                {% if current_user.is_authenticated %}
                 <div class="">
-                    {% if resource['Authors']|length > 1 %}
+                    <a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
+                        <span class="badge bg-dark">Edit</span>
+                    </a>
+                </div>
+                {% endif %}
+
+                <div class="facts ">
+
+                    {% if resource['typology'] %}
                     <div class="">
-                        {% for author in resource['Authors'] %}
-                        {{ author }}</br>
-                        {% endfor %}
-                    </div>
-                    {% else %}
-                    <div>
-                        {% for author in resource['Authors'] %}
-                        {{ author }}
-                        {% endfor %}
+                        <h3>Typology category</h3>
+                        <a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
                     </div>
                     {% endif %}
-    
-                </div>
-                {% endif %}
-    
-    
-                <div class="">
-                    {% if current_user.is_authenticated %}
+                    {% if resource['bookUrl'] %}
                     <div class="">
-                        <a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
-                            <span class="badge bg-dark">Edit</span>
-                        </a>
+                        <h3>URL</h3>
+                        <a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
                     </div>
                     {% endif %}
-    
-                    <div class="facts ">
-    
-                        {% if resource['typology'] %}
-                        <div class="">
-                            <h3>Typology category</h3>
-                            <a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a>
-                        </div>
-                        {% endif %}
-                        {% if resource['bookUrl'] %}
-                        <div class="">
-                            <h3>URL</h3>
-                            <a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a>
-                        </div>
-                        {% endif %}
-                        <!-- fields for books from isbntools -->
-                        {% if resource['ISBN-13'] %}
-                        <div class="">
-                            <h3>
-                                ISBN-13
-                            </h3>
-                            <div>
-                                {{ resource['ISBN-13'] }}
-                            </div>
+                    <!-- fields for books from isbntools -->
+                    {% if resource['ISBN-13'] %}
+                    <div class="">
+                        <h3>
+                            ISBN-13
+                        </h3>
+                        <div>
+                            {{ resource['ISBN-13'] }}
                         </div>
-                        {% endif %}
-                        {% if resource['Publisher'] %}
-                        <div class="">
-                            <h3>
-                                Publisher
-                            </h3>
-                            <div>
-                                {{ resource['Publisher'] }}
-                            </div>
+                    </div>
+                    {% endif %}
+                    {% if resource['Publisher'] %}
+                    <div class="">
+                        <h3>
+                            Publisher
+                        </h3>
+                        <div>
+                            {{ resource['Publisher'] }}
                         </div>
-                        {% endif %}
-                        <!-- fields for books from database -->
-                        {% if resource['name'] %}
-                        <!-- <div class="">
+                    </div>
+                    {% endif %}
+                    <!-- fields for books from database -->
+                    {% if resource['name'] %}
+                    <!-- <div class="">
                             <h3>Title</h3>
                             <div class="">{{ resource['name'] }}</div>
                         </div> -->
-                        {% endif %}
-                        {% if resource['author'] %}
-                        <div class="">
-                            <h3>Author</h3>
-                            <div class="">{{ resource['author'] }}</div>
-                        </div>
-                        {% endif %}
-                        {% if resource['year'] %}
-                        <div class="">
-                            <h3>Publication year</h3>
-                            <div>
-                                {{ resource['year'] }}
-                            </div>
-                        </div>
-                        {% endif %}
-                        {% if resource['desc'] %}
-                        <div class="col-span-2">
-                            <h3>Publisher's description</h3>
-                            <div class="">{{ resource['desc'] }}</div>
+                    {% endif %}
+                    {% if resource['author'] %}
+                    <div class="">
+                        <h3>Author</h3>
+                        <div class="">{{ resource['author'] }}</div>
+                    </div>
+                    {% endif %}
+                    {% if resource['year'] %}
+                    <div class="">
+                        <h3>Publication year</h3>
+                        <div>
+                            {{ resource['year'] }}
                         </div>
-                        {% endif %}
-    
-                        {% if resource['description'] %}
-                        <div class="col-span-2">
-                            <h3>
-                                Experimental aspects:
-                            </h3>
-                            <div>
-                                {{ resource['description']|safe }}
-                            </div>
+                    </div>
+                    {% endif %}
+                    {% if resource['desc'] %}
+                    <div class="lg:col-span-2">
+                        <h3>Publisher's description</h3>
+                        <div class="">{{ resource['desc'] }}</div>
+                    </div>
+                    {% endif %}
+
+                    {% if resource['description'] %}
+                    <div class="lg:col-span-2">
+                        <h3>
+                            Experimental aspects:
+                        </h3>
+                        <div>
+                            {{ resource['description']|safe }}
                         </div>
-                        {% endif %}
                     </div>
+                    {% endif %}
                 </div>
             </div>
         </div>
-        <div class="right p-4 pr-8 lg:p-0">
-            <div class="grid lg:grid-cols-2">
-                {{ relationships_links(resource) }} 
-            </div>
+    </div>
+    <div class="right p-4 pr-8 lg:p-0">
+        <div class="grid lg:grid-cols-2">
+            {{ relationships_links(resource) }}
         </div>
-        
     </div>
 
-{% endblock %}
+</div>
 
+{% endblock %}

web/app/templates/index.html

 <div class="">
 
     <div class="border-b-2 border-black grid gap-8 lg:grid-cols-[52rem,30rem]  content-start">
-        <div class="mx-2 lg:ml-[13rem] text my-8 meta max-w-[30rem]">
+        <div class="mx-4 lg:ml-[13rem] text my-4 lg:my-8 meta max-w-[30rem]">
             {{ text|safe }}
         </div>
     </div>
 
-    <div class="flex gap-4 items-center min-h-[2rem] mb-8 mb-8 border-b-2 border-black ">
+    <div class="flex gap-4 items-center min-h-[2rem] mb-8 border-b-2 border-black ">
         {{ view_switch() }}
     </div>
 

web/app/templates/resource.html

         <div class="mb-4 capitalize">{{ resource['type'] }}</div>
         <div class="lg:border-r-2 lg:border-black lg:pr-8">
             <h2 class="block-margin huge-title {{ resource['type'] }}">
-                {% block title %} 
+                {% block title %}
                 {% autoescape false %}
-                    {{ resource['name'] | replace(" ","<br>") }} 
+                {{ resource['name'] | replace(" ","<br>") }}
                 {% endautoescape %}
                 {% endblock %}
             </h2>
-        
+
             {% if current_user.is_authenticated %}
-                {% if resource['type'] == 'tool' %}
-                <div class="row text-center py-3">
-                    <a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
-                        <span class="">Edit</span>
-                    </a>
-                </div>
-                {% elif resource['type'] == 'practice' %}
-                <div class="row text-center py-3">
-                    <a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
-                        <span class="">Edit</span>
-                    </a>
-                </div>
-                {% endif %}
+            {% if resource['type'] == 'tool' %}
+            <div class="row text-center py-3">
+                <a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
+                    <span class="">Edit</span>
+                </a>
+            </div>
+            {% elif resource['type'] == 'practice' %}
+            <div class="row text-center py-3">
+                <a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
+                    <span class="">Edit</span>
+                </a>
+            </div>
+            {% endif %}
             {% endif %}
             <div class="facts">
                 {% if resource['description'] %}
                 {% endif %}
                 <!-- fields for tools -->
                 {% if resource['developer'] %}
-                    <div class="">
-                        <h3>Developer</h3>
-                        {% if resource['developerUrl'] %}
-                            <a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
-                        {% else %}
-                            {{ resource['developer'] }}
-                        {% endif %}
-                    </div>
+                <div class="">
+                    <h3>Developer</h3>
+                    {% if resource['developerUrl'] %}
+                    <a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a>
+                    {% else %}
+                    {{ resource['developer'] }}
+                    {% endif %}
+                </div>
                 {% endif %}
                 {% if resource['license'] %}
-                    <div class="">
-                        <h3>Software license</h3>
-                        {{ resource['license'] }}
-                    </div>
+                <div class="">
+                    <h3>Software license</h3>
+                    {{ resource['license'] }}
+                </div>
                 {% endif %}
                 {% if resource['scriptingLanguage'] %}
-                    <div class="">
-                        <h3>Software language(s)</h3>
-                        {{ resource['scriptingLanguage'] }}
-                    </div>
+                <div class="">
+                    <h3>Software language(s)</h3>
+                    {{ resource['scriptingLanguage'] }}
+                </div>
                 {% endif %}
                 {% if resource['projectUrl'] %}
-                    <div class="">
-                        <h3>Project page</h3>
-                        <a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
-                    </div>
+                <div class="">
+                    <h3>Project page</h3>
+                    <a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a>
+                </div>
                 {% endif %}
                 {% if resource['repositoryUrl'] %}
-                    <div class="">
-                        <h3>Code repository</h3>
-                        <a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
-                    </div>
+                <div class="">
+                    <h3>Code repository</h3>
+                    <a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
+                </div>
                 {% endif %}
                 {% if resource['ingestFormats'] %}
-                    <div class="">
-                        <h3>Import / ingest formats</h3>
-                        {{ resource['ingestFormats'] }}
-                    </div>
+                <div class="">
+                    <h3>Import / ingest formats</h3>
+                    {{ resource['ingestFormats'] }}
+                </div>
                 {% endif %}
                 {% if resource['outputFormats'] %}
-                    <div class="">
-                        <h3>Output formats</h3>
-                        {{ resource['outputFormats'] }}
-                    </div>
+                <div class="">
+                    <h3>Output formats</h3>
+                    {{ resource['outputFormats'] }}
+                </div>
                 {% endif %}
                 {% if resource['status'] %}
-                    <div class="">
-                        <h3>Platform status</h3>
-                        {{ resource['status'] }}
-                    </div>
+                <div class="">
+                    <h3>Platform status</h3>
+                    {{ resource['status'] }}
+                </div>
                 {% endif %}
                 <!-- fields for practices -->
                 {% if resource['longDescription'] %}
-                    <div class="col-span-2">
-                        <h3>Full description</h3>
-                        {{ resource['longDescription']|safe }}
-                    </div>
+                <div class="lg:col-span-2">
+                    <h3>Full description</h3>
+                    {{ resource['longDescription']|safe }}
+                </div>
                 {% endif %}
                 {% if resource['experimental'] %}
-                    <div class="col-span-2">
-                        <h3>Experimental uses</h3>
-                        {{ resource['experimental']|safe }}
-                    </div>
+                <div class="lg:col-span-2">
+                    <h3>Experimental uses</h3>
+                    {{ resource['experimental']|safe }}
+                </div>
                 {% endif %}
                 {% if resource['considerations'] %}
-                    <div class="col-span-2">
-                        <h3>Considerations</h3>
-                        <p>{{ resource['considerations']|safe }}</p>
-                    </div>
+                <div class="lg:col-span-2">
+                    <h3>Considerations</h3>
+                    <p>{{ resource['considerations']|safe }}</p>
+                </div>
                 {% endif %}
                 {% if resource['references'] %}
-                    <div class="col-span-2">
-                        <h3> Further reading </h3>
-                        <p>{{ resource['references']|safe }}</p>
-                    </div>
+                <div class="lg:col-span-2">
+                    <h3> Further reading </h3>
+                    <p>{{ resource['references']|safe }}</p>
+                </div>
                 {% endif %}
             </div>
-            
+
         </div>
     </div>
-    
+
     <div class="right p-4 pr-8 lg:p-0 ">
         <div class="grid lg:grid-cols-2">
             {{ relationships_links(resource) }}
         </div>
     </div>
 </div>
-    
-{% endblock %}
+
+{% endblock %}

web/app/templates/resources.html

 
 
 {% macro filter_dropdown(id, filter, plural='') %}
-  <select 
-    name="{{ id }}"  
-  >
-    <option 
-      value="" 
-      {% if request.args.get(id, '' )=='' %} selected {% endif %}
-      
-    >
-      {% if plural != '' %}
-        {{ plural }}
-      {% else %}
-        <span class="capitalize bg-red-400">{{ id }}s</span>
-      {% endif%}
-    </option>
-    {% for thing in filter %}
-    <option 
-      value="{{ thing[0] }}" 
-      {% if request.args.get(id)==thing[0]|string %} selected {% endif %}
-    >
-      {{ thing[1] }}
-    </option>
-    {% endfor %}
-  </select>
+<select name="{{ id }}">
+  <option value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}>
+    {% if plural != '' %}
+    {{ plural }}
+    {% else %}
+    <span class="capitalize bg-red-400">{{ id }}s</span>
+    {% endif%}
+  </option>
+  {% for thing in filter %}
+  <option value="{{ thing[0] }}" {% if request.args.get(id)==thing[0]|string %} selected {% endif %}>
+    {{ thing[1] }}
+  </option>
+  {% endfor %}
+</select>
 {% endmacro%}
 
 {% macro filter_dropdown_nokey(id, filter, plural='') %}
-  <select 
-    name="{{ id }}" 
-  >
-    <option 
-      value="" 
-      {% if request.args.get(id, '' ) == '' %} selected {% endif %}
-    >
-      {% if plural != '' %}
-        {{ plural }}
-      {% else %}
-        <span class="capitalize">{{ id }}s</span>
-      {% endif%}
-    </option>
-    {% for thing in filter %}
-    <option 
-      value="{{ thing }}" 
-      {% if request.args.get(id)==thing|string %} selected {% endif %}
-    >
-      {{ thing }}
-    </option>
-    {% endfor %}
-  </select>
+<select name="{{ id }}">
+  <option value="" {% if request.args.get(id, '' )=='' %} selected {% endif %}>
+    {% if plural != '' %}
+    {{ plural }}
+    {% else %}
+    <span class="capitalize">{{ id }}s</span>
+    {% endif%}
+  </option>
+  {% for thing in filter %}
+  <option value="{{ thing }}" {% if request.args.get(id)==thing|string %} selected {% endif %}>
+    {{ thing }}
+  </option>
+  {% endfor %}
+</select>
 {% endmacro%}
 
-    <div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem] content-start">
-      <div class="mx-2 lg:ml-[13rem] text my-8 meta lg:max-w-[30rem]">
-        {{ intro_text|safe }}
-      </div>
-    </div>
-
-    <form 
-      action="{{ url_for(request.endpoint )}}" 
-      method="GET"
+<div class="border-b-2 border-black grid lg:grid-cols-[52rem,30rem] content-start">
+  <div class="mx-4 lg:ml-[13rem] text my-4 lg:my-8 meta lg:max-w-[30rem]">
+    {{ intro_text|safe }}
+  </div>
+</div>
 
-      hx-trigger="change" 
-      hx-push-url="true"
-    
+<form action="{{ url_for(request.endpoint )}}" method="GET" hx-trigger="change" hx-push-url="true">
+  <input type="hidden" name="view" value="{{ view }}">
+  <div
+    class="flex p-4 lg:p-0 flex-col items-start lg:items-center lg:flex-row lg:flex-wrap gap-2 lg:gap-4 min-h-[2rem] mb-8 border-b-2 border-black ">
 
-    >
-      <input type="hidden" name="view" value="{{ view }}">
-      <div class="flex flex-wrap gap-4 items-center min-h-[2rem] mb-8 border-b-2 border-black ">
-      
-        {{ view_switch() }}
+    <div class="-m-4 mb-4 lg:m-0">
+      {{ view_switch() }}
+    </div>
       
         {% if practices_filter%}
           {{ filter_dropdown('practice', practices_filter, 'Practices') }}
         {% endif %}
       </div>
 
-    </form>
+</form>
 
 {% endblock %}