Migrate to Tailwind

okfn · Nov 7, 2024 · 7629d07 · 7629d07
1 parent 411df51
commit 7629d07
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 53 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
@@ -1,13 +1,14 @@
 {% load static %}
 
-<footer style="padding: 15px; background: #00d1ff;">
-  <div style="display: flex; flex-direction:row; gap: 50px; padding: 20px 20px; flex-wrap: wrap;">
+<footer class="main-footer">
+  <div class="master">
+  <div class="flex flex-row flex-wrap gap-4">
     <div class="flex-none">
       <a href="/">
         <img src="{% static '/images/lg-okfn-black.svg' %}" class="h-20" alt="Open Knowledge Foundation">
       </a>
     </div>
-      <ul style="display: flex; flex-direction: row; gap: 50px; flex-grow: 1; justify-content: end; align-items: center;">
+      <ul class="flex flex-wor flex-grow gap-10 justify-end items-center">
       <li><a href="https://us9.list-manage.com/subscribe?u=73f922f8e68e21a10efa21f02&id=32d370a7fc" target="_blank"><img src="{% static '/images/footer/mailinglist.svg' %}"></a></li>
       <li><a href="https://github.com/okfn" target="_blank"></a><img src="{% static '/images/footer/github.svg' %}"></li>
       <li><a href="https://www.linkedin.com/company/open-knowledge-foundation/" target="_blank"><img src="{% static '/images/footer/linkedin.svg' %}"></a></li>
@@ -17,14 +18,14 @@
       <li><a href="https://flickr.com/photos/okfn/" target="_blank"><img src="{% static '/images/footer/flickr.svg' %}"></a></li>
       </ul>
   </div>
-  <div style="display: flex; flex-direction:row; justify-content: space-between; flex-wrap: wrap; gap: 50px; padding: 20px 20px;">
-    <div style="width: 25%;">
+  <div class="flex flex-row flex-wrap justify-between gap-10 p-4">
+    <div class="w-1/4">
       OKFN is a not-for-profit organisation incorporated in England & Wales with company number 05133759.
       </br>
       </br>
       <strong><a href="mailto:[email protected]" target="_blank">[email protected]</a></strong>
     </div>
-        <ul style="width: 60%; display:grid; grid-template-columns: repeat(4, 1fr);  grid-template-rows: repeat(3, auto); text-align:left;">
+        <ul class="w-3/5 grid grid-cols-4 grid-rows-3 text-left">
           <li><a href="/privacy-policy/">Privacy policy</a></li>
           <li><a href="/terms-of-use/">Terms of use</a></li>
           <li><a href="/newsroom/#resources">Brand Guidelines</a></li>
@@ -39,26 +40,27 @@
           <li><a href="https://network.okfn.org/specialist/">Global Directory</a></li>
         </ul>
   </div>
-  <div style="padding: 20px 20px;">
-  <div style="display: flex; flex-direction:row; gap: 10px; margin-bottom: 40px; align-items: center;">
+  <div>
+  <div class="flex flex-row items-center gap-4 mb-3">
       <a href="https://en.wikipedia.org/wiki/MIT_License"><img src="{% static '/images/footer/subfooter/license.png' %}"></a>
       <div>Source code available under the MIT license.</div>
   </div>
-  <div style="display: flex; flex-direction:row; gap: 10px; margin-bottom: 40px; align-items: center;">
+  <div class="flex flex-row items-center gap-4 mb-3"> 
     <a href="https://creativecommons.org/licenses/by/4.0/"><img src="{% static '/images/footer/subfooter/creative-commons.png' %}"></a>
     <div>Content on this site, made by Open Knowledge, is licensed under a Creative Commons Attribution 4.0 International License.</div>
   </div>
-  <div style="display: flex; flex-direction:row; gap: 10px; margin-bottom: 40px; align-items: center;">
+  <div class="flex flex-row items-center gap-4 mb-3">
     <a href="https://okfn.org/en/who-we-are/governance/"><img src="{% static '/images/footer/subfooter/ngo-source.png' %}"></a>
     <div>Open Knowledge is certified by NGOsource in accordance with the Equivalency Determination (ED).</div>
   </div>
-  <div style="display: flex; flex-direction:row; gap: 10px; margin-bottom: 40px; align-items: center;">
+  <div class="flex flex-row items-center gap-4 mb-3">
     <a href="https://www.ckan.org"><img width="82px" src="{% static '/images/footer/subfooter/ckan-dpg.svg' %}"></a>
     <div>CKAN assets are held in trust by Open Knowledge, with best practice policies on governing openly and for use of the trademark.</div>
   </div>
-  <div style="display: flex; flex-direction:row; gap: 10px; margin-bottom: 40px; align-items: center;">
+  <div class="flex flex-row items-center gap-4 mb-3">
     <a href="https://www.digitalpublicgoods.net/"><img src="{% static '/images/footer/subfooter/dpga.png' %}"></a>
     <div>Open Knowledge is part of the Digital Public Goods Alliance, accelerating the attainment of the Sustainable Development Goals.</div>
   </div>
   </div>
+  </div>
 </footer>
diff --git a/templates/styles/base/_main-footer.css b/templates/styles/base/_main-footer.css
@@ -2,7 +2,7 @@
   @apply py-12 bg-okfn-blue;
 
   a {
-    @apply transition-colors duration-200 ease-in-out;
+    @apply font-bold transition-colors duration-200 ease-in-out;
 
     &:hover {
       @apply text-white;
@@ -12,42 +12,4 @@
       @apply text-okfn-purple duration-75;
     }
   }
-
-  &__head {
-    @apply col-span-full mb-12 md:mb-0;
-
-    .lg {
-      img {
-        @apply mx-auto md:mx-0;
-      }
-    }
-  }
-
-  &__nav {
-    @apply col-span-6 md:col-span-2 md:flex md:items-end gap-16 mb-12 md:mb-0 font-bold;
-
-    &.-main {
-      @apply md:col-span-4;
-    }
-
-    ul {
-      @apply flex-1;
-
-      & + ul {
-        @apply mt-4 md:mt-0;
-      }
-    }
-
-    li {
-      @apply mb-4;
-
-      &:last-child {
-        @apply mb-0;
-      }
-    }
-  }
-
-  &__disclaimers {
-    @apply col-span-full md:col-start-10 md:col-span-4;
-  }
-}
+}