Fixed menu bar: (#53)

- use logo instead of text - fix hamburger button - improve footer --------- Co-authored-by: Roland Kaminski <[email protected]>
potassco · Nov 14, 2024 · 0a15f47 · 0a15f47
1 parent eff8073
commit 0a15f47
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 37 deletions.
diff --git a/_config.yml b/_config.yml
@@ -13,10 +13,10 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-title: Potassco, the Potsdam Answer Set Solving Collection
+title: Potassco - the Potsdam Answer Set Solving Collection
 #email: [email protected]
 description: >
-  Tools for Answer Set Programming developed at the University of Potsdam.
+  The Potsdam Answer Set Solving Collection developed at the University of Potsdam.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site
 

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,39 +1,61 @@
 <footer class="site-footer">
-
   <div class="wrapper">
-
-    <h2 class="footer-heading">{{ site.title | escape }}</h2>
-
     <div class="footer-col-wrapper">
-      <div class="footer-col footer-col-1">
-        <ul class="contact-list">
-          <li>
-            {% if site.author %}
-              {{ site.author | escape }}
-            {% else %}
-              {{ site.title | escape }}
-            {% endif %}
-            </li>
-          <li><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
-        </ul>
+      <div class="footer-col footer-col-2" style="margin-right: 30px ">
+        <img style="vertical-align:baseline; margin-right: 6px; width: 120px;" src="{{ "/images/potassco-logo.svg" |
+          prepend: full_base_url }}">
       </div>
-
-      <div class="footer-col footer-col-2">
-        <ul class="contact-list">
-          <li>
-            <a href="{{ full_base_url }}/privacy/">Privacy</a>
-          </li>
-        </ul>
+      <div class="footer-col footer-col-2" style="width: calc(51% - 30px / 2); margin-right: 30px ">
+        <p>{{ site.description | escape }}
+          <a href="{{ full_base_url }}/privacy/">Privacy Policy</a>
+        </p>
       </div>
-
-      <div class="footer-col footer-col-3">
-        <p>{{ site.description | escape }}</p>
+      <div class="footer-col footer-col-2" style="margin-top: 5px;">
+        <div>
+          <a href="https://x.com/potassco" class="transition ease-curve-a duration-250 text-small" target="_blank"
+            rel="noreferrer" aria-label="X"><svg xmlns="http://www.w3.org/2000/svg" width="17" viewBox="0 0 17 17"
+              fill="none">
+              <g clip-path="url(#a)">
+                <path fill="#001F41"
+                  d="M13.158 2.058h2.248l-4.913 5.435 5.78 7.395h-4.525l-3.545-4.485-4.056 4.485h-2.25l5.255-5.813-5.545-7.017h4.64l3.205 4.1 3.706-4.1Zm-.79 11.527h1.246L5.57 3.293H4.233l8.135 10.292Z">
+                </path>
+              </g>
+            </svg></a>
+          <a href="https://www.youtube.com/@Potassco-live" class="transition ease-curve-a duration-250 text-small"
+            target="_blank" rel="noreferrer" aria-label="YouTube" style="margin-left: 10px;"><svg
+              xmlns="http://www.w3.org/2000/svg" width="17" viewBox="0 0 17 17" fill="none">
+              <g clip-path="url(#a)">
+                <path fill="#001F41"
+                  d="M16.79 5.475s-.156-1.067-.637-1.536c-.61-.617-1.29-.62-1.603-.656-2.238-.158-5.597-.158-5.597-.158h-.006s-3.36 0-5.597.158c-.313.036-.994.039-1.603.656-.481.469-.635 1.536-.635 1.536S.95 6.73.95 7.982v1.174c0 1.252.16 2.507.16 2.507s.156 1.067.634 1.536c.61.617 1.41.596 1.765.662 1.282.118 5.441.154 5.441.154s3.363-.006 5.6-.16c.313-.036.994-.04 1.603-.656.481-.469.638-1.536.638-1.536s.159-1.252.159-2.507V7.982c0-1.252-.16-2.507-.16-2.507ZM7.298 10.58V6.228l4.322 2.184-4.322 2.168Z">
+                </path>
+                </path>
+              </g>
+            </svg></a>
+          <a href="https://github.com/potassco" class="transition ease-curve-a duration-250 text-small" target="_blank"
+            rel="noreferrer" aria-label="GitHub" style="margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg"
+              width="17" viewBox="0 0 17 17" fill="none">
+              <g clip-path="url(#a)">
+                <path fill="#001F41" fill-rule="evenodd"
+                  d="M8.977.83C4.549.83.97 4.32.97 8.636c0 3.45 2.293 6.371 5.475 7.405.397.078.543-.168.543-.375 0-.18-.013-.8-.013-1.447-2.227.465-2.691-.93-2.691-.93-.358-.905-.888-1.138-.888-1.138-.73-.478.053-.478.053-.478.808.052 1.233.801 1.233.801.715 1.19 1.869.853 2.333.646.066-.504.278-.853.504-1.046-1.777-.181-3.646-.853-3.646-3.852 0-.853.318-1.55.822-2.093-.08-.194-.358-.995.08-2.068 0 0 .676-.207 2.2.801a7.94 7.94 0 0 1 2.002-.258c.676 0 1.365.09 2.001.258 1.525-1.008 2.2-.801 2.2-.801.438 1.073.16 1.874.08 2.068.517.542.822 1.24.822 2.093 0 2.999-1.869 3.658-3.659 3.852.292.245.544.71.544 1.447 0 1.047-.013 1.887-.013 2.145 0 .207.146.453.543.375 3.182-1.034 5.475-3.955 5.475-7.405C16.983 4.319 13.39.83 8.977.83Z"
+                  clip-rule="evenodd"></path>
+              </g>
+            </svg></a>
+          <a href="https://www.facebook.com/potassco" class="transition ease-curve-a duration-250 text-small" target="_blank"
+          rel="noreferrer" aria-label="Facebook" style="margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg"
+            width="15" viewBox="0 0 17 17" fill="none">
+            <g clip-path="url(#a)">
+              <path fill="#001F41" fill-rule="evenodd"
+              d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
+              C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
+              c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
+              h2.516V4.458z"
+                clip-rule="evenodd"></path>
+            </g>
+          </svg></a>
+        </div>
       </div>
     </div>
