Simplified contact-box, add classes for it and style them in CSS, update readme

5 files changed, 121 insertions, 115 deletions

diff --git a/README.md b/README.md
index 0fa45f7..5ff43ac 100644
--- a/README.md
+++ b/README.md
@@ -30,42 +30,60 @@ comments](#user-content-adding-comments) below).
 Here is a working `config.yaml`:
 
 ```
-baseURL: "/"
-title: "My Personal Webpage"
-disqusShortname: "example-com"
-params:
-  siteHeading: "John Doe's Page"
-  author: "John Doe"
-  showBlogLatest: false
-  blogLatestHeading: "Recent posts"
-  nBlogLatest: 3
-  showTaxonomyLinks: false
-  social:
-    linkedin: "john.doe"
-    github: "jdoe"
-newContentEditor: "vim"
-languageCode: "en-us"
-lang: "en-us"
-theme: "notrack"
-Paginate: 5
-PaginatePath: "page"
+baseURL = "http://example.org/"
+languageCode = "en-us"
+title = "Lawyer Hugo Grotius"
+theme = "notrack"
+newContentEditor = "nvim"
+mainSections = ["blog"]
+# disqusShortname = "example"
+paginate = 4
+
+[params]
+  author = "Hugo de Groot"
+  siteHeading = "Hugo Grotius" # defaults to author
+  showBlogLatest = true
+  mainSections = ["blog"]
+  showTaxonomyLinks = false
+  nBlogLatest = 4 # number of blog post om the home page
+  blogLatestHeading = "My writing"
+
+  [params.social]
+    github = "example"
+    linkedin = "example"
+    email = "example@example.com"
+    mastodon = "example"
+    medium = "example"
+    keybase = "example"
+
+[taxonomies]
+  year = "year"
+  month = "month"
+  tags = "tags"
+  categories = "categories"
+
+[permalinks]
+  blog = "/blog/:year/:month/:slug"
 ```
 
 # Shortcodes
 
-*   contact-box
-*   container
-*   gallery-category
-*   gallery-modal
-*   gallery-photo
-*   gallery-script
-*   image
-*   ofvideo
-*   p5js
-*   rawhtml
-*   resume-entry
-*   resume-section
-*   resume-subcategory
+| Category      | Shortcode             | Description |
+| :---          | :---                  | :---        |
+| Contact-info  | contact-box           | Displays contact info set in params.social |
+|               | social                | Displays contact info set in params.social |
+| Photo Gallery | gallery-category      | Container for gallery-photo shortcodes |
+|               | gallery-modal         | HTML to allow for full page view of gallery photos | 
+|               | gallery-photo         | Include a photo in a gallery |
+|               | gallery-script        | Script to allow for full page view of gallery photos |
+| General       | image                 | Image for use in any page. See example in [How to make a blog](#user-content-how-to-make-a-blog) |
+|               | video                 | Similar to an ordinary <video> html tag but with a CSS class to make it look good in posts       |
+|               | p5js                  | For including [p5.js](https://p5js.org/) sketches                                                |
+|               | rawhtml               | For including raw html without the global unsafe option for Goldmark |
+| Resume        | container             | Container for resume shortcodes |
+|               | resume-entry          | One entry in a resume (e.g. a university degree) |
+|               | resume-section        | One section in resume (e.g. "Education" |
+|               | resume-subcategory    | Creates a heading within a section of the resume |
 
 ## User CSS
 
diff --git a/layouts/shortcodes/contact-box.html b/layouts/shortcodes/contact-box.html
index 000c9f8..209a6e6 100644
--- a/layouts/shortcodes/contact-box.html
+++ b/layouts/shortcodes/contact-box.html
@@ -1,34 +1,24 @@
-<div id=contactinformation>
-    <div class="contactbox contactdescription">
-        <p>
-        {{ .Inner }}
-        <p>
-    </div>
-
-    {{ $socialMap := .Site.Data.notrack.social }}
-
-    {{ with $.Site.Params.social }}
-        <div class="contactbox contactlinks">
-            <ul>
-                {{- $socialArray := slice -}}
-                {{ range $website, $user := $.Site.Params.social }}
-                    {{- $social := $website | lower | index $socialMap | default dict -}}
-                    {{- $social := dict "user" $user | merge $social -}}
-
-                    {{- $data := index $socialMap $website -}}
-
-                    {{- $socialArray = $socialArray | append $social -}}
-                {{ end }}
-                {{ range sort $socialArray "weight" -}}
-                    {{- if .prefix -}}
-                    <li><a href="{{- .prefix -}}{{ .user }}"><i class="{{- .icon.class -}}"></i>{{ .title }}</a></li>
-                    {{- else if .template -}}
-                    <li><a href="{{- printf .template .user -}}"><i class="{{- .icon.class -}}"></i>{{ .title }}</a></li>
-                    {{- end -}}
-                {{- end -}}
-            </ul>
-        </div>
+{{ with $.Page.Site.Params.social }}
+{{ $socialMap := $.Page.Site.Data.notrack.social }}
+<div class="contactbox {{- with $.Get "float" }} {{ . }}{{ end -}}" style="
+    {{- with $.Get "width" }}width: {{ . }};{{ end -}}
+    {{- with $.Get "height" }}height: {{ . }};{{ end -}}">
+    <ul>
+    {{- $socialArray := slice -}}
+    {{ range $website, $user := $.Site.Params.social }}
+        {{- $social := $website | lower | index $socialMap | default dict -}}
+        {{- $social := dict "user" $user | merge $social -}}
+        {{- $socialArray = $socialArray | append $social -}}
     {{ end }}
 
-            {{ printf "<!-- Icons are from Awesome Font, licenced under SIL OFL 1.1 (https://scripts.sil.org/OFL) -->" | safeHTML }}
+    {{ range sort $socialArray "weight" -}}
+        {{- if .prefix -}}
+        <li><a href="{{- .prefix -}}{{ .user }}"><i class="{{- .icon.class -}}"></i>{{ .title }}</a></li>
+        {{- else if .template -}}
+        <li><a href="{{- printf .template .user -}}"><i class="{{- .icon.class -}}"></i>{{ .title }}</a></li>
+        {{- end -}}
+    {{- end -}}
+    </ul>
+    {{ printf "<!-- Icons are from Awesome Font, licenced under SIL OFL 1.1 (https://scripts.sil.org/OFL) -->" | safeHTML }}
 </div>
+{{ end }}
diff --git a/layouts/shortcodes/ofvideo.html b/layouts/shortcodes/video.html
index f5fbbbd..eba4d66 100644
--- a/layouts/shortcodes/ofvideo.html
+++ b/layouts/shortcodes/video.html
@@ -1,4 +1,4 @@
-<video class=ofvideo preload="{{ .Get "preload" }}" controls>
+<video class="video-shortcode" preload="{{ .Get "preload" }}" controls>
     <source src="{{ .Get "src" }}" type="{{ .Get "type" }}">
     There should have been a video here but your browser does not seem
     to support it.
diff --git a/static/css/styles.css b/static/css/styles.css
index 658e83d..efb0787 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -98,16 +98,24 @@ figure.wide {
     width: 90vw;
     padding-bottom: 0.5em; }
 
-figure.right {
+figure.right, .right {
   float: right;
-  margin: 0 0 0 1em; }
-
-figure.right:first-child {
+  margin: 0 0 0.5em 1em; }
+  @media (max-width: 28em) {
+    figure.right, .right {
+      margin-bottom: 1.0em; } }
+figure.right:first-child, .right:first-child {
   margin-top: 1em; }
 
-figure.left {
+figure.left, .left {
   float: left;
-  margin: 0 1em 0 0; }
+  margin: 0 1em 0.5em 0; }
+  @media (max-width: 28em) {
+    figure.left, .left {
+      margin-bottom: 1.0em; } }
+figure.left:first-child, .left:first-child {
+  margin-top: 1em;
+  color: blue; }
 
 figure.frame {
   background-color: #f7f7f7;
@@ -384,18 +392,6 @@ p.resume-subcategory {
   flex-direction: row;
   flex-wrap: wrap; }
 
-.contactdescription.contactbox {
-  flex: 3 1 15em;
-  padding: 0 .5em .5em 0;
-  margin: 0; }
-  .contactdescription.contactbox p {
-    margin: 0; }
-
-.contactbox.contactlinks {
-  margin-bottom: 0.4em; }
-  .contactbox.contactlinks a {
-    white-space: nowrap; }
-
 .social {
   display: flex;
   justify-content: center; }
@@ -419,11 +415,11 @@ p.resume-subcategory {
           vertical-align: middle; }
 
 .contactbox {
-  flex: 1 1 7.5em;
-  justify-content: center;
-  align-content: center;
-  padding: 0 1em 0 .5em;
-  margin: 0; }
+  padding: 0 1.0em 0 1.0em;
+  box-sizing: border-box; }
+  @media (max-width: 28em) {
+    .contactbox {
+      width: 100% !important; } }
   .contactbox ul {
     list-style-type: none;
     background-color: #eee;
@@ -438,7 +434,8 @@ p.resume-subcategory {
     font-family: FreeSans, sans-serif;
     font-weight: bold;
     font-size: 1em;
-    color: #524e59; }
+    color: #524e59;
+    white-space: nowrap; }
   .contactbox img {
     height: .7em;
     padding-right: .5em;
@@ -452,7 +449,7 @@ p.resume-subcategory {
   margin: 0;
   overflow-y: none; }
 
-.ofvideo {
+.video-shortcode {
   width: 100%;
   height: auto;
   padding: 1em 0; }
diff --git a/static/css/styles.scss b/static/css/styles.scss
index 5f8cc6c..e401c2c 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -171,18 +171,31 @@ figure.wide {
     }
 }
 
-figure.right {
+figure.right, .right {
     float: right;
-    margin: 0 0 0 1em;
+    margin: 0 0 0.5em 1em;
+
+    @media #{$mq-mini-reverse} {
+        margin-bottom: 1.0em;
+    }
 }
 
-figure.right:first-child {
+figure.right:first-child, .right:first-child {
     margin-top: 1em;
 }
 
-figure.left {
+figure.left, .left {
     float: left;
-    margin: 0 1em 0 0;
+    margin: 0 1em 0.5em 0;
+
+    @media #{$mq-mini-reverse} {
+        margin-bottom: 1.0em;
+    }
+}
+
+figure.left:first-child, .left:first-child {
+    margin-top: 1em;
+    color: blue;
 }
 
 figure.frame {
@@ -533,21 +546,6 @@ p.resume-subcategory {
     flex-wrap: wrap;
 }
 
-.contactdescription.contactbox {
-    flex: 3 1 15em;
-    padding: 0 .5em .5em 0;
-    margin: 0;
-
-    p { margin: 0; }
-}
-
-.contactbox.contactlinks {
-    margin-bottom: 0.4em;
-    a {
-        white-space: nowrap;
-    }
-}
-
 .social {
     display: flex;
     justify-content: center;
@@ -580,11 +578,12 @@ p.resume-subcategory {
 }
 
 .contactbox {
-    flex: 1 1 7.5em;
-    justify-content: center;
-    align-content: center;
-    padding: 0 1em 0 .5em;
-    margin: 0;
+    padding: 0 1.0em 0 1.0em;
+    box-sizing: border-box;
+
+    @media #{$mq-mini-reverse} {
+        width: 100% !important;
+    }
 
     ul {
         list-style-type: none;
@@ -600,11 +599,13 @@ p.resume-subcategory {
         padding-right: 0.3em;
     }
 
+
     a {
         font-family: FreeSans, sans-serif;
         font-weight: bold;
         font-size: 1em;
         color: $contactlinks-text-color;
+        white-space: nowrap;
     }
 
     img {
@@ -625,7 +626,7 @@ p.resume-subcategory {
     overflow-y: none;
 }
 
-.ofvideo {
+.video-shortcode {
   width: 100%;
   height: auto;
   padding: 1em 0;