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

.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
 
 ...

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 */>}}
 ```
 

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>

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 >}}