related works

web/app/static/src/main.css

 strong {
     font-family: 'ag-fett';
 }
+b,strong {
+    font-weight: normal !important;
+}
 
 
 .book {
     @apply p-2;
 }
 
+.cell {
+    @apply min-w-[14rem];
+    @apply overflow-hidden;
+}
+.cell.size-1 {
+    @apply min-w-[30rem];
+}
+
+
+.related {
+    @apply w-[8rem] lg:w-[12rem] pl-[4rem] p-5 text-right;
+}
+
 .cell-margin {
     @apply p-4;
 }
 .std-padding {
     @apply p-2;
 }
+.std-padding-x {
+    @apply px-2;
+}
 
 .std-grid {
     @apply grid md:grid-cols-2 lg:grid-cols-3;
 }
 
 a:hover {
-    @apply opacity-60;
+    @apply opacity-90;
 }
 
+
 h2,h3 {
     hyphens: auto;
 }
 
-h2 {
-    @apply text-4xl;
-}
-
 h3 {
-    @apply text-xl tracking-wide;
     font-family: 'ag-fett';
+}
 
+.huge-title {
+    @apply text-4xl lg:text-5xl;
+}
+.big-title {
+    @apply text-3xl lg:text-4xl;
+}
+.medium-title {
+    @apply text-2xl lg:text-3xl;
+}
+.small-title {
+    @apply text-xl lg:text-2xl;
+}
+.big-text {
+    @apply text-xl ;
+}
+.small-text {
+    @apply text-base;
 }
 
 .indent {
 }
 
 .loading {
-    opacity: 0;
     
-    background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
 }
 
-.htmx-request .loading {
-    transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
+/* .loading .bg-white {
+    @apply bg-white/90;
+    opacity: 0;
+    transform: opacity 0.2s;
+}
+
+.htmx-request .bg-white {
     opacity: 1;
-    display: block;
+} */
+
+.loading .bg {
+    opacity: 0;
+    background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
     
 }
 
+.htmx-request .loading .bg {
+    transition: opacity 4000ms ease;
+    /* transition: opacity 4000ms cubic-bezier(.16, .01, .31, .99); */
+    opacity: 1;
+
+}
+
+.loading .spinner .inner {
+    opacity:0;   
+    transition: opacity 0.4s ease;
+    width:min-content;
+    height:min-content;
+    /* height:200px; */
+}
+.htmx-request .loading .spinner .inner {
+    opacity:1;   
+}
+
 
 #modal-content main {
-    
     opacity: 1;
 }
 .htmx-request #modal-content main {
     opacity: 1;
 }
 
