Merge pull request #50 from stamen/design-qa-pt2

Small design QA
natcap · Dec 19, 2024 · 9dc8e52 · 9dc8e52
2 parents d59f44f + 748d1bd
commit 9dc8e52
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 7 deletions.
diff --git a/src/ckanext-natcap/ckanext/natcap/assets/css/natcap.css b/src/ckanext-natcap/ckanext/natcap/assets/css/natcap.css
@@ -458,6 +458,7 @@ body {
     text-align: center;
     gap: 4rem;
     flex-wrap: wrap;
+    padding: 0;
 }
 
 .home-topics-list-item {
@@ -466,12 +467,52 @@ body {
     align-items: center;
     justify-content: center;
     text-align: center;
-    gap: 1rem;
     font-weight: bold;
     font-size: 1.25rem;
     color: var(--color-blue);
 }
 
+.home-topics-list-item a {
+    color: var(--color-blue);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+
+.home-topics-list-item a:hover {
+    text-decoration: none;
+}
+
+.home-topics-list-item-icon {
+    border-radius: 50%;
+    border: 2px solid var(--color-blue);
+    background-color: rgba(0, 124, 146, 0.10);;
+    height: 150px;
+    width: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.home-topics-list-item-icon:hover {
+    background-color: rgba(0, 124, 146, 0.25);
+}
+
+.home-topics-list-item-icon img {
+    max-width: 50%;
+}
+
+@media (max-width: 1100px) {
+    .home-topics-list {
+        margin-left: -5rem;
+        margin-right: -5rem;
+    }
+}
+
 .home-invest-container {
     background-color: white;
 }
@@ -581,11 +622,19 @@ body {
     padding: 5rem;
 }
 
+.site-footer .row {
+    align-items: center;
+}
+
 .site-footer a {
     font-weight: 600;
     color: var(--color-off-white);
 }
 
+.site-footer p:last-of-type {
+    margin-bottom: 0;
+}
+
 .site-footer .icon-link {
     display: flex;
     flex-direction: row;

diff --git a/src/ckanext-natcap/ckanext/natcap/public/img/topics-cities.png b/src/ckanext-natcap/ckanext/natcap/public/img/topics-cities.png
diff --git a/src/ckanext-natcap/ckanext/natcap/public/img/topics-coasts-and-ocean.png b/src/ckanext-natcap/ckanext/natcap/public/img/topics-coasts-and-ocean.png
diff --git a/src/ckanext-natcap/ckanext/natcap/public/img/topics-terrestrial.png b/src/ckanext-natcap/ckanext/natcap/public/img/topics-terrestrial.png
diff --git a/src/ckanext-natcap/ckanext/natcap/public/img/topics-water.png b/src/ckanext-natcap/ckanext/natcap/public/img/topics-water.png
diff --git a/src/ckanext-natcap/ckanext/natcap/templates/home/snippets/topic.html b/src/ckanext-natcap/ckanext/natcap/templates/home/snippets/topic.html
@@ -1,8 +1,8 @@
 <li class="home-topics-list-item">
-  <div>
-    <a href="{{ url }}">
-      <img src="/img/topics-{{slug}}.png" />
-    </a>
-  </div>
-  <div>{{ name }}</div>
+  <a href="{{ url }}">
+    <div class="home-topics-list-item-icon">
+        <img src="/img/topics-{{slug}}.png" />
+    </div>
+    <div>{{ name }}</div>
+  </a>
 </li>