Updated readme, updated styles, allow for user CSS and use absolute url in shortcodes

9 files changed, 38 insertions, 14 deletions

diff --git a/README.md b/README.md
index 4a6416f..0fa45f7 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ comments](#user-content-adding-comments) below).
 * [Table of contents](#user-content-table-of-contents)
 * [Example site `config`](#user-content-example-site-config)
 * [Shortcodes](#user-content-shortcodes)
+* [User CSS](#user-content-user-css)
 * [Navigation bar](#user-content-navigation-bar)
   * [How to add a page to the navigation bar](#user-content-how-to-add-a-page-to-the-navigation-bar)
   * [How to add a page to drop down menu](#user-content-how-to-add-a-page-to-drop-down-menu)
@@ -58,6 +59,7 @@ PaginatePath: "page"
 *   gallery-modal
 *   gallery-photo
 *   gallery-script
+*   image
 *   ofvideo
 *   p5js
 *   rawhtml
@@ -65,6 +67,11 @@ PaginatePath: "page"
 *   resume-section
 *   resume-subcategory
 
+## User CSS
+
+You can add your own CSS by creating a file `assets/css/userstyles.css`. The
+theme will automatically pick it up.
+
 ## Navigation bar
 
 ### How to add a page to the navigation bar
@@ -120,17 +127,14 @@ Instructions with example:
 The first thing you will want to do is set up the home page of the 
 website. Create `/content/_index.md`. This could contain a short 
 introduction of what is on the website or of you. A shortcode that can 
-be useful here is `figure`, which adds an image with a frame and an appropriate
-width if you set the class to "profile-picture". Example usage:
+be useful here is `image`, which adds an image with an optional frame. You can
+set the width with the `width` option. Example usage:
 
 ```
-{{< figure class="profile-picture" src="/img/profile-picture.jpg" 
+{{< image frame="true" width="11em" src="/img/profile-picture.jpg" 
 alt="Picture of me" >}}
 ```
 
-There is also a raw html shortcode called `rawhtml` which you can use if 
-you don't like the frame.
-
 At this point you should also set the title for the web site, your name 
 and the text in the header, if you want it to be different from your 
 name. Example entries in `config.yaml`:
@@ -215,7 +219,22 @@ readers can list all posts from a specific category or a tag by clicking
 on that category or tag in any post instead, and you can link to 
 `yourpage.com/categories` from other places too.
 
-Want images in your post? Use Hugo's built in short code 
+You can add images just as for the home page. Available options are those of the
+built in `figure` shortcode of Hugo, and additionally: 
+
+| Parameter name   | Allowed Values         |
+| :---             | :---                   |
+| `float`          | right/left             |
+| `frame`          | true/false/leave out   |
+| `wide`           | true/false             |
+| `width`          | e.g. 10em, 50%, 70px   |
+| `height`         | e.g. 10em, 50%, 70px   |
+
+A difference from the built in shortcode is that width and height are for the
+outer `<figure>` element. This allows text to wrap around the picture if you set
+the float parameter.
+
+You can also use Hugo's built in short code 
 [figure](https://gohugo.io/content-management/shortcodes/#figure) (an 
 example: `{{< figure src="/img/picture.jpg" width="100%" >}}`)
 
diff --git a/images/screenshot.png b/images/screenshot.png
index b73280a..8423563 100644
--- a/images/screenshot.png
+++ b/images/screenshot.png
diff --git a/images/tn.png b/images/tn.png
index fe892d5..d6515c4 100644
--- a/images/tn.png
+++ b/images/tn.png
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 47eaaf0..ad56e1b 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,6 +4,9 @@
     <link rel="stylesheet" type="text/css" href="{{ "css/fonts.css" | absURL }}">
     <link rel="stylesheet" type="text/css" href="{{ "css/fontawesome.css" | absURL }}">
     <link rel="stylesheet" type="text/css" href="{{ "css/styles.css" | absURL }}">
+    {{ with resources.Get "css/userstyles.css" }}
+    <link rel="stylesheet" type="text/css" href="{{ .Permalink }}">
+    {{ end }}
     <link rel="icon" href={{ "img/icon.png" | absURL }}>
     <meta charset="UTF-8">
     <meta name="author" content="{{ .Site.Params.Author }}">
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index ef4928b..48b7154 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,7 @@
 
 <header class="page-header">
     <div class="myname"> 
-        <h2><a href="/">{{ default .Site.Params.Author .Site.Params.siteHeading }}</a></h2> 
+        <h2><a href="{{ default .Site.Home .Site.BaseURL }}">{{ default .Site.Params.Author .Site.Params.siteHeading }}</a></h2> 
     </div>
     <nav>
         <ul class="navbar">
@@ -59,7 +59,7 @@
                     {{- $active = and $active (ne $currentMenusPage.IsHome true) }}
                 {{- end }}
                 {{ with $currentPage.File }}
-                    {{- $active = and $active (ne .Dir "/" ) }}
+                {{- $active = and $active (ne .Dir "{{ .Site.BaseURL }}" ) }}
                 {{ end }}
                 {{- $active = or $active (eq $currentPage.Title .Name ) }}
                 {{- $active = or $active (eq $currentPage.RelPermalink .URL ) }}
diff --git a/layouts/shortcodes/gallery-photo.html b/layouts/shortcodes/gallery-photo.html
index 9cdd355..9a1a26a 100644
--- a/layouts/shortcodes/gallery-photo.html
+++ b/layouts/shortcodes/gallery-photo.html
@@ -1,4 +1,4 @@
 <li class="gallery-photo">
-    <img src="/img/thumbnails/{{ .Get "fn" }}"
+    <img src="{{ ( printf "/img/thumbnails/%s" (.Get "fn")) | absURL }}" }}
          alt="{{ .Get "caption" }}">
 </li>
diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index d637e62..2ee0834 100644
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -8,7 +8,7 @@
     {{- if .Get "link" -}}
         <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
     {{- end }}
-    <img src="{{ .Get "src" }}"
+    <img src="{{ .Get "src" | absURL }}"
          {{- if or (.Get "alt") (.Get "caption") }}
          alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
          {{- end -}}
diff --git a/static/css/styles.css b/static/css/styles.css
index 58b2a5a..658e83d 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -3,7 +3,8 @@ body {
   margin: 0;
   overflow-y: scroll;
   font-size: 1.21em;
-  line-height: 1.21; }
+  line-height: 1.21;
+  font-family: FreeSerif, serif; }
   @media (min-width: 64em) {
     body {
       font-size: 1.32em;
@@ -43,7 +44,7 @@ a {
   color: #07608f;
   text-decoration: none; }
 
-h1, h2, h3, h4 {
+h1, h2, h3, h4, h5, h6 {
   font-family: FreeSans, sans-serif;
   font-weight: bold;
   font-style: normal;
diff --git a/static/css/styles.scss b/static/css/styles.scss
index 20ba325..5f8cc6c 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -49,6 +49,7 @@ body {
     overflow-y: scroll;
     font-size: $base-font-size * 1.1;
     line-height: $base-line-height * 1.1;
+    font-family: FreeSerif, serif;
 
     @media #{$mq-medium} {
         font-size: $base-font-size*1.2;
@@ -102,7 +103,7 @@ a {
     text-decoration: none;
 }
 
-h1, h2, h3, h4 {
+h1, h2, h3, h4, h5, h6 {
     font-family: FreeSans, sans-serif;
     font-weight: bold;
     font-style: normal;