font family and track lyrics

_layouts/album.html

@@ -104,7 +104,7 @@ lang: en
 
             </div>
           </div>
-          <div class="content" style="font-family: monospace;font-size: 16px;margin-top:60px;">
+          <div class="content" style="font-size: 16px;margin-top:60px;">
             {{ content }}
             <p>{{ page.credits }}</p>
           </div>

_layouts/post.html

@@ -102,7 +102,7 @@
 
             </div>
           </div>
-          <div class="content editable" style="font-family: monospace;font-size: 16px;margin-top:60px;">
+          <div class="content editable" style="font-size: 16px;margin-top:60px;">
             {{ content }}
           </div>
         </div>

_layouts/track.html

@@ -7,14 +7,13 @@ layout: default
 <section
   class="banner onload-image-fade-in onload-content-fade-right style3 fullscreen content-align-center image-position-center" style="background-image:url('{{ site.mediaurl }}/{{ page.slug }}.jpeg');background-size: cover; background-repeat: no-repeat;">
   <div style="z-index:0;position:absolute; top:0; left:0; width:100%;min-height:100%;background-color: rgba(13, 13 ,13, 0.5);"></div>
-  <div class="content" style="z-index:1">
+  <div id="mainwrap" class="content" style="z-index:1">
     <h1 style="margin-top:80px">{{ page.common.title }}</h1>
     <p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong>
       <br />{{ page.common.year }}
     </p>
 
     <p><strong><span id="tracktime"></span></strong><span id="{{ page.common.title | slugify | remove: '-'  }}"></span></strong></p> 
-        
     
       <script type="text/javascript">
         var {{ page.common.title | slugify | remove: '-'  }}timestamp = {{ page.format.duration | round }};
@@ -25,10 +24,21 @@ layout: default
         var theSpan = document.getElementById("{{ page.common.title | slugify | remove: '-'  }}");
         theSpan.innerHTML = {{ page.common.title | slugify | remove: '-' }}formatted;
       </script>
-
  
     <ul class="actions stacked">
-      <li><button id="mu_pause" class="button small icon solid fa-play">Play dat!</button></li>
+      <li><button id="mu_pause" class="button icon solid fa-play">Play dat!</button></li>
+    </ul>
+  </div>
+  <div id="noJSalbum" class="content" style="z-index:1">
+    <h1 style="margin-top:80px">{{ page.common.title }}</h1>
+    <p><strong>{% for style in page.common.genre %}{{ style }}{% endfor %}</strong> by <strong>{{ page.common.artist }}</strong>
+      <br />{{ page.common.year }}
+    </p>
+
+    <p><strong>{% assign round_seconds = page.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</strong></p> 
+        
+    <ul class="actions stacked">
+      <li><a class="button icon solid fa-play" target="_blank" rel="noopener" href="{{ site.mediaurl }}/{{ page.albumSlug }}/{{ page.trackSlug }}.mp3">Play dat!</a></li>
     </ul>
   </div>
 
@@ -44,23 +54,33 @@ layout: default
       <section style="padding-top:40px">
         {% include author.html %}
         <!-- Content -->
-        {% if page.all.UNSYNCEDLYRICS != nil %}
         <div class="content">
-          {% unless page.all.UNSYNCEDLYRICS == '' %}<h2>Lyrics</h2>{% endunless %}
+          {% if page.all.UNSYNCEDLYRICS and page.all.USLT %}
-          <p style="font-family: monospace;font-size:16px;">
+          <p style="font-size:16px;">
+            {{ page.all.USLT.text | newline_to_br }}
+          </p>
+          {% elsif page.all.USLT and page.all.UNSYNCEDLYRICS == nil %}
+          <p style="font-size:16px;">
+            {{ page.all.USLT.text | newline_to_br }}
+          </p>
+          {% elsif page.all.UNSYNCEDLYRICS and page.all.USLT == nil %}
+          <p style="font-size:16px;">
             {{ page.all.UNSYNCEDLYRICS | newline_to_br }}
           </p>
-          <p>credits:
+          {% endif %}
+          <p>
             {{ page.all.Comment }}
           </p>
         </div>
-        {% endif %}
       </section>
     </div>
   </div>
 </section>
-
+{% for post in site.posts %}
+{% if post.album == page.albumSlug %}
 {% include streamer.html %}
+{% endif %}
+{% endfor %}
 <!-- Page navigation -->
 <section class="wrapper style1 align-center">
   <div class="inner">

_sass/_set.scss

@@ -373,7 +373,7 @@ div.content {
     flex: 1 0 250px;
     margin: 0;
     font-size: 12px;
-    font-family: monospace;
+    font-family: _font(family-fixed);
   }
   @media only screen and (max-width: 569px) {
     p {

_sass/components/_button.scss

@@ -21,7 +21,7 @@
 		cursor: pointer;
 		display: inline-block;
     font-weight: _font(weight-bold);
-    font-family: monospace;
+    font-family: _font(family-fixed);
 		letter-spacing: _font(kerning-alt);
 		text-align: center;
 		text-decoration: none;

_sass/libs/_vars.scss

@@ -39,7 +39,7 @@
 // Font.
 	$font: (
 		family:				('Astloch', Helvetica, sans-serif),
-		family-fixed:		('Courier New', monospace),
+		family-fixed:    ('Lucida Console', Monaco, monospace),
 		weight:				400,
 		weight-bold:		700,
 		kerning:			-0.025em,

discography.html

@@ -48,10 +48,10 @@ image: /assets/img/discog2014.jpg
     <p>{{ album.date | date: '%Y' }}</p>
     
     {% for track in album.tracks %}
-    <p style="margin-bottom: 30px; font-family: monospace;font-size: 14px">
+    <p style="margin-bottom: 30px;font-size: 14px">
       <strong>{{ track.common.track.no }}. {{ track.common.title }}</strong><br />
       <span>{% assign round_seconds = track.format.duration | round %}{% assign minutes = round_seconds | divided_by: 60 %}{% assign leftover_seconds = minutes | times: 60 %}{{ minutes }}:{% assign seconds_without_zero = round_seconds | minus: leftover_seconds %}{% if seconds_without_zero < 10 %}0{% endif %}{{ seconds_without_zero }}</span>{% if track.common.genre != null %} | 
-      <span style="font-family: monospace;font-size: 14px">{{ track.common.genre }} </span>{% endif %}
+      <span style="font-size: 14px">{{ track.common.genre }} </span>{% endif %}
     </p>
    
 

index.html

@@ -58,10 +58,10 @@ logo_image: /siteicon.png
     <p>{{ album.date | date: '%Y' }}</p>
     
     {% for track in album.tracks %}
-    <p style="margin-bottom: 30px; font-family: monospace;font-size: 14px">
+    <p style="margin-bottom: 30px;font-size: 14px">
       <strong>{{ track.common.track.no }}. {{ track.common.title }}</strong><br />
       <span id="{{ track.common.title | slugify | remove: '-'  }}"></span> | 
-      <span style="font-family: monospace;font-size: 14px">{{ track.common.genre }} </span>
+      <span style="font-size: 14px">{{ track.common.genre }} </span>
     </p>