Use semantic html in example

jaspervdj · May 21, 2017 · 7ad569d · 7ad569d
1 parent 2577bd4
commit 7ad569d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/data/example/css/default.css b/data/example/css/default.css
@@ -5,25 +5,17 @@ body {
     width: 600px;
 }
 
-div#header {
+header {
     border-bottom: 2px solid black;
     margin-bottom: 30px;
     padding: 12px 0px 12px 0px;
 }
 
-div#logo a {
-    color: black;
-    float: left;
-    font-size: 18px;
-    font-weight: bold;
-    text-decoration: none;
-}
-
-div#header #navigation {
+nav {
     text-align: right;
 }
 
-div#header #navigation a {
+nav a {
     color: black;
     font-size: 18px;
     font-weight: bold;
@@ -32,7 +24,7 @@ div#header #navigation a {
     text-transform: uppercase;
 }
 
-div#footer {
+footer {
     border-top: solid 2px black;
     color: #555;
     font-size: 12px;
@@ -49,8 +41,16 @@ h2 {
     font-size: 20px;
 }
 
-div.info {
+article .header {
     color: #555;
     font-size: 14px;
     font-style: italic;
 }
+
+.logo a {
+    color: black;
+    float: left;
+    font-size: 18px;
+    font-weight: bold;
+    text-decoration: none;
+}
diff --git a/data/example/templates/default.html b/data/example/templates/default.html
@@ -8,26 +8,26 @@
         <link rel="stylesheet" href="/css/default.css" />
     </head>
     <body>
-        <div id="header">
-            <div id="logo">
+        <header>
+            <div class="logo">
                 <a href="/">My Hakyll Blog</a>
             </div>
-            <div id="navigation">
+            <nav>
                 <a href="/">Home</a>
                 <a href="/about.html">About</a>
                 <a href="/contact.html">Contact</a>
                 <a href="/archive.html">Archive</a>
-            </div>
-        </div>
+            </nav>
+        </header>
 
-        <div id="content">
+        <main role="main">
             <h1>$title$</h1>
             $body$
-        </div>
+        </main>
 
-        <div id="footer">
+        <footer>
             Site proudly generated by
             <a href="http://jaspervdj.be/hakyll">Hakyll</a>
-        </div>
+        </footer>
     </body>
 </html>
diff --git a/data/example/templates/post.html b/data/example/templates/post.html
@@ -1,8 +1,11 @@
-<div class="info">
-    Posted on $date$
-    $if(author)$
-        by $author$
-    $endif$
-</div>
-
-$body$
+<article>
+    <section class="header">
+        Posted on $date$
+        $if(author)$
+            by $author$
+        $endif$
+    </section>
+    <section>
+        $body$
+    </section>
+</article>