Combine header and footer, apply new design to them

- Change font to sans-serif or FreeSans, if available
- Add clickable link to student association homepage
- Add hover effect to links in header
- Add theme colors from our logo
- Add tilted border to header

packages/jobboerse/static/index.css

@@ -1,17 +1,72 @@
 :root {
-  --header-footer-color: AliceBlue;
+    font-family: "FreeSans", sans-serif;
-  --filter-bar-color: Aquamarine;
+    --green: #87d38b;
+    --blue: #8ab9e7;
+    --yellow: #e9a12f;
+    --light-green: #c3e9c5;
+    --dark-green: #27682a;
+    --light-blue: #cce0f5;
+    --dark-blue: #1c5287;
+    --light-yellow: #f7deb6;
+    --dark-yellow: #a66d11;
+    --default-padding: calc((5 / 16) * 1rem)
 }
 
-.header, .footer, .header-banner {
+.header, .header-inner, .header-banner {
     display: flex;
-    background: var(--header-footer-color);
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     width: 100%;
-    padding: 5px;
+}
-    box-shadow: 0px 0px 10px 0px gray;
+
+.header-inner, .header-banner {
+    background: var(--light-green);
+    padding: var(--default-padding);
+}
+
+.header, .header-inner {
+    flex-direction: column;
+}
+
+.header::after {
+    content: "";
+    background-color: var(--light-green);
+    clip-path: polygon(100% 0%, 0% 0%, 0% 100%);
+    width: 100%;
+    height: min(5vh, 2.5rem);
+}
+
+.header h1 {
+    padding: var(--default-padding);
+    margin: 0;
+}
+
+a {
+    color: var(--dark-blue);
+    text-decoration: none;
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.17rem;
+}
+
+.menu {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: baseline;
+    gap: var(--default-padding);
+    align-self: stretch;
 }
 
 .header-banner {
@@ -24,17 +79,44 @@
     left: 0;
 }
 
-.footer {
+.header-top {
-    position: sticky;
+    align-self: stretch;
-    bottom: 0;
+    display: flex;
-    left:0;
+    align-items: center;
+    justify-content: space-between;
 }
 
-.header-element, .footer-element {
+.header-top::after {
-    margin: 5px;
+    content: "";
+}
+
+.header-top img {
+    max-height: 2.5rem;
+    max-width: 10rem;
+}
+
+.header-element, .menu-item {
+    padding: var(--default-padding);
     cursor: pointer;
 }
 
+.header-element {
+    color: black;
+}
+
+.menu-item {
+    background-color: #80808000;
+    transition: background-color 0.25s ease-in-out;
+    -webkit-transition: background-color 0.25s ease-in-out;
+    -moz-transition: background-color 0.25s ease-in-out;
+    -ms-transition: background-color 0.25s ease-in-out;
+    -o-transition: background-color 0.25s ease-in-out;
+}
+
+.menu-item:hover {
+    background-color: #80808080;
+}
+
 .inline {
     display: inline-block;
 }
@@ -291,6 +373,7 @@ input.modal-open-check:checked + .modal-confirm-box > .modal-open-button {
 input.modal-open-check:not(:checked)+.modal-confirm-box>.modal-cancel-button {
     display: none;
 }
+
 input.modal-open-check:not(:checked)+.modal-confirm-box>.modal-submit-button {
     visibility: hidden;
 }
@@ -310,6 +393,7 @@ input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-submit-button
 .hideable-toggle:checked~label.hideable-label::after {
     content: "Show";
 }
+
 .hideable-toggle:not(:checked)~label.hideable-label::after {
     content: "Hide";
 }
@@ -323,7 +407,7 @@ input.modal-open-check:not(:checked) + .modal-confirm-box > .modal-submit-button
     display: flex;
     align-items: center;
     position: sticky;
-    background: var(--filter-bar-color);
+    background: var(--light-green);
     top: 120px;
     box-sizing: border-box;
     left: 0;

packages/jobboerse/templates/base.hb

@@ -14,6 +14,5 @@
             {{> @partial-block }}
             </main>
         </div>
-        {{> footer}}
     </body>
 </html>

packages/jobboerse/templates/footer.hb

@@ -1,26 +0,0 @@
-<footer class="footer">
-    <nav class="footer-inner">
-        {{#each base.links as |link|}}
-            {{#unless @first}}<span>|</span>{{/unless}}<a class="footer-element" href="{{link.url}}"><h3 class="inline">{{link.title}}</h3></a>
-        {{/each}}
-        <span>|</span><a class="footer-element" href="{{base.routes.licenses}}"><h3 class="inline">Drittanbieter-Lizenzen</h3></a>
-        <span>|</span><a class="footer-element" href="{{base.routes.joboffer_create}}"><h3 class="inline">Stellenanzeige einreichen</h3></a>
-        {{#if user}}
-            <span>|</span><a class="footer-element" href="{{base.routes.joboffers_delete_expired}}" title="Alle abgelaufenen Stellenanzeigen löschen"><h3 class="inline">Abgelaufene löschen</h3></a>
-            <span>|</span><label class="footer-element" for="submit-sync" tabindex="0">
-                <h3 class="inline" title="Reload Joboffer Metadata from Disk">Re-Sync</h3>
-                <form  class="hidden" method="post" action="{{base.routes.sync}}">
-                    <input type="submit" id="submit-sync" class="hidden">
-                </form>
-            </label>
-            <span>|</span><label class="footer-element" for="submit-logout" tabindex="0">
-                <h3 class="inline">Abmelden</h3>
-                <form  class="hidden" method="post" action="{{base.routes.logout}}">
-                    <input type="submit" id="submit-logout" class="hidden">
-                </form>
-             </label
-        {{else}}
-            <span>|</span><a class="footer-element" href="{{base.routes.login}}"><h3 class="inline">Fachschaftler-Login</h3></a>
-        {{/if}}
-    </nav>
-</footer>

packages/jobboerse/templates/header.hb

@@ -11,6 +11,15 @@
 {{/if}}
 <header class="header">
     <nav class="header-inner">
-        <a class="header-element" href="{{base.routes.joboffer_overview}}"><h1>Jobbörse</h1></a>
+        <div class="header-top">
+            <a class="header-element" href="https://www.fs-infmath.uni-kiel.de/wiki/Hauptseite">
+                <img src="https://www.fs-infmath.uni-kiel.de/w/images/b/b6/Logo_gro%C3%9F_bunt.svg">
+            </a>
+            <a class="header-element" href="{{base.routes.index}}">
+                <h1>Jobbörse</h1>
+            </a>
+        </div>
+        {{> menu}}
     </nav>
+    <div class="header-bottom"></div>
 </header>

packages/jobboerse/templates/job_offer/faq.hb

@@ -8,7 +8,7 @@
 
         <p>Die Aktuellen Semester- und Prüfungszeiträume sollten Sie <a href="https://www.uni-kiel.de/gf-praesidium/de/termine/semesterzeiten">hier</a> finden.</p>
 
-        <p class="italic-text">Bei technischen Problemen oder wenn Sie das Formular nicht nutzen können bzw. dürfen, senden Sie bitte eine E-Mail an <a href="jobs@fs-infmath.uni-kiel.de">jobs@fs-infmath.uni-kiel.de</a>. Wir helfen Ihnen gerne!</p>
+        <p class="italic-text">Bei technischen Problemen oder wenn Sie das Formular nicht nutzen können bzw. dürfen, senden Sie bitte eine E-Mail an <a href="{{mail}}">{{mail}}</a>. Wir helfen Ihnen gerne!</p>
     </div>
 
     <div>
@@ -16,7 +16,7 @@
         <p>Einreichungen werden automatisch entfernt, sobald das jeweilige Ablaufdatum verstrichen ist</p>
         <p>Einreichungen ohne explizit angegebenes Ablaufdatum haben ein implizites Ablaufdatum 6 Monate (180 Tage) nach Einreichung.</p>
         {{#if mail}}
-            <p>Um eine Einreichung früher zu entfernen, informieren Sie uns bitte per E-Mail unter <a href="{{mail}}">{{mail}}</a></p>
+            <p>Um eine Einreichung früher zu entfernen, informieren Sie uns bitte per E-Mail unter <a href="{{mail}}">{{mail}}</a>.</p>
         {{/if}}
     </div>
 

packages/jobboerse/templates/menu.hb

@@ -0,0 +1,33 @@
+<nav class="menu">
+    {{#each base.links as |link|}}
+    <a class="menu-item" href="{{link.url}}">
+        <h3 class="inline">{{link.title}}</h3>
+    </a>
+    {{/each}}
+    <a class="menu-item" href="{{base.routes.licenses}}">
+        <h3 class="inline">Drittanbieter-Lizenzen</h3>
+    </a>
+    <a class="menu-item" href="{{base.routes.joboffer_create}}">
+        <h3 class="inline">Stellenanzeige einreichen</h3>
+    </a>
+    {{#if user}}
+    <a class="menu-item" href="{{base.routes.joboffers_delete_expired}}"
+        title="Alle abgelaufenen Stellenanzeigen löschen">
+        <h3 class="inline">Abgelaufene löschen</h3>
+    </a>
+    <label class="menu-item" for="submit-sync" tabindex="0">
+        <h3 class="inline" title="Reload Joboffer Metadata from Disk">Re-Sync</h3>
+        <form class="hidden" method="post" action="{{base.routes.sync}}">
+            <input type="submit" id="submit-sync" class="hidden">
+        </form>
+    </label>
+    <label class="menu-item" for="submit-logout" tabindex="0">
+        <h3 class="inline">Abmelden</h3>
+        <form class="hidden" method="post" action="{{base.routes.logout}}">
+            <input type="submit" id="submit-logout" class="hidden">
+        </form>
+    </label {{else}} <a class="menu-item" href="{{base.routes.login}}">
+        <h3 class="inline">Fachschaftler-Login</h3>
+    </a>
+    {{/if}}
+</nav>