Repsonsive Stuff

FH-Potsdam · Sep 28, 2022 · a98a24e · a98a24e
1 parent e1e5b60
commit a98a24e
Show file tree

Hide file tree

Showing 24 changed files with 336 additions and 151 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -18,7 +18,9 @@ module.exports = function(config) {
     linkify: true
   }).use(markdownItAnchor,{ slugify: s => slugify(s) }, {
     permalink: false,
-  }).use(implicitFigures);
+  }).use(implicitFigures, {
+    figcaption: true
+  });
 
   config.setLibrary("md", markdownLibrary);
 

diff --git a/src/site/_includes/header.njk b/src/site/_includes/header.njk
@@ -1,7 +1,7 @@
  <!DOCTYPE html>
 
 
-<html class="no-js" lang="en-US">
+<html class="no-js" lang="{% if locale == 'en' %}en-US{% else %}de-DE{% endif %}">
 
 
 <head>

diff --git a/src/site/_includes/js/core.js b/src/site/_includes/js/core.js
@@ -1,42 +1,3 @@
-/* const ConsoleLogger = require("@11ty/eleventy/src/Util/ConsoleLogger");
-
-let lastKnownScrollPosition = 0;
-let ticking = false;
-
-function header(scrollPos) {
-  var header = document.querySelector('header');
-  if (header) {
-    if (scrollPos > 540) {
-      if (header.className === "invert") {
-        header.className = "";
-        setTimeout(function() {
-          document.querySelector('#logo').style.display = 'block';
-        }, 500);
-      }
-    } else {
-      if (header.className !== "invert") {
-        header.className = "invert";
-      }
-    }
-  }
-}
-
-document.addEventListener('scroll', function(e) {
-  lastKnownScrollPosition = window.scrollY;
-
-  if (!ticking) {
-    window.requestAnimationFrame(function() {
-      header(lastKnownScrollPosition);
-      ticking = false;
-    });
-
-    ticking = true;
-  }
-}); 
-*/
-
-
-
 // Laufschrift Anfang
 
 // gsap.to()... infinity and beyond!