+#modal-content {
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 4rem rgba(103, 48, 255, 0.8)
+}
+
+.htmx-request #modal-content {
+    box-shadow: 0 0 4rem rgba(103, 48, 255, 0.0)
+}
+
 .active {
-    @apply bg-[#ffff00];
+    @apply bg-expurple text-white;
+    /* background-image: linear-gradient(to top, purple, transparent) ; */
 }
 
 .link:hover {
-    @apply bg-[#ffff00];
+    @apply bg-expurple text-white; 
 }
 
 details[open]::details-content {
 }
 #resources .filter-header::before {
     content:'+ ';
-}
+}
+
+.fade-right {
+    @apply relative;
+}
+
+.fade-right::after {
+    @apply absolute top-0 right-0 w-40 h-full pointer-events-none;
+
+    content: '';
+    background-image: linear-gradient(to left,#fff 0%, #fff 1rem, rgba(255,255,255,0) 100%);
+
+}
+
+.menuitem {
+    @apply block px-4 py-2 link flex items-center;
+}
+
+
+
+
+
+
+ /* The switch - the box around the slider */
+ .switch {
+     position: relative;
+     display: inline-block;
+     width: 60px;
+     height: 34px;
+ }
+
+ /* Hide default HTML checkbox */
+ .switch input {
+     opacity: 0;
+     width: 0;
+     height: 0;
+ }
+
+ /* The slider */
+ .slider {
+     position: absolute;
+     cursor: pointer;
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+     background-color: #000000;
+     transition: .4s;
+ }
+
+ .slider:before {
+     position: absolute;
+     content: "";
+     height: 26px;
+     width: 26px;
+     left: 4px;
+     bottom: 4px;
+     background-color: white;
+     transition: .4s;
+ }
+
+ input:checked+.slider {
+     background-color: #000000;
+ }
+
+ input:focus+.slider {
+     box-shadow: 0 0 1px #000000;
+ }
+
+ input:checked+.slider:before {
+     transform: translateX(26px);
+ }
+
+ /* Rounded sliders */
+ .slider.round {
+     border-radius: 34px;
+ }
+
+ .slider.round:before {
+     border-radius: 50%;
+ }

web/app/static/styles/main.css

 .pointer-events-none {
   pointer-events: none;
 }
-.collapse {
-  visibility: collapse;
-}
 .static {
   position: static;
 }
 .absolute {
   position: absolute;
 }
-.relative {
-  position: relative;
-}
 .sticky {
   position: sticky;
 }
 .z-20 {
   z-index: 20;
 }
+.z-30 {
+  z-index: 30;
+}
 .z-50 {
   z-index: 50;
 }
+.z-\[60\] {
+  z-index: 60;
+}
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
 .m-16 {
   margin: 4rem;
 }
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.m-4 {
+  margin: 1rem;
 }
 .my-4 {
   margin-top: 1rem;
 .mb-\[1em\] {
   margin-bottom: 1em;
 }
-.ml-4 {
-  margin-left: 1rem;
+.ml-3 {
+  margin-left: 0.75rem;
+}
+.ml-\[13rem\] {
+  margin-left: 13rem;
 }
 .ml-auto {
   margin-left: auto;
 .mr-2 {
   margin-right: 0.5rem;
 }
-.mr-8 {
-  margin-right: 2rem;
-}
 .mr-auto {
   margin-right: auto;
 }
+.mt-16 {
+  margin-top: 4rem;
+}
 .mt-20 {
   margin-top: 5rem;
 }
 .mt-3 {
   margin-top: 0.75rem;
 }
-.mt-4 {
-  margin-top: 1rem;
-}
 .block {
   display: block;
 }
 .flex {
   display: flex;
 }
-.table {
-  display: table;
-}
 .grid {
   display: grid;
 }
 .h-10 {
   height: 2.5rem;
 }
-.h-12 {
-  height: 3rem;
-}
 .h-20 {
   height: 5rem;
 }
 .h-40 {
   height: 10rem;
 }
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .h-full {
   height: 100%;
 }
 .w-40 {
   width: 10rem;
 }
-.w-52 {
-  width: 13rem;
-}
-.w-\[20rem\] {
-  width: 20rem;
+.w-48 {
+  width: 12rem;
 }
 .w-\[25rem\] {
   width: 25rem;
 }
+.w-\[30rem\] {
+  width: 30rem;
+}
 .w-\[32rem\] {
   width: 32rem;
 }
-.w-full {
-  width: 100%;
+.w-\[35rem\] {
+  width: 35rem;
 }
-.min-w-\[10rem\] {
-  min-width: 10rem;
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
 }
-.min-w-\[32rem\] {
-  min-width: 32rem;
+.w-full {
+  width: 100%;
 }
 .max-w-\[30rem\] {
   max-width: 30rem;
 .max-w-\[65ch\] {
   max-width: 65ch;
 }
-.shrink-0 {
-  flex-shrink: 0;
+.-rotate-12 {
+  --tw-rotate: -12deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .rotate-\[15deg\] {
   --tw-rotate: 15deg;
 .grid-flow-col {
   grid-auto-flow: column;
 }
-.grid-cols-\[2fr\2c 1fr\] {
-  grid-template-columns: 2fr 1fr;
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-cols-\[1fr\2c 1fr\] {
+  grid-template-columns: 1fr 1fr;
+}
+.grid-cols-\[30rem\2c 30rem\] {
+  grid-template-columns: 30rem 30rem;
+}
+.grid-cols-\[50rem\2c 30rem\] {
+  grid-template-columns: 50rem 30rem;
+}
+.grid-cols-\[52rem\2c 30rem\] {
+  grid-template-columns: 52rem 30rem;
 }
-.justify-between {
-  justify-content: space-between;
+.grid-rows-1 {
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+.content-center {
+  align-content: center;
+}
+.content-start {
+  align-content: flex-start;
+}
+.items-start {
+  align-items: flex-start;
+}
+.items-center {
+  align-items: center;
+}
+.items-stretch {
+  align-items: stretch;
+}
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-center {
+  justify-content: center;
+}
+.gap-4 {
+  gap: 1rem;
 }
 .gap-8 {
   gap: 2rem;
 }
-.overflow-x-scroll {
-  overflow-x: scroll;
+.overflow-x-auto {
+  overflow-x: auto;
+}
+.overflow-y-auto {
+  overflow-y: auto;
 }
 .overflow-y-scroll {
   overflow-y: scroll;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.border-2 {
-  border-width: 2px;
+.rounded-full {
+  border-radius: 9999px;
+}
+.border {
+  border-width: 1px;
 }
 .border-b-2 {
   border-bottom-width: 2px;
 .border-b-\[2px\] {
   border-bottom-width: 2px;
 }
+.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));
 }
-.bg-black\/20 {
-  background-color: rgb(0 0 0 / 0.2);
+.border-emerald-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(5 150 105 / var(--tw-border-opacity));
+}
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 .bg-white {
   --tw-bg-opacity: 1;
   -o-object-fit: contain;
      object-fit: contain;
 }
-.p-1 {
-  padding: 0.25rem;
-}
-.p-2 {
-  padding: 0.5rem;
-}
 .p-4 {
   padding: 1rem;
 }
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
 }
-.pb-12 {
-  padding-bottom: 3rem;
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }
-.pl-16 {
-  padding-left: 4rem;
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
-.pl-24 {
-  padding-left: 6rem;
+.pl-1 {
+  padding-left: 0.25rem;
 }
-.pl-44 {
-  padding-left: 11rem;
+.pr-40 {
+  padding-right: 10rem;
 }
-.pt-4 {
-  padding-top: 1rem;
+.pr-8 {
+  padding-right: 2rem;
 }
 .text-center {
   text-align: center;
 }
-.align-bottom {
-  vertical-align: bottom;
+.text-right {
+  text-align: right;
 }
 .text-base {
-  font-size: 1.25rem;
+  font-size: 1.1rem;
   line-height: 1.22;
 }
 .text-sm {
-  font-size: 1rem;
+  font-size: 0.85rem;
   line-height: 1.35;
 }
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 .capitalize {
   text-transform: capitalize;
 }
-.text-red-600 {
+.italic {
+  font-style: italic;
+}
+.text-\[\#f52d2d\] {
   --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
+  color: rgb(245 45 45 / var(--tw-text-opacity));
+}
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 .grayscale {
   --tw-grayscale: grayscale(100%);
 strong {
     font-family: 'ag-fett';
 }
+b,strong {
+    font-weight: normal !important;
+}
 
 
 .book {
   padding: 0.5rem;
 }
 
+.cell {
+  min-width: 14rem;
+  overflow: hidden;
+}
+.cell.size-1 {
+  min-width: 30rem;
+}
+
+
+.related {
+  width: 8rem;
+  padding: 1.25rem;
+  padding-left: 4rem;
+  text-align: right;
+}
+
+
+@media (min-width: 1024px) {
+
+  .related {
+    width: 12rem;
+  }
+}
+
 .cell-margin {
   padding: 1rem;
 }
 .std-padding {
   padding: 0.5rem;
 }
+.std-padding-x {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 
 .std-grid {
   display: grid;
 }
 
 a:hover {
-  opacity: 0.6;
+  opacity: 0.9;
 }
 
+
 h2,h3 {
     -webkit-hyphens: auto;
             hyphens: auto;
 }
 
-h2 {
-  font-size: 2.8rem;
+h3 {
+    font-family: 'ag-fett';
+}
+
+.huge-title {
+  font-size: 3rem;
   line-height: 1;
 }
 
-h3 {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  letter-spacing: 0.025em;
-    font-family: 'ag-fett';
+@media (min-width: 1024px) {
+
+  .huge-title {
+    font-size: 4.2rem;
+    line-height: 0.9;
+  }
+}
+.big-title {
+  font-size: 2rem;
+  line-height: 1;
+}
+@media (min-width: 1024px) {
+
+  .big-title {
+    font-size: 3rem;
+    line-height: 1;
+  }
+}
+.medium-title {
+  font-size: 1.85rem;
+  line-height: 1;
+}
+@media (min-width: 1024px) {
+
+  .medium-title {
+    font-size: 2rem;
+    line-height: 1;
+  }
+}
+.small-title {
+  font-size: 1.5rem;
+  line-height: 1.1;
+}
+@media (min-width: 1024px) {
+
+  .small-title {
+    font-size: 1.85rem;
+    line-height: 1;
+  }
+}
+.big-text {
+  font-size: 1.5rem;
+  line-height: 1.1;
+}
+.small-text {
+  font-size: 1.1rem;
+  line-height: 1.22;
 }
 
 .indent {
 }
 
 .loading {
-    opacity: 0;
     
-    background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
 }
 
-.htmx-request .loading {
-    transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99);
+/* .loading .bg-white {
+    @apply bg-white/90;
+    opacity: 0;
+    transform: opacity 0.2s;
+}
+
+.htmx-request .bg-white {
     opacity: 1;
-    display: block;
+} */
+
+.loading .bg {
+    opacity: 0;
+    background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0));
     
 }
 
+.htmx-request .loading .bg {
+    transition: opacity 4000ms ease;
+    /* transition: opacity 4000ms cubic-bezier(.16, .01, .31, .99); */
+    opacity: 1;
+
+}
+
+.loading .spinner .inner {
+    opacity:0;   
+    transition: opacity 0.4s ease;
+    width:-moz-min-content;
+    width:min-content;
+    height:-moz-min-content;
+    height:min-content;
+    /* height:200px; */
+}
+.htmx-request .loading .spinner .inner {
+    opacity:1;   
+}
+
 
 #modal-content main {
-    
     opacity: 1;
 }
 .htmx-request #modal-content main {
     opacity: 1;
 }
 
+#modal-content {
+    transition: box-shadow 0.3s ease;
+    box-shadow: 0 0 4rem rgba(103, 48, 255, 0.8)
+}
+
+.htmx-request #modal-content {
+    box-shadow: 0 0 4rem rgba(103, 48, 255, 0.0)
+}
+
 .active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+  background-color: rgba(103, 48, 255,0.8);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+    /* background-image: linear-gradient(to top, purple, transparent) ; */
 }
 
 .link:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 0 / var(--tw-bg-opacity));
+  background-color: rgba(103, 48, 255,0.8);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 details[open]::details-content {
 #resources .filter-header::before {
     content:'+ ';
 }
-.hover\:opacity-60:hover {
+
+.fade-right {
+  position: relative;
+}
+
+.fade-right::after {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  height: 100%;
+  width: 10rem;
+
+    content: '';
+    background-image: linear-gradient(to left,#fff 0%, #fff 1rem, rgba(255,255,255,0) 100%);
+}
+
+.menuitem {
+  display: block;
+  display: flex;
+  align-items: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.menuitem:hover {
+  background-color: rgba(103, 48, 255,0.8);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+
+
+
+
+
+ /* The switch - the box around the slider */
+ .switch {
+     position: relative;
+     display: inline-block;
+     width: 60px;
+     height: 34px;
+ }
+
+ /* Hide default HTML checkbox */
+ .switch input {
+     opacity: 0;
+     width: 0;
+     height: 0;
+ }
+
+ /* The slider */
+ .slider {
+     position: absolute;
+     cursor: pointer;
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+     background-color: #000000;
+     transition: .4s;
+ }
+
+ .slider:before {
+     position: absolute;
+     content: "";
+     height: 26px;
+     width: 26px;
+     left: 4px;
+     bottom: 4px;
+     background-color: white;
+     transition: .4s;
+ }
+
+ input:checked+.slider {
+     background-color: #000000;
+ }
+
+ input:focus+.slider {
+     box-shadow: 0 0 1px #000000;
+ }
+
+ input:checked+.slider:before {
+     transform: translateX(26px);
+ }
+
+ /* Rounded sliders */
+ .slider.round {
+     border-radius: 34px;
+ }
+
+ .slider.round:before {
+     border-radius: 50%;
+ }
+
+ .hover\:opacity-60:hover {
   opacity: 0.6;
 }
-@media (min-width: 1024px) {
 
-  .lg\:mt-16 {
-    margin-top: 4rem;
-  }
+ @media (min-width: 1024px) {
 
   .lg\:block {
     display: block;
     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));
   }
 
-  .lg\:grid-rows-3 {
-    grid-template-rows: repeat(3, minmax(0, 1fr));
-  }
-
   .lg\:grid-rows-\[auto\2c auto\2c auto\] {
     grid-template-rows: auto auto auto;
   }

web/app/static/tailwind.config.js

     extend: {
       fontSize: {
         // xs: ['0.95rem', { lineHeight: '1.35' }],
-        sm: ['1rem', { lineHeight: '1.35' }],
-        base: ['1.25rem', { lineHeight: '1.22' }],
-        // lg: ['1.125rem', { lineHeight: '1.5' }],
-        // xl: ['1.25rem', { lineHeight: '1.6' }],
-        // '2xl': ['1.5rem', { lineHeight: '1.88rem' }],
-        // '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
-        '4xl': ['2.8rem', { lineHeight: '1' }],
-        // '5xl': ['3rem', { lineHeight: '1.1' }],
+        sm: ['0.85rem', { lineHeight: '1.35' }],
+        base: ['1.1rem', { lineHeight: '1.22' }],
+        lg: ['1.24rem', { lineHeight: '1.1' }],
+        xl: ['1.5rem', { lineHeight: '1.1' }],
+        '2xl': ['1.85rem', { lineHeight: '1' }],
+        '3xl': ['2rem', { lineHeight: '1' }],
+        '4xl': ['3rem', { lineHeight: '1' }],
+        '5xl': ['4.2rem', { lineHeight: '0.9' }],
         // '6xl': ['3.75rem', { lineHeight: '1.04' }],
         // '7xl': ['4.5rem', { lineHeight: '1.1' }],
         // '8xl': ['6rem', { lineHeight: '1' }],
         // '9xl': ['8rem', { lineHeight: '1' }],
       },
       colors: {
+        'expurple': {
+          DEFAULT: 'rgba(103, 48, 255,0.8)'
+        }
         // 'ggreen': {
         //   light: '#67e8f9',
         //   DEFAULT: 'var(--primary-color)',

web/app/templates/base.html

 # Flask-Moment: https://flask-moment.readthedocs.io/en/latest/
 # Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed
 -->
+{% macro relationships_links(resource) %}
 
-{% macro relationships_links(relationships) %}
-    {% if relationships %}
-        {% for relationship in relationships %}
-            {{ resource_lead(relationship)}}
+    {% if resource.tools %}
+    <div class="">
+        <div class="px-4">
+            Tools
+        </div>
+        {% for tool in resource.tools %}
+        <div class="cell">
+            {{ resource_lead(tool,size=2) }}
+        </div>
         {% endfor %}
+    
+    </div>
     {% endif %}
-{% endmacro %}
-
-{% macro book_with_related(resource, loop, 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>{{loop.index}} / {{count}}</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> -->
+    {% if resource.books %}
+    <div class="">
+        <div class="px-4">
+            Books
         </div>
+    
+        {% 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">
+            Practices
+        </div>
+    
+        {% for practice in resource.practices %}
+        <div class="cell">
+            {{ resource_lead(practice,size=2) }}
+        </div>
+        {% endfor %}
     </div>
+    {% endif %}
+    
+
 {% endmacro %}
 
-{% macro resource_with_related(resource, loop, 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>{{loop.index}} / {{count}}</p>
-                {% else %}
-                <p>{{ pre_title }}</p>
+{% 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=" related ">
+                    {% if show_number %}
+                    <p>{{loop.index}} / {{count}}</p>
+                    {% else %}
+                    <p class="capitalize">{{ resource['type'] }}</p>
+                    {% endif %}
+                </div>
+                <div class="cell w-[32rem] row-start-1 row-span-3">
+                    {{ resource_lead(resource) }}
+                </div>
+    
+                {% if resource.tools %}
+                <div class="grid 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-[30rem]">
+                        {{ resource_lead(tool,size=2) }}
+                    </div>
+                    {% endfor %}
+                </div>
                 {% 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 %}
-            <div class="shrink-0 min-w-[32rem] row-start-1">
-                {{ resource_lead(resource) }}
-            </div>
-            <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) }}
+    
+                {% 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-[35rem]">
+                        {{ resource_lead(book,size=2) }}
+                    </div>
+                    {% 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>
+                    {% for practice in resource.practices %}
+                    <div class="cell w-[25rem]">
+                        {{ resource_lead(practice,size=2) }}
+                    </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+    
             </div>
         </div>
     </div>
     </a>
 {% endmacro %}
 
-{% macro resource_lead(resource) %}
-    <div class="relative cell ">
+{% macro resource_lead(resource,size=1) %}
         <a
-            class="block h-full hover:opacity-60 transition-opacity cursor-pointer "
+            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']) }}" 
         >
 
             {% if (resource['type'] == 'book') %}
-                <img class="w-20 h-20 object-contain float-right mt-4 ml-4 mb-4 grayscale rotate-[15deg]" src="https://dummyimage.com/4:5x70" alt="cover for {{ resource['name'] }}">
+                <img class="w-20 h-20 object-contain float-right m-4 grayscale rotate-[15deg]" src="https://dummyimage.com/4:5x70" alt="cover for {{ resource['name'] }}">
             {% endif %}
             
-            <h2 class="{{ resource['type'] }} mb-2">{{ resource['name'] }}</h2>
+            <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">
+                <div class="text-sm">
                     {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%}
                 </div>
             {% endif %}
 
-            <div class="text-xl mb-[1em]">
+            <div class="{% if size==1 %} big-text {% else %} small-text {% endif %} mb-[1em]">
                 {{ resource['description'] | truncate(150) }}
             </div>
 
                 {% endif %}
             </div>
         {% endif %}
-
-
-    </div>
-
 {% endmacro %}
 
 
     
     <script src="https://unpkg.com/htmx.org@1.8.6"></script>
     <script src="//unpkg.com/alpinejs" defer></script>
-    <title>ExPub Compendium</title>
+    <title>Experimental Publishing Compendium</title>
     <link href="{{ url_for('static',filename='styles/main.css') }}" rel="stylesheet">
     <script>
         // htmx.on('htmx:beforeRequest', e=> {
     hx-swap="outerHTML"
     hx-indicator="body"
 >
-    <div id="loading" class="loading pointer-events-none fixed top-0 left-0 w-full h-screen z-50">
+    <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 class="spinner fixed top-0 left-0 w-full h-screen z-[60] flex justify-center items-center">
+            <div class="inner bg-black rounded-full px-8 py-6 text-white text-center">
+                Loading...
+            </div>
+        </div>
     </div>
 
     <div id="all">
-        <header class="sticky top-0 z-10 bg-white std-padding border-b-[2px] border-black">
-            <nav class=" lg:flex justify-between">
-                <a class="link inline-block w-40" href="{{ url_for('main.index') }}">ExPub<br>Compendium</a>
+        <header class="sticky top-0 z-10 bg-white  border-b-[2px] border-black">
+            <nav class=" lg:flex justify-center items-stretch">
+                <a class="menuitem  w-48 " href="{{ url_for('main.index') }}"><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>
 
-                <div class="mr-8">
-                    <h2><a href="{{ url_for('tool.get_tools') }}" class="tool link align-bottom">Tools</a></h2>
-                </div>
+                <a href="{{ url_for('tool.get_tools') }}" class="menuitem tool medium-title ">Tools</a>
 
-                <div class="mr-8">
-                    <h2>
-                        <a href="{{ url_for('practice.get_practices') }}" class="practice link">
-                            Practices
-                        </a>
-                    </h2>
-                </div>
+                <a href="{{ url_for('practice.get_practices') }}" class="menuitem practice medium-title">
+                    Practices
+                </a>
 
-                <div class="mr-8">
-                    <h2>
-                        <a href="{{ url_for('book.get_books') }}" class="book link">
-                            Books
-                        </a>
-                    </h2>
-                </div>
+                <a class="menuitem medium-title book" href="{{ url_for('book.get_books') }}" > Books </a>
 
-                <!-- <div class="mr-8">
-                    <h2 class="">
-                        <a href="{{ url_for('practice.get_practices') }}" class="practice link">
-                            Typologies
-                        </a>
-                    </h2>
-                </div> -->
 
-                <div class="mr-8">
-                    <a href="{{ url_for('main.about') }}"
-                        class="{{ 'active' if request.path == url_for('main.about') }} ml-auto link mr-auto">
-                        About<br>ExPub
-                    </a>
-                </div>
+
+                <a href="{{ url_for('main.about') }}" class="{{ 'active' if request.path == url_for('main.about') }} menuitem mr-auto">
+                    About / <br> Contact
+                </a>
                 
-                <div class="ml-auto mr-2">
+                <!-- <div class="ml-auto mr-2">
                     {% if current_user.is_authenticated %}
                     <a href="{{ url_for('create.create_resource') }}" class="block link">
                         Add resource
                         Logout
                     </a>
                     {% endif %}
-                </div>
+                </div> -->
 
-                <input class=" text-base border-2 border-black p-1 " type="text" placeholder="Search">
+                <input class=" text-center text-base border-l-2 border-black pl-1 " type="text" placeholder="Search">
                 
             </nav>
         </header>
         </main>
     </div>
 
-    <div id="modal" x-show="modalOpen"  class="modal h-screen  w-full fixed top-0 z-20 p-4 bg-black/20 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-scroll h-full bg-white " style="box-shadow:0 0 4rem rgba(0,0,0,0.3)">
+        <div id="modal-content" @click.outside="hideOverlay()" x-ref="modal" class="content w-full overflow-y-auto h-full bg-white " >
 
         </div>
     </div>

web/app/templates/book.html

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

web/app/templates/index.html

 {% block content %}
 <div class="">
 
-    <div class="border-b-2 border-black">
-        <div class="pl-44 text my-8 row-span-2 meta max-w-[65ch]">
+    <div class="border-b-2 border-black grid grid-cols-[52rem,30rem]  content-start">
+
+        <div class="ml-[13rem] text my-8 meta max-w-[30rem]">
             {{ text|safe }}
         </div>
-
+        <div class="h-full ">
+            <div class="flex h-full gap-8 justify-start items-center ">
+                <div class="text-right">Show<br>related</div>
+                <label class="switch">
+                    <input type="checkbox">
+                    <span class="slider round"></span>
+                </label>
+                <div class="">Simpler<br>List</div>
+            </div>
+        </div>
     </div>
     
-    {{ book_with_related(book, book_relationships, 'Book', 'Related') }}
-    
     {% for tool in tools %}
 
-        {{ resource_with_related(tool, 'Tool', 'Used by') }}
+        {{ resource_with_related(tool, loop, false) }}
 
     {% endfor %}
 
     {% for book in books %}
 
-        {{ resource_with_related(book, 'Book', 'Made with') }}
+        {{ resource_with_related(book, loop, false) }}
 
     {% endfor %}
 
     {% for tool in tools2 %}
 
-        {{ resource_with_related(tool, 'Tool', 'Used by') }}
+        {{ resource_with_related(tool, loop, false) }}
 
     {% endfor %}
 
     {% for book in books2 %}
 
-        {{ resource_with_related(book, 'Book', 'Made with') }}
+        {{ resource_with_related(book, loop, false) }}
 
     {% endfor %}
 

web/app/templates/resource.html

 {% extends 'base.html' %}
 
 {% block content %}
-<div class="cell-margin grid gap-8 grid-cols-[2fr,1fr]">
-    <div class="left">
-        <div class="mb-2 capitalize">{{ resource['type'] }}</div>
-        <h2 class="block-margin {{ resource['type'] }}">
-            {% block title %} 
-            {% autoescape false %}
-                {{ 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 %}
-        {% endif %}
-        <div class="facts">
-            {% if resource['description'] %}
-            <div class="">
-                <h3>Description</h3>
-                {{ resource['description'] }}
-            </div>
-            {% 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>
-            {% endif %}
-            {% if resource['license'] %}
-                <div class="">
-                    <h3>Software license</h3>
-                    {{ resource['license'] }}
-                </div>
-            {% endif %}
-            {% if resource['scriptingLanguage'] %}
-                <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>
-            {% endif %}
-            {% if resource['repositoryUrl'] %}
-                <div class="">
-                    <h3>Code repository</h3>
-                    <a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a>
+
+
+
+<div class="cell-margin grid mt-16 grid-cols-[1fr,1fr]">
+    <div class="left ">
+        <div class="mb-4 capitalize">{{ resource['type'] }}</div>
+        <div class="border-r-2 border-black pr-8">
+            <h2 class="block-margin huge-title {{ resource['type'] }}">
+                {% block title %} 
+                {% autoescape false %}
+                    {{ 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>
-            {% endif %}
-            {% if resource['ingestFormats'] %}
-                <div class="">
-                    <h3>Import / ingest formats</h3>
-                    {{ resource['ingestFormats'] }}
+                {% 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 %}
-            {% if resource['outputFormats'] %}
+            <div class="facts">
+                {% if resource['description'] %}
                 <div class="">
-                    <h3>Output formats</h3>
-                    {{ resource['outputFormats'] }}
+                    <h3>Description</h3>
+                    {{ resource['description'] }}
                 </div>
-            {% endif %}
-            {% if resource['status'] %}
+                {% 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>
+                {% endif %}
+                {% if resource['license'] %}
+                    <div class="">
+                        <h3>Software license</h3>
+                        {{ resource['license'] }}
+                    </div>
+                {% endif %}
+                {% if resource['scriptingLanguage'] %}
+                    <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>
+                {% endif %}
+                {% if resource['repositoryUrl'] %}
+                    <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>
+                {% endif %}
+                {% if resource['outputFormats'] %}
+                    <div class="">
+                        <h3>Output formats</h3>
+                        {{ resource['outputFormats'] }}
+                    </div>
+                {% endif %}
+                {% if resource['status'] %}
+                    <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>
+                {% endif %}
+                {% if resource['experimental'] %}
+                    <div class="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>
+                {% endif %}
+                {% if resource['references'] %}
+                    <div class="col-span-2">
+                        <h3> References </h3>
+                        <p>{{ resource['references']|safe }}</p>
+                    </div>
+                {% endif %}
                 <div class="">
-                    <h3>Platform status</h3>
-                    {{ resource['status'] }}
+                    <h3>Created</h3>
+                    {{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC
                 </div>
-            {% endif %}
-            <!-- fields for practices -->
-            {% if resource['longDescription'] %}
-                <div class="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>
-            {% endif %}
-            {% if resource['considerations'] %}
-                <div class="col-span-2">
-                    <h3>Considerations</h3>
-                    <p>{{ resource['considerations']|safe }}</p>
-                </div>
-            {% endif %}
-            {% if resource['references'] %}
-                <div class="col-span-2">
-                    <h3> References </h3>
-                    <p>{{ resource['references']|safe }}</p>
-                </div>
-            {% endif %}
-            <div class="">
-                <h3>Created</h3>
-                {{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC
             </div>
-
+            
         </div>
     </div>
     
-    <div class="right lg:mt-16 max-w-[30rem] mx-auto p-4">
-        {{ relationships_links(relationships) }}
-        
-        {% if resource.tools %}
-         TOOLS:
-           {% for tool in resource.tools %}
-             {{ tool.name }};
-           {% endfor %}
-         {% endif %}
-         {% if resource.practices %}
-         PRACTICES:
-           {% for practice in resource.practices %}
-             {{ practice.name }};
-           {% endfor %}
-         {% endif %}
-         {% if resource.books %}
-         BOOKS:
-           {% for book in resource.books %}
-             {{ book.name }};
-           {% endfor %}
-         {% endif %}
+    <div class="right ">
+        <div class="grid grid-cols-2 ">
+            {{ relationships_links(resource) }}
+        </div>
     </div>
 </div>
     

web/app/templates/resources.html

     </p>
   </div>
 </div> -->
+
+
+    <div class="border-b-2 border-black grid grid-cols-[52rem,30rem]  content-start">
+    
+      <div class="ml-[13rem] text my-8 meta max-w-[30rem]">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies egestas felis at dignissim. Morbi ut bibendum
+            nisl. Integer ac sollicitudin risus. Vivamus et est est. Ut vitae lacus nec justo tincidunt interdum. Fusce sapien odio,
+            commodo nec est et, interdum varius risus. Curabitur vehicula consequat auctor.
+      </div>
+      <div class="h-full ">
+        <div class="flex h-full gap-8 justify-start items-center ">
+          <div class="text-right">Show<br>related</div>
+          <label class="switch">
+            <input type="checkbox">
+            <span class="slider round"></span>
+          </label>
+          <div class="">Simpler<br>List</div>
+        </div>
+      </div>
+    </div>
 <script>
   function filter() {
     return {
 
         <div>
             {% for resource in resources %}
-
-            {% if resource.tools %}
-              TOOLS:
-                {% for tool in resource.tools %}
-                  {{ tool.name }};
-                {% endfor %}
-              {% endif %}
-              {% if resource.practices %}
-              PRACTICES:
-                {% for practice in resource.practices %}
-                  {{ practice.name }};
-                {% endfor %}
-              {% endif %}
-              {% if resource.books %}
-              BOOKS:
-                {% for book in resource.books %}
-                  {{ book.name }};
-                {% endfor %}
-              {% endif %}
-
               {{ resource_with_related(resource, loop) }}
             {% endfor %}  
         </div>