finished up initial design work

author: luxagraf <sng@luxagraf.net> 2019-05-03 11:38:24 -0500
committer: luxagraf <sng@luxagraf.net> 2019-05-03 11:38:24 -0500
commit: 0e59ad7de18bffcf6a62f9ee61275b4951c27358 (patch)
tree: 514fca6efb90db53ca3061aa4ab8ba7d2a33cffe /design/templates
parent: 86fcf7ed710f41fc5324b638d092af54f4bb756f (diff)
7 files changed, 147 insertions, 94 deletions
diff --git a/design/templates/base.html b/design/templates/base.html
index 41a8033..9be4f51 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -7,17 +7,16 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" 
-          content="{% block metadescription %}Scott Gilbertson is a Technical Writer, Copywriter and Editor helping your company increase its online content to boost your traffic and attract new leads. {% endblock %}">
+          content="{% block metadescription %}{% endblock %}">
     <meta name="author" content="Scott Gilbertson">
     <link rel="alternate" 
           type="application/rss+xml" 
           title="RSS feed"
-          href="/rss/">
+          href="/rss">
     {%block stylesheet%}<link rel="stylesheet" 
           href="/media/screenv1.css?{% now "u" %}" 
           media="screen">{%endblock%}
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-    <!--<link rel="manifest" href="/manifest.webmanifest" /> -->
     {%block extrahead%}{%endblock%}
 </head>
 <body {%block bodyid%}{%endblock%}{%block bodyevents%}{%endblock%}>
@@ -26,30 +25,30 @@
         <header class="site-banner">
             <div id="logo">
                 <a href="/" title="Home">Libregraf</a>
-                <span class="tagline">Let's Tell Your Story</span>
+                <span class="tagline">Free Software &amp; nerdery</span>
             </div>
-            <nav>
+            <nav class="nav-menu">
                 <ul>
-                    <li><a href="/hire-me" title="">Hire Me</a></li>
-                    <li><a href="/about" title="">About Scott</a></li>
-                    <!--<li><a href="/portfolio" title="">Portfolio</a></li>
-                    <li><a href="/praise" title="">Praise</a></li>
-                    <li><a href="/contact" title="">Contact</a></li>
-                    <li><a href="/blog/" title="">Blog</a></li>-->
+                    <li><a href="/essays/" title="Previous articles">Archive</a></li>
+                    <li><a href="/linked/" title="Thoughts on Free, open source and Libre software news">Links</a></li>
+                    <li><a href="/about" title="About this site and the tools I use to make it">About</a></li>
+                    <li><a href="/contact" title="How to get in touch regarding Libregraf">Contact</a></li>
                 </ul>
             </nav>
         </header>
     </div>
     {% block content %}{% endblock %}
     {% block extrabody %}{% endblock %}
-    <footer class="bl">
-        <p id="license">
+    <footer>
+        <ul class="nav-menu footer-nav-menu">
+            <li><a href="/contact" title="How to get in touch regarding Libregraf">Contact</a></li>
+            <li><a href="/rss" title="RSS feed">RSS</a></li>
+            <li><a href="" title="Libregraf on twitter">Twitter</a></li>
+        </ul>
+        <p class="hed-tertiary">
             &copy; {% now "Y" %} 
-            <span class="h-card"><a class="p-name u-url" href="https://luxagraf.net/">Scott Gilbertson</a><data class="p-nickname" value="luxagraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>.
+            <span class="h-card"><a class="p-name u-url" href="https://libregraf.net/">Scott Gilbertson</a><data class="p-nickname" value="libregraf"></data><data class="p-locality" value="Athens"></data><data class="p-region" value="Georgia"></data><data class="p-country-name" value="United States"></data></span>.
         </p>
-        <ul class="footer-nav">
-            <li><a href="/contact" title="contact luxagraf">Contact</a></li>
-        </ul>
     </footer>
     </div>
     {% block js %}{% endblock%}
