diff options
author | Tom Willemsen | 2012-05-28 15:20:58 +0200 |
---|---|---|
committer | Tom Willemsen | 2012-05-28 15:20:58 +0200 |
commit | 9caad3f69f9086fd5dd5a3adf9af8925bb75553e (patch) | |
tree | b9f79b9a2a047f428462bc28ebab1a06fdf02c4a | |
parent | e8c245eb7091366ef1384c97db97ff34c6d4fbf3 (diff) | |
download | ryuslash.org-9caad3f69f9086fd5dd5a3adf9af8925bb75553e.tar.gz ryuslash.org-9caad3f69f9086fd5dd5a3adf9af8925bb75553e.zip |
Change design
Make it look more lispy
-rw-r--r-- | aggregator/templates/aggregator/base.html | 40 | ||||
-rw-r--r-- | aggregator/templates/aggregator/post_content.html | 16 | ||||
-rw-r--r-- | aggregator/templates/aggregator/post_detail.html | 24 | ||||
-rw-r--r-- | aggregator/templates/aggregator/posts.html | 26 | ||||
-rw-r--r-- | aggregator/templatetags/__init__.py | 0 | ||||
-rw-r--r-- | aggregator/templatetags/posts_extras.py | 12 | ||||
-rw-r--r-- | static/main.css | 290 |
7 files changed, 260 insertions, 148 deletions
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 @@ </head> <body> - <a href="/"><img src="/static/logo.png" id="logo"></a> - <header> - <hgroup> - <h1 id="sitetitle"> - <span id="blue">ryu</span><span id="orange">slash</span> - </h1> - <h2 id="sitesubtitle"> - Will this ever really be my website? - <a class="category" href="/activity/">Activities</a> - <a class="category" href="/post/">Posts</a> - </h2> - </hgroup> + <img src="/static/logo.png" alt="ryuslash.org" title="ryuslash.org"/> + <h1> + <a href="http://ryuslash.org"> + <span id="logo-blue">ryu</span><span id="logo-orange">slash</span> + </a> + </h1> + + <nav> + <ul> + {% if category == 'post' %} + <li class="selected top"> + {% else %} + <li class="top"> + {% endif %} + <a href="/">posts</a> + </li> + + {% if category == 'activity' %} + <li class="selected bottom"> + {% else %} + <li class="bottom"> + {% endif %} + <a href="/activity/">activities</a> + </li> + </ul> + </nav> </header> - <div id="content"> + <section class="content"> {% block content %}{% endblock %} </div> </body> 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 @@ -<article class="post"> - <header> - <h1> - <a href="{{ post.link }}"> - <img src="/static/images/logos/{{ post.icon }}" /> - {{ post.title }} - </a> - </h1> - </header> - - <div class="postcontent"> - {% autoescape off %} - {{ post.content }} - {% endautoescape %} - </div> -</article> 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 %} - -<div id="pager"> - {% with next=object.get_next_by_updated previous=object.get_previous_by_updated %} - {% if previous %} - <div class="nav-prev"> - <a href="/post/{{ previous.pk }}/" id="previous"> - {{ previous.title }}</a> - </div> - {% endif %} - - {% if next %} - <div class="nav-next"> - <a href="/post/{{ next.pk }}/" id="next">{{ next.title }}</a> - </div> - {% endif %} - {% endwith %} - <div class="clear"></div> - -</div> -{% 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 %} <link href="/feeds/posts/" rel="alternate" type="application/rss+xml" @@ -6,20 +7,19 @@ {% endblock %} {% block content %} -{% regroup list.object_list by updated.date as grouped_list %} -{% for group in grouped_list %} - <header> - <h2> - <time datetime="{{ group.grouper|date:"Y-m-d" }}"> - {{ group.grouper }} - </time> - </h2> - </header> - - {% for post in group.list %} - {% include "aggregator/post_content.html" %} + {% for post in list.object_list %} + <article class="post"> + (<span class="keyword">defpost</span> + <a href="{{ post.link }}" + class="variable-name">{{ post.title|slugify|nameless }}</a> + (<img src="/static/images/logos/{{ post.icon }}" width="16" + height="16"/>) + <div class="doc"> + {% autoescape off %}{{ post.content }}{% endautoescape %} + </div> + <span class="string">"{{ post.updated }}"</span>) + </article> {% endfor %} -{% endfor %} <div id="pager"> {% if list.has_previous %} diff --git a/aggregator/templatetags/__init__.py b/aggregator/templatetags/__init__.py new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/aggregator/templatetags/__init__.py 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; */ +/* } */ |