optimize for the lyrics page (#420)

Author: Peter Bengtsson

peterbecom/base/jinja2/_googlefonts.css

@@ -7,7 +7,11 @@
 
   <title>{% block title %}{% block title_prefix %}{{ page_title }}{% endblock %} - Peterbe.com{% endblock %}</title>
 
+  {% if request.path == '/plog/blogitem-040601-1' -%}
+  {% stylesheet 'lyrics' %}
+  {% else %}
   {% stylesheet 'base' %}
+  {% endif -%}
 
   <meta name="description" content="Stuff in Peter's head">
   <link rel="shortcut icon" href="{{ static("images/favicon-32.png") }}">
@@ -106,8 +110,15 @@ <h1 class="ui header">{% block page_title %}{{ page_title }}{% endblock %}</h1>
       {% block content_body %}
       {% endblock %}
     {% endblock %}
+
+    {% if request.path == '/plog/blogitem-040601-1' %}
+    <p class="lyrics-footer">
+      &copy; <a href="https://www.peterbe.com">peterbe.com</a> 2003 - {{ THIS_YEAR }}
+    </p>
+    {% endif %}
   </div>
 
+  {% if request.path != '/plog/blogitem-040601-1' %}
   <div class="ui inverted vertical footer segment">
     <div class="ui center aligned container">
       <p>
@@ -131,9 +142,15 @@ <h1 class="ui header">{% block page_title %}{{ page_title }}{% endblock %}</h1>
       </p>
     </div>
   </div>
+  {% endif %}
+
 
   {% block basejs %}
+  {%- if request.path == '/plog/blogitem-040601-1' %}
+  {% javascript 'lyrics' %}
+  {% else %}
   {% javascript 'base' %}
+  {% endif -%}
   {% javascript 'cssrelpreload' %}
   {% endblock %}
 

peterbecom/base/jinja2/base.html

@@ -0,0 +1,5 @@
+.lyrics-footer {
+    font-size: 0.8em;
+    margin: 60px 0 40px 0;
+    text-align: center;
+}

peterbecom/base/static/css/lyrics.css

@@ -214,3 +214,22 @@ h4 {
 .ui.comments .comment a.metadata.reply:hover {
   color: #1e70bf;
 }
+
+
+span.not-approved {
+  font-size:90%;
+  color:red;
+  padding-left:10px;
+}
+.ui.comments .comment .metadata {
+  display: inline-block;
+  margin-left: 0.5em;
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 0.875em;
+}
+.ui.comments .comment .metadata a {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.comments .comment .metadata a:hover {
+  color: rgba(0, 0, 0, 0.8);
+}