Much better styles for blog.

master
Nick Sergeant 2012-06-05 19:57:19 -04:00
parent 8c0660cb47
commit d6d4bedbe9
5 changed files with 162 additions and 55 deletions

View File

@ -9,34 +9,31 @@
{% block body-class %}blog-site{% endblock %}
{% block html-class %}blog-site{% endblock %}
{% block page-title %}
{% if blog_user.username == 'nick' %}
Nick Sergeant
{% else %}
{{ blog_user.username }}'s blog
{% endif %}
{% endblock %}
{% block page-title %}{% if blog_user.username == 'nick' %}// Nick Sergeant {% else %}// {{ blog_user.username }}{% endif %}{% endblock %}
{% block page-description %}{% endblock %}
{% block sub-header %}{% endblock %}
{% block rochester-made %}{% endblock %}
{% block keyboard-shortcuts %}{% endblock %}
{% block intercom %}{% endblock %}
{% block sub-header %}
<header class="sub">
<div class="inner group">
<ul class="bcrumb">
<li class="prompt">//</li>
<li><a href="/">blog</a></li>
{% block breadcrumb %}{% endblock %}
<li class="rss">
<a href="/?rss">RSS</a>
</li>
</ul>
</div>
</header>
{% endblock %}
{% block aside %}
{% if not detail %}
<aside class="main">
<nav class="footer">
<ul>
<li class="blog">
<a href="/">
{% if blog_user.username == 'nick' %}
Nick Sergeant
{% elif blog_user.username == 'blog' %}
Snipt Blog
{% else %}
{{ blog_user.username }}'s blog
{% endif %}
</a>
</li>
</ul>
<ul class="powered">
<li class="snipt"><a href="https://snipt.net/">Blog powered by Snipt</a></li>
</ul>
@ -44,6 +41,21 @@
</aside>
{% endif %}
{% endblock %}
{% block keyboard-shortcuts %}{% endblock %}
{% block header %}{% endblock %}
{% block intercom %}{% endblock %}
{% block header %}
<header class="main">
<div class="inner group">
<h1>
<a href="/">
{% if blog_user.username == 'nick' %}
Nick Sergeant
{% elif blog_user.username == 'blog' %}
Snipt Blog
{% else %}
{{ blog_user.username }}
{% endif %}
</a>
</h1>
</div>
</header>
{% endblock %}

View File

@ -1,13 +1,18 @@
{% extends "blogs/themes/default/base.html" %}
{% block html-class %}detail blog-site{% endblock %}
{% block body-class %}detail blog-site{% endblock %}
{% block html-class %}detail blog-site blog-detail{% endblock %}
{% block body-class %}detail blog-site blog-detail{% endblock %}
{% block js %}
{{ block.super }}
window.detail = true;
{% endblock %}
{% block page-title %}// {{ snipt.title }} {{ block.super }}{% endblock %}
{% block breadcrumb %}
<li><span class="prompt">//</span> <a href="{{ snipt.get_absolute_url }}">{{ snipt.title }}</a></li>
{% endblock %}
{% block content %}
<section class="snipts" id="snipts">
{% with 'true' as detail %}

View File

@ -1,10 +1,3 @@
body.blog-detail section.main div.inner section.snipts article.snipt div.container {
width: 940px;
}
body.blog-detail div#disqus_thread {
width: 925px;
}
body.blog-site article.snipt div.group div.container {
width: 708px;
}
@ -14,10 +7,12 @@ body.blog-site article.snipt div.group div.container header {
body.blog-site article.snipt div.group div.container header h1 {
margin: 11px 15px;
}
body.blog-site section.main div.ruler {
z-index: 50;
}
body.blog-site section.main aside.main nav.footer ul.powered {
border-top: 1px solid #C0C0C0;
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #DDDDDD;
padding-top: 20px;
}
body.blog-site section.main aside.main nav.footer ul.powered li {
background: transparent url("/static/images/favicon.png") center left no-repeat;
@ -31,3 +26,47 @@ body.blog-site section.main aside.main nav.footer ul.powered li a:hover {
border-bottom: 1px solid #333;
color: #333;
}
body.blog-site header.main {
background: transparent url("/static/images/blog-header-bg.png") top left repeat;
height: auto;
}
body.blog-site header.main div.inner {
height: auto;
}
body.blog-site header.main div.inner h1 {
float: none;
position: static;
}
body.blog-site header.main div.inner h1 a {
background: none;
border-bottom: 2px solid transparent;
color: #2A535C;
font: normal 30px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
height: auto;
letter-spacing: -1px;
line-height: 30px;
margin: 17px 0 17px 16px;
text-decoration: none;
text-indent: 0;
width: auto;
-webkit-transition: border .08s linear;
-moz-transition: border .08s linear;
-o-transition: border .08s linear;
transition: border .08s linear;
}
body.blog-site header.main div.inner h1 a:hover {
border-bottom: 2px solid #3A5E67;
}
body.blog-site header.sub div.inner {
z-index: 51;
}
body.blog-detail section.main div.inner section.snipts article.snipt div.container {
width: 939px;
}
body.blog-detail div#disqus_thread {
width: 925px;
}
body.blog-detail header.sub div.inner ul.bcrumb {
width: 923px;
}

View File

@ -1,19 +1,5 @@
body.blog-detail {
section.main {
div.inner {
section.snipts {
article.snipt {
div.container {
width: 940px;
}
}
}
}
}
div#disqus_thread {
width: 925px;
}
}
$Helvetica: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
body.blog-site {
article.snipt {
div.group {
@ -31,12 +17,14 @@ body.blog-site {
}
}
section.main {
div.ruler {
z-index: 50;
}
aside.main {
nav.footer {
ul.powered {
border-top: 1px solid #C0C0C0;
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #DDDDDD;
padding-top: 20px;
li {
background: transparent url('/static/images/favicon.png') center left no-repeat;
@ -56,4 +44,67 @@ body.blog-site {
}
}
}
header.main {
background: transparent url('/static/images/blog-header-bg.png') top left repeat;
height: auto;
div.inner {
height: auto;
h1 {
float: none;
position: static;
a {
background: none;
border-bottom: 2px solid transparent;
color: #2A535C;
font: normal 30px $Helvetica;
height: auto;
letter-spacing: -1px;
line-height: 30px;
margin: 17px 0 17px 16px;
text-decoration: none;
text-indent: 0;
width: auto;
-webkit-transition: border .08s linear;
-moz-transition: border .08s linear;
-o-transition: border .08s linear;
transition: border .08s linear;
&:hover {
border-bottom: 2px solid #3A5E67;
}
}
}
}
}
header.sub {
div.inner {
z-index: 51;
}
}
}
body.blog-detail {
section.main {
div.inner {
section.snipts {
article.snipt {
div.container {
width: 939px;
}
}
}
}
}
div#disqus_thread {
width: 925px;
}
header.sub {
div.inner {
ul.bcrumb {
width: 923px;
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 B