feat(curtana): image size helpers

sparanoid · Jan 19, 2017 · 3df01f7 · 3df01f7
1 parent f0807db
commit 3df01f7
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 11 deletions.
diff --git a/_app/_posts/note/2014-06-01-custom-html-markups.md b/_app/_posts/note/2014-06-01-custom-html-markups.md
@@ -12,7 +12,7 @@ A paragraph block with a thin border line.
 
 ### Usage
 
-```markdown
+```md
 [Download](download) it from GitHub
 {: .download}
 
@@ -34,7 +34,7 @@ Make normal paragraph text large enough.
 
 ### Usage
 
-```markdown
+```md
 [PayPal](donate)
 {: .largetype}
 ```
@@ -50,7 +50,7 @@ A simple browser frame using pure CSS.
 
 ### Usage
 
-```markdown
+```md
 ![Image](https://sparanoid.com/logo.png)
 {: .browser}
 ```
@@ -74,13 +74,13 @@ plugin: lightense
 
 Markdown markup:
 
-```markdown
+```md
 ![Image](https://sparanoid.com/photo.jpg)
 ```
 
 Lightense Images is activated globally by default, if you want to disable this effect for specific image, you can simply apply `.no-lightense` CSS class to your image or `<img>`:
 
-```markdown
+```md
 ![Image](https://sparanoid.com/logo.png){: .no-lightense}
 ```
 
@@ -89,3 +89,47 @@ Please note that if you're using HTML markup, you should wrap your images into a
 ### Example
 
 ![Moonstruck Princess Extended - Red]({{ site.file }}/moonstruck-princess-ext-red.jpg)
+
+## Image Sizes
+
+There're different size helpers for images. They're available using the following CSS classes:
+
+### Small Size
+
+```md
+![Image](https://sparanoid.com/logo.png){: .size-small}
+```
+
+![Moonstruck Princess Extended - orange]({{ site.file }}/moonstruck-princess-ext-orange.jpg){: .size-small}
+
+### Medium Size
+
+Medium size is the default size of images, so you don't need additional CSS class for it.
+
+```md
+![Image](https://sparanoid.com/logo.png)
+```
+
+![Moonstruck Princess Extended - Yellow]({{ site.file }}/moonstruck-princess-ext-yellow.jpg)
+
+### Large Size
+
+```md
+![Image](https://sparanoid.com/logo.png){: .size-large}
+```
+
+![Moonstruck Princess Extended - Green]({{ site.file }}/moonstruck-princess-ext-green.jpg){: .size-large}
+
+### Aligned Images
+
+```md
+![Image](https://sparanoid.com/logo.png){: .size-left}
+
+![Image](https://sparanoid.com/logo.png){: .size-right}
+```
+
+![Moonstruck Princess Extended - Blue]({{ site.file }}/moonstruck-princess-ext-blue.jpg){: .size-left}
+
+Aligned images are smaller images beside text, you can just apply `.size-left` or `.size-right` to your images and nothing special markup required.
+
+Please note that aligned images will be responded to normal large size for small desktops or mobile devices.
diff --git a/_app/assets/themes/curtana/_less/common.less b/_app/assets/themes/curtana/_less/common.less
@@ -265,26 +265,90 @@ body:hover .latest {
   iframe,
   .browser {
     display: block;
-    width: calc(100% + (@space-xs * 2) + (@border-default * 2));
-    margin: 0 calc(-@space-xs - @border-default) 1.8rem;
+    width: calc(100% + (@space-md * 2) + (@border-default * 2));
+    margin: 0 calc(-@space-md - @border-default) 1.8rem;
 
     @media (max-width: @breakpoint-md) {
       width: calc(100% + (@space-md * 2));
-      .margin-offset(-@space-md, -@space-md);
+      .margin-offset(-@space-md);
     }
 
     @media (max-width: @breakpoint-sm) {
       width: calc(100% + (@space-sm * 2));
-      .margin-offset(-@space-sm, -@space-sm);
+      .margin-offset(-@space-sm);
     }
 
     // avoid images with `.no-enlarge` stretched by global img styles
+    &.size-fit,
     &.no-enlarge {
       margin-left: 0;
       margin-right: 0;
       max-width: 100%;
       width: auto;
     }
+
+    // Full width image
+    &.size-large {
+      width: calc(100% + (@space-lg * 2));
+      .margin-offset(-@space-lg);
+
+      @media (max-width: @breakpoint-md) {
+        width: calc(100% + (@space-md * 2));
+        .margin-offset(-@space-md);
+      }
+
+      @media (max-width: @breakpoint-sm) {
+        width: calc(100% + (@space-sm * 2));
+        .margin-offset(-@space-sm);
+      }
+    }
+
+    &.size-small {
+      width: calc(100% + (@space-xs * 2) + (@border-default * 2));
+      .margin-offset(calc(-@space-xs - @border-default));
+
+      @media (max-width: @breakpoint-md) {
+        width: calc(100% + (@space-md * 2));
+        .margin-offset(-@space-md);
+      }
+
+      @media (max-width: @breakpoint-sm) {
+        width: calc(100% + (@space-sm * 2));
+        .margin-offset(-@space-sm);
+      }
+    }
+
+    &.size-left {
+      float: left;
+      max-width: 40vw;
+      margin-top: (@space-xs / 2);
+      margin-right: @space-xs;
+      margin-bottom: (@space-xs / 2);
+
+      @media (max-width: @breakpoint-md) {
+        float: none;
+        max-width: none;
+        margin-top: auto;
+        margin-right: auto;
+        margin-bottom: auto;
+      }
+    }
+
+    &.size-right {
+      float: right;
+      max-width: 40vw;
+      margin-top: (@space-xs / 2);
+      margin-left: @space-xs;
+      margin-bottom: (@space-xs / 2);
+
+      @media (max-width: @breakpoint-md) {
+        float: none;
+        max-width: none;
+        margin-top: auto;
+        margin-left: auto;
+        margin-bottom: auto;
+      }
+    }
   }
 
   blockquote {

diff --git a/_app/assets/themes/curtana/_less/mixins.less b/_app/assets/themes/curtana/_less/mixins.less
@@ -28,12 +28,12 @@
   opacity: .5;
 }
 
-.padding-offset(@padding-left, @padding-right) {
+.padding-offset(@padding-left, @padding-right: @padding-left) {
   padding-left: @padding-left;
   padding-right: @padding-right;
 }
 
-.margin-offset(@margin-left, @margin-right) {
+.margin-offset(@margin-left, @margin-right: @margin-left) {
   margin-left: @margin-left;
   margin-right: @margin-right;
 }