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

This commit is contained in:
Robert Kaussow 2021-05-21 15:51:19 +02:00 committed by GitHub
parent cc10b9d80a
commit 021eaf7ab6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 5 deletions

View file

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

View file

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

View file

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

View file

@ -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;

View file

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