aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGravatar Tom Willemsen2012-05-28 15:20:58 +0200
committerGravatar Tom Willemsen2012-05-28 15:20:58 +0200
commit9caad3f69f9086fd5dd5a3adf9af8925bb75553e (patch)
treeb9f79b9a2a047f428462bc28ebab1a06fdf02c4a
parente8c245eb7091366ef1384c97db97ff34c6d4fbf3 (diff)
downloadryuslash.org-9caad3f69f9086fd5dd5a3adf9af8925bb75553e.tar.gz
ryuslash.org-9caad3f69f9086fd5dd5a3adf9af8925bb75553e.zip
Change design
Make it look more lispy
-rw-r--r--aggregator/templates/aggregator/base.html40
-rw-r--r--aggregator/templates/aggregator/post_content.html16
-rw-r--r--aggregator/templates/aggregator/post_detail.html24
-rw-r--r--aggregator/templates/aggregator/posts.html26
-rw-r--r--aggregator/templatetags/__init__.py0
-rw-r--r--aggregator/templatetags/posts_extras.py12
-rw-r--r--static/main.css290
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">&quot;{{ post.updated }}&quot;</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; */
+/* } */