colophon, grayed-unmaintained

web/app/static/src/main.css

 
  .slider.round:before {
      border-radius: 50%;
+ }
+
+ hr {
+    border:0;
+    border-bottom: 2px solid;
+    width:50%;
+    margin:4ch;
+    
+    margin-left:0;
  }

web/app/static/styles/main.css

     max-width: 1536px;
   }
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .pointer-events-none {
   pointer-events: none;
 }
 .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;
 .mt-3 {
   margin-top: 0.75rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .block {
   display: block;
 }
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.opacity-30 {
+  opacity: 0.3;
+}
 .opacity-40 {
   opacity: 0.4;
 }
+.opacity-50 {
+  opacity: 0.5;
+}
+.opacity-70 {
+  opacity: 0.7;
+}
 .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);
   gap: 1rem;
 }
 
-.facts a {
-  text-decoration: underline;
-}
-
 @media (min-width: 1024px) {
 
   .facts {
             hyphens: auto;
 }
 
-h2 {
-  font-family: 'ag-fett';
-  font-size: 1.5rem;
-  line-height: 1.1;
-}
-
 h3 {
     font-family: 'ag-fett';
 }
      border-radius: 50%;
  }
 
+ hr {
+    border:0;
+    border-bottom: 2px solid;
+    width:50%;
+    margin:4ch;
+    
+    margin-left:0;
+ }
+
  .hover\:opacity-60:hover {
   opacity: 0.6;
 }
     margin: 1rem;
   }
 
+  .lg\:my-16 {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
   .lg\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-\[2fr\2c 1fr\] {
+    grid-template-columns: 2fr 1fr;
+  }
+
   .lg\:grid-cols-\[52rem\2c 30rem\] {
     grid-template-columns: 52rem 30rem;
   }
     padding: 0px;
   }
 
-  .lg\:py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .lg\:pr-8 {
     padding-right: 2rem;
   }
   .lg\:opacity-100 {
     opacity: 1;
   }
-}
-
-.sr-only{
-  position:absolute;
-  left:-10000px;
-  top:auto;
-  width:1px;
-  height:1px;
-  overflow:hidden;
-}
-
-#about {
-  display: inline-block;
-  width: 60%;
-}
-
-#colophon {
-  float: right;
-  width: 30%;
-}
-
-hr {
-  clear: both;
-  margin-bottom: 15%;
-  visibility: hidden;
-}
-
-blockquote {
-  background: #f9f9f9;
-  border-left: 10px solid #ccc;
-  margin: 1.5em 10px;
-  padding: 0.5em 10px;
-}
-blockquote:before {
-  color: #ccc;
-  font-size: 4em;
-  line-height: 0.1em;
-  margin-right: 0.25em;
-  vertical-align: -0.4em;
-}
-blockquote p {
-  display: inline;
 }

web/app/templates/about.html

 
 {% block content %}
 
-<div class="cell-margin text max-w-[65ch] lg:m-16 text-lg lg:text-xl">
-    {{ about_text|safe }}
-</div>
-
-<div id="colophon" class="cell-margin text">
-    {{ colophon_text | safe }}
+<div class="grid lg:grid-cols-[2fr,1fr] gap-4 container">
+    <div class="cell-margin text max-w-[65ch] lg:m-16 text-lg lg:text-xl">
+        {{ about_text|safe }}
+    </div>
+
+    <div id="colophon" class="cell-margin text lg:my-16">
+        {{ colophon_text | safe }}
+    </div>
 </div>
 
 {% endblock %}

web/app/templates/base.html

 
 <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') }}"
+    <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>
 
 {% macro resource_list(resource, loop, show_number=true) %}
 <div class="border-b-2 border-black">
-    <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
+    <a class="flex gap-6 h-full py-2 {% if resource.status == 'no longer maintained' %} opacity-30 {% endif %} {% if resource.status == 'minimally maintained' %} opacity-70 {% endif %} 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()">
 
 {% endmacro %}
 
 {% macro resource_with_related(resource, loop, show_number=true) %}
-<div class="w-full  border-b-2 border-black fade-right" {% if resource.status == 'no longer maintained' %} style="background-color: gray"{% 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 ">
 {% endmacro %}
 
 {% macro resource_lead(resource,size=1) %}
-<a class="block lead-inner-link overflow-hidden h-full hover:opacity-60 transition-opacity cursor-pointer size-{{ size }}"
+<a class="block lead-inner-link overflow-hidden h-full {% if resource.status == 'no longer maintained' %} opacity-30 {% endif %} {% if resource.status == 'minimally maintained' %} opacity-50 {% endif %} 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
         {{ resource['description'] | truncate(150) | safe }}
     </div>
 
+    {% if resource.status == 'no longer maintained' %}
+    <div class="mt-4 mb-8">(No longer maintained)</div>
+    {% endif %}
+
+    {% if resource.status == 'minimally maintained' %}
+    <div class="mt-4 mb-8">(Minimally maintained)</div>
+    {% endif %}
+
 </a>
 {% if current_user.is_authenticated %}
 <div class="">