README.md

@@ -19,3 +19,4 @@ 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

@@ -1,50 +0,0 @@
-/*
-    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

@@ -1,102 +0,0 @@
-/*!
- * 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,71 +1,43 @@
 @import url("pygment.css");
-@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; }
+body { margin:0px; padding:20px 0px; text-align:center; font-family:"Times New Roman", Times, 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.0em; font-size: 2.0em; }
-h4, h5, h6 { font-size:18px; }
-h1 { padding:0px 0px 0.5em; margin:0px 0px 5px 0px; }
+h1, h2, h3, h4, h5, h6, h7 { margin:0px; line-height: 1.1em; }
+h4, h5, h6 { font-size:16px; }
+h1 { padding:0px 0px 15px; 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:0em auto; text-align:left; line-height: 1.0; width: 100%; }
-#container { float: right; width: 70% }
-#sidebar { overflow:hidden; clear:left; text-align:right; width:25%; height:auto; padding:0px 15px 0px 0px; border-right:0.15em solid #C8C8C8; }
-#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; }
+#wrap { margin:0px auto; text-align:left; line-height: 1.4; }
+#container { float:right; }
+#sidebar { overflow:hidden; clear:left; text-align:right; width:200px; height:auto; padding:0px 15px 0px 0px; border-right:1px dotted #C8C8C8; }
+#sidebar li { list-style-type:none; font-size: 1.2em; line-height: 1.3em; 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.3em; }
+#landing p { text-align: center; font-size: 1.4em; }
 
 
 ul.sub-menu, ul.children { margin:0px 10px 0px 0px; }
 
-.post { margin:0px 0px 30px 0px; padding:0px 0px 30px 0px; border-bottom:0.15em solid #C8C8C8; }
+.post { margin:0px 0px 30px 0px; padding:0px 0px 30px 0px; border-bottom:1px dotted #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: 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: "Palatino Linotype", "Book Antiqua", Palatino, 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: Serif; } 
+.portfolio h4 { font-size: 2.0em; font-family: sans; } 
 .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; }
@@ -75,7 +47,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.3em; padding-right: 1.0em; max-width:1024px; line-height:1.2em; }
+.entry { font-size: 1.15em; padding-right: 1.0em; max-width:1024px; }
 .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%; }
@@ -132,7 +104,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:0.15em solid #C8C8C8; }
+#footer div { margin:30px 0px 0px 0px; padding:30px 0px 0px 0px; border-top:1px dotted #C8C8C8; }
 #footer li { list-style-type:none; }
 #footer .widget_tag_cloud h2 { display:none; }
 

static/css/pygment.css

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

static/js/load-colorbox.js

@@ -1,7 +0,0 @@
-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">
-<div id="container">
+<div id="wrap" style="width:100%">
+<div id="container" style="width:70%">
 <div class="entry">
 <header>
 <h1><a href="{{ SITEURL }}" id="site-title"> {#{{ SITENAME }}#} {% if SITESUBTITLE %} <strong>{{ SITESUBTITLE }}</strong>{% endif %}</a> {#:#}

templates/base.html

@@ -3,7 +3,6 @@
 <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 %}
@@ -26,7 +25,7 @@
 {% block content %}
 {% endblock %}
 
-        <div id="sidebar">
+        <div id="sidebar" style="width:25%">
             <h1><a href="{{ SITEURL }} " title="title">{{ SITENAME }}</a></h1>
             <span class="description">{{ DESCRIPTION }} </span>
             <nav>
@@ -35,6 +34,7 @@
                     <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,9 +72,6 @@
     {% 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">
-<div id="container">
+<div id="wrap" style="width:100%">
+<div id="container" style="width:70%">
 <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">
-<div id="container">
+<div id="wrap" style="width:100%">
+<div id="container" style="width:70%">
 <div class="entry">
 {% if articles %}
 

templates/landing.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
-	<div id="wrap">
-	    <div id="container">
+	<div id="wrap" style="width:100%">
+	    <div id="container" style="width:70%">
             <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">
-<div id="container">
+<div id="wrap" style="width:100%">
+<div id="container" style="width:70%">
 <div class="entry">
 
 <header>

templates/portfolio.html

@@ -0,0 +1,13 @@
+{% 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">
-<div id="container">
+<div id="wrap" style="width:100%">
+<div id="container" style="width:70%">
 <div class="entry">
 <ul>
 {% for tag, articles in tags %}