New classes for image shortcode and styling for them

3 files changed, 98 insertions, 66 deletions

diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html
index b52813a..468fb50 100644
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -1,7 +1,9 @@
-<figure class="image-shortcode{{ with .Get "class" }} {{ . }}{{ end }}" style="
-         {{- with .Get "width" }} width: {{ . }};{{ end -}}
-         {{- with .Get "height" }} height: {{ . }};{{ end -}}
-         {{- with .Get "float" }} display: inline-block; float: {{ . }}; clear: {{ . }};{{ end -}}">
+<figure class="image-shortcode{{ with .Get "class" }} {{ . }}{{ end }}
+         {{- if .Get "wide" }} wide{{ end -}}
+         {{- with .Get "float" }} {{ . }}{{ end -}}" 
+         style="
+         {{- with .Get "width" }}width: {{ . }};{{ end -}}
+         {{- with .Get "height" }}height: {{ . }};{{ end -}}">
     {{- if .Get "link" -}}
         <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
     {{- end }}
diff --git a/static/css/styles.css b/static/css/styles.css
index d9ad77e..3800eaa 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -87,8 +87,41 @@ figure.image-shortcode {
   figure.image-shortcode img {
     width: 100%; }
 
-.profile-picture figcaption {
-  border: none; }
+figure.wide {
+  display: flex;
+  flex-direction: column;
+  align-items: center; }
+  figure.wide img {
+    width: 90vw;
+    padding-bottom: 0.5em; }
+
+figure.right {
+  float: right;
+  margin: 0 0 0 1em; }
+
+figure.left {
+  float: left;
+  margin: 0 1em 0 0; }
+
+.profile-picture {
+  margin: 1em 0 0 0;
+  float: right;
+  background-color: #eee;
+  border-radius: 0.2em;
+  padding: 0.5em;
+  border: 1px solid #999; }
+  @media (min-width: 28em) {
+    .profile-picture {
+      width: 11em;
+      margin: 1em 0 0 1em; } }
+  .profile-picture img {
+    border: 1px solid #999;
+    width: 100%;
+    padding: 0;
+    height: auto;
+    margin: 0; }
+  .profile-picture figcaption {
+    border: none; }
 
 figcaption {
   font-size: 0.8em;
@@ -200,26 +233,6 @@ nav li:hover {
 .myname h2 {
   margin: 0; }
 
-.profile-picture {
-  margin: 1em 0 0 0;
-  position: relative;
-  right: 0;
-  float: right;
-  background-color: #eee;
-  border-radius: 0.2em;
-  padding: 0.5em;
-  border: 1px solid #999; }
-  @media (min-width: 28em) {
-    .profile-picture {
-      width: 11em;
-      margin: 1em 0 0 1em; } }
-  .profile-picture img {
-    border: 1px solid #999;
-    width: 100%;
-    padding: 0;
-    height: auto;
-    margin: 0; }
-
 .blog-post-summary {
   margin: 2em; }
 
diff --git a/static/css/styles.scss b/static/css/styles.scss
index 0605585..1fab313 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -150,11 +150,66 @@ figure.image-shortcode {
     img {
         width: 100%;
     }
+}
 
+figure.wide {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+        width: 90vw;
+        padding-bottom: 0.5em;
+    }
 }
 
-.profile-picture figcaption {
-    border: none;
+figure.right {
+    float: right;
+    margin: 0 0 0 1em;
+}
+
+figure.left {
+    float: left;
+    margin: 0 1em 0 0;
+}
+
+.profile-picture {
+    margin: 1em 0 0 0;
+    float: right;
+    background-color: #eee;
+    border-radius: 0.2em;
+    padding: 0.5em;
+    border: 1px solid #999;
+
+    @media #{$mq-mini} {
+        width: 11em;
+        margin: 1em 0 0 1em;
+    }
+
+    img {
+        border: 1px solid #999;
+        width: 100%;
+        padding: 0;
+        height: auto;
+        //border: 0.1em solid #474a4f;
+        margin: 0;
+    }
+
+    figcaption {
+        border: none;
+    }
+
+    // figcaption {
+    //     font-size: 0.8em;
+    //     padding: 5%;
+    //     width: 90%;
+    //     margin: 0;
+    //     p {
+    //         margin-top: 0.0em;
+    //     }
+    //     h4 {
+    //         margin: 0.3em 0;
+    //     }
+    // }
 }
 
 figcaption {
@@ -291,44 +346,6 @@ nav li:hover {
 
 // HOME
 
-.profile-picture {
-    margin: 1em 0 0 0;
-    position: relative;
-    right: 0;
-    float: right;
-    background-color: #eee;
-    border-radius: 0.2em;
-    padding: 0.5em;
-    border: 1px solid #999;
-
-    @media #{$mq-mini} {
-        width: 11em;
-        margin: 1em 0 0 1em;
-    }
-
-    img {
-        border: 1px solid #999;
-        width: 100%;
-        padding: 0;
-        height: auto;
-        //border: 0.1em solid #474a4f;
-        margin: 0;
-    }
-
-    // figcaption {
-    //     font-size: 0.8em;
-    //     padding: 5%;
-    //     width: 90%;
-    //     margin: 0;
-    //     p {
-    //         margin-top: 0.0em;
-    //     }
-    //     h4 {
-    //         margin: 0.3em 0;
-    //     }
-    // }
-}
-
 .blog-post-summary {
     margin: 2em;
 }