Skip to content

Commit

Permalink
Added printable Version of workshops
Browse files Browse the repository at this point in the history
  • Loading branch information
cnoss committed May 21, 2024
1 parent 6c858ea commit d8d29f7
Show file tree
Hide file tree
Showing 6 changed files with 176 additions and 24 deletions.
24 changes: 24 additions & 0 deletions _layouts/marketing.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Version // {{page.title}}</title>
<link rel="stylesheet" href="{{ site.baseurl }}/assets/styles/print.css">
<script defer src="{{ site.baseurl }}/assets/js/marketing.js"></script>
</head>
<body>

<section>
<header>
<h1>Media Output</h1>
<h2>Printable Poster</h2>
</header>
<ul class="overview" data-js-overview></ul>

</section>

<div class="portfolio" data-js-printable></div>

</body>
</html>
1 change: 1 addition & 0 deletions _sass/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $mi-grau: #aaaaaa;
$mi-bg: #efefef;
$family-primary: "PT Sans";
$family-code: "Courier New", Courier, monospace;
$family-headlines: "Roboto Slab";
$primary: $mi-pink;
$info: $mi-lila;
$success: $mi-gruen;
Expand Down
73 changes: 49 additions & 24 deletions _site/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,31 @@ <h2 class="subtitle is-3">
<h2 class="is-underlined">Die letzten Workshops und Tutorials</h2>
<div class="columns is-multiline">

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2024/AnimierteSVGs/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2024/AnimierteSVGs/index/../thumbnail.png">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Animierte SVGs</h3>
<dl>
<dd>Lioba Brandhoff</dd>
<dd>Dienstag, 28. Mai 2024, 13:00 Uhr</dd>
<dd>~120 Minuten</dd>
<dd class="clipped-text">Raum 3.217</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2024/AnimierteSVGs/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2024/A11y-Testing/index/">
<div class="card bm--card-equal-height">
Expand Down Expand Up @@ -842,51 +867,51 @@ <h3>GraphQL Grundlagen Part 2 - Server</h3>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2019/Service-Worker/index/">
<a href="/mi-master-wtw/workshops/2019/GraphQL-Client/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2019/Service-Worker/index/../teaser.jpg">
<img src="/mi-master-wtw/workshops/2019/GraphQL-Client/index/../teaser.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Service Worker</h3>
<h3>GraphQL Grundlagen Part 1 - Client</h3>
<dl>
<dd>Dennys Plettlinger</dd>
<dd>Dienstag, 14. Mai 2019, 14:30 Uhr</dd>
<dd>Vimal Darius Seetohul & Dennis Dubbert</dd>
<dd>Dienstag, 14. Mai 2019, 13:00 Uhr</dd>
<dd>90 Minuten</dd>
<dd class="clipped-text">Raum Online, siehe Ilias</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2019/Service-Worker/index/">Inhalte anschauen</a>
<a class="card-footer-item" href="/workshops/2019/GraphQL-Client/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2019/GraphQL-Client/index/">
<a href="/mi-master-wtw/workshops/2019/Service-Worker/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2019/GraphQL-Client/index/../teaser.jpg">
<img src="/mi-master-wtw/workshops/2019/Service-Worker/index/../teaser.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>GraphQL Grundlagen Part 1 - Client</h3>
<h3>Service Worker</h3>
<dl>
<dd>Vimal Darius Seetohul & Dennis Dubbert</dd>
<dd>Dienstag, 14. Mai 2019, 13:00 Uhr</dd>
<dd>Dennys Plettlinger</dd>
<dd>Dienstag, 14. Mai 2019, 14:30 Uhr</dd>
<dd>90 Minuten</dd>
<dd class="clipped-text">Raum Online, siehe Ilias</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2019/GraphQL-Client/index/">Inhalte anschauen</a>
<a class="card-footer-item" href="/workshops/2019/Service-Worker/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>
Expand Down Expand Up @@ -967,51 +992,51 @@ <h3>Offline im Web</h3>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2018/css-grids-custom-properties/index/">
<a href="/mi-master-wtw/workshops/2018/workshop-generic-sensor-api/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2018/css-grids-custom-properties/index/../teaser.jpg">
<img src="/mi-master-wtw/workshops/2018/workshop-generic-sensor-api/index/../teaser.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>CSS Grids & Custom Properties</h3>
<h3>Generic Sensor API</h3>
<dl>
<dd>Christian Noss</dd>
<dd>Dienstag, 03. Juli 2018, 13:30 Uhr</dd>
<dd>Sascha Lemke</dd>
<dd>Dienstag, 05. Juni 2018</dd>
<dd>120 Minuten</dd>
<dd class="clipped-text">Raum Online, siehe Ilias</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2018/css-grids-custom-properties/index/">Inhalte anschauen</a>
<a class="card-footer-item" href="/workshops/2018/workshop-generic-sensor-api/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>

