REWORK button: add option for multiple button, CHANGE font
This commit is contained in:
parent
db7ec5795f
commit
f696b07527
9 changed files with 81 additions and 63 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue