From f92b55c95af33eee91bb0fe1729c93d6a4d63715 Mon Sep 17 00:00:00 2001
From: aj <andrewjpack@gmail.com>
Date: Sun, 17 Feb 2019 13:05:06 +0000
Subject: [PATCH] fixed responsive margins, added art and dev

---
 main.py              |  9 ++++++++
 static/style.css     | 53 +++++++++++++++++++++++++++++++++++++++++---
 templates/art.html   | 24 ++++++++++++++++++++
 templates/base.html  |  4 +++-
 templates/dev.html   |  9 ++++++++
 templates/index.html |  6 ++---
 6 files changed, 98 insertions(+), 7 deletions(-)
 create mode 100644 templates/art.html
 create mode 100644 templates/dev.html

diff --git a/main.py b/main.py
index e780715..4d45dc8 100644
--- a/main.py
+++ b/main.py
@@ -11,6 +11,15 @@ def main():
 def music():
     return render_template('music.html')
 
+@app.route('/art')
+def art():
+    return render_template('art.html')
+
+@app.route('/dev')
+def dev():
+    return render_template('dev.html')
+
+
 if __name__ == '__main__':
     app.run(host='127.0.0.1', port=8080, debug=True)
 # [END gae_python37_app]
diff --git a/static/style.css b/static/style.css
index d394556..9c675b4 100644
--- a/static/style.css
+++ b/static/style.css
@@ -3,7 +3,7 @@
 }
 
 html {
-	font-family: 'Open Sans', arial;
+	font-family: 'Roboto', arial;
 }
 
 body {
@@ -22,10 +22,14 @@ p {
 	padding: 10px;
 }
 
+.row {
+	margin:auto;
+}
+
 .gallerystrip img {
 	height: auto;
-	margin: 0px;
 	border: 6px solid #484c55;
+	margin: 5px;	
 }
 
 div.gallerystrip {
@@ -71,6 +75,37 @@ h1.title {
 
 }
 
+div.card {
+	background-color: grey;
+	box-shadow: 4px 4px 8px black;
+	padding: 10px;
+	margin: 5px;
+	border-radius: 3px;
+}
+
+div.card h1 {
+	text-align: center;
+	color: white;
+	text-shadow: 1px 1px 2px #4f4f4f;
+}
+
+.card img {
+	width: 100%;
+	border: 3px solid #484c55;
+	border-radius: 3px;
+	margin-bottom: 8px;	
+}
+
+.card p {
+	margin-top: 20px;
+}
+
+h1.sectiontitle {
+	text-align:center;
+	color: white;
+	font-family: 'Megrim', sans-serif;
+}
+
 ul.navbar {
 	list-style-type: none;
 	border-radius: 5px 15px;
@@ -105,7 +140,7 @@ ul.navbar a:hover {
 
 ul.navbar li.right {float: right;}
 
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 600px) {
   ul.navbar li.right,
   ul.navbar li {float: none;}
 }
@@ -129,6 +164,18 @@ ul.navbar li.right {float: right;}
   .col-10 {width: 83.33%;}
   .col-11 {width: 91.66%;}
   .col-12 {width: 100%;}
+
+  /* For desktop: */
+  .col-pad-3 {width: calc(25% - 10px);}
+  .col-pad-4 {width: calc(33.33% - 10px);}
+  .col-pad-5 {width: 41.66%;}
+  .col-pad-6 {width: calc(50% - 10px);}
+  .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% - 10px);}
 }
 
 .row::after {
diff --git a/templates/art.html b/templates/art.html
new file mode 100644
index 0000000..1c67a46
--- /dev/null
+++ b/templates/art.html
@@ -0,0 +1,24 @@
+{% extends 'base.html' %}
+
+{% block title %}art{% endblock %}
+
+{% block content %}	
+	
+	<div class="row">
+		<h1 class="sectiontitle">portraits</h1>	
+	</div>
+	<div class="row">
+		<div class="card col-pad-4">
+			<img src="{{ url_for('static', filename='art/freddie.jpg') }}" alt="freddie gibbs" class="col-pad-4">
+			<p><b>freddie gibbs / piñata</b></p>
+		</div>
+		<div class="card col-pad-4">
+			<img src="{{ url_for('static', filename='art/self.jpg') }}" alt="me" class="col-pad-4">
+			<p><b>self portrait</b></p>
+		</div>
+		<div class="card col-pad-4">
+			<img src="{{ url_for('static', filename='art/horse.jpg') }}" alt="temptation of saint anthony" class="col-pad-4">
+			<p><b>the temptation of saint anthony / salvador dalí</b></p>
+		</div>
+	</div>
+{% endblock %}
diff --git a/templates/base.html b/templates/base.html
index 6f70193..f031be8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,7 +4,7 @@
 	<title>sarsoo/{% block title %}{% endblock %}</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-	<link href="https://fonts.googleapis.com/css?family=Megrim|Open+Sans:600" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Megrim|Roboto" rel="stylesheet">
 </head>
 <body>
 	<div>
@@ -13,6 +13,8 @@
 	<br><br>
 	<ul class="navbar">
 		<li><a href="/">home</a></li>
+		<li><a href="/dev">dev</a></li>
+		<li><a href="/art">art</a></li>
 		<li><a href="/music">music</a></li>
 		<li class="right"><a href="https://www.instagram.com/pack_it_in_/">art ig</a></li>
 		<li class="right"><a href="https://www.last.fm/user/sarsoo">last.fm</a></li>
diff --git a/templates/dev.html b/templates/dev.html
new file mode 100644
index 0000000..ed97df1
--- /dev/null
+++ b/templates/dev.html
@@ -0,0 +1,9 @@
+{% extends 'base.html' %}
+
+{% block title %}dev{% endblock %}
+
+{% block content %}	
+	<div class="row">
+	
+	</div>
+{% endblock %}
diff --git a/templates/index.html b/templates/index.html
index 1dc89c3..1e40526 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,8 +17,8 @@
 	</div>
 
 	<div class="gallerystrip row">
-		<img src="{{ url_for('static', filename='art/freddie.jpg') }}" alt="freddie gibbs" class="col-4">
-		<img src="{{ url_for('static', filename='art/self.jpg') }}" alt="me" class="col-4">
-		<img src="{{ url_for('static', filename='art/horse.jpg') }}" alt="tempation of saint anthony" class="col-4">
+		<img src="{{ url_for('static', filename='art/freddie.jpg') }}" alt="freddie gibbs" class="col-pad-4">
+		<img src="{{ url_for('static', filename='art/self.jpg') }}" alt="me" class="col-pad-4">
+		<img src="{{ url_for('static', filename='art/horse.jpg') }}" alt="tempation of saint anthony" class="col-pad-4">
 	</div>
 {% endblock %}