From 9caad3f69f9086fd5dd5a3adf9af8925bb75553e Mon Sep 17 00:00:00 2001 From: Tom Willemsen Date: Mon, 28 May 2012 15:20:58 +0200 Subject: Change design Make it look more lispy --- aggregator/templates/aggregator/base.html | 40 ++- aggregator/templates/aggregator/post_content.html | 16 -- aggregator/templates/aggregator/post_detail.html | 24 -- aggregator/templates/aggregator/posts.html | 26 +- aggregator/templatetags/__init__.py | 0 aggregator/templatetags/posts_extras.py | 12 + static/main.css | 290 ++++++++++++++++------ 7 files changed, 260 insertions(+), 148 deletions(-) delete mode 100644 aggregator/templates/aggregator/post_content.html delete mode 100644 aggregator/templates/aggregator/post_detail.html create mode 100644 aggregator/templatetags/__init__.py create mode 100644 aggregator/templatetags/posts_extras.py diff --git a/aggregator/templates/aggregator/base.html b/aggregator/templates/aggregator/base.html index 8585b8c..215ec7e 100644 --- a/aggregator/templates/aggregator/base.html +++ b/aggregator/templates/aggregator/base.html @@ -10,22 +10,36 @@ -

- -

- ryuslash -

- Will this ever really be my website? - Activities - Posts -

- +

+ + ryuslash + +

+ +

{% block content %}{% endblock %}

diff --git a/aggregator/templates/aggregator/post_content.html b/aggregator/templates/aggregator/post_content.html deleted file mode 100644 index 46e642f..0000000 --- a/aggregator/templates/aggregator/post_content.html +++ /dev/null @@ -1,16 +0,0 @@ -

- - - {{ post.title }} - -

- -

- {% autoescape off %} - {{ post.content }} - {% endautoescape %} -

diff --git a/aggregator/templates/aggregator/post_detail.html b/aggregator/templates/aggregator/post_detail.html deleted file mode 100644 index eb39f95..0000000 --- a/aggregator/templates/aggregator/post_detail.html +++ /dev/null @@ -1,24 +0,0 @@ -{% extends "aggregator/base.html" %} - -{% block content %} -{% include "aggregator/post_content.html" with post=object %} - - -{% endblock %} diff --git a/aggregator/templates/aggregator/posts.html b/aggregator/templates/aggregator/posts.html index 0763ed2..094ad25 100644 --- a/aggregator/templates/aggregator/posts.html +++ b/aggregator/templates/aggregator/posts.html @@ -1,4 +1,5 @@ {% extends "aggregator/base.html" %} +{% load posts_extras %} {% block head %} -

- - {{ group.grouper }} - -

- - - {% for post in group.list %} - {% include "aggregator/post_content.html" %} + {% for post in list.object_list %} +

+ (defpost + {{ post.title|slugify|nameless }} + (

) +

+ {% autoescape off %}{{ post.content }}{% endautoescape %} +

+ "{{ post.updated }}") +

{% endfor %} -{% endfor %}

