Juju ecosystem docs refresh

requirements.txt

@@ -11,3 +11,4 @@ requests==2.31.0
 semver==3.0.2
 cachetools==5.3.3
 flask-cors==4.0.0
+scikit-learn==1.6.1

static/sass/styles.scss

@@ -329,4 +329,31 @@ html {
 
 strong {
   font-weight: bold !important;
-}
+}
+
+.p-image-container, [class^=p-image-container--] {
+  aspect-ratio: auto !important;
+  height: auto !important;
+}
+
+.p-image-container__image {
+  display: block;
+}
+
+@media (620px <= width < 1036px) {
+  .any-application-container img {
+      object-fit: cover;
+      object-position: center;
+      width: 100%;
+      height: 230px;
+  }
+}
+
+@media (width < 620px) {
+  .any-application-container img {
+      object-fit: cover;
+      object-position: center;
+      width: 100%;
+      height: 200px;
+  }
+}

templates/base.html

@@ -70,7 +70,10 @@
 
     {% block content %}{% endblock %}
 
-    {% include "footer.html" %}
+    {% block footer %}
+      {% include "footer.html" %}
+    {% endblock footer %}
+
   {% endblock body %}
 
   <div class="u-hide" id="contact-form-container" data-form-location="/get-in-touch" data-form-id="1337" data-lp-id="2313" data-return-url="http://juju.is/thank-you" data-lp-url=""></div>

templates/docs/base.html

@@ -13,9 +13,28 @@
       <div class="l-docs__main">
         <div class="row">
           <form class="p-search-box u-no-margin--bottom" action="/docs/search">
-            <input type="search" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search documentation" required/>
-            <button type="button" class="p-search-box__reset" alt="reset" onclick="this.previousElementSibling.value = '';this.previousElementSibling.focus()"><i class="p-icon--close">Reset</i></button>
-            <button type="submit" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
+            <input 
+              type="search" 
+              class="p-search-box__input" 
+              name="q" 
+              {% if query %}value="{{ query }}"{% endif %} 
+              placeholder="Search documentation" 
+              required
+            />
+            <button 
+              type="button" 
+              class="p-search-box__reset" 
+              alt="reset" 
+              onclick="this.previousElementSibling.value = '';this.previousElementSibling.focus()"
+            >
+              <i class="p-icon--close">Reset</i>
+            </button>
+            <button 
+              type="submit" 
+              class="p-search-box__button"
+            >
+              <i class="p-icon--search">Search</i>
+            </button>
           </form>
         </div>
       </div>