style: enable <figure> class: center, right & left

xianmin · Nov 7, 2018 · c1f7ae4 · c1f7ae4
1 parent 20ffe4e
commit c1f7ae4
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 39 deletions.
diff --git a/assets/sass/_partial/_post/_content.scss b/assets/sass/_partial/_post/_content.scss
@@ -12,10 +12,6 @@
     }
   }
 
-  p > img {
-    cursor: pointer;
-  }
-
   h1 {
     border-bottom: 1px solid #ddd;
     margin-top: 2em;
@@ -98,8 +94,6 @@
     }
   }
 
-  @import 'code';
-
   .post-summary {
     margin-bottom: 1em;
   }
@@ -136,35 +130,6 @@
     content: ':';
   }
 
-  figure {
-    a:hover{
-      border: 0;
-    }
-
-    &.center {
-      text-align: center;
-    }
-
-    figcaption {
-      margin-top: 0.5em;
-      text-align: center;
-      line-height: 1.5em;
-
-      h4 {
-        color: #b5b5b5;
-        // font-size: 0.9em;
-        margin: 0;
-      }
-
-      p {
-        font-size: 0.9em;
-        color: #b5b5b5;
-        font-style: italic;
-        margin: 0;
-      }
-    }
-  }
-
   .task-list {
     list-style: none;
     padding-left: 1.5rem;
@@ -174,6 +139,9 @@
     overflow-x: auto;
     overflow-y: hidden;
   }
+
+  @import 'code';
+  @import 'image';
 }
 
 .header-link {

diff --git a/assets/sass/_partial/_post/_image.scss b/assets/sass/_partial/_post/_image.scss
@@ -0,0 +1,49 @@
+// ==============================
+// Post image
+// ==============================
+
+p>img {
+  cursor: pointer;
+}
+
+figure {
+  a:hover {
+    border: 0;
+  }
+
+  &.center {
+    clear: both;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.right {
+    float: right;
+    margin-left: 1.5em;
+  }
+
+  &.left {
+    float: left;
+    margin-right: 1.5em;
+  }
+
+  figcaption {
+    margin-top: 0.5em;
+    text-align: center;
+    line-height: 1.5em;
+
+    h4 {
+      color: #b5b5b5;
+      // font-size: 0.9em;
+      margin: 0;
+    }
+
+    p {
+      font-size: 0.9em;
+      color: #b5b5b5;
+      font-style: italic;
+      margin: 0;
+    }
+  }
+}
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
@@ -8,8 +8,10 @@
 {{- $.Page.Scratch.Add "figurecount" 1 -}}
 <!-- use either src or link-thumb for thumbnail image -->
 {{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
-<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
-  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}">
+<figure {{ with .Get "class" }} class="{{.}}" {{ end }} itemprop="associatedMedia"
+  itemscope itemtype="http://schema.org/ImageObject" {{ with .Get "width" }}
+  style="max-width:{{.}}" {{end}}>
     <div class="img"{{ if .Parent }} style="background-image: url('{{ print .Site.BaseURL $thumb }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
       <img itemprop="thumbnail" src="{{ $thumb }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
     </div>

diff --git a/resources/_gen/assets/scss/sass/jane.scss_48b060fe05b0a273d182ef83c0605941.content b/resources/_gen/assets/scss/sass/jane.scss_48b060fe05b0a273d182ef83c0605941.content
diff --git a/resources/_gen/assets/scss/sass/jane.scss_48b060fe05b0a273d182ef83c0605941.json b/resources/_gen/assets/scss/sass/jane.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -1 +1 @@
-{"Target":"sass/jane.min.88d592e1a22598ca8761beb28ca06830aa10a4319ca9e0d52c9477a3929812b7.css","MediaType":"text/css","Data":{"Integrity":"sha256-iNWS4aIlmMqHYb6yjKBoMKoQpDGcqeDVLJR3o5KYErc="}}
+{"Target":"sass/jane.min.dd1d51f154865f1f35c1c9b4ae1d8155f98899252a5dd79778751bd7cf9507e3.css","MediaType":"text/css","Data":{"Integrity":"sha256-3R1R8VSGXx81wcm0rh2BVfmImSUqXdeXeHUb18+VB+M="}}