diff --git a/design/templates/blog/entry_detail.html b/design/templates/blog/entry_detail.html
new file mode 100644
index 0000000..ad4eda8
--- /dev/null
+++ b/design/templates/blog/entry_detail.html
@@ -0,0 +1,62 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+    <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting">
+            <header id="header" class="post-header">
+                <h1 class="p-name hed-primary" itemprop="headline">{{object.title|smartypants|safe}}</h1>
+                {% if object.sub_title %}<h2 class="p-summary hed-secondary">{{object.sub_title|smartypants|safe}}</h2>{%endif%}
+                <div class="post-linewrapper">
+                    <h5 class="hed-tertiary">Filed Under: {% for tag in object.tags.all %}<a href="/essays/tags/{{tag.slug}}" title="View all essays about {{tag}}">{{tag}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</h5>
+                    <time class="dt-published published dt-updated hed-tertiary" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
+                    <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span>
+                </div>
+            </header>
+        <div id="article" class="e-content entry-content" itemprop="articleBody">
+            {{object.body_html|safe|smartypants}}
+        </div>
+        </article>
+        {% with object.get_next_published as next %}
+        {% with object.get_previous_published as prev %}
+        <div class="nav-wrapper">
+        <nav id="page-navigation" {%if wildlife or object.field_notes.all or object.books.all %}{%else%}class="page-border-top"{%endif%}>
+            <ul>{% if prev%}
+                <li id="prev"><span class="bl">Previous:</span> 
+                    <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a>
+                </li>{%endif%}{% if next%}
+                <li id="next"><span class="bl">Next:</span> 
+                    <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a>
+                </li>{%endif%}
+            </ul>
+        </nav>{%endwith%}{%endwith%}
+        </div>
+        {% if object.related.all %}<div class="article-afterward related">
+            <h6 class="hedtinycaps">You might also enjoy</h6>
+            <ul class="article-card-list">{% for object in related %}
+                <li class="article-card-mini"><a href="{{object.get_absolute_url}}" title="{{object.title}}">
+                    <div class="post-image post-mini-image">
+                        {% if object.featured_image %}
+                            {% include "lib/img_archive.html" with image=object.featured_image nolightbox=True %}
+                            {% elif object.image %}
+                            {% include "lib/img_archive.html" with image=object.image nolightbox=True %}
+                            {% else %}
+                            <img src="{{object.get_image_url}}" alt="{{ object.title }}" class="u-photo post-image" itemprop="image" />{%endif%}
+                    </div>
+                    <h4 class="p-name entry-title post-title" itemprop="headline">{% if object.title %}{{object.title|safe|smartypants|widont}}{% else %}{{object.common_name}}{%endif%}</h4>
+                    {% if object.subtitle%}<h5 class="post-subtitle">{{object.subtitle|safe|smartypants}}</h5>{%endif%}
+                    <p class="p-author author hide" itemprop="author"><span class="byline-author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Scott Gilbertson</span></span></p>
+                    <p class="post-summary">
+                        <span class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
+                            {% if object.location.country_name == "United States" %}{{object.location.state_name}}{%else%}{{object.location.country_name}}{%endif%}
+                        </span>
+                    &ndash;
+                    <time class="dt-published published dt-updated post-date" datetime="{{object.pub_date|date:'c'}}"><span>{{object.pub_date|date:" Y"}}</span></time>
+                    </p> 
+                    </a>
+            </li>
+        {% endfor %}</ul>
+        </div>{%endif%}
+</div>
+{% endblock %}
diff --git a/design/templates/blog/entry_list.html b/design/templates/blog/entry_list.html
new file mode 100644
index 0000000..0931ac4
--- /dev/null
+++ b/design/templates/blog/entry_list.html
@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+    <main role="main" id="essay-archive" class="essay-archive archive-list">
+    <h1 class="topic-hed">Essays</h1>
+    <ul>{% for object in object_list %}
+        <li class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+            <span class="date dt-published hed-tertiary">{{object.pub_date|date:"F Y"}}</span>
+            <a class="u-url" href="{{object.get_absolute_url}}">
+            <h2 class="p-name hed-primary">{{object.title|safe|smartypants|widont}}</h2>
+            <p class="p-summary hed-secondary">{% if object.sub_title %}{{object.sub_title|safe|smartypants}}{%else%}{{object.metadescription}}{%endif%}</p>
+            </a>
+        </li>
+        {%endfor%}</ul>
+    </main>
+{% endblock %}
diff --git a/design/templates/homepage.html b/design/templates/homepage.html
index ed47bdb..ca8d3b5 100644
--- a/design/templates/homepage.html
+++ b/design/templates/homepage.html
@@ -2,87 +2,21 @@
 {% load typogrify_tags %}
 {% block sitename %}
 <head itemscope itemtype="http://schema.org/WebSite">
-    <title itemprop='name'>Everyone has a story - I'll help you tell yours</title>
+    <title itemprop='name'>Libregraf: Free software, open source, and web nerdery</title>
     <link rel="canonical" href="https://libregraf.net/" itemprop="url" />
 
 {% endblock %}
 
-{%block bodyid%}id="home" class="home"{%endblock%}
-
+{%block bodyid%}id="home" class="archive home"{%endblock%}
 {% block content %}
-<div class="content-wrapper hero-wrapper">
-    <div class="content hero">
-        <div class="hero-pic">
-            <img src="/media/bio.jpg" class="circle-pic" alt="Scott Gilbertson" />
-        </div>
-        <div class="hero-text">
-            <h1 class="hed-alpha">Need Content That Converts?</h1>
-            <h2 class="hed-beta">Let's find the weak spots in your content and strengthen them.</h2>
-            <h2 class="hed-beta">I'll create the content you need to amp up your traffic, leads and&nbsp;sales.</h2>
-            <h3 class="hed-alpha">My writing attracts, engages and converts.</h3>
-            <p>Whether you’re an entrepreneur, small business, or large company, my custom tailored content can catapult your online visibility and give you the traffic boost you need to attract new leads.</p>
-            <p><a href="/hire-me" class="btn btn-hollow">Let's Get Started</a></p>
-        </div>
-    </div>
-</div>
-<div class="content-wrapper">
-    <div class="content">
-        <h4 class="hed-gamma hed-border">How Can I Help You?</h4>
-        <p class="narrow">Since the dawn of the Internet I've been helping people discover the power of stories. Stories pull customers in, stories drive traffic. You don't need &#8220;marketing,&#8221; you need good stories. Here's a few ways I can help tell your story.</p>
-        <div class="home-card-wrapper">
-        <div class="flex">
-            <div class="card card-tiny">
-                <div class="card-image">
-                    <img src="/media/img/typing.jpg" alt="hands typing code on laptop" />
-                </div>
-                <h5 class="hed-delta">Technical Writing</h5>
-                <p>My specialty is making the technical easy to understand. I've used my expertise as a developer to write documentation, tutorials, and white papers. I&#8217;ve helped companies like Opera Software, Postmarkapp, Sifter tell their story to developers and users. Lets tell your story.</p>
-            </div>
-            <div class="card card-tiny">
-                <div class="card-image">
-                    <img src="/media/img/content.jpg" alt="hands typing code on laptop" />
-                </div>
-                <h5 class="hed-delta">Content Marketing</h5>
-                <p>Content marketing is marketing-speak for telling stories that captivate your audience. Whether you already have a blog or are starting from scratch, I can help refine your strategies and create content focused on achieving measurable results.</p>
-            </div>
-            <div class="card card-tiny">
-                <div class="card-image">
-                    <img src="/media/img/pen.jpg" alt="pen editing papers" />
-                </div>
-                <h5 class="hed-delta">Copywriting &amp; Copy editing</h5>
-                <p>Maybe you've already written your story, but could use a hand polishing it up. Whether you need some need some fine tuning of what you already have, or need some help organizing and streamlining your story, I can help.</p>
-            </div>
-        </div>
-            <a href="/hire-me" class="btn btn-hollow btn-link">Hire Me!</a>
-            <a href="https://google.com/" class="btn btn-hollow btn-link">Go Cheap</a>
-        </div>
-    </div>
-</div>
-<div class="content-wrapper">
-    <h6 class="hed-gamma hed-border">Companies I've helped</h6>
-        <div class="border-wrapper">
-        <ul class="list-inline home-logos">
-            <li><a href="https://wired.com/" title="Wired.com"><img src="/media/img/wired.png" alt="Wired logo" /></a></li>
-            <li><a href="https://opera.com/" title="Opera.com"><img src="/media/img/opera.png" alt="Opera Web Browser logo" /></a></li>
-            <li><a href="https://arstechnica.com/" title="ArsTechnica.com"><img src="/media/img/ars.png" alt="Ars logo" /></a></li>
-            <li><a href="https://sifterapp.com/" title="Sifter.com"><img src="/media/img/sifter.png" alt="Sifter logo" /></a></li>
-            <li><a href="https://www.boostmobile.com/" title="boostmobile"><img src="/media/img/boost.png" alt="Boost Mobile logo" /></a></li>
-            <li><a href="https://webmonkey.com/" title="Webmonkey.com"><img src="/media/img/webmonkey.jpg" alt="Webmonkey logo" /></a></li>
-            <!--<li><a href="" title=""><img src="/media/img/budgettravel.jpg" alt="Budget Travel logo" /></li>-->
-            <li><a href="https://postmarkapp.com/" title="Postmark"><img src="/media/img/postmark.png" alt="Postmarkapp logo" /></a></li>
-            <li><a href="https://theregister.co.uk/" title="The register"><img src="/media/img/register.png" alt="Register logo" /></a></li>
-        </ul>
-        </div>
-</div>
-
-<div class="content-wrapper">
-    <div class="content">
-        <div class="home-border-wrapper">
-            <h6 class="hed-gamma hed-border">What Clients Say</h6>
-        </div>
-    </div>
+<div class="content-narrow">
+{% for obj in object_list %}
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <span class="date dt-published hed-tertiary">{{obj.pub_date|date:"F d, Y"}}</span>
+    <h3 class="p-name hed-primary"><a class="u-repost-of" href="{{obj.link_url}}" title="Read the original story">{{obj.title|safe|smartypants|widont}}</a> &nbsp;<a class="hed-star u-url" href="{{obj.get_absolute_url}}">&#9733;</a></h3>
+    <div class="p-summary">{{obj.body_html|safe|smartypants}}</div>
+</article>
+{% if forloop.last %}{%else%}<hr />{%endif%}
+{% endfor %}
 </div>
 {% endblock %}
-
-#### Copywriting &amp; Copy editing
-Whether you need some writing done from scratch or just need some fine tuning of what you already have, I can help.
diff --git a/design/templates/links/link_detail.html b/design/templates/links/link_detail.html
new file mode 100644
index 0000000..500dfcb
--- /dev/null
+++ b/design/templates/links/link_detail.html
@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <span class="date dt-published blok">{{object.pub_date|date:"F d, Y"}}</span>
+    <h3 class="hed-primary"><a class="u-url" href="{{object.link_url}}" title="Read the original story">{{object.title|safe|smartypants|widont}}</a></h3>
+    <div class="p-summary">{{object.body_html|safe|smartypants}}</div>
+</article>
+</div>
+{% endblock %}
diff --git a/design/templates/links/link_list.html b/design/templates/links/link_list.html
new file mode 100644
index 0000000..f38771a
--- /dev/null
+++ b/design/templates/links/link_list.html
@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="essay-archive" class="archive"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+{% for obj in object_list %}
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <span class="date dt-published blok">{{obj.pub_date|date:"F d, Y"}}</span>
+    <h3 class="p-name hed-primary"><a class="u-repost-of" href="{{obj.link_url}}" title="Read the original story">{{obj.title|safe|smartypants|widont}}</a> &nbsp;<a class="star u-url" href="{{obj.get_absolute_url}}">&#9733;</a></h3>
+    <div class="p-summary">{{obj.body_html|safe|smartypants}}</div>
+</article>
+{% endfor %}
+</div>
+{% endblock %}
diff --git a/design/templates/pages/page.html b/design/templates/pages/page.html
new file mode 100644
index 0000000..095ccd1
--- /dev/null
+++ b/design/templates/pages/page.html
@@ -0,0 +1,12 @@
+{% extends 'base.html' %}
+{% load typogrify_tags %}
+{%block bodyid%}id="page" class="detail"{%endblock%}
+
+{% block content %}
+<div class="content-narrow">
+<article class="h-entry hentry" itemscope itemType="http://schema.org/Article">
+    <h3 class="hed-primary">{{object.title|safe|smartypants|widont}}</h3>
+    <div class="e-content">{{object.body_html|safe|smartypants}}</div>
+</article>
+</div>
+{% endblock %}
author	luxagraf <sng@luxagraf.net>	2019-05-03 11:38:24 -0500
committer	luxagraf <sng@luxagraf.net>	2019-05-03 11:38:24 -0500
commit	0e59ad7de18bffcf6a62f9ee61275b4951c27358 (patch)
tree	514fca6efb90db53ca3061aa4ab8ba7d2a33cffe /design/templates
parent	86fcf7ed710f41fc5324b638d092af54f4bb756f (diff)