h-entry indieweb implementation

themes/brainbaking-minimal/assets/sass/_blockquote.sass

@@ -1,13 +1,26 @@
+@mixin block-960
+  width: calc(100% - -220px + 0px)
+  margin-left: -90px
+
+@mixin block-1120
+  width: calc(100% - -260px + 0px)
+  margin-left: -130px
+
+header
+  @media (min-width: 960px)
+    @include block-960
+
+  @media (min-width: 1120px)
+    @include block-1120
+
 blockquote 
   font-family: $font-alt-stack
   margin-left: 3rem
   @media (min-width: 960px)
-    width: calc(100% - -220px + 0px)
-    margin-left: -90px
+    @include block-960
 
   @media (min-width: 1120px)
-    width: calc(100% - -260px + 0px)
-    margin-left: -130px
+    @include block-1120
 
   opacity: 0.8
   position: relative

themes/brainbaking-minimal/assets/sass/_brainbaking.sass

@@ -73,8 +73,7 @@ pre
 // fix FF letter float - https://stackoverflow.com/questions/6737175/firefox-specific-margin
 @-moz-document url-prefix()
   main
-    &.post article > p:first-of-type::first-letter,
-    &.essays article > p:first-of-type::first-letter
+    &.post .content > p:first-of-type::first-letter
       margin-top: 10px    
 
 
@@ -90,6 +89,14 @@ main
   @media (min-width: 1600px)
     max-width: 930px !important
 
+  &.post .content > p:first-of-type::first-letter
+      font-size: 3.05em
+      font-weight: bold
+      line-height: 1.1em
+      float: left
+      margin-right: 10px
+
+
   article
     text-align: left
     margin-bottom: 1rem
@@ -102,13 +109,11 @@ main
     a
       border-bottom: 1px solid var(--accent)
 
-  &.post article > p:first-of-type::first-letter,
-  &.essays article > p:first-of-type::first-letter
-    font-size: 3.05em
-    font-weight: bold
-    line-height: 1.1em
-    float: left
-    margin-right: 10px
+      &:link:hover, &:visited:hover
+        border-bottom: 1px solid white
+        border-radius: 1px
+        color: white
+        background-color: var(--accent)
 
 
   footer
@@ -128,9 +133,10 @@ main
     text-decoration: none !important
 
 header
+    text-align: center
     margin: auto
     padding-top: 1rem
-    padding-bottom: 1.5rem
+    padding-bottom: 3rem
 
     h1
       color: var(--accent)

themes/brainbaking-minimal/layouts/_default/single.html

@@ -2,20 +2,21 @@
 
 {{ partial "bigimg" . }}
 
-{{ partial "single-header" . }}
-<a id="top"></a>
 <main class="single {{ .Section }}">
-    <br>
-    <article>
-      {{ .Content | safeHTML }}
-    </article>
+	<article class="h-entry">
+		{{ partial "single-header" . }}
+		<a id="top"></a>
+	    <div class="e-content content">
+	  		{{ .Content | safeHTML }}
+	  	</div>
+	</article>
 
     {{ partial "single-related" . }}
     {{ partial "single-comments" . }}
 
-    <footer>
-      <svg class='icon icon-text' width='24' height='24'><use xlink:href='#up'></use></svg><a href="#top">Top</a> 
-    </footer>
+	<footer>
+	  <svg class='icon icon-text' width='24' height='24'><use xlink:href='#up'></use></svg><a href="#top">Top</a> 
+	</footer>
 </main>
 
 {{ partial "footer.html" . }}

themes/brainbaking-minimal/layouts/partials/single-header.html

@@ -1,7 +1,7 @@
 <header>
 
     {{ if .Title }}
-    <h1>
+    <h1 class="p-name">
         {{ with .Params.icontag }}
             <svg class='icon'><use xlink:href='#{{ . }}'></use></svg>
         {{ end }}
@@ -16,11 +16,13 @@
     {{ if isset .Params "date" }}
         <h3>
             {{ if isset .Params "date" }}
-            <time datetime='{{ .Date.Format "2006-01-02" }}'>
+            <time datetime='{{ .Date.Format "2006-01-02" }}' class="dt-published">
                 <svg class='icon icon-text' width='24' height='24'>
                     <use xlink:href='#cal1'></use>
                 </svg>
-                {{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
+                <a class="u-url" href="{{ .RelPermalink }}">
+                    {{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
+                </a>
             </time>
             {{ end }}
             {{ if isset .Params "categories" }}
@@ -30,7 +32,7 @@
                         <use xlink:href='#folder'></use>
                     </svg>
                     {{ range .Params.categories }}
-                        <a href="/categories/{{ . }}">{{ . }}</a> 
+                        <a class="p-category u-url" href="/categories/{{ . }}">{{ . }}</a> 
                     {{ end }}
                 </span>
             {{ end }}