fixed responsive margins, added art and dev
This commit is contained in:
aj
parent
8de229bf9b
commit
f92b55c95a
9
main.py
9
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]
|
||||
|
||||
@ -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 {
|
||||
|
||||
24
templates/art.html
Normal file
24
templates/art.html
Normal file
@ -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 %}
|
||||
@ -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>
|
||||
|
||||
9
templates/dev.html
Normal file
9
templates/dev.html
Normal file
@ -0,0 +1,9 @@
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block title %}dev{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user