From d6d4bedbe9d7a8fe0e08ee886e2a82c0aa8bad19 Mon Sep 17 00:00:00 2001 From: Nick Sergeant Date: Tue, 5 Jun 2012 19:57:19 -0400 Subject: [PATCH] Much better styles for blog. --- .../templates/blogs/themes/default/base.html | 60 +++++++----- .../templates/blogs/themes/default/post.html | 9 +- media/css/blog-themes/default/style.css | 59 ++++++++++-- media/css/blog-themes/default/style.scss | 89 ++++++++++++++---- media/images/blog-header-bg.png | Bin 0 -> 176 bytes 5 files changed, 162 insertions(+), 55 deletions(-) create mode 100644 media/images/blog-header-bg.png diff --git a/blogs/templates/blogs/themes/default/base.html b/blogs/templates/blogs/themes/default/base.html index 039e24c..4ca0542 100644 --- a/blogs/templates/blogs/themes/default/base.html +++ b/blogs/templates/blogs/themes/default/base.html @@ -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 %} +
+
+
    +
  • //
    • +
  • blog
    • + {% block breadcrumb %}{% endblock %} +
  • + RSS +
    • +
+
+
+{% endblock %} {% block aside %} {% if not detail %} {% endif %} {% endblock %} -{% block keyboard-shortcuts %}{% endblock %} -{% block header %}{% endblock %} -{% block intercom %}{% endblock %} + +{% block header %} +
+
+

+ + {% if blog_user.username == 'nick' %} + Nick Sergeant + {% elif blog_user.username == 'blog' %} + Snipt Blog + {% else %} + {{ blog_user.username }} + {% endif %} + +

+
+
+{% endblock %} diff --git a/blogs/templates/blogs/themes/default/post.html b/blogs/templates/blogs/themes/default/post.html index 1ceec97..d174434 100644 --- a/blogs/templates/blogs/themes/default/post.html +++ b/blogs/templates/blogs/themes/default/post.html @@ -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 %} +
  • // {{ snipt.title }}
    • +{% endblock %} + {% block content %}
    {% with 'true' as detail %} diff --git a/media/css/blog-themes/default/style.css b/media/css/blog-themes/default/style.css index 891e1e3..d40b02f 100644 --- a/media/css/blog-themes/default/style.css +++ b/media/css/blog-themes/default/style.css @@ -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; +} diff --git a/media/css/blog-themes/default/style.scss b/media/css/blog-themes/default/style.scss index 2bb0bbf..33eb4af 100644 --- a/media/css/blog-themes/default/style.scss +++ b/media/css/blog-themes/default/style.scss @@ -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; + } + } + } } diff --git a/media/images/blog-header-bg.png b/media/images/blog-header-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..56e2f12f3b20a469c180d213997708b1be44cc0b GIT binary patch literal 176 zcmeAS@N?(olHy`uVBq!ia0vp^qCl+7!3-pQUTqWsQW60^A+A4v{`~&^``52u|Ni~^ z`}gmE|Ni~>@#D*vFUKXWd>=hl4QeCFN$ c$XPd;Ys2`sOVs$)fW|X;y85}Sb4q9e0E