adjusting li line height

README.md

@@ -19,4 +19,3 @@ For use with Markdown code highlighting:
 Also, you might want to include the `DESCRIPTION` option (it appears in the left sidebar):
 
     DESCRIPTION = 'My blog and stuff ...'
-

static/css/colorbox.css

@@ -0,0 +1,50 @@
+/*
+    Colorbox Core Style:
+    The following CSS is consistent between example themes and should not be altered.
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
+#cboxWrapper {max-width:none;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative;}
+#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
+.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
+#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
+
+/* 
+    User Style:
+    Change the following styles to modify the appearance of Colorbox.  They are
+    ordered & tabbed in a way that represents the nesting of the generated HTML.
+*/
+#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
+#colorbox{outline:0;}
+    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
+        .cboxIframe{background:#fff;}
+        #cboxError{padding:50px; border:1px solid #ccc;}
+        #cboxLoadedContent{background:#000; padding:1px;}
+        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
+        #cboxLoadingOverlay{background:#000;}
+        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
+        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
+
+        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
+        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) no-repeat 0 0;}
+        
+        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
+        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
+
+        #cboxPrevious{background-position:0px 0px; right:44px;}
+        #cboxPrevious:hover{background-position:0px -25px;}
+        #cboxNext{background-position:-25px 0px; right:22px;}
+        #cboxNext:hover{background-position:-25px -25px;}
+        #cboxClose{background-position:-50px 0px; right:0;}
+        #cboxClose:hover{background-position:-50px -25px;}
+        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
+        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
+        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
+        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
+        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

static/css/justifiedGallery.min.css

