REWORK button: add option for multiple button, CHANGE font

This commit is contained in:
Hoernschen 2023-11-21 17:33:04 +01:00
parent db7ec5795f
commit f696b07527
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
9 changed files with 81 additions and 63 deletions

View file

@ -94,18 +94,6 @@
display: block;
}
.header-contact-button {
background-color: {{ .Site.Params.color.primary }};
color: white;
border-radius: 4px;
padding: 0.5rem 1.5rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
margin-left: 2.5rem
}
@media screen and (max-width: 600px) {
.header {
padding: 0.5rem;

View file

@ -1,25 +1,14 @@
.hero {
height: 700px;
background-image: url({{ .hero.background }}) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
{{ with .hero.background }}
background-image: url({{ . }}) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
{{ end }}
}
.hero-icon-container {
padding: 1rem;
margin: auto;
}
.hero-button {
background-color: {{ .color.primary }};
color: white;
border: 2px solid {{ .color.primary }};
border-radius: 4px;
padding: 0.5rem 1.5rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
margin-top: 1rem;
}

View file

@ -1,11 +1,25 @@
$font: {{ .Param "font" }};
$font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@font-face {
font-family: $font;
src: url("/fonts/#{$font}/#{$font}-Regular.woff2") format('woff2');
font-weight: 400;
font-style: normal;
}
{{ with .Site.Params.font }}
{{ if .name }}
$font: {{ .name }} !important;
{{ end }}
{{ if .url }}
@font-face {
font-family: $font;
src: url({{ .url }}) format( {{ .format | default "ttf" }} );
font-weight: 400;
font-style: normal;
}
{{ end }}
{{ end }}
* {
box-sizing: border-box;
@ -25,7 +39,7 @@ body {
display: flex;
flex-direction: column;
color: #333;
font-family: $font !important;
font-family: $font;
font-weight: 400;
font-style: normal;
}
@ -332,7 +346,19 @@ button {
object-fit: contain;
}
.service-button {
.button-filled {
background-color: {{ .Site.Params.color.primary }};
color: white;
border: 2px solid {{ .Site.Params.color.primary }};
border-radius: 4px;
padding: 0.5rem 1.5rem;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1rem;
}
.button-outlined {
background-color: transparent;
color: {{ .Site.Params.color.primary }};
border: 2px solid {{ .Site.Params.color.primary }};
@ -342,10 +368,9 @@ button {
text-decoration: none;
display: inline-block;
font-size: 1rem;
margin-top: 2rem;
}
.service-button:hover {
.button-outlined:hover {
background-color: {{ .Site.Params.color.primary }};
color: white;
}