-
   </div>
-
-
 </footer>
 
 {% assign custom_url = site.url | append: site.baseurl %}

diff --git a/_includes/head.html b/_includes/head.html
@@ -11,6 +11,7 @@
   {% assign full_base_url = custom_url | default: site.github.url %}
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: full_base_url }}">
   <link rel="stylesheet" href="{{ "/css/posts.css" | prepend: full_base_url }}">
+  <link rel="stylesheet" href="{{ "/css/menu.css" | prepend: full_base_url }}">
   {% for css in page.css %}
     <link rel="stylesheet" href="{{ css | prepend: full_base_url }}">
   {% endfor %}

diff --git a/_includes/header.html b/_includes/header.html
@@ -4,18 +4,17 @@
 
     {% assign custom_url = site.url | append: site.baseurl %}
     {% assign full_base_url = site.github.url | default: custom_url %}
-    <a class="site-title" href="{{ full_base_url }}/"><img style="vertical-align:baseline; margin-bottom:-2px; margin-right: 6px;" src="{{ "/images/potassco-logo-black.png" | prepend: full_base_url }}"></a>
-    <a class="site-title" href="{{ full_base_url }}/">{{ site.title | escape }}</a>
+    <a class="site-title" href="{{ full_base_url }}/"><img style="vertical-align:baseline; margin-bottom:-2px; margin-top:7px; margin-right: 6px; width: 200px;" src="{{ "/images/potassco-logo.svg" | prepend: full_base_url }}"></a>
 
-    <nav class="site-nav">
+    <nav class="site-nav" style="margin-top: 14px;">
       <a href="#" class="menu-icon">
         <svg viewBox="0 0 18 15" width="18px" height="15px">
           <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
           <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
           <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
         </svg>
       </a>
-
+    
       <div class="trigger">
         {% comment %}
         https://stackoverflow.com/questions/25452429/excluding-page-from-jekyll-navigation-bar
@@ -31,8 +30,18 @@
           {% endif %}
         {% endfor %}
       </div>
-    </nav>
 
   </div>
 
 </header>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const menuIcon = document.querySelector('.menu-icon');
+    const trigger = document.querySelector('.trigger');
+
+    menuIcon.addEventListener('click', function() {
+      trigger.style.display = trigger.style.display === 'block' ? 'none' : 'block';
+      menuIcon.style.display = 'none';
+    });
+  });
+</script>
diff --git a/css/main.scss b/css/main.scss
@@ -23,7 +23,7 @@ $grey-color-dark:  darken($grey-color, 25%);
 // Width of the content area
 $content-width:    800px;
 
-$on-palm:          600px;
+$on-palm:          800px;
 $on-laptop:        800px;
 
 // Minima also includes a mixin for defining media queries.

diff --git a/css/menu.css b/css/menu.css
@@ -0,0 +1,19 @@
+@media (max-width: 799px) {
+    .trigger {
+        display: none;
+    }
+
+    .menu-icon {
+        display: block;
+    }
+}
+
+@media (min-width: 800px) {
+    .trigger {
+        display: block;
+    }
+
+    .menu-icon {
+        display: none;
+    }
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/images/potassco-logo.svg b/images/potassco-logo.svg
diff --git a/index.md b/index.md
@@ -1,6 +1,5 @@
 ---
 layout: page
-title: Potassco
 navtitle: Home
 menu: main
 weight: 0