From 10b731961af1ffa28323c4c4945c07d67b9c488d Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan-sebastian.tuomi@aalto.fi>
Date: Wed, 4 Jan 2017 12:43:55 +0200
Subject: [PATCH] =?UTF-8?q?Fix=20infoscreen=20S=C3=B6ss=C3=B6=20slide=20st?=
 =?UTF-8?q?yles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The slide is responsive and works also on other screen sizes than
1920x1080. Fixes #2.
---
 infoscreen/static/css/sosso.css   | 32 +++++++++++++++++++++++++++++++
 infoscreen/static/html/sosso.html | 19 +++++++++++-------
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/infoscreen/static/css/sosso.css b/infoscreen/static/css/sosso.css
index 3e284c6..6752833 100644
--- a/infoscreen/static/css/sosso.css
+++ b/infoscreen/static/css/sosso.css
@@ -1,3 +1,35 @@
+#header {
+    height: 30%;
+    width: 100%;
+    background-color:#7c1330;
+    text-align: center;
+}
+
+#header-image {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+}
+
+.article-row {
+    min-height: 20vh;
+    margin: 10px 10px 10px 10px;
+}
+
+.article-col {
+    max-height: 200px;
+}
+
+.article-title-col {
+    font-size: 60px;
+}
+
+.thumbnail {
+    height: 20vh;
+    width: auto;
+}
+
 #sossoimage { 
     height:300px;
     position: relative; 
diff --git a/infoscreen/static/html/sosso.html b/infoscreen/static/html/sosso.html
index 4eacdf6..1b16123 100644
--- a/infoscreen/static/html/sosso.html
+++ b/infoscreen/static/html/sosso.html
@@ -1,15 +1,20 @@
 <link rel="stylesheet" href="/static/css/sosso.css">
 <div ng-controller="SossoController">
-	<div style="height: 320px; width:1920px;background-color:#7c1330;">
-    	<img src="/static/img/sossoheader.png" >
+    <div id="header">
+        <img id="header-image" src="/static/img/sossoheader.png" >
     </div>
     <div id="container" ng-repeat="post in data.posts">
-        <div class="row" style="height:260px;">
-            <div class="col-md-4" style="max-height: 200px;">
-            	<img ng-src="{{ post.thumbnail_images.medium.url }}" style="max-height: 200px;">
+        <div class="article-row row">
+            <div class="article-col col-md-6">
+                <img class="thumbnail" ng-src="{{ post.thumbnail_images.medium.url }}">
+            </div>
+            <div>
+                <h1 class="col-md-6">
+                    <div class="article-title-col">
+                        {{ post.title }}
+                    </div>
+                </h1>
             </div>
-            <div><h1 class="col-md-6" style="font-size:48px;">{{ post.title }}</h1></div>
-            <div class="bottom-align-text col-md-6" style="font-size:24px">{{ post.date }}</div>
         </div>
     </div>
 </div>