CSS/HTML fixes (flexboxes everywhere)

This commit is contained in:
Daniel Saunders 2017-10-29 01:42:57 -04:00
parent 5ba68d8793
commit afe676b1b8
2 changed files with 51 additions and 38 deletions

View File

@ -55,38 +55,42 @@
</div> </div>
<div class="box-wrap"> <div class="box-wrap">
<div class="box left"> <div class="left-column">
<h2>Recent Images</h2> <div class="box">
<ul> <h2>Recent Images</h2>
{% for post in recent_images %} <ul>
<li> {% for post in recent_images %}
<a href="{{ post.link }}"> <li>
<img src="{{ post.src }}" style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt=""> <a href="{{ post.link }}">
</a> <img src="{{ post.src }}" style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt="">
</li> </a>
{% endfor %} </li>
</ul> {% endfor %}
</ul>
</div>
</div> </div>
<div class="box right"> <div class="right-column">
<h2>Latest Posts</h2> <div class="box">
<ul> <h2>Latest Posts</h2>
{% for post in recent_posts %} <ul>
<li> {% for post in recent_posts %}
<strong>{{ post.board_name }}</strong>: <li>
<a href="{{ post.link }}"> <strong>{{ post.board_name }}</strong>:
{{ post.snippet }} <a href="{{ post.link }}">
</a> {{ post.snippet }}
</li> </a>
{% endfor %} </li>
</ul> {% endfor %}
</div> </ul>
<div class="box right"> </div>
<h2>Stats</h2> <div class="box">
<ul> <h2>Stats</h2>
<li>Total posts: {{ stats.total_posts }}</li> <ul>
<li>Unique posters: {{ stats.unique_posters }}</li> <li>Total posts: {{ stats.total_posts }}</li>
<li>Active content: {{ stats.active_content|filesize }}</li> <li>Unique posters: {{ stats.unique_posters }}</li>
</ul> <li>Active content: {{ stats.active_content|filesize }}</li>
</ul>
</div>
</div> </div>
</div> </div>

View File

@ -1,17 +1,26 @@
.box-wrap { .box-wrap {
max-width: 670px; max-width: 700px;
min-width: 332px; min-width: 332px;
margin: 30px auto; margin: 0 auto;
overflow: auto; overflow: auto;
padding: 0; padding: 0;
display: flex;
}
.left-column {
align-self: flex-start;
}
.right-column {
margin-left: auto;
} }
.box { .box {
background: white; background: white;
border: 1px solid #98E; border: 1px solid #98E;
width: 330px; width: 330px;
margin: 8px 0; margin: 30px 0;
margin-top: 0;
padding: 0; padding: 0;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
flex: 1;
} }
.box ul { .box ul {
padding: 2px 15px; padding: 2px 15px;
@ -20,13 +29,13 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
} }
.box.left { .left-column .box {
background: #efe; background: #efe;
color: #060; color: #060;
border: 1px solid #060; border: 1px solid #060;
float: left; float: left;
} }
.box.right { .right-column .box {
background: #eef; background: #eef;
color: #006; color: #006;
border: 1px solid #006; border: 1px solid #006;
@ -37,11 +46,11 @@
padding: 3px 7px; padding: 3px 7px;
font-size: 12pt; font-size: 12pt;
} }
.box.left h2 { .left-column .box h2 {
background: #9C6; background: #9C6;
color: #060; color: #060;
} }
.box.right h2 { .right-column .box h2 {
background: #59A; background: #59A;
color: white; color: white;
} }