Add episode template

Fixes #11 and fixes #18
mattstratton · Sep 25, 2016 · 11a2b22 · 11a2b22
1 parent b81657d
commit 11a2b22
Show file tree

Hide file tree

Showing 9 changed files with 705 additions and 0 deletions.
diff --git a/layouts/episode/single.html b/layouts/episode/single.html
@@ -0,0 +1,57 @@
+{{ partial "header.html" . }}
+<div class="container middle_container">
+  <div class = "row">
+    <div class = "col-md-12">
+      <h1>{{ title .Title }}</h1>
+    </div>
+  </div>
+
+  <div class = "row">
+    <div class = "col-md-3">
+      <img src = "{{ .Params.episode_image }}" class="img-responsive episode_image" />
+    </div>
+    <div class = "row">
+      <div class = "col-md-8">
+        {{ .Description | markdownify }}
+      </div>
+    </div>
+    <div class = "row">
+      <div class = "col-md-12">
+        <audio controls>
+          <source src="{{ .Site.Params.media_prefix }}{{ .Params.podcast_file }}" type="audio/mpeg" />
+          <a href="{{ .Site.Params.media_prefix }}{{ .Params.podcast_file }}}">{{ .Title }}</a>
+        </audio>
+      </div>
+    </div>
+  </div>
+  <div class = "row">
+    <div class = "col-md-12">
+      <h2>Show Notes</h2>
+      {{ .Content }}
+    </div>
+  </div>
+  <div class = "row">
+    <div class = "col-md-12">
+      <div id="share"></div>
+    </div>
+  </div>
+  <div class = "row"> <!-- pager begin -->
+    <div class = "col-md-12">
+      <nav>
+        <ul class="pager">
+          {{ if .PrevInSection }}
+            <li class="previous"><a href="{{.PrevInSection.Permalink}}"><span aria-hidden="true">&larr;</span> Previous</a></li>
+          {{ else }}
+            <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Previous</a></li>
+          {{ end }}
+          {{ if .NextInSection }}
+            <li class="next"><a href="{{.NextInSection.Permalink}}">Next <span aria-hidden="true">&rarr;</span></a></li>
+          {{ else }}
+            <li class="next disabled"><a href="#">Next <span aria-hidden="true">&rarr;</span></a></li>
+          {{ end }}
+        </ul>
+      </nav>
+    </div>
+  </div><!-- pager end -->
+</div> <!-- end main container -->
+{{ partial "footer.html" . }}
diff --git a/layouts/partials/footer_scripts.html b/layouts/partials/footer_scripts.html
@@ -3,3 +3,11 @@
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="/js/bootstrap.min.js"></script>
 <script src="/js/bootstrap3_player.js"></script>
+<script src="/js/jssocials.min.js"></script>
+<script>
+    $("#share").jsSocials({
+        shares: ["twitter", "facebook", "linkedin", "pinterest"],
+        url: "{{ .Params.permalink }}",
+        text: "{{ title .Title }}"
+    });
+</script>
diff --git a/layouts/partials/head_includes.html b/layouts/partials/head_includes.html
@@ -4,5 +4,7 @@
 <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
 <link href="/css/bootstrap3_player.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Lato|Raleway" rel="stylesheet">
+<link type="text/css" href="/css/jssocials.css" rel="stylesheet" />
+<link type="text/css" href="/css/jssocials-theme-plain.css" rel="stylesheet" />
 
 {{ partial "google-analytics" . }}
diff --git a/static/css/jssocials-theme-plain.css b/static/css/jssocials-theme-plain.css
@@ -0,0 +1,43 @@
+.jssocials-share-link {
+  padding: .5em .6em;
+  border-radius: 0.3em;
+  border: 2px solid #acacac;
+  color: #acacac;
+  -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out;
+          transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; }
+  .jssocials-share-link:hover, .jssocials-share-link:focus, .jssocials-share-link:active {
+    border: 2px solid #939393;
+    color: #939393; }
+
+.jssocials-share-count-box {
+  position: relative;
+  height: 2.5em;
+  padding: 0 .3em;
+  margin-left: 0.4em;
+  background: #f5f5f5;
+  border-radius: 0.3em;
+  -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out;
+          transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; }
+  .jssocials-share-count-box:hover {
+    background: #e8e8e8; }
+    .jssocials-share-count-box:hover:after {
+      border-color: transparent #e8e8e8 transparent transparent; }
+  .jssocials-share-count-box:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0.75em;
+    left: -0.4em;
+    width: 0;
+    height: 0;
+    border-width: 0.5em 0.5em 0.5em 0;
+    border-style: solid;
+    border-color: transparent #f5f5f5 transparent transparent;
+    -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+            transform: rotate(360deg);
+    -webkit-transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out;
+            transition: background 200ms ease-in-out, color 200ms ease-in-out, border-color 200ms ease-in-out; }
+  .jssocials-share-count-box .jssocials-share-count {
+    line-height: 2.5em;
+    color: #acacac; }
diff --git a/static/css/jssocials.css b/static/css/jssocials.css
@@ -0,0 +1,59 @@
+.jssocials-shares {
+  margin: 0.2em 0; }
+
+.jssocials-shares * {
+  box-sizing: border-box; }
+
+.jssocials-share {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0.3em; }
+
+.jssocials-share:first-child {
+  margin-left: 0; }
+
+.jssocials-share:last-child {
+  margin-right: 0; }
+
+.jssocials-share-logo {
+  width: 1em;
+  vertical-align: middle;
+  font-size: 1.5em; }
+
+img.jssocials-share-logo {
+  width: auto;
+  height: 1em; }
+
+.jssocials-share-link {
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
+  line-height: 1; }
+  .jssocials-share-link.jssocials-share-link-count {
+    padding-top: .2em; }
+    .jssocials-share-link.jssocials-share-link-count .jssocials-share-count {
+      display: block;
+      font-size: .6em;
+      margin: 0 -.5em -.8em -.5em; }
+  .jssocials-share-link.jssocials-share-no-count {
+    padding-top: .5em; }
+    .jssocials-share-link.jssocials-share-no-count .jssocials-share-count {
+      height: 1em; }
+
+.jssocials-share-label {
+  padding-left: 0.3em;
+  vertical-align: middle; }
+
+.jssocials-share-count-box {
+  display: inline-block;
+  height: 1.5em;
+  padding: 0 0.3em;
+  line-height: 1;
+  vertical-align: middle;
+  cursor: default; }
+  .jssocials-share-count-box.jssocials-share-no-count {
+    display: none; }
+
+.jssocials-share-count {
+  line-height: 1.5em;
+  vertical-align: middle; }
diff --git a/static/css/site.css b/static/css/site.css
@@ -185,6 +185,9 @@
   text-align: left;
   padding: 0.5em 0;
 }
+.episode_image {
+  padding-bottom: 20px;
+}
 body {
   padding-top: 70px;
 }