Merge pull request #25 from IATI/vite

Use Vite to build CSS

docs/index.rst

@@ -42,7 +42,7 @@ This theme has multiple options, which can be configured using the :code:`html_t
 There is more information on each option below.
 
 :code:`github_repository`
--------------------
+-------------------------
 
 This should be a link to the Github repository for the documentation site, and is used to link to the source code in the footer of the site.
 

iati_sphinx_theme/footer.html

@@ -4,7 +4,7 @@
     <div class="iati-footer__section iati-footer__section--first">
       <div class="iati-footer__container">
         <div class="iati-footer-block">
-          <h2 class="iati-footer-block__title">Additional information</h2>
+          <h2 class="iati-footer-block__title">Additional Information</h2>
           <div class="iati-footer-block__content">
             <p>Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.</p>
             {% if theme_github_repository %}
@@ -38,15 +38,18 @@ <h2 class="iati-footer-block__title">Additional information</h2>
           >
             <i class="iati-icon iati-icon--linkedin"></i>
           </a>
-          <a href="https://twitter.com/IATI_aid" aria-label="Twitter">
-            <i class="iati-icon iati-icon--twitter"></i>
+          <a href="https://x.com/IATI_aid" aria-label="X">
+            <i class="iati-icon iati-icon--x"></i>
           </a>
           <a
             href="https://www.youtube.com/channel/UCAVH1gcgJXElsj8ENC-bDQQ"
             aria-label="YouTube"
           >
             <i class="iati-icon iati-icon--youtube"></i>
           </a>
+          <a href="https://www.facebook.com/IATIaid/" aria-label="Facebook">
+            <i class="iati-icon iati-icon--facebook"></i>
+          </a>
         </div>
       </div>
     </div>

iati_sphinx_theme/header.html

@@ -57,7 +57,7 @@ <h2 class="iati-mobile-nav__label">Menu</h2>
 
         <a href="{{ pathto('search') }}" class="iati-button iati-button--light">
           <span>Search</span>
-          <img class="iati-button__icon" alt="" src="{{ pathto('_static/icon-search.svg', 1) }}">
+          <i class="iati-icon iati-icon--search"></i>
         </a>
 
         <button class="iati-menu-toggle iati-menu-toggle--open js-iati-menu-toggle-open">

iati_sphinx_theme/layout.html

@@ -4,12 +4,7 @@
   {% if theme_plausible_domain %}
     <script defer data-domain="{{ theme_plausible_domain }}" src="https://plausible.io/js/script.js"></script>
   {% endif %}
-  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/iati.js"></script>
-  <style>
-    .iati-brand-background {
-      --background-image: url("{{ pathto('marque-white.svg', 1) }}");
-    }
-  </style>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/iati.js"></script>
 {% endblock %}
 
 {%- block header %}

iati_sphinx_theme/static/.gitignore

@@ -1,2 +1,2 @@
 # Autogenerated CSS
-iati.css
+css/

iati_sphinx_theme/theme.conf

@@ -1,6 +1,6 @@
 [theme]
 inherit = basic
-stylesheet = iati.css
+stylesheet = css/style.css
 pygments_style = default
 
 [options]