Updates

_layouts/home.html

@@ -111,15 +111,9 @@ layout: default
         <li>Diskussion: Dr. Ulrike Franke (Politikwissenschaftlerin, ECFR, Uni Oxford) und Johanna Polle
           (Politikwissenschaftlerin, UHH)</li>
       </ul>
-      <h3 id="textvertiefung">Textvertiefung</h3>
-      <p>Begleitend werden während des Semesters Texte online zur Verfügung gestellt, die in einer für die
-        Veranstaltung
-        eingerichteten Gruppe mit dem Tool <a target="_blank" href="https://web.hypothes.is/"><em>Hypothesis</em></a>
-        annotiert und diskutiert werden können. Allen
-        Interessierten
-        kann ein Zugang zu dieser Gruppe gewährt werden; eine Beteiligung an den Diskussionen und Annotationen ist
-        ausdrücklich gewünscht. Da es sich aber um keine offene Gruppe handelt, bitten wir um Anmeldung per Email an
-        lars.schmeink@hcu-hamburg.de oder axel.duerkop@tuhh.de</p>
+      <h3 id="textvertiefung">Kollaborative Textarbeit</h3>
+      <p>Begleitend werden während des Semesters Texte online zur Verfügung gestellt, die in einer für die Veranstaltung eingerichteten Gruppe gelesen und diskutiert werden können. Allen Interessierten kann ein Zugang zu dieser Gruppe gewährt werden; eine Beteiligung an den Diskussionen und Annotationen ist ausdrücklich gewünscht.</p>
+      <a class="button" href="/lesen-und-diskutieren-zugete.html">Mitmachen beim Lesen und Diskutieren!</a>
     </div>
 
 
@@ -168,7 +162,7 @@ layout: default
 
 
   <article id="team">
-    <h1>Team</h1>
+    <h2>Team</h2>
     <p>Das <em>tekethics</em>-Team erstellt und kuratiert offenes Bildungsmaterial zu aktuellen technischen Themen und
       unterstützt mediendidaktisch die kritisch-konstruktive Auseinandersetzung mit ethischen Fragestellungen unserer
       Zeit.</p>
@@ -295,6 +289,32 @@ layout: default
         </p>
       </div>
     </div>
+
+    <div class="resource-container">
+      <figure class="video">
+          <a target="_blank" href="https://www.youtube.com/playlist?list=PL2UvS33NZ0fdn2ZAEdJRD57ueig4Te6WS"><img style="max-width: 200px" src="/assets/images/tekethics-playlist-mirko.png" alt="Screenshot aus der Playlist" /></a>
+      </figure>
+
+      <div class="description">
+        <h3>tekethics - Begleitende Videos zum Booklet (en)</h3>
+        <p>
+          Dr. Mirko Garasic spricht über die Themen des Booklets (Playlist).
+        </p>
+      </div>
+    </div>
+
+    <div class="resource-container">
+      <figure class="video">
+          <a target="_blank" href="https://www.youtube.com/playlist?list=PL2UvS33NZ0fcZM4gCTKPbjHu9mXnZ5EnJ"><img style="max-width: 200px" src="/assets/images/tekethics-playlist-workshop.png" alt="Screenshot aus der Playlist" /></a>
+      </figure>
+
+      <div class="description">
+        <h3>tekethics - Vorträge des veranstaltungsbegleitenden Workshops (en)</h3>
+        <p>
+          Dr. Mirko Garasic, Prof. Dr. Mario De Caro und Dr. Steffen Steinert sprechen über ausgewählte philosophische Themen (Playlist).
+        </p>
+      </div>
+    </div>
   </article>
 
 </section>
\ No newline at end of file

_sass/minima.scss

@@ -51,4 +51,4 @@ $on-laptop: 1050px !default;
 
 // Import partials.
 @import "partials/base", "partials/layout", "partials/timeline",
