Skip to content
Snippets Groups Projects
Commit e86a0067 authored by Lukas Ruge's avatar Lukas Ruge
Browse files

some improvements on how the media pages look

parent c4f24c2a
No related branches found
No related tags found
No related merge requests found
Pipeline #15731 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
Showing
with 115 additions and 27 deletions
_conferences/5min.md
+ 1
− 0
View file @ e86a0067
......@@ -4,6 +4,7 @@ title: 5 Minuten Termine
acronym: 5min
ecki: true
base_url: https://chaotikum.org/conferences/5min/
logo: /assets/5mintlogo.png
---
Ein Vortrag im Rahmen der Fünf-Minuten-Termine. Die Idee ist eigentlich einfach: Ab und zu nutzen wir das volle Haus und jede Person, die möchte, kann kurz vorstellen, was auch immer ihr vorschwebt.
_conferences/freitalk.md
+ 1
− 0
View file @ e86a0067
......@@ -5,5 +5,6 @@ acronym: freitalk
name_before_title: true
ecki: true
base_url: https://chaotikum.org/conferences/freitalk/
logo: /assets/chaotikumlogo400.png5
---
_conferences/hoth23.md
+ 1
− 0
View file @ e86a0067
......@@ -4,6 +4,7 @@ title: "Hacks on the Harbour 2023"
acronym: hoth23
ecki: false
base_url: https://hoth.info/
logo: /assets/hoth.png
---
_conferences/nook2017.md
+ 1
− 0
View file @ e86a0067
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2017
acronym: nook2017
base_url: https://2017.nook-luebeck.de/
logo: /assets/nook.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
_conferences/nook2018.md
+ 1
− 0
View file @ e86a0067
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2018
acronym: nook2018
base_url: https://2018.nook-luebeck.de/
logo: /assets/nook.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
_conferences/nook2019.md
+ 1
− 0
View file @ e86a0067
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2019
acronym: nook2019
base_url: https://2019.nook-luebeck.de/
logo: /assets/nook.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
_conferences/nook2022.md
+ 1
− 0
View file @ e86a0067
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2022
acronym: nook2022
base_url: https://2022.nook-luebeck.de/
logo: /assets/nook22.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
_conferences/nook2023.md
+ 1
− 0
View file @ e86a0067
......@@ -3,6 +3,7 @@ layout: conference
title: Night of open Knowledge 2023
acronym: nook2023
base_url: https://2023.nook-luebeck.de/
logo: /assets/nook23.png
---
Die Night of Open Knowledge (Nook) in Lübeck ist eine offene Vortragsveranstaltung, die einem weiten Publikum Einblicke in die verschiedene Bereiche der Informatik, aber auch technikfremde Themen bietet. Die Nook wird vom Chaotikum e.V. aus Lübeck und der studentischen Gruppe MetaMeute der Uni Lübeck veranstaltet. https://nook-luebeck.de/
\ No newline at end of file
_config.yml
+ 1
− 0
View file @ e86a0067
......@@ -169,6 +169,7 @@ sharing_links: # Appear at the bottom of single blog posts, uncomment and commen
#Defining reusable html templates for the webste that are places in the _includes folder
image: "image.html"
gallery: "gallery.html"
video: "video.html"
pressespiegel: "pressespiegel.html"
default-feature: "/assets/f11.jpg"
postlistbytopic: "postlistbytopic.html"
......
_includes/metaog.html
+ 1
− 1
View file @ e86a0067
{% if page.layout == "video" -%}
{%- assign realslug = page.url | split:'/' | last -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/{{realslug}}.jpg{% endcapture -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/share/{{realslug}}_share.png{% endcapture -%}
<meta property="og:image" content="{{feature_image}}">
<meta property="twitter:image" content="{{feature_image}}">
......
_includes/site-feature.html
+ 1
− 1
View file @ e86a0067
......@@ -27,7 +27,7 @@
{% if page.layout == "video" -%}
{%- assign realslug = page.url | split:'/' | last -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/{{realslug}}_play.png{% endcapture -%}
{% capture feature_image %}https://video.chaotikum.net/thumbnails/share/{{realslug}}_share.png{% endcapture -%}
{% capture image %}https://video.chaotikum.net/thumbnails/{{realslug}}_play.png{% endcapture -%}
{% endif -%}
......
_includes/video.html
+ 12
− 2
View file @ e86a0067
<div class="video">
<iframe src="https://www.youtube-nocookie.com/embed/{{ include.id }}?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="image_wrapper">
{% for vid in site.media -%}
{% if vid.uid == {{include.uid}} -%}
{%- assign realslug = vid.url | split:'/' | last -%}
<img class="vimage1" src="https://video.chaotikum.net/thumbnails/2023-11-04-nook-by-numbers.jpg">
<img class="vimage2" src="/assets/video_overlay.png">
<a href="{{ site.baseurl }}{{ vid.url }}"><img class="vimage3" src="/assets/video_overlay2.png"></a>
<div class="includemediatext includemediatext_1">
<h3><a href="{{ site.baseurl }}{{ vid.url }}">{{vid.title}}</a></h3>
</div>
{% endif -%}
{% endfor -%}
</div>
_layouts/frab.xml
+ 1
− 1
View file @ e86a0067
......@@ -277,7 +277,7 @@ Finding the first and last talk to establish the variables "earliest" and "lates
{% endif -%}
{% endfor -%}
{% endfor -%}
<title>{% if video.persons and name_before_title -%}{{video.persons | join: ", " }}: {% endif -%}{{ video.title }}
<title>{% if video.persons and name_before_title -%}{{video.persons | join: ", " }}: {% endif -%}{{video.title}}
{% for conf in video.conferences -%}
{% for c in site.conferences -%}
{% if conf == c.acronym -%}
......
_layouts/video.html
+ 40
− 21
View file @ e86a0067
......@@ -25,6 +25,13 @@ layout: default
{% endfor -%}
{% endcapture %}
{% capture persons %}
{% for person in page.persons %}
{{person}}
{% unless forloop.last %}, {% endunless %}
{% endfor %}
{% endcapture %}
<main class="main container">
<div class="content">
......@@ -34,51 +41,63 @@ layout: default
{%- assign realslug = page.url | split:'/' | last -%}
<div style="width: 100%;
display: flex;
background-color:#eeeeee;
justify-content: center;">
<img src="https://video.chaotikum.net/thumbnails/{{ realslug }}.jpg" alt="" style="margin: 0 auto;">
<img src="https://video.chaotikum.net/thumbnails/{{ realslug }}.jpg" alt="" width="100%" style="border-radius: 30px; margin: 0 auto;">
</div>
<h4 style="text-align: center; background-color:#eeeeee; color:000000">{{ title }}</h4>
<p style="text-align: center;"> {{content}} </p>
<h4>{{ title }}</h4>
{% for conf in page.conferences -%}
{% for c in site.conferences -%}
{% if conf == c.acronym and c.logo -%}
{% assign logo = c.logo -%}
{% endif -%}
{% endfor -%}
{% endfor -%}
<div style="display: flex; margin-top: 5px; align-items: center;">
<div><img src="{{logo}}" alt="" class="gravatar"> </div><div style="padding-left: 20px; height: 100%"> von <b>{{persons}}</b></div >
</div>
{% capture release_date %}{{page.release_date | date: '%s'}}{% endcapture -%}
{% if release_date < nowunix and page.optout != true %}
{% if page.file and page.file != ''-%}
<p style="text-align: center; background-color:#eeeeee; color:000000; border-radius: 1px; margin: 1%;"> Wähle einen Dienst aus:</p>
{% if page.yt and page.yt != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.yt }}">Youtube</a></div>
<p style="color:000000; margin-top: 10px; min-width: 100%; justify-content: center;">Schaue das Video auf</p>
{% if page.yt and page.yt != ''-%}
<div style="display: flex; flex-wrap: wrap; min-width: 100%; align-content: space-between; justify-content: center;">
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.yt }}">YouTube</a></div>
{% endif %}
{% if page.mccc and page.mccc != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.mccc }}">media.ccc.de</a></div>
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.mccc }}">media.ccc.de</a></div>
{% endif %}
{% if page.archive and page.archive != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.archive }}">archive.org</a></div>
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.archive }}">archive.org</a></div>
{% endif %}
{% if page.file and page.file != ''-%}
<div style="background-color:#eeeeee; border-radius: 4px; margin: 1%; min-height: 2em; min-width: 100%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.file }}">download</a></div>
<div style="background-color:#eeeeee; border-radius: 10px; margin-bottom: 1%; margin-right: 5px; min-height: 2em; max-width: 50%; position: relative; padding: 5px; text-align: center;"><a href="{{ page.file }}">Download</a></div>
{% endif %}
</div>
{% else -%}
{% comment -%}
This should not happen. This means a release date was set but no file provided. Idealy, delete the release date.
{% endcomment -%}
<p>Zu diesem Talk wurde kein Video veröffentlicht.<p>
<p>Zu diesem Talk wurde kein Video veröffentlicht.<p>
{% endif %}
{% else -%}
<p>Zu diesem Talk wurde noch kein Video veröffentlicht.<p>
{% endif -%}
{% if page.slides and page.slides != '' -%}
<a href="{{page.slides}}"> Download Slides</a>
{% endif -%}
{% if page.closedcaption and page.closedcaption != '' -%}
<a href="{{page.closedcaption}}"> Download Untertitel
<div style="width: 100%; background-color:#f2f2f2; border-radius: 10px;">
<p style="padding: 5px; margin-left: 10px; margin-top: 10px: text-align: justify">Veröffentlicht: <b>{{ page.release_date | date: "%-d.%m.%Y" }}</b><br>{{content | replace: "<p>", "" | replace: "</p>", "<br>" }}
{% if page.slides and page.slides != '' -%}
<br><b><a href="{{page.slides}}"> Download Slides</a></b><br>
{% endif -%}
{% if page.closedcaption and page.closedcaption != '' -%}
<br><b><a href="{{page.closedcaption}}"> Download Untertitel
{% if page.cccomputergen and page.cccomputergen != '' -%}
(Computergeneriert)
(automatisch erstellt)
{% endif -%}
</a>
{% endif -%}
</a></b></p>
{% endif -%}
</div>
</article>
</div>
</main>
{% include site-footer.html %}
_media/2023-05-12-baumbilanzen-befreien.md
+ 1
− 0
View file @ e86a0067
......@@ -11,6 +11,7 @@ event: eb785692-6bb0-4aac-aa7a-d48c87507da4
yt: "https://www.youtube.com/watch?v=DzV5UAwYQIE"
mccc: "https://media.ccc.de/v/2023-05-12-baumbilanzen-befreien"
file: "https://video.chaotikum.net/freitalk/2023-05-12-baumbilanzen-befreien/2023-05-12%20-%20baumbilanzenbefreien.mov"
slides: "https://tvluke.de/assets/talks/slides/baumbilanzenbefreien.pdf"
conferences:
- nbsp
- freitalk
......
_posts/blog/2023-12-30-2023.markdown
+ 1
− 1
View file @ e86a0067
......@@ -56,7 +56,7 @@ Menschen aus der Community haben über das Jahr in Lübeck [Kunst gemacht](https
Im Herbst stand das große Event des Jahres an. Die [Nook 2023](https://2023.nook-luebeck.de/). Mit einem breit angelegten Programm welches [Technik und Gesellschaft, lokales und globales verbindet](https://chaotikum.org/blog/2023/10/06/nook-fahrplan/) ist die NooK auch dieses Jahr zu einem vielfältigen Vortragsabend geworden. Zudem konnte wieder das [Nachtlicht](https://nachtlicht.chaotikum.org/) gelötet und an verschiedenen Ständen mit Initiativen geklönt werden.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/vvruxiDJ_-c?si=OMSxP6i8D_0jRXkH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
{% include {{site.video}} uid="ddb72240-54d2-40da-b161-c334101a6fd5" -%}
Neben der NooK beteiligten wir uns auch mit einem Lego-Roboter Workshop und mit dem Nachtlicht an der Neueröffnung der Julius Leber Schule. Zum Ende des Jahres wurde die Fräse wieder in Betrieb gesetzt und dem Server "Case" ein neues Zuhause gezimmert.
......
_sass/_normalize.scss
+ 49
− 0
View file @ e86a0067
......@@ -126,6 +126,55 @@ figcaption {
font: italic small-caps bold;
}
.image_wrapper {
position: relative;
width: 100%;
}
.includemediatext {
position: absolute;
/* background: rgba(57, 57, 57, 0.5); */
/* center overlay text */
display: flex;
align-items: center;
justify-content: center;
}
.vimage1 {
top: 0;
left: 0;
position: relative;
border-radius: 30px;
}
.vimage2 {
top: 0;
left: 0;
position: absolute;
border-radius: 30px;
opacity: 0.7;
}
.vimage3 {
top: 0;
left: 0;
position: absolute;
border-radius: 30px;
opacity: 0.2;
}
.vimage3:hover {
opacity: 0.5; /* Set the desired opacity on hover (0.7 for 70% transparency) */
}
.includemediatext_1 {
left: 0;
bottom: 0;
width: 100%;
padding: 1rem;
}
.navlink .fa {
color: #E94E1B;
}
......
assets/5mintlogo.png 0 → 100644
+ 0
− 0
View file @ e86a0067
assets/5mintlogo.png

142 KiB

assets/chaotikumlogo400.png 0 → 100644
+ 0
− 0
View file @ e86a0067
assets/chaotikumlogo400.png

79.6 KiB

assets/hoth.png 0 → 100644
+ 0
− 0
View file @ e86a0067
assets/hoth.png

76.6 KiB

0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Hosted with love by Chaotikum e.V. Support us if you can