sarsoo/sarsooxyz.pyreact
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity

fixed responsive margins, added art and dev

Browse Source
This commit is contained in:
aj 2019-02-17 13:05:06 +00:00
parent 8de229bf9b
commit f92b55c95a
6 changed files with 98 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
main.py
View File

@ -11,6 +11,15 @@ def main():
def music(): def music():
return render_template('music.html') 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__': if __name__ == '__main__':
app.run(host='127.0.0.1', port=8080, debug=True) app.run(host='127.0.0.1', port=8080, debug=True)
# [END gae_python37_app] # [END gae_python37_app]

53
static/style.css
View File

@ -3,7 +3,7 @@
} }
html { html {
font-family: 'Open Sans', arial; font-family: 'Roboto', arial;
} }
body { body {
@ -22,10 +22,14 @@ p {
padding: 10px; padding: 10px;
} }
.row {
margin:auto;
}
.gallerystrip img { .gallerystrip img {
height: auto; height: auto;
margin: 0px;
border: 6px solid #484c55; border: 6px solid #484c55;
margin: 5px;
} }
div.gallerystrip { 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 { ul.navbar {
list-style-type: none; list-style-type: none;
border-radius: 5px 15px; border-radius: 5px 15px;
@ -105,7 +140,7 @@ ul.navbar a:hover {
ul.navbar li.right {float: right;} 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.right,
ul.navbar li {float: none;} ul.navbar li {float: none;}
} }
@ -129,6 +164,18 @@ ul.navbar li.right {float: right;}
.col-10 {width: 83.33%;} .col-10 {width: 83.33%;}
.col-11 {width: 91.66%;} .col-11 {width: 91.66%;}
.col-12 {width: 100%;} .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 { .row::after {

24
templates/art.html Normal file
View 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
templates/base.html
View File

@ -4,7 +4,7 @@
<title>sarsoo/{% block title %}{% endblock %}</title> <title>sarsoo/{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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 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> </head>
<body> <body>
<div> <div>
@ -13,6 +13,8 @@
<br><br> <br><br>
<ul class="navbar"> <ul class="navbar">
<li><a href="/">home</a></li> <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><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.instagram.com/pack_it_in_/">art ig</a></li>
<li class="right"><a href="https://www.last.fm/user/sarsoo">last.fm</a></li> <li class="right"><a href="https://www.last.fm/user/sarsoo">last.fm</a></li>

9
templates/dev.html Normal file
View File

@ -0,0 +1,9 @@
{% extends 'base.html' %}
{% block title %}dev{% endblock %}
{% block content %}
<div class="row">
</div>
{% endblock %}

6
templates/index.html
View File

@ -17,8 +17,8 @@
</div> </div>
<div class="gallerystrip row"> <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/freddie.jpg') }}" alt="freddie gibbs" class="col-pad-4">
<img src="{{ url_for('static', filename='art/self.jpg') }}" alt="me" class="col-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-4"> <img src="{{ url_for('static', filename='art/horse.jpg') }}" alt="tempation of saint anthony" class="col-pad-4">
</div> </div>
{% endblock %} {% endblock %}