@@ -49,8 +10,8 @@ sections.forEach((section) => {
   gsap.to(section, {
     scrollTrigger: {
       trigger: section,
-      start: "top center",
-      end: "bottom 100px",
+      start: "top bottom",
+      end: "bottom 50px",
       markers: false,
       scrub: 2,
       toggleActions: "restart pause reverse reset"
@@ -63,8 +24,8 @@ sections2.forEach((section2) => {
   gsap.to(section2, {
     scrollTrigger: {
       trigger: section2,
-      start: "top center",
-      end: "bottom 100px",
+      start: "top bottom",
+      end: "bottom 50px",
       markers: false,
       scrub: 2,
       toggleActions: "restart pause reverse reset"
@@ -259,5 +220,3 @@ function display(theme, service, art) {
 /* Service Link Generator */
 
 
-
-
diff --git a/src/site/_includes/layouts/events_single.njk b/src/site/_includes/layouts/events_single.njk
@@ -3,12 +3,15 @@
 
 {% if locale == 'de' %}
 {% set people = collections.people_de %}
+{% set projects = collections.projects_de %}
 {% else %}
 {% set people = collections.people_en %}
+{% set projects = collections.projects_en %}
 {% endif %}
 
 <div class="intro-container max-width default">
-  <h1>{{name}}</h1>
+  <h1>{{name}}: {{subtitle}}</h1>
+
 
    {% if excerpt %}
   <div class="intro">
@@ -43,27 +46,80 @@ siehe admin/config.yml
 
   -->
 
+  <div class="block">
+    {% if date %}
+    <div class="facts year">   
+          <span>
+        {% if locale == 'en' %} Date {% else %} Datum {% endif %}
+      </span>
+        {{datum}}   
+    </div>
+      {% endif %}
+
+      {% if uhrzeit %}
+    <div class="facts uhrzeit">   
+          <span>
+        {% if locale == 'en' %} Time {% else %} Uhrzeit {% endif %}
+      </span>
+        {{uhrzeit}}   
+    </div>
+      {% endif %}  
 
-   {% if date %}
-  <div class="year">   
-        <span>
-      {% if locale == 'en' %} Date {% else %} Datum {% endif %}
-    </span>
-       {{ date}}   
   </div>
-    {% endif %}  
 
+  <div class="block">
+
+      {% if related_people %}
+      <div class="facts team">
+       <span>
+        {% if locale == 'en' %} Organizer {% else %} Organisator:innen {% endif %}
+      </span>
+      <ul>
+    {% for t in related_people %}
+    {% for p in people | sort(true, false, "sort_name") %}
+    {% if t | length > 3 and p.url | stripUrl in t | stripUrl %}
+    {{ peopleTeaser(p) }}
+    {% endif %}
+    {% endfor %}
+    {% endfor %}
+    </div>
+      {% endif %}  
+  </div>
 
 
 
-     {% if website %}
-    <div class="website">
-    <span>Website</span>
-       <a href="{{website}}">{{website}}</a>
-  </div>
-    {% endif %}  
+  <div class="block">
+
+      {% if related_projects %}
+
+          <div class="facts team">
+          <span>
+            {% if locale == 'en' %} Related Projects {% else %} Verwandte Projekte {% endif %}
+          </span>
+          <ul>
+        {% for t in related_projects %}
+        {% for p in projects | sort(true, false, "sort_name") %}
+        {% if t | length > 3 and p.url | stripUrl in t | stripUrl %}
+        {{ peopleTeaser(p) }}
+        {% endif %}
+        {% endfor %}
+        {% endfor %}
+        </div>
 
+      {% endif %}  
+
+  </div>
 
+   <div class="block">
+
+      {% if website %}
+      <div class="facts website">
+      <span>Website</span>
+        <a href="{{website}}">{{website}}</a>
+    </div>
+      {% endif %}  
+
+  </div>
 
 </div>
 
@@ -76,6 +132,13 @@ siehe admin/config.yml
 {% endif %}
 </div>
 
+{% if website %}
+      <div class="more-link">
+           <a class="button" href="{{website}}">Event Website</a>
+    </div>
+      {% endif %} 
+
+
 {% if laufschrift_green and laufschrift_black %}
 <div class="laufschrift-container">
 

diff --git a/src/site/_includes/layouts/home.njk b/src/site/_includes/layouts/home.njk
@@ -96,6 +96,7 @@
 
 
 <section>
+
 	<div class="publications">
 	<h2>{% if lang == 'en' %}Recent Publications{% else %}Publikationen{% endif %}</h2>
 
@@ -131,7 +132,7 @@
 
 	<div class="more-link">
 		{% set lang = page.url.slice(1, 3) %}
-	<a href="/{{locale}}/projects/" class="button">{% if lang == 'en' %}Show all publications{% else %}Alle Publikationen anzeigen{% endif %}</a>
+	<a href="/{{locale}}/publications/" class="button">{% if lang == 'en' %}Show all publications{% else %}Alle Publikationen anzeigen{% endif %}</a>
 	</div>
 
 </section>

diff --git a/src/site/_includes/layouts/macros.njk b/src/site/_includes/layouts/macros.njk
@@ -61,18 +61,26 @@
 
 
 {% macro eventTeaser(p) %}
-<a href="{{p.url}}" title="{{p.data.name}}">
-  <div class="event">
+<a class="event" href="{{p.url}}" title="{{p.data.name}}">
+
     <img src="{{p.data.thumbnail}}" alt="{{p.data.name}}" loading="lazy">
     <div class="event-desc-container">
+
       <div class="event-name">
         <span>{{p.data.name}}</span> {{p.data.subtitle}}
+        <div class="event-date">
+        {{p.data.datum}}
       </div>
-      <div class="event-date">
-        {{p.data.date | safe}}
+      <div class="event-time">
+        {{p.data.uhrzeit}}
+      </div>
+      </div>
+
+      <div class="more-link">
+        Mehr Informationen
       </div>
     </div>
-  </div>
+
 
 </a>	
 {% endmacro %}

diff --git a/src/site/_includes/postcss/_events.scss b/src/site/_includes/postcss/_events.scss
@@ -7,13 +7,17 @@
 .event {
   width: 100%;
   display: flex;
-  padding-top: 33%;
+  padding-top: 70%;
+
   position: relative;  
   background-color: black;
+  transition: all .25s ease;
+
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%);
 
   img {
     position: absolute;
-   opacity: .6;
+   opacity: .4;
   top: 0;
   left: 0;
   bottom: 0;
@@ -24,22 +28,70 @@
     overflow: hidden;
   }
 
+  @media screen and (min-width: 48.0rem) { 
+
+    padding-top: 50%;
+
+  }
+
+  @media screen and (min-width: 64.0rem) { 
+
+    padding-top: 33%;
+
+  }
+
 }
 
+a.event:hover {
+    transform: scale(1.05);
+  }
+
+
 .event-desc-container {
   position: absolute;
   top: 0;
   left: 0;
   color: white;
-  padding: 2rem;
-  background-color: red;
+  padding: 1rem;
+  max-width: 100%;
   height: 100%;
 
-  font-size: 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  @include font__p;
+
   margin-bottom: .5rem;
   span {
     font-weight: 700;
     display: block;
   }
 
+  @media screen and (min-width: 48rem) { 
+    @include font__p-large;
+
+    padding: 2rem;
+
+  }
+
+  @media screen and (min-width: 87.5rem) { 
+
+    max-width: 33%;
+
+  }
+
+}
+
+.event .more-link {
+  text-align: left;
+
+  &::before {
+    content: url(/images/assets/arrow-link-white.svg);
+    text-decoration: none;
+    margin-right: .5rem;
+  }
+}
+
+.event-date {
+  margin-top: .5rem;
 }