Add LEARN-FAIR logo

_data/footer.yaml

@@ -1,13 +1,5 @@
 copyright: '[![Creative Commons License](https://i.creativecommons.org/l/by/4.0/88x31.png)](http://creativecommons.org/licenses/by/4.0/)   The FAIR Lesson Plan Handbook is licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/), except where otherwise noted.'
 columns:
-  - type: image
-    image_width: 120px
-    width: 2
-    src: 'assets/images/white-orange-logo.png'
-    alt: Converge logo
-  - type: links
-    width: 3
-    children:
   - type: links
     width: 3
     children:

_includes/footer.html

@@ -0,0 +1,82 @@
+<footer id="footer">
+    <div class="container py-4 g-lg-5">
+        <div class="row g-4 d-flex justify-content-between">
+            <div class="col-6 col-lg-4 d-flex logos">
+                <a href="https://elixir-europe.org/" class="my-auto" target="_blank">
+                    <img height="50px" src="assets/images/logos/elixir.png" alt="ELIXIR"/>
+                </a>
+                <a href="https://learn-fair.nl" class="my-auto" target="_blank">
+                    <img class="small-logo" height="50px" src="assets/images/logos/learn-fair.svg" alt="LEARN-FAIR"/>
+                </a>
+            </div>
+            {%- for column in site.data.footer.columns %}
+            {%- if column.type == "image" %}
+            <div class="col-6 col-lg-{{column.width}} d-flex justify-content-lg-{% if forloop.first == true %}start{% elsif forloop.last == true %}end{% else %}center{% endif %}">
+                <img class="my-auto" width="{{column.image_width}}" src="{{ column.src | relative_url }}" alt="{{column.alt}}"/>
+            </div>
+            {%- elsif column.type == "links" %}
+            <div class="col-6 col-lg-{{column.width}} d-flex justify-content-lg-{% if forloop.first == true %}start{% elsif forloop.last == true %}end{% else %}center{% endif %}">
+                <div>
+                    {%- if column.title != nil %}
+                    <span class="footer-title">{{column.title}}</span>
+                    {%- endif %}
+                    <ul class="mb-0 list-unstyled">
+                        {%- for link in column.children %}
+                        {%- if link.url != nil and link.external_url == nil%}
+                        <li><a href="{{ link.url | relative_url }}">{{link.url_text}}</a></li>
+                        {%- elsif link.external_url != nil and link.url == nil %}
+                        <li><a href="{{link.external_url}}">{{link.url_text}}</a></li>
+                        {%- else %}
+                        <li>{{link.url_text}}</li>
+                        {%- endif %}
+                        {%- endfor %}
+                    </ul>
+                </div>
+            </div>
+            {%- elsif column.type == "text" %}
+            <div class="col-6 col-lg-{{column.width}} d-flex justify-content-lg-{% if forloop.first == true %}start{% elsif forloop.last == true %}end{% else %}center{% endif %}">
+                {{column.content | markdownify }}
+            </div>
+            {%- endif %}
+            {%- endfor %}
+        </div>
+        {%- unless site.data.footer.extra_line == nil %}
+        <div class="row">
+            <div class="text-center pt-4 mb-0">
+                {{site.data.footer.extra_line | markdownify }}
+            </div>
+        </div>
+        {%- endunless %}
+    </div>
+    <div class="copyright py-4">
+        <div class="container g-lg-5 d-flex justify-content-between flex-column flex-lg-row">
+            {%- unless site.data.footer.copyright == nil %}
+            <div class="d-flex align-items-center mb-3 mb-lg-0 mx-auto mx-lg-0 text-center">{{ site.data.footer.copyright | markdownify }}</div>
+            {%- endunless %}
+            <div class="d-flex align-items-center mx-auto ms-lg-4 me-lg-0">
+                <a id="ett-logo" class="text-nowrap me-lg-5 me-xxlg-0" href="https://elixir-belgium.github.io/elixir-toolkit-theme">Built with
+                    <svg data-name="ETT logo" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 77.2 77.12">
+                        <defs>
+                            <style>
+                                .cls-2,
+                                .cls-3 {
+                                    fill: #fff;
+                                    pointer-events: none;
+                                }
+
+                                .cls-2 {
+                                    opacity: 0.18;
+                                }
+                            </style>
+                        </defs>
+                        <g>
+                            <circle class="cls-1" cx="38.56" cy="38.56" r="38.56" />
+                            <path class="cls-2" d="M9,48.08a44.19,44.19,0,0,0,4.68,19.84A38.56,38.56,0,1,0,55.16,3.72c-.59,0-1.19-.05-1.79-.05A44.4,44.4,0,0,0,9,48.08Z" />
+                            <path class="cls-3" d="M54,20.52H13.64a.85.85,0,0,0-.84.85v34a.84.84,0,0,0,.84.84H30a.84.84,0,0,0,.85-.84V51.16a.85.85,0,0,0-.85-.85H20.07a.85.85,0,0,1-.85-.85V42a.85.85,0,0,1,.85-.84h8.66a.85.85,0,0,0,.85-.85V36.06a.85.85,0,0,0-.85-.85H20.07a.85.85,0,0,1-.85-.84V27.29a.85.85,0,0,1,.85-.85H38.26a.85.85,0,0,1,.85.85V55.38a.84.84,0,0,0,.85.84h4.73a.84.84,0,0,0,.85-.84V27.29a.85.85,0,0,1,.84-.85H61.27a.85.85,0,0,1,.84.85V55.38a.84.84,0,0,0,.85.84h4.73a.84.84,0,0,0,.85-.84V27.29a.85.85,0,0,1,.85-.85h6.77a.84.84,0,0,0,.84-.85V21.37a.84.84,0,0,0-.84-.85Z" />
+                        </g>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </div>
+</footer>

_sass/lesson-plans.scss

@@ -5,8 +5,10 @@ $fg-light: #f6f6f6;
 
 html {font-size: 14px}
 
-.navbar {
-  box-shadow: $shadow;
+header {
+  .navbar {
+    box-shadow: $shadow;
+  }
 }
 
 header .navbar .navbar-brand {
@@ -412,6 +414,27 @@ footer {
       color: white!important;
     }
   }
+
+  .logos {
+    gap: 20px;
+
+    img {
+      max-width: inherit;
+      height: 60px;
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+      transition: all 0.5s ease;
+
+      &.small-logo {
+        height: 50px;
+      }
+
+      &:hover {
+        -webkit-filter: inherit;
+        filter: inherit;
+      }
+    }
+  }
 }
 
 .reference-list {
@@ -556,6 +579,12 @@ footer {
 #home {
   header .navbar {
     margin-bottom: 0!important;
+    box-shadow: none;
+    background: #edf6fc !important;
+
+    .navbar-brand, .nav-link {
+      color: $primary!important;
+    }
   }
 }
 
@@ -611,4 +640,4 @@ footer {
       display: none;
     }
   }
-}
+}