{% if list.has_previous %} diff --git a/aggregator/templatetags/__init__.py b/aggregator/templatetags/__init__.py new file mode 100644 index 0000000..e69de29 diff --git a/aggregator/templatetags/posts_extras.py b/aggregator/templatetags/posts_extras.py new file mode 100644 index 0000000..ca241b1 --- /dev/null +++ b/aggregator/templatetags/posts_extras.py @@ -0,0 +1,12 @@ +import re + +from django import template +from django.template.defaultfilters import stringfilter + +register = template.Library() + +@stringfilter +def nameless(value): + return re.sub(r'^(ryuslash|tom)[- ]?', '', value) + +register.filter('nameless', nameless) diff --git a/static/main.css b/static/main.css index 073bed1..4c8a460 100644 --- a/static/main.css +++ b/static/main.css @@ -6,7 +6,7 @@ a { text-decoration: none; - color: #bbbbbb; + color: orange; } a:hover { @@ -14,133 +14,259 @@ a:hover { } body { - background-color: #000000; + background-color: #252a2b; + color: #ffffff; font-family: "DejaVu Sans", sans-serif; + padding-left: 10px; } -pre { - margin: 20px 0; +body > header { + float: left; + position: fixed; } -.category { - display: block; - float: right; - padding: 0 5px; - border-left: 1px #202020 solid; - margin-left: 5px; +body > header > h1 { + font-size: 20px; } -.category:hover { - border-left: 1px #ffffff solid; - background-color: #dddddd; - color: #404040; +body > header > h1 > a:hover { text-decoration: none; } -.clear { - clear: both; +body > header > nav > ul { + list-style-type: none; + margin-top: 5px; } -.post { - background-color: #808080; - padding: 5px; - border: 1px #505050 solid; - margin-bottom: 15px; - color: #000000; +body > header > nav > ul > li { + margin: 0 3px; + font-weight: bold; + color: white; + border-width: 0 1px 0 1px; + border-style: solid; + border-color: #808080; } -.post h3 { - float: left; +body > header > nav > ul > li:hover { + background-color: #181818; + border-color: #404040; +} + +body > header > nav > ul > li.top { + border-top-width: 1px; + border-radius: 4px 4px 0 0; +} + +body > header > nav > ul > li.bottom { + border-bottom-width: 1px; + border-radius: 0 0 4px 4px; +} + +body > header > nav > ul > li > a { + padding: 3px 6px 3px 6px; + display: block; } -.post .postcontent { - margin-top: 17px; - clear: left; +body > header > nav > ul > li > a:hover { + text-decoration: none; + color: orangered; } -.wordpress pre.src { - background-color: #002b36; - color: #839496; +pre { + margin: 20px 0 20px 40px; font-family: "DejaVu Sans Mono", mono; + background-color: #181818; + border-radius: 10px; + padding: 5px; + color: #eeeeec; } -#logo { - float: left; +code { + font-family: "DejaVu Sans Mono", mono; + background-color: #181818; + padding: 1px 3px; + border-radius: 5px; + margin: 0 2px; + color: #eeeeec; } -#sitetitle { - background-color: #000000; - color: #ffffff; - height: 70px; - line-height: 70px; +article ul { + margin-left: 20px; } -#sitetitle #blue { - color: #4169E1; - position: relative; - top: -5px; +article img { + vertical-align: middle; } -#sitetitle #orange { - color: #ff9800; +#logo-blue { + color: orangered; position: relative; - top: 5px; + top: -10px; } -#sitesubtitle { - background-color: #404040; - color: #dddddd; - text-align: right; - height: 30px; - line-height: 30px; - border-top: 1px #808080 solid; - font-size: 16px; +p { + margin-bottom: 20px; } -#content { - width: 750px; - margin: 0 auto; - color: #ffffff; - margin-top: 2px; +#logo-orange { + color: orange; } -#content h2 { - margin-bottom: 5px; +.keyword { + font-weight: bold; + color: #799fcf; } -#feeds { - float: right; - background-color: #404040; +.variable-name { + color: #ef2929; } -#feeds a { - color: #dddddd; - display: block; - padding: 5px; - text-decoration: none; +.string { + color: #ad7fa8; + margin-left: 25px; } -#feeds a:hover { - background-color: #dddddd; - color: #404040; +.post { + margin-bottom: 20px; } -#pager { - background-color: #808080; - color: #000000; - padding: 0 5px; - position: relative; +.doc { + color: #babdb6; + margin-left: 25px; } -#pager .nav-prev { - float: left; +.doc a { + text-decoration: none; + color: #73d216; } -#pager .nav-next { - float: right; - text-align: right; +.doc a:hover { + text-decoration: underline; } -#pager #current { - text-align: center; +.doc p:last-child { + display: inline; } + +.content { + width: 750px; + margin: 10px auto; +} + + +/* .category { */ +/* display: block; */ +/* float: right; */ +/* padding: 0 5px; */ +/* border-left: 1px #202020 solid; */ +/* margin-left: 5px; */ +/* } */ + +/* .category:hover { */ +/* border-left: 1px #ffffff solid; */ +/* background-color: #dddddd; */ +/* color: #404040; */ +/* text-decoration: none; */ +/* } */ + +/* .clear { */ +/* clear: both; */ +/* } */ + +/* .post { */ +/* margin-left: 20px; */ +/* } */ + +/* .post, */ +/* .post header, */ +/* .post header h1, */ +/* .post .postcontent { */ +/* display: inline */ +/* } */ + +/* .wordpress pre.src { */ +/* background-color: #002b36; */ +/* color: #839496; */ +/* font-family: "DejaVu Sans Mono", mono; */ +/* } */ + +/* #logo { */ +/* float: left; */ +/* } */ + +/* #sitetitle { */ +/* background-color: #000000; */ +/* color: #ffffff; */ +/* height: 70px; */ +/* line-height: 70px; */ +/* } */ + +/* #sitetitle #blue { */ +/* color: #4169E1; */ +/* position: relative; */ +/* top: -5px; */ +/* } */ + +/* #sitetitle #orange { */ +/* color: #ff9800; */ +/* position: relative; */ +/* top: 5px; */ +/* } */ + +/* #sitesubtitle { */ +/* background-color: #404040; */ +/* color: #dddddd; */ +/* text-align: right; */ +/* height: 30px; */ +/* line-height: 30px; */ +/* border-top: 1px #808080 solid; */ +/* font-size: 16px; */ +/* } */ + +/* #content { */ +/* width: 750px; */ +/* margin: 0 auto; */ +/* color: #ffffff; */ +/* margin-top: 2px; */ +/* } */ + +/* #content h2 { */ +/* margin-bottom: 5px; */ +/* } */ + +/* #feeds { */ +/* float: right; */ +/* background-color: #404040; */ +/* } */ + +/* #feeds a { */ +/* color: #dddddd; */ +/* display: block; */ +/* padding: 5px; */ +/* text-decoration: none; */ +/* } */ + +/* #feeds a:hover { */ +/* background-color: #dddddd; */ +/* color: #404040; */ +/* } */ + +/* #pager { */ +/* background-color: #808080; */ +/* color: #000000; */ +/* padding: 0 5px; */ +/* position: relative; */ +/* } */ + +/* #pager .nav-prev { */ +/* float: left; */ +/* } */ + +/* #pager .nav-next { */ +/* float: right; */ +/* text-align: right; */ +/* } */ + +/* #pager #current { */ +/* text-align: center; */ +/* } */ -- cgit v1.2.3-54-g00ecf