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

.drone.yml

@@ -70,6 +70,9 @@ steps:
   when:
     ref:
     - refs/pull/**
+    status:
+    - failure
+    - success
 
 trigger:
   ref:
@@ -270,6 +273,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: 2c0c709a64128fd42c47d3549184ac29e2225be8de1953fa2e72b63aa0b7e871
+hmac: 9aae6e48a3316cb2881f7f6ae959a7868cb727138e0bdaae927c873b6417ccaa
 
 ...

exampleSite/content/_index.md

@@ -3,6 +3,7 @@ title: Welcome to the documentation
 description: Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there.
 geekdocNav: false
 geekdocAlign: center
+geekdocAnchor: false
 ---
 
 <!-- markdownlint-capture -->
@@ -18,9 +19,9 @@ geekdocAlign: center
 
 Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there.
 
-{{< button relref="usage/getting-started/" >}}Explore Documentation{{< /button >}}
+{{< button size="large" relref="usage/getting-started/" >}}Getting Started{{< /button >}}
 
-## Features
+## Feature overview
 
 {{< columns >}}
 

layouts/shortcodes/button.html

@@ -1,5 +1,10 @@
 {{ $ref := "" }}
 {{ $target := "" }}
+{{ $size := default "regular" (.Get "size" | lower) }}
+
+{{ if not (in (slice "regular" "large") $size) }}
+{{ $size = "regular" }}
+{{ end }}
 
 {{ with .Get "href" }}
   {{ $ref = . }}
@@ -10,7 +15,7 @@
   {{ $ref = relref $ . }}
 {{ end }}
 
-<span class="gdoc-button{{ with .Get "class" }} {{ . }}{{ end }}">
+<span class="gdoc-button gdoc-button--{{ $size }}{{ with .Get "class" }} {{ . }}{{ end }}">
 <a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="gdoc-button__link">
   {{ $.Inner }}
 </a>

src/sass/_defaults.scss

@@ -9,6 +9,7 @@ $font-size-base: 16px !default;
 $font-size-12: 0.75rem !default;
 $font-size-14: 0.875rem !default;
 $font-size-16: 1rem !default;
+$font-size-20: 1.25rem !default;
 $font-size-24: 1.5rem !default;
 $font-size-32: 2rem !default;
 $font-size-64: 4rem !default;

src/sass/_shortcodes.scss

@@ -82,6 +82,8 @@
 
 // {{< button >}}
 .gdoc-button {
+  $root: &;
+
   display: inline-block;
   background: var(--accent-color-lite);
   border: $border-1 solid var(--accent-color);
@@ -93,7 +95,6 @@
     display: inline-block;
     color: inherit !important;
     text-decoration: none !important;
-    padding: $padding-4 $padding-16;
   }
 
   &:hover {
@@ -101,6 +102,22 @@
     border-color: var(--button-border-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 >}}