Commit 646a8ba1 authored by Axel Dürkop's avatar Axel Dürkop
Browse files

Updates

parent a48b4d34
Pipeline #64556 passed with stages
in 1 minute and 8 seconds
...@@ -111,15 +111,9 @@ layout: default ...@@ -111,15 +111,9 @@ layout: default
<li>Diskussion: Dr. Ulrike Franke (Politikwissenschaftlerin, ECFR, Uni Oxford) und Johanna Polle <li>Diskussion: Dr. Ulrike Franke (Politikwissenschaftlerin, ECFR, Uni Oxford) und Johanna Polle
(Politikwissenschaftlerin, UHH)</li> (Politikwissenschaftlerin, UHH)</li>
</ul> </ul>
<h3 id="textvertiefung">Textvertiefung</h3> <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 <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>
Veranstaltung <a class="button" href="/lesen-und-diskutieren-zugete.html">Mitmachen beim Lesen und Diskutieren!</a>
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>
</div> </div>
...@@ -168,7 +162,7 @@ layout: default ...@@ -168,7 +162,7 @@ layout: default
<article id="team"> <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 <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 unterstützt mediendidaktisch die kritisch-konstruktive Auseinandersetzung mit ethischen Fragestellungen unserer
Zeit.</p> Zeit.</p>
...@@ -295,6 +289,32 @@ layout: default ...@@ -295,6 +289,32 @@ layout: default
</p> </p>
</div> </div>
</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> </article>
</section> </section>
\ No newline at end of file
...@@ -51,4 +51,4 @@ $on-laptop: 1050px !default; ...@@ -51,4 +51,4 @@ $on-laptop: 1050px !default;
// Import partials. // Import partials.
@import "partials/base", "partials/layout", "partials/timeline", @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";
...@@ -3,9 +3,20 @@ ...@@ -3,9 +3,20 @@
padding: 20px; padding: 20px;
margin-bottom: 40px; 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 { #zugete-flyer {
border: 1px solid #ddd; border: 1px solid #ddd;
margin: 10px 0 20px 0; margin: 10px 0 20px 0;
width: 100%;
} }
#bib-image { #bib-image {
......
...@@ -7,39 +7,36 @@ ...@@ -7,39 +7,36 @@
background-size: cover; background-size: cover;
position: relative; position: relative;
display: grid; display: grid;
grid-template-rows:150px 220px 1fr 50px; grid-template-rows: 150px 220px 1fr 50px;
grid-template-columns:40% 20% 40%; grid-template-columns: 40% 20% 40%;
/* stoerer */ /* stoerer */
grid-template-areas: grid-template-areas:
"nav nav nav" "nav nav nav"
"headline headline headline" "headline headline headline"
"symbols symbols symbols" "symbols symbols symbols"
". arrow ." ". arrow .";
;
/* ++++++ */ /* ++++++ */
height: 950px; height: 950px;
@include media-query($on-palm) { @include media-query($on-palm) {
height: auto; height: auto;
} }
@include media-query($on-palm) { @include media-query($on-palm) {
grid-template-rows:170px 220px 1fr 50px; grid-template-rows: 170px 220px 1fr 50px;
/* stoerer */ /* stoerer */
grid-template-areas: grid-template-areas:
"nav nav nav" "nav nav nav"
"headline headline headline" "headline headline headline"
"symbols symbols symbols" "symbols symbols symbols"
". arrow ." ". arrow .";
;
/* ++++++ */ /* ++++++ */
} }
.navigation{ .navigation {
grid-area: nav; grid-area: nav;
transition: all 0.4s ease; transition: all 0.4s ease;
display: flex; display: flex;
...@@ -47,12 +44,12 @@ ...@@ -47,12 +44,12 @@
position: fixed; position: fixed;
width: 70%; width: 70%;
padding-top: 2%; padding-top: 2%;
top:0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
#hoou_logo{ #hoou_logo {
margin-top: .8rem; margin-top: 0.8rem;
height: 4rem; height: 4rem;
} }
...@@ -60,7 +57,7 @@ ...@@ -60,7 +57,7 @@
width: 90%; width: 90%;
} }
.nav-wrapper{ .nav-wrapper {
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
...@@ -73,18 +70,18 @@ ...@@ -73,18 +70,18 @@
flex-wrap: nowrap; flex-wrap: nowrap;
flex-direction: column; flex-direction: column;
#hoou_logo{ #hoou_logo {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
} }
.logo{ .logo {
margin: 0.4rem 0; margin: 0.4rem 0;
height: 5rem; height: 5rem;
} }
} }
&.scroll{ &.scroll {
z-index: 999; z-index: 999;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
...@@ -95,7 +92,7 @@ ...@@ -95,7 +92,7 @@
.page-link { .page-link {
border-right: 2px solid $grey-color-light; border-right: 2px solid $grey-color-light;
&:last-of-type{ &:last-of-type {
border: 0; border: 0;
} }
} }
...@@ -107,7 +104,7 @@ ...@@ -107,7 +104,7 @@
} }
} }
h3{ h3 {
grid-area: headline; grid-area: headline;
align-self: center; align-self: center;
justify-content: center; justify-content: center;
...@@ -116,11 +113,12 @@ ...@@ -116,11 +113,12 @@
font-style: italic; font-style: italic;
font-weight: 600; font-weight: 600;
padding: 0; padding: 0;
margin: 0; margin: 50px 0 50px 0;
line-height: 1.2em;
} }
/* stoerer */ /* stoerer */
#stoerer{ #stoerer {
grid-area: stoerer; grid-area: stoerer;
justify-self: end; justify-self: end;
margin-right: 15%; margin-right: 15%;
...@@ -136,39 +134,39 @@ ...@@ -136,39 +134,39 @@
} }
/* ++++++ */ /* ++++++ */
.symbols_wrapper{ .symbols_wrapper {
grid-area: symbols; grid-area: symbols;
align-self: start; align-self: start;
display:flex; display: flex;
justify-content:space-around; justify-content: space-around;
@include media-query($on-laptop) { @include media-query($on-laptop) {
flex-wrap: wrap; flex-wrap: wrap;
} }
.symbolbox{ .symbolbox {
width: 280px; width: 280px;
justify-content: center; justify-content: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
&:hover{ &:hover {
text-decoration: none; text-decoration: none;
color: $hoou_gold; color: $hoou_gold;
} }
span{ span {
margin-bottom: -50px; margin-bottom: -50px;
.circle{ .circle {
background-color:white; background-color: white;
border-radius:50%; border-radius: 50%;
background-color: rgba(255,255,255,0.8); background-color: rgba(255, 255, 255, 0.8);
} }
} }
h2{ h2 {
background-color: rgba(255,255,255,0.8); background-color: rgba(255, 255, 255, 0.8);
padding: 2rem; padding: 2rem;
line-height: 1.5; line-height: 1.5;
padding-top: 4.8rem; padding-top: 4.8rem;
...@@ -178,14 +176,14 @@ ...@@ -178,14 +176,14 @@
} }
} }
.arrowBox{ .arrowBox {
text-align: center; text-align: center;
grid-area: arrow; grid-area: arrow;
.downArrow { .downArrow {
a{ a {
color: rgba($brand-color, 0.8); color: rgba($brand-color, 0.8);
&:hover{ &:hover {
color: $brand-color; color: $brand-color;
} }
} }
...@@ -193,14 +191,14 @@ ...@@ -193,14 +191,14 @@
} }
} }
nav{ nav {
line-height: $base-line-height * $base-font-size * 2.25; line-height: $base-line-height * $base-font-size * 2.25;
.nav-trigger { .nav-trigger {
display: none; display: none;
} }
.trigger{ .trigger {
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
...@@ -222,11 +220,11 @@ nav{ ...@@ -222,11 +220,11 @@ nav{
padding-right: 1rem; padding-right: 1rem;
border-right: 2px solid white; border-right: 2px solid white;
&:last-of-type{ &:last-of-type {
border: 0; border: 0;
} }
&:hover{ &:hover {
color: $hoou_gold; color: $hoou_gold;
text-decoration: none; text-decoration: none;
} }
...@@ -294,7 +292,7 @@ nav{ ...@@ -294,7 +292,7 @@ nav{
* Site content * Site content
*/ */
.video-wrapper{ .video-wrapper {
position: relative; position: relative;
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px; padding-top: 25px;
...@@ -322,7 +320,7 @@ nav{ ...@@ -322,7 +320,7 @@ nav{
* Site footer * Site footer
*/ */
footer{ footer {
background-color: $brand-color; background-color: $brand-color;
border-top: 2px solid lighten($brand-color, 15%); border-top: 2px solid lighten($brand-color, 15%);
display: flex; display: flex;
...@@ -330,78 +328,78 @@ footer{ ...@@ -330,78 +328,78 @@ footer{
align-items: center; align-items: center;
padding: $spacing-unit 15%; padding: $spacing-unit 15%;
p{ p {
width: 30%; width: 30%;
color: white; color: white;
} }
.logo-widget{ .logo-widget {
display: flex; display: flex;
width: 50%; width: 50%;
justify-content: space-around; justify-content: space-around;
a:first-child img{ a:first-child img {
height: 3rem; height: 3rem;
} }
a:last-child img{ a:last-child img {
height: 2.8rem; height: 2.8rem;
} }
} }
a{ a {
@include relative-font-size(1); @include relative-font-size(1);
line-height: 1; line-height: 1;
color: white !important; color: white !important;
margin-bottom: 1rem; margin-bottom: 1rem;
&:hover{ &:hover {
color: $grey-color; color: $grey-color;
text-decoration: underline; text-decoration: underline;
} }
} }
#footer-nav{ #footer-nav {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
@include media-query($on-laptop) { @include media-query($on-laptop) {
flex-wrap: wrap; flex-wrap: wrap;
a:first-child{ a:first-child {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
p{ p {
width: 100%; width: 100%;
} }
.logo-widget{ .logo-widget {
flex-direction: column; flex-direction: column;
margin-top: 1rem; margin-top: 1rem;
} }
#footer-nav{ #footer-nav {
align-items: flex-end; align-items: flex-end;
} }
} }
@include media-query($on-palm) { @include media-query($on-palm) {
p,
p, .logo-widget, #footer-nav{ .logo-widget,
#footer-nav {
width: 100%; width: 100%;
} }
.logo-widget{ .logo-widget {
align-items: center; align-items: center;
margin: 2rem 0; margin: 2rem 0;
} }
#footer-nav{ #footer-nav {
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
...@@ -409,8 +407,6 @@ footer{ ...@@ -409,8 +407,6 @@ footer{
} }
} }
/** /**
* Page content * Page content
*/ */
...@@ -441,8 +437,6 @@ footer{ ...@@ -441,8 +437,6 @@ footer{
@include relative-font-size(1.5); @include relative-font-size(1.5);
} }
/** /**
* Posts