<div class="column is-one-third-tablet is-one-quarter-desktop">
<a href="/mi-master-wtw/workshops/2018/workshop-generic-sensor-api/index/">
<a href="/mi-master-wtw/workshops/2018/css-grids-custom-properties/index/">
<div class="card bm--card-equal-height">
<div class="card-image">
<figure class="image is-16by9">
<img src="/mi-master-wtw/workshops/2018/workshop-generic-sensor-api/index/../teaser.jpg">
<img src="/mi-master-wtw/workshops/2018/css-grids-custom-properties/index/../teaser.jpg">
</figure>
</div>
<div class="card-content">
<div class="content">
<h3>Generic Sensor API</h3>
<h3>CSS Grids & Custom Properties</h3>
<dl>
<dd>Sascha Lemke</dd>
<dd>Dienstag, 05. Juni 2018</dd>
<dd>Christian Noss</dd>
<dd>Dienstag, 03. Juli 2018, 13:30 Uhr</dd>
<dd>120 Minuten</dd>
<dd class="clipped-text">Raum Online, siehe Ilias</dd>
</dt>
</div>
</div>
<!--footer class="card-footer">
<a class="card-footer-item" href="/workshops/2018/workshop-generic-sensor-api/index/">Inhalte anschauen</a>
<a class="card-footer-item" href="/workshops/2018/css-grids-custom-properties/index/">Inhalte anschauen</a>
</footer-->
</div>
</div></a>
Expand Down
Empty file added assets/js/marketing.js
Empty file.
93 changes: 93 additions & 0 deletions assets/styles/print.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---
---
//
// IMPORTS
//
@import "reset";
@import "variables";


/* Base
############################################################################ */

body{
font-family: $family-primary;
line-height: 130%;
}

section{
padding: $bfs;
}

h1{
font-size: $size-1;
}

header{
margin-bottom: $size-2;
}


/* Overview
############################################################################ */

.overview{
display: grid;
gap: $bfs;
grid-template-columns: repeat(auto-fill,minmax(16em,1fr));
}

/* Portfolio
############################################################################ */

.portfolio{

&.is-active{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
aspect-ratio: 210/297;
border: solid 1px #eee;
background-color: #fff;
max-width: $bfs * 50;
}


img{
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}

figure{
margin-bottom: $bfs;
}

h1{
font-family: $family-headlines;
font-size: $size-1;
line-height: 130%;
}

h2{
margin-bottom: $size-1;
}

.grid{
display: grid;
gap: $bfs;
padding: $size-2;

&[data-cols="2"]{
grid-template-columns: 1fr 1fr;
}
}

.content{
p{
margin-bottom: 1em;
}
}
}
9 changes: 9 additions & 0 deletions news-aushang.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
layout: marketing
title: Web Technologien
kuerzel: web-technologien
---




0 comments on commit d8d29f7

Please sign in to comment.