From 1bc41124c0ba36ad871bf3d85974152b104d7232 Mon Sep 17 00:00:00 2001
From: Aleksander Knutsen <al3xknutsen@gmail.com>
Date: Sat, 5 Nov 2022 19:06:22 +0100
Subject: [PATCH] Replace promo video with slideshow

---
 www/css/landing.css | 173 ++++++++++++++++++++++----------------------
 www/index.php       |  28 +------
 2 files changed, 92 insertions(+), 109 deletions(-)

diff --git a/www/css/landing.css b/www/css/landing.css
index dd6a09e..f0b1ea9 100644
--- a/www/css/landing.css
+++ b/www/css/landing.css
@@ -1,154 +1,157 @@
 header.landing {
-	display:block;
-	margin: 0;
-	margin-top: 3em;
-	padding: 3vh 10vw;
-	width: 80vw;
-	background-color: #002244;
-	color: #fff;
+    display: block;
+    margin: 0;
+    margin-top: 3em;
+    padding: 3vh 15vw;
+    width: 70vw;
+    background-color: #002244;
+    color: #fff;
 }
 
 header.landing .logo {
-	display: block;
-	width: 24vh;
-	height: 24vh;
-	margin: auto;
+    display: block;
+    width: 24vh;
+    height: 24vh;
+    margin: auto;
 }
 
 main {
-	margin-top: 0;
+    margin-top: 0;
 }
 
 .info {
-	text-align: center;
-	width: 100%;
-	padding: 0;
-	margin: 0;
+    text-align: center;
+    width: 100%;
+    padding: 0;
+    margin: 0;
 
-	overflow-y: hidden;
+    overflow-y: hidden;
 }
 
 .essentials {
-	width: 100%;
-	margin: 1em 0;
-	padding: 0;
-	list-style: none;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    width: 100%;
+    margin: 1em 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .essentials li {
-	display: inline-block;
+    display: inline-block;
 }
 
 .essentials a {
-	margin: 0 2em;
-	height: 100%;
+    margin: 0 2em;
+    height: 100%;
 }
 
 .essentials .focus {
-	padding: 0.8em;
-	font-size: 1.2em;
+    padding: 0.8em;
+    font-size: 1.2em;
 }
 
 img.float-right {
-	float: right;
-	max-width: 12em;
-	max-height: 12em;
-	vertical-align: baseline;
+    float: right;
+    max-width: 12em;
+    max-height: 12em;
+    vertical-align: baseline;
 }
 
 .calendar-events {
-	padding: 0;
-	margin-bottom: 1.5em;
-	list-style: none;
+    padding: 0;
+    margin-bottom: 1.5em;
+    list-style: none;
 }
 
 .calendar-events ul li :not(.date):not(.time) {
-	display: inline-block;
-	width: calc(100% - 7em);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+    display: inline-block;
+    width: calc(100% - 7em);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .calendar-events ul .date {
-	color: rgba(0,0,0,.5);
-	font-size: 0.8em;
-	margin-top: .2em;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 0.8em;
+    margin-top: 0.2em;
 }
 
 .calendar-events > li > p {
-	border-bottom: .1em dotted rgba(0,0,0,.2);
+    border-bottom: 0.1em dotted rgba(0, 0, 0, 0.2);
 }
 
 .calendar-events ul {
-	list-style: none;
-	padding: 0;
+    list-style: none;
+    padding: 0;
 }
 
-.calendar-events a, #ticker a {
-	text-decoration: none;
-	font-weight: bold;
-	color: black;
+.calendar-events a,
+#ticker a {
+    text-decoration: none;
+    font-weight: bold;
+    color: black;
 }
 
-.calendar-events a:hover, #ticker a:hover {
-	text-decoration: underline;
+.calendar-events a:hover,
+#ticker a:hover {
+    text-decoration: underline;
 }
 
 .calendar-events ul .time {
-	color: rgba(0,0,0,.5);
-	float: right;
+    color: rgba(0, 0, 0, 0.5);
+    float: right;
 }
 
-.calendar-events ul .icon, .calendar-events ul .date {
-	float: right;
-	margin-right: .5em;
+.calendar-events ul .icon,
+.calendar-events ul .date {
+    float: right;
+    margin-right: 0.5em;
 }
 
 main.contentsplit {
-	padding-top: 1em;
+    padding-top: 1em;
 }
 
 .contentsplit {
-	display: grid;
-	grid-template-columns: 2.5fr 2fr;
+    display: grid;
+    grid-template-columns: 2.5fr 2fr;
 }
 
 .gridr {
-	border-left: 0;
+    border-left: 0;
 }
 
 @media screen and (max-width: 50rem) {
-	.essentials {
-		flex-direction: column;
-	}
+    .essentials {
+        flex-direction: column;
+    }
 
-	.essentials a {
-		margin: .2em 0;
-	}
+    .essentials a {
+        margin: 0.2em 0;
+    }
 }
 
 @media screen and (max-width: 65rem) {
-	.contentsplit {
-		display: block;
-	}
+    .contentsplit {
+        display: block;
+    }
 
-	.gridr {
-		height: auto;
-		padding: 0;
-		margin-left: 0;
-		margin-bottom: 3em;
-	}
+    .gridr {
+        height: auto;
+        padding: 0;
+        margin-left: 0;
+        margin-bottom: 3em;
+    }
 
-	.gridr br {
-		margin: 0;
-		height: 0px;
-	}
+    .gridr br {
+        margin: 0;
+        height: 0px;
+    }
 
-	.gridl {
-		margin-top: 0;
-		padding: 0;
-	}
+    .gridl {
+        margin-top: 0;
+        padding: 0;
+    }
 }
diff --git a/www/index.php b/www/index.php
index 263b42a..48fb531 100644
--- a/www/index.php
+++ b/www/index.php
@@ -40,30 +40,10 @@ $doorTime = date("H:i", $doorEntry->time);
 	</nav>
 
 	<header class="landing">
-               <!-- HACK INCOMING! -->
-		<style>
-    		.iframe-container {
-    		  position: relative;
-    		  overflow: hidden;
-                  max-width: 100%;
-    		  max-height: 100%;
-                  aspect-ratio: 16/9;
-                  margin: 0 auto;
-    		}
-
-    		.responsive-iframe {
-    		  position: absolute;
-    		  top: 0;
-    		  left: 0;
-    		  bottom: 0;
-    		  right: 0;
-    		  width: 100%;
-                  aspect-ratio: 16/9;
-    		}
-		</style>
-		<div class="iframe-container" style="max-width: 100em;">
-    		<iframe class="responsive-iframe" src="https://www.youtube.com/embed/Uy6HAvMdeuA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
-                </div>
+	<div id="imageSlideshow">
+			<?php  include("galleri/slideshow.php"); ?>
+			<script src="js/slideshow.js"></script>
+		</div>
 		<div class="info">
 			<h2>Velkommen til Programvare&shy;verkstedet</h2>
 			<p>Programvareverkstedet (PVV) er en studentorganisasjon ved NTNU som vil skape et miljø for datainteresserte personer tilknyttet universitetet.</p>