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

separated padded style classes, fixed off kilter

Browse Source
This commit is contained in:
aj 2019-04-04 16:47:39 +01:00
parent 4b3932586a
commit 366a658e70
6 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sarsoo/art/templates/art/all.html
View File

@ -13,7 +13,7 @@
<div class="row"> <div class="row">
{% for image in row %} {% for image in row %}
{#{% if loop.index0 % 3 == 0 %}<div class="row">{% endif %}#} {#{% 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"> <img src="{{ staticroot }}art/{{ image.file_name }}.jpg" alt="{{ image.file_name }}" class="col-pad-4">
<p><b>{{ image.description }}</b></p> <p><b>{{ image.description }}</b></p>
</div> </div>

2
sarsoo/art/templates/art/index.html
View File

@ -6,7 +6,7 @@
{% for row in tags|batch(4) %} {% for row in tags|batch(4) %}
<div class="row"> <div class="row">
{% for tag in row %} {% for tag in row %}
<div class="col-pad-3 card"> <div class="pad-3 card">
<h1>{{ tag.name }}</h1> <h1>{{ tag.name }}</h1>
<img src="{{ staticroot }}art/{{ tag.splash.file_name }}.jpg" alt="{{ tag.splash.file_name }}"> <img src="{{ staticroot }}art/{{ tag.splash.file_name }}.jpg" alt="{{ tag.splash.file_name }}">
{% if tag.description %}<p>{{ tag.description }}{{ tag.image }}</p>{% endif %} {% if tag.description %}<p>{{ tag.description }}{{ tag.image }}</p>{% endif %}

4
sarsoo/music/templates/music/index.html
View File

@ -4,11 +4,11 @@
{% block content %} {% block content %}
<div class="row"> <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>
<div class="row"> <div class="row">
{% for album in albums %} {% for album in albums %}
<div class = "col-pad-2 card"> <div class = "pad-2 card">
<img src="{{album.image[3].text}}"> <img src="{{album.image[3].text}}">
<p style="text-align:center">{{ album.name }}<br>{{ album.artist.name -}}</p> <p style="text-align:center">{{ album.name }}<br>{{ album.artist.name -}}</p>
<p style="text-align:center">{{- album.playcount }} plays</p> <p style="text-align:center">{{- album.playcount }} plays</p>

4
sarsoo/templates/dev.html
View File

@ -4,14 +4,14 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-pad-6 card"> <div class="pad-6 card">
<h1>fmframework</h1> <h1>fmframework</h1>
<p>a client for last.fm music tracking written in java</p> <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>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> <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> <a href="https://github.com/Sarsoo/fmframework" style="width:100%;" class="button">view source</a>
</div> </div>
<div class="col-pad-6 card"> <div class="pad-6 card">
<h1>spotframework</h1> <h1>spotframework</h1>
<p>tool for exploring and interfacing with the spotify api</p> <p>tool for exploring and interfacing with the spotify api</p>
<p>currently doing backups of playlists</p> <p>currently doing backups of playlists</p>

2
sarsoo/templates/index.html
View File

@ -19,7 +19,7 @@
<div class="gallerystrip row"> <div class="gallerystrip row">
{% for image in art %} {% 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 %} {% endfor %}
</div> </div>
{% endblock %} {% endblock %}

31
static/style.css
View File

@ -33,8 +33,8 @@ p {
padding: 15px; padding: 15px;
text-decoration: none; text-decoration: none;
box-shadow: 2px 2px 4px black; box-shadow: 2px 2px 4px black;
-webkit-transition-duration: 0.4s; /*-webkit-transition-duration: 0.4s;
transition-duration: 0.4s; transition-duration: 0.4s;*/
} }
.button:hover { .button:hover {
@ -185,6 +185,11 @@ footer a {
} }
[class*="col-"] { [class*="col-"] {
float: left;
width: 100%;
}
[class*="pad-"] {
float: left; float: left;
width: calc(100% - 20px); width: calc(100% - 20px);
} }
@ -205,17 +210,17 @@ footer a {
.col-12 {width: 100%;} .col-12 {width: 100%;}
/* For desktop: */ /* For desktop: */
.col-pad-2 {width: calc(16.66% - 20px);} .pad-2 {width: calc(16.66% - 20px);}
.col-pad-3 {width: calc(25% - 20px);} .pad-3 {width: calc(25% - 20px);}
.col-pad-4 {width: calc(33.33% - 20px);} .pad-4 {width: calc(33.33% - 20px);}
.col-pad-5 {width: 41.66%;} .pad-5 {width: calc(41.66% - 20px);}
.col-pad-6 {width: calc(50% - 20px);} .pad-6 {width: calc(50% - 20px);}
.col-pad-7 {width: 58.33%;} .pad-7 {width: calc(58.33% - 20px);}
.col-pad-8 {width: 66.66%;} .pad-8 {width: calc(66.66% - 20px);}
.col-pad-9 {width: 75%;} .pad-9 {width: calc(75% - 20px);}
.col-pad-10 {width: 83.33%;} .pad-10 {width: calc(83.33% - 20px);}
.col-pad-11 {width: 91.66%;} .pad-11 {width: calc(91.66% - 20px);}
.col-pad-12 {width: calc(100% - 20px);} .pad-12 {width: calc(100% - 20px);}
} }
.row::after { .row::after {