-  "partials/stoerer", "partials/team", "partials/events", "partials/resources";
+  "partials/stoerer", "partials/team", "partials/events", "partials/resources", "partials/lesen-und-diskutieren";

_sass/partials/_events.scss

@@ -3,9 +3,20 @@
   padding: 20px;
   margin-bottom: 40px;
 
+  a.button {
+    display: inline-block;
+    text-align: center;
+    padding: 10px;
+    border-radius: 5px;
+    background: #afd85c;
+    color: #003756;
+    margin-bottom: 15px 0;
+  }
+
   #zugete-flyer {
     border: 1px solid #ddd;
     margin: 10px 0 20px 0;
+    width: 100%;
   }
 
   #bib-image {

_sass/partials/_layout.scss

@@ -7,39 +7,36 @@
   background-size: cover;
   position: relative;
   display: grid;
-  grid-template-rows:150px 220px 1fr 50px;
-  grid-template-columns:40% 20% 40%;
+  grid-template-rows: 150px 220px 1fr 50px;
+  grid-template-columns: 40% 20% 40%;
 
   /* stoerer */
   grid-template-areas:
-  "nav nav nav"
-  "headline headline headline"
-  "symbols symbols symbols"
-  ". arrow ."
-  ;
+    "nav nav nav"
+    "headline headline headline"
+    "symbols symbols symbols"
+    ". arrow .";
   /* ++++++ */
 
   height: 950px;
 
-
   @include media-query($on-palm) {
     height: auto;
   }
 
   @include media-query($on-palm) {
-    grid-template-rows:170px 220px 1fr 50px;
+    grid-template-rows: 170px 220px 1fr 50px;
     /* stoerer */
 
     grid-template-areas:
-    "nav nav nav"
-    "headline headline headline"
-    "symbols symbols symbols"
-    ". arrow ."
-    ;
+      "nav nav nav"
+      "headline headline headline"
+      "symbols symbols symbols"
+      ". arrow .";
     /* ++++++ */
   }
 
-  .navigation{
+  .navigation {
     grid-area: nav;
     transition: all 0.4s ease;
     display: flex;
@@ -47,12 +44,12 @@
     position: fixed;
     width: 70%;
     padding-top: 2%;
-    top:0;
+    top: 0;
     left: 50%;
     transform: translateX(-50%);
 
-    #hoou_logo{
-      margin-top: .8rem;
+    #hoou_logo {
+      margin-top: 0.8rem;
       height: 4rem;
     }
 
@@ -60,7 +57,7 @@
       width: 90%;
     }
 
-    .nav-wrapper{
+    .nav-wrapper {
       display: flex;
       width: 100%;
       justify-content: space-between;
@@ -73,18 +70,18 @@
         flex-wrap: nowrap;
         flex-direction: column;
 
-        #hoou_logo{
+        #hoou_logo {
           margin-top: 0.5rem;
         }
       }
 
-      .logo{
+      .logo {
         margin: 0.4rem 0;
         height: 5rem;
       }
     }
 
