more styles fixes

Aquaveo · Dec 19, 2023 · 6948504 · 6948504
1 parent 1abd03f
commit 6948504
Showing 1 changed file with 25 additions and 30 deletions.
diff --git a/backend/templates/single_hs_resource.html b/backend/templates/single_hs_resource.html
@@ -69,9 +69,9 @@
 </script>
 {% endaddtoblock %}
 
-    <div class="card border-light mb-3 w-100 card-height" >
+    <div class="card border-white mb-3 w-100 card-height" >
         <div class="row g-0">
-            <div class="col-md-4 col-lg-4" style="min-width:200px; min-height:200px; width:fit-content; height:200px;">
+            <div class="col-12 col-sm-6 col-md-4 col-lg-4 d-flex justify-content-center justify-content-md-end justify-content-lg-end align-items-center align-items-lg-center align-items-md-center" >
             {% if resource.web_site_url  %} 
                 <a href="{{ resource.web_site_url }}">
                 <img src="{{ resource.image }}" class="img-tile img-fluid rounded-start" alt="..."  style="width:200px; height:200px;">
@@ -82,37 +82,32 @@
                 </a>
             {% endif %}
             </div>
-            <div class="col-md-8 col-lg-8">
-            <div class="card-body">
-                <div style="display:flex; align-items: baseline; gap:10px;">
-                    <h5 class="card-title card-h5">{{ resource.title }}</h5>
-                    <div style="width:fit-content;">
-                        <p class="card-text my-2 fs-6 lh-1.5 fw-light d-flex flex-row justify-content-between w-100 gap-3 "  style="max-width:300px;">
-                            {% if resource.github_url %}
-                            <a href="{{ resource.github_url }}" target="_blank" class="text-decoration-none text-secondary" title="source_code"> <i class="bi bi-github"></i></a>
-                            {% endif %}
-                            {% if resource.web_site_url %}
-                            <a href="{{ resource.web_site_url }}" target="_blank" class="text-decoration-none text-secondary" title="web page"> <i class="bi bi-arrow-up-right-square"></i> </a>
-                            {% endif %}
-                            {% if resource.documentation_url %}
-                            <a href="{{ resource.documentation_url }}" target="_blank" class="text-decoration-none text-secondary" title="documentation"> <i class="bi bi-journals"></i> </a>
-                            {% endif %}
-                        </p>
+            <div class="col-12 col-sm-6 col-md-8 col-lg-8 border-light ">
+                <div class="card-body">
+                    <div class="d-flex align-items-baseline gap-2  justify-content-center justify-content-lg-start justify-content-md-start">
+                        <h5 class="card-title card-h5">{{ resource.title }}</h5>
+                        <div style="width:fit-content;">
+                            <p class="card-text my-2 fs-6 lh-1.5 fw-light d-flex flex-row justify-content-between w-100 gap-3 "  style="max-width:300px;">
+                                {% if resource.github_url %}
+                                <a href="{{ resource.github_url }}" target="_blank" class="text-decoration-none text-secondary" title="source_code"> <i class="bi bi-github"></i></a>
+                                {% endif %}
+                                {% if resource.web_site_url %}
+                                <a href="{{ resource.web_site_url }}" target="_blank" class="text-decoration-none text-secondary" title="web page"> <i class="bi bi-arrow-up-right-square"></i> </a>
+                                {% endif %}
+                                {% if resource.documentation_url %}
+                                <a href="{{ resource.documentation_url }}" target="_blank" class="text-decoration-none text-secondary" title="documentation"> <i class="bi bi-journals"></i> </a>
+                                {% endif %}
+                            </p>
+                        </div>
                     </div>
-                </div>
-
-                <p class="card-subtitle mb-2 text-muted fst-italic">{{ resource.subtitle }}</p>
-                <div class="d-flex flex-column">
-                <div>
-
-                    <p class="name">
-                        {{ resource.abstract }}
-                    </p>
-
 
+                    <p class="card-subtitle mb-2 text-muted fst-italic">{{ resource.subtitle }}</p>
+                    <div class="d-flex flex-column justify-content-center justify-content-lg-start justify-content-md-start text-center text-lg-start text-md-start">
+                        <p class="name w-100">
+                            {{ resource.abstract }}
+                        </p>
+                    </div>
                 </div>
-                </div>
-            </div>
             </div>
         </div>
     </div>