Render with different templates for different years

pdc · Aug 28, 2012 · 7e2692c · 7e2692c
1 parent ce43f31
commit 7e2692c
Show file tree

Hide file tree

Showing 18 changed files with 551 additions and 9 deletions.
diff --git a/articles/static/2011/base.css b/articles/static/2011/base.css
@@ -0,0 +1,87 @@
+body {
+    margin: 0;
+    padding: 0;
+
+    font-family: "Courier New", "Courier", monospace;
+    background-color: #F0F0F7;
+    color: #334;
+}
+
+h1, h2 {
+    margin: 0 0 0.5em;
+    padding: 0.5em 10px;
+    -webkit-transform: rotate(-0.25deg);
+}
+
+.logo a {
+    color: inherit;
+    text-decoration: none;
+}
+.logo a:hover,
+.logo a:active {
+    color: #39C;
+    text-decoration: underline;
+}
+
+.logo q {
+    font-weight: 100;
+}
+.logo b {
+    font-weight: 700;
+}
+.logo i {
+    font-weight: 200;
+    font-style: normal;
+}
+
+.dates-and-venue {
+    float: right;
+    margin: 20px 10px;
+
+    font-size: 1.2em;
+    -webkit-transform: rotate(-0.5deg);
+}
+
+#main {
+    width: 960px;
+    margin: 0 auto;
+}
+
+section, #asides {
+    display: block;
+    float: left;
+}
+
+section#article {
+    width: 720px;
+}
+#asides {
+    width: 240px;
+}
+
+article dl,
+#article dl {
+    float: left;
+    margin: 0 10px;
+    width: 220px;
+
+    -webkit-transform: rotate(0.5deg);
+}
+
+article p {
+    margin: 1em 10px 1em 250px;
+}
+
+#asides table {
+    margin: 0 5px;
+    border-collapse: collapse;
+}
+
+#asides td,
+#asides th {
+    padding: 0.125em 5px;
+    text-align: left;
+    vertical-align: top;
+    border-bottom: 0.5px solid rgba(51, 51, 68, 0.5);
+}
+
diff --git a/articles/static/2011/front.css b/articles/static/2011/front.css
@@ -0,0 +1,44 @@
+header h1 {
+    float: left;
+    font-size: 3em;
+    margin: 0 0;
+    padding: 0.6em 20px 0.6em 140px;
+
+    font-family: "Univers", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: rgba(51, 51, 68, 0.5) 1px 1px 3px;
+    background: url(stickman-in-circle-100.png) 20px 50% no-repeat;
+    -webkit-transform: rotate(0.5deg);
+}
+
+h1 q {
+    font-weight: 100;
+}
+h1 b {
+    font-weight: 900;
+}
+h1 i {
+    font-weight: 200;
+    font-style: normal;
+}
+
+h2  {
+    font-family: "Univers", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: rgba(51, 51, 68, 0.5) 1px 1px 3px;
+    font-size: 1.44em;
+}
+
+#what {
+    width: 240px;
+}
+
+#what p {
+    margin: 1em 10px;
+}
+
+.twtr-widget {
+    margin: 1em 10px;
+}
diff --git a/articles/static/2011/inner.css b/articles/static/2011/inner.css
@@ -0,0 +1,35 @@
+
+header {
+    display: block;
+    float: left;
+    width: 100%;
+    min-height: 110px;
+    margin: 0;
+    padding: 0;
+
+    background: url(stickman-in-circle-100.png) 50% 50% no-repeat;
+}
+
+p.logo, h1, h2  {
+    float: left;
+
+    font-family: "Univers", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow: rgba(51, 51, 68, 0.5) 1px 1px 3px;
+}
+h1 {
+    font-size: 1.44em;
+    width: 700px;
+}
+h2 {
+    font-size: 1.2em;
+    width: 220px;
+}
+
+p.logo {
+    margin: 20px 20px;
+    padding: 0.5em 20px;
+    font-size: 2em;
+    -webkit-transform: rotate(1deg);
+}
diff --git a/articles/static/2011/stickman-in-circle-100.png b/articles/static/2011/stickman-in-circle-100.png
diff --git a/articles/templates/articles/2009/base.html b/articles/templates/articles/2009/base.html
@@ -0,0 +1,16 @@
+{% extends "articles/base.html" %}
+{% block header %}
+        <header>
+            <p class="logo">
+                <a href="{% url article-year-index year=year %}">
+                    <b>Caption</b>
+                    <i>2009</i>
+                    <q>is Away with the Faries</q>
+                </a>
+            </p>
+            <p class="dates-and-venue">
+                15–16 August 2009<br>
+                East Oxford Community Centre
+            </p>
+        </header>
+{% endblock %}
diff --git a/articles/templates/articles/2009/front.html b/articles/templates/articles/2009/front.html
@@ -0,0 +1,20 @@
+{% extends "articles/index.html" %}
+
+{% block title %}CAPTION{% for tag in tags %} {{ tag.name }}{% endfor %}{% endblock %}
+{% block morestyle %}
+        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}{{ year }}/front.css">
+{% endblock %}
+
+{% block header %}
+        <header>
+            <h1>
+                <b>Caption</b>
+                <i>2009</i>
+                <q>is Away with the Faries</q>
+            </h1>
+            <p class="dates-and-venue">
+                15–16 August 2009<br>
+                East Oxford Community Centre
+            </p>
+        </header>
+{% endblock %}
diff --git a/articles/templates/articles/2010/base.html b/articles/templates/articles/2010/base.html
@@ -0,0 +1,16 @@
+{% extends "articles/base.html" %}
+{% block header %}
+        <header>
+            <p class="logo">
+                <a href="{% url article-year-index year=year %}">
+                    <q>Mad Science</q>
+                    <b>Caption</b>
+                    <i>2010</i>
+                </a>
+            </p>
+            <p class="dates-and-venue">
+                31 July &amp; 1 August 2011<br>
+                East Oxford Community Centre
+            </p>
+        </header>
+{% endblock %}
diff --git a/articles/templates/articles/2010/front.html b/articles/templates/articles/2010/front.html
@@ -0,0 +1,20 @@
+{% extends "articles/index.html" %}
+
+{% block title %}CAPTION{% for tag in tags %} {{ tag.name }}{% endfor %}{% endblock %}
+{% block morestyle %}
+        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}{{ year }}/front.css">
+{% endblock %}
+
+{% block header %}
+        <header>
+            <h1>
+                <q>Mad Science</q>
+                <b>Caption</b>
+                <i>2010</i>
+            </h1>
+            <p class="dates-and-venue">
+                31 July &amp; 1 August 2011<br>
+                East Oxford Community Centre
+            </p>
+        </header>
+{% endblock %}
diff --git a/articles/templates/articles/2011/base.html b/articles/templates/articles/2011/base.html
@@ -0,0 +1,16 @@
+{% extends "articles/base.html" %}
+{% block header %}
+        <header>
+            <p class="logo">
+                <a href="{% url article-year-index year=year %}">
+                    <q>Austerity</q>
+                    <b>Caption</b>
+                    <i>2011</i>
+                </a>
+            </p>
+            <p class="dates-and-venue">
+                6–7 August 2011<br>
+                East Oxford Community Centre
+            </p>
+        </header>
+{% endblock %}
diff --git a/articles/templates/articles/2011/front.html b/articles/templates/articles/2011/front.html
@@ -0,0 +1,115 @@
+{% extends base_template %}
+{% load markup %}
+
+{% block title %}CAPTION{% for tag in tags %} {{ tag.name }}{% endfor %}{% endblock %}
+{% block morestyle %}
+        <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}{{ year }}/front.css">
+{% endblock %}
+
+{% block header %}
+        <header>
+            <h1>
+                <q>Austerity</q>
+                <b>Caption</b>
+                <i>2011</i>
+            </h1>
+            <p class="dates-and-venue">
+                6–7 August 2011<br>
+                East Oxford Community Centre
+            </p>
+        </header>
+{% endblock %}
+{% block main %}
+    {% if articles %}
+        {% with article=articles|first %}
+        <section id="article" {% if article.embedded_media %}class="has-embedded-media"{% endif %}>
+            <p class="above-heading">Latest news</p>
+                <h2>{{ article.title }}</h2>
+                {% include "articles/article-metadata-part.html" %}
+                <article>
+                    {% include "articles/article-embedded-media-part.html" %}
+                    {{ article.content|markdown }}
+                </article>
+        </section>
+        {% endwith %}
+    {% endif %}
+
+        <section id="what">
+            <h2>What  is <span>CAPTION</span>?</h2>
+            <p>
+                Oxford’s annual small-press comics convention is a unique, friendly event that brings comics creators, manga artists, comic-book readers and professionals together to mingle and discuss their work.
+            </p>
+            <ul class="features" id="features">
+                {% for info in infos %}
+                <li>
+                    {% if info.content %}
+                    <a href="{% url info-detail year=year info_name=info.name %}">
+                        <h3>{{ info.title }}</h3>
+                        {{ info.summary|markdown }}
+                        <b>Read more ></b>
+                    </a>
+                    {% else %}
+                    <h3>{{ info.title }}</h3>
+                    {{ info.summary|markdown }}
+                    {% endif %}
+                </li>
+                {% endfor %}
+            </ul>
+            <script type="text/javascript" src="{{ STATIC_URL }}2012/masonry.min.js"></script>
+            <script type="text/javascript">
+                var features = new Masonry(document.getElementById('features'), {
+                    columnWidth: 160
+                  });
+            </script>
+        </section>
+
+{% endblock %}
+{% block asides %}
+        <aside id="articles">
+            {% include "articles/article-list-part.html" %}
+        </aside>
+        <aside id="tweets">
+            <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
+<script>
+new TWTR.Widget({
+  version: 2,
+  type: 'profile',
+  rpp: 4,
+  interval: 30000,
+  width: 220,
+  height: 280,
+  theme: {
+    shell: {
+      background: '#3a6988',
+      color: '#FDFFD7'
+    },
+    tweets: {
+      background: '#dcc44c',
+      color: '#444444',
+      links: '#993322'
+    }
+  },
+  features: {
+    scrollbar: false,
+    loop: false,
+    live: false,
+    behavior: 'all'
+  }
+}).render().setUser('captioncon').start();
+</script>
+        </aside>
+{% endblock %}
+{% block disqusjs %}
+<script type="text/javascript">
+    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+    var disqus_shortname = 'caption';
+
+    /* * * DON'T EDIT BELOW THIS LINE * * */
+    (function () {
+        var s = document.createElement('script'); s.async = true;
+        s.type = 'text/javascript';
+        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
+        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
+    }());
+</script>
+{% endblock %}