WIP #3

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <section class='entries'>
   <div class="h-feed">
-    {{ range (.Paginator 10).Pages }}
+    {{ range (.Paginator 13).Pages }}
 
       {{ if in .Params.categories "tv"}}
     
@@ -11,6 +11,10 @@
 
         {{- partial "calendar_card.html" . -}}
 
+      {{ else if in .Params.categories "network" }}
+
+        {{- partial "network_card.html" . -}}
+
       {{ else }}
 
         {{- partial "card.html" . -}}

layouts/partials/network_card.html

@@ -0,0 +1,32 @@
+    <div class='network card'>
+          <article class="h-entry network">
+            <header>
+              <h2 class="p-name"><a href="{{ .Permalink }}" class="u-url">{{ .Title }}</a></h2>
+               <div class="header-metadata">
+               <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">{{ .Date.Format "Jan 02, 2006" }}</time>
+               {{ if .Params.author }}
+               <div class='author'>{{.Params.author}}</div>
+               {{ end }}
+             </div>
+            </header>
+
+            <div class="p-summary {{if .Truncated}} truncated {{end}} img" >
+              <div class="summary-text">
+                {{ .Summary }}
+              </div>
+              {{ with (index (.Resources.ByType "image") 0) }}
+                {{ $thumb := .Fit "480x320"}}
+              <div class="summary-image"> 
+              <img src="{{ $thumb.Permalink }}"  alt="{{ .Title }}">
+              </div>
+              {{ end }}
+            </div>
+            {{ if .Truncated }}
+              <footer class='post-footer'>
+                <div class='read-more'><a href="{{ .RelPermalink }}">Read More…</a></div>
+                <div class='footer-filler'></div>
+              </footer>
+            {{ end }}
+            
+          </article>
+    </div>

static/css/main.css

@@ -219,6 +219,43 @@ footer.post-footer {
   font-size: 0.9rem;
 }
 
+/* network cards */
+
+.card.network{
+
+      border: 2px solid lightseagreen;
+      box-shadow:1em 1em 0 #d2d1c8;
+      background-color: lightgreen;
+      max-width: 360px;
+      margin-bottom: 2em;
+      flex: auto;
+      margin:  0 3em 3em 0;
+      align-self: start;
+      color: rgba(60,60,60,0.8);
+    }
+
+.h-entry.network header {
+  display: flex;
+  border-bottom: 2px solid lightseagreen;
+}
+
+.h-entry.network header h2{
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  margin: 0;
+  border-right: 2px solid lightseagreen;
+}
+
+.h-entry.network header h2:hover{
+    box-shadow: inset 4px 4px 0px lightseagreen;
+    cursor: pointer;
+}
+
+.h-entry.network header h2 a {
+  text-decoration: none;
+  color: royalblue;
+}
+
+
 /* calendar cards */
 
 .card.calendar {