From 366a658e70d30d02effcec455b00363085a4c2e2 Mon Sep 17 00:00:00 2001
From: aj <andrewjpack@gmail.com>
Date: Thu, 4 Apr 2019 16:47:39 +0100
Subject: [PATCH] separated padded style classes, fixed off kilter

---
 sarsoo/art/templates/art/all.html       |  2 +-
 sarsoo/art/templates/art/index.html     |  2 +-
 sarsoo/music/templates/music/index.html |  4 ++--
 sarsoo/templates/dev.html               |  4 ++--
 sarsoo/templates/index.html             |  2 +-
 static/style.css                        | 31 ++++++++++++++-----------
 6 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/sarsoo/art/templates/art/all.html b/sarsoo/art/templates/art/all.html
index 55045d3..dbcf050 100644
--- a/sarsoo/art/templates/art/all.html
+++ b/sarsoo/art/templates/art/all.html
@@ -13,7 +13,7 @@
 	<div class="row">
 		{% for image in row %}	
 	{#{% if loop.index0 % 3 == 0 %}<div class="row">{% endif %}#}
-		<div class="card col-pad-4">
+		<div class="card pad-4">
 			<img src="{{ staticroot }}art/{{ image.file_name }}.jpg" alt="{{ image.file_name  }}" class="col-pad-4">
 			<p><b>{{ image.description  }}</b></p>
 		</div>
diff --git a/sarsoo/art/templates/art/index.html b/sarsoo/art/templates/art/index.html
index d09c1a9..2936c70 100644
--- a/sarsoo/art/templates/art/index.html
+++ b/sarsoo/art/templates/art/index.html
@@ -6,7 +6,7 @@
 	{% for row in tags|batch(4) %}
 	<div class="row">
 		{% for tag in row %}
-		<div class="col-pad-3 card">	
+		<div class="pad-3 card">	
 			<h1>{{ tag.name }}</h1>
 			<img src="{{ staticroot }}art/{{ tag.splash.file_name }}.jpg" alt="{{ tag.splash.file_name  }}">
 			{% if tag.description %}<p>{{ tag.description }}{{ tag.image }}</p>{% endif %}
diff --git a/sarsoo/music/templates/music/index.html b/sarsoo/music/templates/music/index.html
index 7aa6aed..1f38f30 100644
--- a/sarsoo/music/templates/music/index.html
+++ b/sarsoo/music/templates/music/index.html
@@ -4,11 +4,11 @@
 
 {% block content %}
 	<div class="row">
-		<h1 class = "col-pad-12" style = "text-align: center; color: white;">most played of the last month</h1>
+		<h1 class = "pad-12" style = "text-align: center; color: white;">most played of the last month</h1>
 	</div>
 	<div class="row">
 		{% for album in albums %}
-			<div class = "col-pad-2 card">
+			<div class = "pad-2 card">
 				<img src="{{album.image[3].text}}">
 				<p style="text-align:center">{{ album.name }}<br>{{ album.artist.name -}}</p>
 				<p style="text-align:center">{{- album.playcount }} plays</p>
diff --git a/sarsoo/templates/dev.html b/sarsoo/templates/dev.html
index 3000c26..fab0bc7 100644
--- a/sarsoo/templates/dev.html
+++ b/sarsoo/templates/dev.html
@@ -4,14 +4,14 @@
 
 {% block content %}	
 	<div class="row">
-		<div class="col-pad-6 card">	
+		<div class="pad-6 card">	
 			<h1>fmframework</h1>
 			<p>a client for last.fm music tracking written in java</p>
 			<p>this project was important for learning how to interact with  REST APIs and implementing knowledge from my java classes at uni</p>
 			<p>using last fm tags to categorise and visualise data</p>
 			<a href="https://github.com/Sarsoo/fmframework" style="width:100%;" class="button">view source</a>
 		</div>
-		<div class="col-pad-6 card">	
+		<div class="pad-6 card">	
 			<h1>spotframework</h1>
 			<p>tool for exploring and interfacing with the spotify api</p>
 			<p>currently doing backups of playlists</p>
diff --git a/sarsoo/templates/index.html b/sarsoo/templates/index.html
index 205aa12..36f5ee5 100644
--- a/sarsoo/templates/index.html
+++ b/sarsoo/templates/index.html
@@ -19,7 +19,7 @@
 
 	<div class="gallerystrip row">
 		{% for image in art %}
-		<img src="{{ staticroot }}art/{{ image.file_name  }}.jpg" alt="{{ image.file_name  }}" class="col-pad-4">
+		<img src="{{ staticroot }}art/{{ image.file_name  }}.jpg" alt="{{ image.file_name  }}" class="pad-4">
 		{% endfor %}
 	</div>
 {% endblock %}
diff --git a/static/style.css b/static/style.css
index 027fa6e..7e21200 100644
--- a/static/style.css
+++ b/static/style.css
@@ -33,8 +33,8 @@ p {
 	padding: 15px;
 	text-decoration: none;
 	box-shadow: 2px 2px 4px  black;
-	-webkit-transition-duration: 0.4s;
-  	transition-duration: 0.4s;
+	/*-webkit-transition-duration: 0.4s;
+  	transition-duration: 0.4s;*/
 }
 
 .button:hover {
@@ -185,6 +185,11 @@ footer a {
 }
 
 [class*="col-"] {
+  	float: left;
+	width: 100%;
+}
+
+[class*="pad-"] {
   	float: left;
 	width: calc(100% - 20px);
 }
@@ -205,17 +210,17 @@ footer a {
   .col-12 {width: 100%;}
 
   /* For desktop: */
-  .col-pad-2 {width: calc(16.66% - 20px);}
-  .col-pad-3 {width: calc(25% - 20px);}
-  .col-pad-4 {width: calc(33.33% - 20px);}
-  .col-pad-5 {width: 41.66%;}
-  .col-pad-6 {width: calc(50% - 20px);}
-  .col-pad-7 {width: 58.33%;}
-  .col-pad-8 {width: 66.66%;}
-  .col-pad-9 {width: 75%;}
-  .col-pad-10 {width: 83.33%;}
-  .col-pad-11 {width: 91.66%;}
-  .col-pad-12 {width: calc(100% - 20px);}
+  .pad-2 {width: calc(16.66% - 20px);}
+  .pad-3 {width: calc(25% - 20px);}
+  .pad-4 {width: calc(33.33% - 20px);}
+  .pad-5 {width: calc(41.66% - 20px);}
+  .pad-6 {width: calc(50% - 20px);}
+  .pad-7 {width: calc(58.33% - 20px);}
+  .pad-8 {width: calc(66.66% - 20px);}
+  .pad-9 {width: calc(75% - 20px);}
+  .pad-10 {width: calc(83.33% - 20px);}
+  .pad-11 {width: calc(91.66% - 20px);}
+  .pad-12 {width: calc(100% - 20px);}
 }
 
 .row::after {