From c697cf1eddd6c5f0190b2b1cf5166e344909f057 Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Mon, 24 May 2021 15:22:22 +0200 Subject: [PATCH] feat: add sizes 'regular' and 'large' to button shortcode (#50) --- .drone.yml | 5 ++++- exampleSite/content/posts/shortcodes.md | 2 +- layouts/shortcodes/button.html | 11 +++++++---- src/sass/_shortcodes.scss | 25 +++++++++++++++++++++++-- 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/.drone.yml b/.drone.yml index 334c5045..8d748472 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 b74272c6..c17d0e75 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 -{{}}Get Home{{}} +{{}}Get Home{{}} {{}}Contribute{{}} ``` diff --git a/layouts/shortcodes/button.html b/layouts/shortcodes/button.html index 6bef194d..f55cfd9c 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 }} - - + + {{ $.Inner }} diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index d50b34f0..b7d17c6e 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 >}}