make cards more consistent with the homepage

ansible-community · Feb 14, 2024 · 79ea1b6 · 79ea1b6
1 parent 45e157b
commit 79ea1b6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 21 deletions.
diff --git a/templates/ecosystem.tmpl b/templates/ecosystem.tmpl
@@ -7,14 +7,9 @@
     </div>
     <!-- Start ecosystem projects -->
     {% for key, item in ecosystem.items() %}
-      <div class="ecosystem-project-card width-4-12 width-12-12-m">
+      <div class="ecosystem-project-card width-6-12 width-12-12-m">
         <div class="ecosystem-project-content">
           <h3>{{ item.name }}</h3>
-          <img class="ecosystem-project-logo"
-               src="/images/{{ item.logo }}"
-               alt="{{ item.alt }}"
-               width="100"
-               height="100" />
           <p>{{ item.description }}</p>
           <ul>
             {% for key, item in item.resources.items() %}
@@ -24,6 +19,11 @@
             {% endfor %}
           </ul>
         </div>
+        <img class="ecosystem-project-logo"
+             src="/images/{{ item.logo }}"
+             alt="{{ item.alt }}"
+             width="100"
+             height="100" />
       </div>
     {% endfor %}
     <!-- End ecosystem projects -->

diff --git a/themes/ansible-community/sass/_ecosystem.scss b/themes/ansible-community/sass/_ecosystem.scss
@@ -1,10 +1,4 @@
 .ecosystem-page {
-  img {
-    padding-right: 2rem;
-    @media screen and (max-width: 990px) {
-      display: none;
-    }
-  }
   h2 {
     font-size: $font-xl;
     font-weight: normal;
@@ -33,13 +27,12 @@
   border-radius: 5px;
   background-color: $white;
   justify-content: stretch;
-  position: relative;
 }
 
 .ecosystem-project-content {
   display: flex;
   flex-direction: column;
-  padding-right: 100px;
+  padding-right: 2rem;
 
   h3 {
     font-size: $font-md;
@@ -55,10 +48,9 @@
     list-style-type: none;
     margin: 0;
     padding-left: 0;
-    padding-bottom: 0.75rem;
   }
   li {
-    margin-top: 0.75rem;
+    margin-top: 0.5rem;
   }
   a {
     color: $blue-anchor;
@@ -67,9 +59,12 @@
 }
 
 .ecosystem-project-logo {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin-top: 0;
-  padding-top: 2rem;
+  width: 6rem;
+  float: right;
+  @media screen and (max-width: 1170px) {
+    width: 4rem;
+  }
+  @media screen and (max-width: 768px) {
+    width: 6rem;
+  }
 }