-    &.scroll{
+    &.scroll {
       z-index: 999;
       box-sizing: border-box;
       width: 100%;
@@ -95,7 +92,7 @@
       .page-link {
         border-right: 2px solid $grey-color-light;
 
-        &:last-of-type{
+        &:last-of-type {
           border: 0;
         }
       }
@@ -107,7 +104,7 @@
     }
   }
 
-  h3{
+  h3 {
     grid-area: headline;
     align-self: center;
     justify-content: center;
@@ -116,11 +113,12 @@
     font-style: italic;
     font-weight: 600;
     padding: 0;
-    margin: 0;
+    margin: 50px 0 50px 0;
+    line-height: 1.2em;
   }
 
   /* stoerer */
-  #stoerer{
+  #stoerer {
     grid-area: stoerer;
     justify-self: end;
     margin-right: 15%;
@@ -136,39 +134,39 @@
   }
   /* ++++++ */
 
-  .symbols_wrapper{
+  .symbols_wrapper {
     grid-area: symbols;
     align-self: start;
-    display:flex;
-    justify-content:space-around;
+    display: flex;
+    justify-content: space-around;
 
     @include media-query($on-laptop) {
       flex-wrap: wrap;
     }
 
-    .symbolbox{
+    .symbolbox {
       width: 280px;
       justify-content: center;
       display: flex;
       flex-direction: column;
       align-items: center;
 
-      &:hover{
+      &:hover {
         text-decoration: none;
         color: $hoou_gold;
       }
 
-      span{
+      span {
         margin-bottom: -50px;
-        .circle{
-          background-color:white;
-          border-radius:50%;
-          background-color: rgba(255,255,255,0.8);
+        .circle {
+          background-color: white;
+          border-radius: 50%;
+          background-color: rgba(255, 255, 255, 0.8);
         }
       }
 
-      h2{
-        background-color: rgba(255,255,255,0.8);
+      h2 {
+        background-color: rgba(255, 255, 255, 0.8);
         padding: 2rem;
         line-height: 1.5;
         padding-top: 4.8rem;
@@ -178,14 +176,14 @@
     }
   }
 
-  .arrowBox{
+  .arrowBox {
     text-align: center;
     grid-area: arrow;
     .downArrow {
-      a{
+      a {
         color: rgba($brand-color, 0.8);
 
-        &:hover{
+        &:hover {
           color: $brand-color;
         }
       }
@@ -193,14 +191,14 @@
   }
 }
 
-nav{
+nav {
   line-height: $base-line-height * $base-font-size * 2.25;
 
   .nav-trigger {
     display: none;
   }
 
-  .trigger{
+  .trigger {
     display: flex;
     height: 100%;
     align-items: center;
@@ -222,11 +220,11 @@ nav{
     padding-right: 1rem;
     border-right: 2px solid white;
 
-    &:last-of-type{
+    &:last-of-type {
       border: 0;
     }
 
-    &:hover{
+    &:hover {
       color: $hoou_gold;
       text-decoration: none;
     }
@@ -294,7 +292,7 @@ nav{
 * Site content
 */
 
-.video-wrapper{
+.video-wrapper {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 25px;
@@ -322,7 +320,7 @@ nav{
 * Site footer
 */
 
-footer{
+footer {
   background-color: $brand-color;
   border-top: 2px solid lighten($brand-color, 15%);
   display: flex;
@@ -330,78 +328,78 @@ footer{
   align-items: center;
   padding: $spacing-unit 15%;
 
-  p{
+  p {
     width: 30%;
     color: white;
   }
 
-  .logo-widget{
+  .logo-widget {
     display: flex;
     width: 50%;
     justify-content: space-around;
 
-    a:first-child img{
+    a:first-child img {
       height: 3rem;
     }
 
-    a:last-child img{
+    a:last-child img {
       height: 2.8rem;
     }
   }
 
-  a{
+  a {
     @include relative-font-size(1);
     line-height: 1;
     color: white !important;
     margin-bottom: 1rem;
 
-    &:hover{
+    &:hover {
       color: $grey-color;
       text-decoration: underline;
     }
   }
 
-  #footer-nav{
+  #footer-nav {
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
 
-
   @include media-query($on-laptop) {
     flex-wrap: wrap;
 
-    a:first-child{
+    a:first-child {
       margin-bottom: 2rem;
     }
 
-    p{
+    p {
       width: 100%;
     }
 
-    .logo-widget{
+    .logo-widget {
       flex-direction: column;
       margin-top: 1rem;
     }
 
-    #footer-nav{
+    #footer-nav {
       align-items: flex-end;
     }
   }
 
   @include media-query($on-palm) {
-
-    p, .logo-widget, #footer-nav{
+    p,
+    .logo-widget,
+    #footer-nav {
       width: 100%;
     }
 
-    .logo-widget{
+    .logo-widget {
       align-items: center;
       margin: 2rem 0;
     }
 
-    #footer-nav{
+    #footer-nav {
       flex-direction: row;
       justify-content: space-around;
       align-items: center;
@@ -409,8 +407,6 @@ footer{
   }
 }
 
-
-
 /**
 * Page content
 */
@@ -441,8 +437,6 @@ footer{
   @include relative-font-size(1.5);
 }
 
-
-
 /**
 * Posts
 */
@@ -462,13 +456,19 @@ footer{
 
 .post-content {
   margin-bottom: $spacing-unit;
+  width: 100%;
 
   .copy {
     font-weight: bold;
   }
 
-  h1,h2,h3,h4,h5 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
     color: darken($brand-color, 5%);
+    margin: 20px 0;
   }
 
   h1 {
@@ -495,6 +495,7 @@ footer{
     @include media-query($on-laptop) {
       @include relative-font-size(1.125);
     }
+    font-weight: 600;
   }
 
   ul li {
@@ -503,7 +504,8 @@ footer{
 
   .flex-list {
     display: flex;
-      justify-content: space-between;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
     ul {
     }
@@ -514,33 +516,32 @@ footer{
 * Imprint
 */
 
-#imprint-header{
+#imprint-header {
   background: $brand-color url(../images/LaborBG.jpg) no-repeat center -500px fixed;
   background-size: cover;
   padding-bottom: 10rem;
 
-  #hoou_logo{
+  #hoou_logo {
     margin-top: 1.4rem;
     height: 2.3rem;
   }
 
-  .logo{
+  .logo {
     margin: 0.6rem 0;
     height: 4rem;
   }
 
-  .imprint-wrapper{
+  .imprint-wrapper {
     background-color: white;
     display: flex;
     justify-content: space-between;
     padding: 0 15%;
 
-
     .page-link {
       border-right: 2px solid $grey-color-light;
-      @include relative-font-size(1.000);
+      @include relative-font-size(1);
 
-      &:last-of-type{
+      &:last-of-type {
         border: 0;
         padding-right: 0;
       }
@@ -551,22 +552,22 @@ footer{
       padding: 0 2%;
     }
 
-    @include media-query($on-palm){
+    @include media-query($on-palm) {
       flex-wrap: nowrap;
       flex-direction: column;
 
-      #hoou_logo{
+      #hoou_logo {
         margin: 0.6rem 0;
       }
 
-      .logo{
+      .logo {
         margin-bottom: 0;
       }
     }
   }
 }
 
-#info-box{
+#info-box {
   margin-top: 2rem;
   background-color: $hoou_lightblue;
   padding: 1.5rem;
@@ -574,17 +575,17 @@ footer{
   text-align: center;
   font-weight: 600;
 
-  h3{
+  h3 {
     display: inline-block;
     margin-left: 1rem;
   }
 
-  ul{
+  ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 
-    li{
+    li {
       display: block;
       padding: 1rem;
       text-align: center;
@@ -595,10 +596,13 @@ footer{
   }
 }
 
-#worldmap{
+#worldmap {
   margin: 1rem 0;
 }
 
-#start, #course, #team, #download {
+#start,
+#course,
+#team,
+#download {
   margin-bottom: 80px;
-}
\ No newline at end of file
+}

_sass/partials/_resources.scss

 .resource-container {
   border: 2px solid #ddd;
   display: flex;
+  flex-wrap: wrap;
   padding: 8px 20px;
   margin-bottom: 30px;
 
@@ -28,7 +29,7 @@
     }
     a {
       display: inline;
-      width: 350px;
+      // width: 350px;
       text-align: center;
       padding: 10px;
       border-radius: 5px;

_sass/partials/lesen-und-diskutieren.scss

+  a.button {
+    display: inline-block;
+    text-align: center;
+    padding: 10px;
+    border-radius: 5px;
+    background: #afd85c;
+    color: #003756;
+    margin-bottom: 15px 0;
+  }
\ No newline at end of file

lesen-und-diskutieren-zugete.md

+---
+layout: imprint
+---
+
+<h1>Lesen und diskutieren über Zukunft, Gesellschaft und Technologie</h1>
+
+Um den Raum eigener Fragestellung und Gedanken zu erweitern, werden zu jedem Film gemeinsam vertiefende Texte gelesen und online diskutiert.
+
+## Wie richte ich meine Online-Lernumgebung ein?
+
+### Annahme eines Alias
+
+Wir schlagen vor, dass Sie sich einen Fantasienamen zulegen, mit dem Sie in unserer Veranstaltung online agieren. Ihr neuer Name kann helfen, online mutiger zu sein, sich zu trauen, die eigenen Gedanken im Internet zu äußern.
+
+Nutzen Sie z.B. den Generator [Behind the Name](https://www.behindthename.com/random/). Mit [diesen Einstellungen](https://www.behindthename.com/random/random.php?number=2&sets=1&gender=u&surname=&showextra=yes&all=yes) erzeugen Sie schnell passable Ergebnisse. Selbstverständlich können Sie sich auch einfach so einen Namen ausdenken.
+
+<a class="button" target="_blank" href="https://www.behindthename.com/random/random.php?number=2&sets=1&gender=u&surname=&showextra=yes&all=yes">Einen Alias generieren</a>
+
+### Verantwortung übernehmen
+
+Wir wissen, dass es **Mut** braucht, um die eigene Meinung und die eigenen Gedanken im Web zu äußern. Ihr Alias soll Ihnen dabei helfen. Selbstverständlich können Sie auch mit Ihrem wirklichen Namen agieren.
+
+Wie auch immer, seien Sie bitte **respektvoll** anderen gegenüber. Freuen Sie sich darüber, wenn andere nicht Ihrer Meinung sind, denn dann können Sie sich im **Argumentieren üben**. Treten Sie aber gleichzeitig Hass, Verschwörungstheorien und jeglicher Form von Vorurteilen und Diskriminierung (Rassismus, Sexismus etc.) entschieden entgegen.
+
+Melden Sie sich bei den Veranstaltern Lars Schmeink und Axel Dürkop, wenn Sie sich in der Diskussion unwohl fühlen.
+
+### Aufnahme in die Lerngruppe
+
+Schreiben Sie eine Mail an Lars Schmeink und Axel Dürkop, um in die Lerngruppe aufgenommen zu werden.
+
+Schreiben Sie in der Mail,
+
+- wie Ihr Fantasiename lautet
+- wie Sie _wirklich_ heißen
+- ob und wenn ja, zu welcher Hochschule Sie gehören
+- was Sie an der Veranstaltung interessiert
+
+<a class="button" target="_blank" href="mailto:axel.duerkop@tuhh.de;lars.schmeink@hcu-hamburg.de?subject=Ich möchte an der Veranstaltung teilnehmen!">Mail an Lars und Axel schreiben</a>
+
+### Einrichtung und Nutzung von Hypothesis
+
+Hypothesis ist ein freies und kostenloses Werkzeug, das die gemeinsame Diskussion an Texten im Browser ermöglicht. Verwenden Sie bei der erstmaligen Registrierung Ihren neuen Fantasienamen.
+
+<a class="button" target="_blank" href="https://web.hypothes.is/start/">Bei Hypothesis registrieren</a>
+
+Machen Sie sich vertraut mit den Funktionen von Hypothesis. [Ein englischsprachiger Artikel](https://web.hypothes.is/help/annotation-basics/) beschreibt die Oberfläche von Hypothesis sehr genau. Bei Problemen finden Sie Hilfe [auf der Website von Hypothesis](https://web.hypothes.is/help/).
+
+[^1]: Hypothesis wird in den USA gehostet und [hält sich an die Anforderungen der DSGVO](https://web.hypothes.is/privacy/).