feat: add sizes 'regular' and 'large' to button shortcode (#50)v0.10.1

4 files changed, 35 insertions, 8 deletions

diff --git a/.drone.yml b/.drone.yml
index 334c504..8d74847 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -70,6 +70,9 @@ steps:
   when:
     ref:
     - refs/pull/**
+    status:
+    - failure
+    - success
 
 trigger:
   ref:
@@ -273,6 +276,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: ed591d67a16d6ff6ea8b7dbff12194da646bb369903a6c2e62be812e66ae6700
+hmac: ebb333a66d8fd050835b2b5b479e5b9f3316aaa919c48476f5714979567d0e0a
 
 ...
diff --git a/exampleSite/content/posts/shortcodes.md b/exampleSite/content/posts/shortcodes.md
index b74272c..c17d0e7 100644
--- a/exampleSite/content/posts/shortcodes.md
+++ b/exampleSite/content/posts/shortcodes.md
@@ -23,7 +23,7 @@ The theme bundles some handy shortcodes that tries to cover common situations.
 Buttons are styled links that can lead to local page or external link.
 
 ```tpl
-{{</* button relref="/" [class="..."] */>}}Get Home{{</* /button */>}}
+{{</* button relref="/" [class="...", size="large|regular"] */>}}Get Home{{</* /button */>}}
 {{</* button href="https://github.com/thegeeklab/hugo-geekblog" */>}}Contribute{{</* /button */>}}
 ```
 
diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
index 6bef194..f55cfd9 100644
--- a/layouts/shortcodes/button.html
+++ b/layouts/shortcodes/button.html
@@ -1,17 +1,20 @@
 {{ $ref := "" }}
-{{ $target := "" }}
+{{ $size := default "regular" (.Get "size" | lower) }}
+
+{{ if not (in (slice "regular" "large") $size) }}
+{{ $size = "regular" }}
+{{ end }}
 
 {{ with .Get "href" }}
   {{ $ref = . }}
-  {{ $target = "_blank" }}
 {{ end }}
 
 {{ with .Get "relref" }}
   {{ $ref = relref $ . }}
 {{ end }}
 
-<span class="gblog-button{{ with .Get "class" }} {{ . }}{{ end }}">
-<a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="gblog-button__link">
+<span class="gblog-button gblog-button--{{ $size }}{{ with .Get "class" }} {{ . }}{{ end }}">
+<a {{ with $ref }} href="{{.}}" {{ end }} class="gblog-button__link">
   {{ $.Inner }}
 </a>
 </span>
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index d50b34f..b7d17c6 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -82,6 +82,8 @@
 
 // {{< button >}}
 .gblog-button {
+  $root: &;
+
   display: inline-block;
   color: $gray-700;
   border: $border-1 solid $gray-500;
@@ -93,14 +95,33 @@
     display: inline-block;
     color: inherit !important;
     text-decoration: none !important;
-    padding: $padding-4 $padding-16;
+
+    &:hover {
+      background: none;
+    }
   }
 
   &:hover {
-    background: rgba($main-color, 0.9);
+    background: lighten($main-color, 2);
     border-color: $main-color;
     color: $gray-100;
   }
+
+  &--regular {
+    font-size: $font-size-base;
+
+    #{$root}__link {
+      padding: $padding-4 $padding-8;
+    }
+  }
+
+  &--large {
+    font-size: $font-size-20;
+
+    #{$root}__link {
+      padding: $padding-8 $padding-16;
+    }
+  }
 }
 
 // {{< hint >}}