CSS: use decoration on headers only for articles

Add an element "article" to the single page template, and change the CSS
to use the decoration for headers only for that kind of content.

Having decoration for all headers is distracting, it's more suited for
actual content.

We also don't need decoration for h1, only smaller headers.

2 files changed, 10 insertions, 6 deletions

diff --git a/users/fcuny/notes/layouts/_default/single.html b/users/fcuny/notes/layouts/_default/single.html
index b4c5443..165c568 100644
--- a/users/fcuny/notes/layouts/_default/single.html
+++ b/users/fcuny/notes/layouts/_default/single.html
@@ -1,5 +1,7 @@
 {{ define "main" }}
 
+<article class="article">
+
 <h1>{{ .Title }}</h1>
 
 <div class="meta">
@@ -18,9 +20,9 @@
   {{ if .Params.tags }}
   <div>
   {{ if eq (len .Params.tags) 1 }}
-  in tag
+  tag:
   {{ else }}
-  in tags
+  tags:
   {{ end }}
   {{ range $idx, $tag := .Params.tags }}
   <span class="meta_tags"><a href="/tags/{{ $tag | urlize }}/">{{ $tag }}</a></span>
@@ -38,4 +40,6 @@
 
 {{ .Content }}
 
+<article>
+
 {{ end }}
diff --git a/users/fcuny/notes/static/css/custom.css b/users/fcuny/notes/static/css/custom.css
index 95f5feb..2d7a36e 100644
--- a/users/fcuny/notes/static/css/custom.css
+++ b/users/fcuny/notes/static/css/custom.css
@@ -24,16 +24,16 @@ a {
 
 p { color: #1a1a19; }
 
-h1:before {
+article.article h2:before {
     content: '◉';
 }
-h2:before {
+article.article h3:before {
     content: '○';
 }
-h3:before {
+article.article h4:before {
     content: '✸';
 }
-h4:before {
+article.article h5:before {
     content: '✿';
 }