From 021eaf7ab67b3eac0b7455172b53e1d4c77e7f63 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Fri, 21 May 2021 15:51:19 +0200
Subject: [PATCH] feat: add sizes 'regular' and 'large' to button shortcode
 (#135)

---
 .drone.yml                     |  5 ++++-
 exampleSite/content/_index.md  |  5 +++--
 layouts/shortcodes/button.html |  7 ++++++-
 src/sass/_defaults.scss        |  1 +
 src/sass/_shortcodes.scss      | 19 ++++++++++++++++++-
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/.drone.yml b/.drone.yml
index e2072b1..8114f10 100644
--- a/.drone.yml
+++ b/.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
 
 ...
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 7e0f44a..0c81d24 100644
--- a/exampleSite/content/_index.md
+++ b/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 >}}
 
diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html
index aa05c10..1f15c4e 100644
--- a/layouts/shortcodes/button.html
+++ b/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>
diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss
index 13c5730..9e2c7c8 100644
--- a/src/sass/_defaults.scss
+++ b/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;
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index c0540f6..8a6ac5a 100644
--- a/src/sass/_shortcodes.scss
+++ b/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 >}}