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">
{% for image in row %}
{#{% 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">
<p><b>{{ image.description }}</b></p>
</div>

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

@ -6,7 +6,7 @@
{% for row in tags|batch(4) %}
<div class="row">
{% for tag in row %}
<div class="col-pad-3 card">
<div class="pad-3 card">
<h1>{{ tag.name }}</h1>
<img src="{{ staticroot }}art/{{ tag.splash.file_name }}.jpg" alt="{{ tag.splash.file_name }}">
{% 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 %}
<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 class="row">
{% for album in albums %}
<div class = "col-pad-2 card">
<div class = "pad-2 card">
<img src="{{album.image[3].text}}">
<p style="text-align:center">{{ album.name }}<br>{{ album.artist.name -}}</p>
<p style="text-align:center">{{- album.playcount }} plays</p>

4
sarsoo/templates/dev.html
View File

@ -4,14 +4,14 @@
{% block content %}
<div class="row">
<div class="col-pad-6 card">
<div class="pad-6 card">
<h1>fmframework</h1>
<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>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>
</div>
<div class="col-pad-6 card">
<div class="pad-6 card">
<h1>spotframework</h1>
<p>tool for exploring and interfacing with the spotify api</p>
<p>currently doing backups of playlists</p>

2
sarsoo/templates/index.html
View File

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

31
static/style.css
View File

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