@@ -0,0 +1,102 @@
+/*!
+ * justifiedGallery - v3.7.0
+ * http://miromannino.github.io/Justified-Gallery/
+ * Copyright (c) 2018 Miro Mannino
+ * Licensed under the MIT license.
+ */
+.justified-gallery {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.justified-gallery > a,
+.justified-gallery > div,
+.justified-gallery > figure {
+  position: absolute;
+  display: inline-block;
+  overflow: hidden;
+  /* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
+  filter: "alpha(opacity=10)";
+  opacity: 0.1;
+  margin: 0;
+  padding: 0;
+}
+.justified-gallery > a > img,
+.justified-gallery > div > img,
+.justified-gallery > figure > img,
+.justified-gallery > a > a > img,
+.justified-gallery > div > a > img,
+.justified-gallery > figure > a > img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+}
+.justified-gallery > a > .caption,
+.justified-gallery > div > .caption,
+.justified-gallery > figure > .caption {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  padding: 5px;
+  background-color: #000000;
+  left: 0;
+  right: 0;
+  margin: 0;
+  color: white;
+  font-size: 12px;
+  font-weight: 300;
+  font-family: sans-serif;
+}
+.justified-gallery > a > .caption.caption-visible,
+.justified-gallery > div > .caption.caption-visible,
+.justified-gallery > figure > .caption.caption-visible {
+  display: initial;
+  filter: "alpha(opacity=70)";
+  opacity: 0.7;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .entry-visible {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  background: none;
+}
+.justified-gallery > .entry-visible > img,
+.justified-gallery > .entry-visible > a > img {
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  -webkit-transition: opacity 500ms ease-in;
+  -moz-transition: opacity 500ms ease-in;
+  -o-transition: opacity 500ms ease-in;
+  transition: opacity 500ms ease-in;
+}
+.justified-gallery > .jg-filtered {
+  display: none;
+}
+.justified-gallery > .spinner {
+  position: absolute;
+  bottom: 0;
+  margin-left: -24px;
+  padding: 10px 0 10px 0;
+  left: 50%;
+  filter: "alpha(opacity=100)";
+  opacity: 1;
+  overflow: initial;
+}
+.justified-gallery > .spinner > span {
+  display: inline-block;
+  filter: "alpha(opacity=0)";
+  opacity: 0;
+  width: 8px;
+  height: 8px;
+  margin: 0 4px 0 4px;
+  background-color: #000;
+  border-radius: 6px;
+}

static/css/main.css

@@ -1,43 +1,71 @@
 @import url("pygment.css");
-body { margin:0px; padding:20px 0px; text-align:center; font-family:"Times New Roman", Times, serif; color:#000000; }
+@font-face {
+  font-family: "Garamond";
+  src: url("fonts/AppleGaramond.woff") format('woff');
+}
+
+@font-face {
+  font-family: "Garamond";
+  src: url("fonts/AppleGaramond-Bold.woff") format('woff');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: "Garamond";
+  src: url("fonts/AppleGaramond-BoltItalic.woff") format('woff');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Garamond";
+  src: url("fonts/AppleGaramond-Italic.woff") format('woff');
+  font-style: italic;
+}
+body { margin:0px; padding:20px 0px; text-align:center; font-family: Garamond, Serif; color:#000000; }
 a, a:visited { text-decoration:none; color:#1d2a78; }
 a:hover { text-decoration:underline; }
-h1, h2, h3, h4, h5, h6, h7 { margin:0px; line-height: 1.1em; }
+h1, h2, h3, h4, h5, h6, h7 { margin:0px; line-height: 1.0em; font-size: 2.0em; }
-h4, h5, h6 { font-size:16px; }
+h4, h5, h6 { font-size:18px; }
-h1 { padding:0px 0px 15px; margin:0px 0px 5px 0px; }
+h1 { padding:0px 0px 0.5em; margin:0px 0px 5px 0px; }
 blockquote { font-style:italic; background:#EAEAEA; margin:20px; padding:5px 10px; }
 blockquote cite { display:block; padding:10px 20px 0 0; text-align:right; }
 input, textarea { padding:5px; border:1px solid #8A8A8A; background:#EAEAEA; }
 input:hover, textarea:hover, blockquote:hover { background:#E5E5E5; }
+table, th, { border: 1px solid; }
+th { color: white; background: navy; text-align: center; }
+td { padding-left: 0.5em; }
+table { width: 100%; }
+tr:nth-child(odd) { background-color: lightgray;} 
 
-#wrap { margin:0px auto; text-align:left; line-height: 1.4; }
+#wrap { margin:0em auto; text-align:left; line-height: 1.0; width: 100%; }
-#container { float:right; }
+#container { float: right; width: 70% }
-#sidebar { overflow:hidden; clear:left; text-align:right; width:200px; height:auto; padding:0px 15px 0px 0px; border-right:1px dotted #C8C8C8; }
+#sidebar { overflow:hidden; clear:left; text-align:right; width:25%; height:auto; padding:0px 15px 0px 0px; border-right:0.15em solid #C8C8C8; }
-#sidebar li { list-style-type:none; font-size: 1.2em; line-height: 1.3em; font-weight: bold; }
+#sidebar .description { display:block; font-size: 1.1em; width:100%; height:auto; margin:0px 0px 10px 0px; }
+#sidebar li { list-style-type:none; font-size: 1.5em; line-height: 1.1em; font-weight: bold; }
 #sidebar > li { margin:20px 0px; }
-#sidebar h1 { border-bottom:1px dotted #C8C8C8; }
 #sidebar .description { display:block; font-size: 1.1em; width:100%; height:auto; margin:0px 0px 10px 0px; }
 #landing img { display:block; border:1px solid #000000 !important; margin-left: auto; margin-right: auto; max-height: 100%; max-width: 100%; }
-#landing p { text-align: center; font-size: 1.4em; }
+#landing p { text-align: center; font-size: 1.3em; }
 
 
 ul.sub-menu, ul.children { margin:0px 10px 0px 0px; }
 
-.post { margin:0px 0px 30px 0px; padding:0px 0px 30px 0px; border-bottom:1px dotted #C8C8C8; }
+.post { margin:0px 0px 30px 0px; padding:0px 0px 30px 0px; border-bottom:0.15em solid #C8C8C8; }
 .post-edit-link { clear:both; }
 .meta { margin:10px; padding:15px; background:#EAEAEA; clear:both; }
 .meta span { display:block; clear:left; }
 
 .gallerysquare { position: relative; float: left; max-width: 50%; max-height: 50%; display: flex; }
 .gallerysquare img { object-fit: cover; width: 500px; height: 500px; } 
-.gallerylabel { position: absolute; bottom: 20px; left: 20px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 1.7em; font-weight: 600; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; padding: 1.5em; }
+.gallerylabel { position: absolute; bottom: 20px; left: 20px; background-color: rgba(0, 0, 0, 0.5); color: white; font-size: 1.7em; font-weight: 600; font-family: Serif; padding: 1.5em; }
 
 .gallerylabel a.hover { font-style: underline; }
 .gallerylabel a { color:#FFFFFF; }
 .gallerylabel a.visited { color:#FFFFFF; }
 
 .portfolio { padding-right: 1.0em; text-align: center; }
-.portfolio h4 { font-size: 2.0em; font-family: sans; } 
+.portfolio h4 { font-size: 2.0em; font-family: Serif; } 
 .portfolio img { display:block; border:1px solid #000000 !important; margin-left: auto; margin-right: auto; max-height: 100%; max-width: 100%; }
 
 .prow { display: flex; flex-wrap: wrap; padding: 0 4px; }
@@ -47,7 +75,7 @@ ul.sub-menu, ul.children { margin:0px 10px 0px 0px; }
 @media screen and (max-width: 600px) { .pcolumn { flex: 100%; max-width: 100%; } }
 
 
-.entry { font-size: 1.15em; padding-right: 1.0em; max-width:1024px; }
+.entry { font-size: 1.3em; padding-right: 1.0em; max-width:1024px; line-height:1.2em; }
 .entry h2, h3, h4, h5 { margin:30px 0px 10px 0px; }
 
 .entry img { display:block; border:1px solid #000000 !important; margin-left: auto; margin-right: auto; max-height: 100%; max-width: 100%; }
@@ -104,7 +132,7 @@ input#submit { font-weight:bold; }
 input#s { width:70%; height:auto; margin:5px 0px; }
 
 #footer { text-align:center; clear:both; font-size: 1.1em; }
-#footer div { margin:30px 0px 0px 0px; padding:30px 0px 0px 0px; border-top:1px dotted #C8C8C8; }
+#footer div { margin:30px 0px 0px 0px; padding:30px 0px 0px 0px; border-top:0.15em solid #C8C8C8; }
 #footer li { list-style-type:none; }
 #footer .widget_tag_cloud h2 { display:none; }
 

static/css/pygment.css

@@ -3,8 +3,9 @@
     color: #FFFFFF;
     background-color: #333333;
     white-space: pre-wrap;
-    padding: 0.20em;
+    padding: 0.10em;
-    font-size: 14px;
+    font-size: 1.0em;
+    line-height: 1.5em;
 }
 
 .highlight .hll {

static/js/load-colorbox.js

@@ -0,0 +1,7 @@
+jQuery('a.mybox').colorbox({ 
+maxWidth:"90%",
+maxHeight:"90%",
+transition:"elastic",
+opacity:"0.9",
+rel:"group1",
+scrolling: false });

templates/article.html

@@ -1,8 +1,8 @@
 {% extends "base.html" %}
 {% block title %}{{ super() }} : {{ article.title }}{% endblock %}
 {% block content %}        
-<div id="wrap" style="width:100%">
+<div id="wrap">
-<div id="container" style="width:70%">
+<div id="container">
 <div class="entry">
 <header>
 <h1><a href="{{ SITEURL }}" id="site-title"> {#{{ SITENAME }}#} {% if SITESUBTITLE %} <strong>{{ SITESUBTITLE }}</strong>{% endif %}</a> {#:#}

templates/base.html

@@ -3,6 +3,7 @@
 <head>
         <title>{% block title %}{{ SITENAME }}{%endblock%}</title>
         <meta charset="utf-8" />
+	<link rel="stylesheet" href="/theme/css/colorbox.css">
         <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
         <link href="{{ SITEURL }}/{{ FEED_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
         {% if FEED_RSS %}
@@ -25,7 +26,7 @@
 {% block content %}
 {% endblock %}
 
-        <div id="sidebar" style="width:25%">
+        <div id="sidebar">
             <h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
             <span class="description">{{ DESCRIPTION }} </span>
             <nav>
@@ -34,7 +35,6 @@
                     <li><a href="{{ SITEURL }}/posts.html">Articles</a></li>
                     <li><a href="https://portfolio.leanderhutton.com/">Photography</a></li>
                     <li><a href="{{ SITEURL }}/about.html">About</a></li>
-                    <li><a href="{{ SITEURL }}/recommendations.html">What I Use</a></li>
                     {% if categories|length > 1 %}
                   <!--  <li><a href="{{ SITEURL }}/categories.html">Categories</a></li>
                 {% endif %}
@@ -72,6 +72,9 @@
     {% include 'analytics.html' %}
     {% include 'piwik.html' %}
     {% include 'disqus_script.html' %}
+	<script src="/theme/js/jquery.min.js"></script>
+	<script src="/theme/js/jquery.colorbox-min.js"></script>
+	<script src="/theme/js/load-colorbox.js"></script>
 
     </div>
 

templates/categories.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
-<div id="wrap" style="width:100%">
+<div id="wrap">
-<div id="container" style="width:70%">
+<div id="container">
 <div class="entry">
 <ul>
 {% for category, articles in categories %}

templates/index.html

@@ -1,8 +1,8 @@
 {% extends "base.html" %}
 {% block content_title %}{% endblock %}
 {% block content %}        
-<div id="wrap" style="width:100%">
+<div id="wrap">
-<div id="container" style="width:70%">
+<div id="container">
 <div class="entry">
 {% if articles %}
 

templates/landing.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
-	<div id="wrap" style="width:100%">
+	<div id="wrap">
-	    <div id="container" style="width:70%">
+	    <div id="container">
             <div id="landing" class="entry">
                {{ page.content }}
             </div>

templates/page.html

@@ -1,8 +1,8 @@
 {% extends "base.html" %}
 {% block title %}{{ page.title }}{% endblock %}
 {% block content %}        
-<div id="wrap" style="width:100%">
+<div id="wrap">
-<div id="container" style="width:70%">
+<div id="container">
 <div class="entry">
 
 <header>

templates/portfolio.html

@@ -1,13 +0,0 @@
-{% extends "base.html" %}
-{% block title %}{{ page.title }}{% endblock %}
-{% block content %}        
-<div id="wrap" style="width:100%">
-<div id="container" style="width:70%">
-<div class="entry">
-
-<article>    
-    {{ page.content }}
-</article>
-</div>
-</div>
-{% endblock %}

templates/tags.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
-<div id="wrap" style="width:100%">
+<div id="wrap">
-<div id="container" style="width:70%">
+<div id="container">
 <div class="entry">
 <ul>
 {% for tag, articles in tags %}