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 %} + +
+

portraits

+
+
+
+ freddie gibbs +

freddie gibbs / piñata

+
+
+ me +

self portrait

+
+
+ temptation of saint anthony +

the temptation of saint anthony / salvador dalí

+
+
+{% 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 @@ sarsoo/{% block title %}{% endblock %} - +
@@ -13,6 +13,8 @@

- freddie gibbs - me - tempation of saint anthony + freddie gibbs + me + tempation of saint anthony
{% endblock %}