🎨 design call effort

static/css/styles.css

@@ -1313,6 +1313,14 @@ input[type=file] {
   height: 25px;
 }
 
+.h-8 {
+  height: 2rem;
+}
+
+.h-11 {
+  height: 2.75rem;
+}
+
 .max-h-\[470px\] {
   max-height: 470px;
 }
@@ -1869,6 +1877,16 @@ input[type=file] {
   background-color: transparent;
 }
 
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1937,6 +1955,10 @@ input[type=file] {
   padding: 0.25rem;
 }
 
+.p-\[10px\] {
+  padding: 10px;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2032,6 +2054,11 @@ input[type=file] {
   padding-bottom: 3.5rem;
 }
 
+.py-\[10px\] {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 .pl-11 {
   padding-left: 2.75rem;
 }
@@ -2340,6 +2367,11 @@ input[type=file] {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -2750,6 +2782,18 @@ input[type=file] {
     margin-bottom: 1.5rem;
   }
 
+  .md\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .md\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .md\:mt-14 {
+    margin-top: 3.5rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -2999,6 +3043,11 @@ input[type=file] {
     padding-bottom: 2.75rem;
   }
 
+  .md\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
   .md\:pl-6 {
     padding-left: 1.5rem;
   }

templates/base.html

@@ -54,7 +54,7 @@
             mode = m;
         }"
         class="h-screen bg-gray-200 dark:bg-black font-cairo" {% block body_id %}{% endblock %}>
-    <div class="container md:mx-auto md:mt-32">
+    <div class="container md:mx-auto md:mt-14">
       {% include "includes/_header.html" %}
 
 
@@ -65,7 +65,7 @@
       {% comment %}body block is for use in forums{% endcomment %}
       {% block forum_body %}{% endblock %}
 
-      <div class="md:px-6 min-vh-110">
+      <div class="md:px-3 min-vh-110">
       {% block content_wrapper %}
         {% block subnav %}{% endblock %}
         {% block content %}{% endblock %}

templates/libraries/list.html

@@ -6,33 +6,34 @@
 
 {% block content %}
   <!-- Breadcrumb used on filtered views -->
-  <div class="p-3 mb-4 space-x-2 text-sm divide-x divide-gray-300 md:p-0">
-    <a class="hover:text-orange" href="/"><i class="fas fa-home"></i></a>
-    <a class="pl-2 hover:text-orange" href="{% url 'libraries' %}">Libraries</a>
-    {% if version_slug %}
-      <a class="pl-2 hover:text-orange" href="{% url 'libraries-by-version' version_slug %}">Libraries ({{ version_name }})</a>
-    {% endif %}
-    {% if category %} <span class="inline-block pl-2">Categorized</span>
-      <a class="pl-2 hover:text-orange"
-         href="
-           {% if version_slug %}
-             {% url 'libraries-by-version-by-category' version_slug=version_slug category=category.slug%}
-           {% else %}
-             {% url 'libraries-by-category' category=category.slug %}
-           {% endif %}
-      ">{{ category.name }}</a>
-    {% endif %}
+  <div class="p-0 mb-4 space-x-2 text-sm divide-x divide-gray-300 md:p-0">
+    <img src="{% static 'img/fpo/BreadCrumbs.png' %}" class="h-6" />
+{#    <a class="hover:text-orange" href="/"><i class="fas fa-home"></i></a>#}
+{#    <a class="pl-2 hover:text-orange" href="{% url 'libraries' %}">Libraries</a>#}
+{#    {% if version_slug %}#}
+{#      <a class="pl-2 hover:text-orange" href="{% url 'libraries-by-version' version_slug %}">Libraries ({{ version_name }})</a>#}
+{#    {% endif %}#}
+{#    {% if category %} <span class="inline-block pl-2">Categorized</span>#}
+{#      <a class="pl-2 hover:text-orange"#}
+{#         href="#}
+{#           {% if version_slug %}#}
+{#             {% url 'libraries-by-version-by-category' version_slug=version_slug category=category.slug%}#}
+{#           {% else %}#}
+{#             {% url 'libraries-by-category' category=category.slug %}#}
+{#           {% endif %}#}
+{#      ">{{ category.name }}</a>#}
+{#    {% endif %}#}
   </div>
   <!-- end breadcrumb -->
 
-  <div class="py-0 px-3 mb-3 text-right md:px-0" x-data="{'showSearch': false}" x-on:keydown.escape="showSearch=false">
+  <div class="px-3 pt-3 text-right md:px-0" x-data="{'showSearch': false}" x-on:keydown.escape="showSearch=false">
     <form action="" method="post" class="float-right">
       {% csrf_token %}
       <div>
         <label for="id_version" hidden="true">Versions:</label>
         <select onchange="this.form.submit()"
                 name="version"
-                class="block py-1 pr-8 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
+                class="block py-2 pr-8 pl-5 mb-3 w-full text-sm bg-white rounded-md border border-gray-300 cursor-pointer sm:inline-block md:mb-0 md:w-auto dark:bg-black text-sky-600 dark:text-orange dark:border-slate"
                 id="id_version"
         >
           <option>Filter by version</option>
@@ -71,6 +72,11 @@
           </select>
         </div>
       </form>
+      <span class="pl-2 space-x-4">
+        <i class="bg-white rounded border border-gray-300 cursor-pointer fas fa-list text-slate p-[10px] hover:bg-orange"></i>
+        <i class="text-white bg-gray-600 rounded border border-gray-300 cursor-pointer fas fa-th-large p-[10px] hover:bg-orange"></i>
+        <i class="bg-white rounded border border-gray-300 cursor-pointer fas fa-cat text-slate p-[10px] hover:bg-orange"></i>
+      </span>
     </div>
     <!-- command palatte for search -->
     {% include "libraries/includes/search_command_palatte.html" %}