themes/squirrel
themes/squirrel
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

REWORK button: add option for multiple button, CHANGE font

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/scss/header.scss
View file

@ -94,18 +94,6 @@
display: block; 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) { @media screen and (max-width: 600px) {
.header { .header {
padding: 0.5rem; padding: 0.5rem;

23
assets/scss/hero.scss
View file

@ -1,25 +1,14 @@
.hero { .hero {
height: 700px; height: 700px;
background-image: url({{ .hero.background }}) !important; {{ with .hero.background }}
background-size: cover; background-image: url({{ . }}) !important;
background-repeat: no-repeat; background-size: cover;
background-position: center center; background-repeat: no-repeat;
background-position: center center;
{{ end }}
} }
.hero-icon-container { .hero-icon-container {
padding: 1rem; padding: 1rem;
margin: auto; 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;
}

47
assets/scss/index.scss
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 { {{ with .Site.Params.font }}
font-family: $font;
src: url("/fonts/#{$font}/#{$font}-Regular.woff2") format('woff2'); {{ if .name }}
font-weight: 400;
font-style: normal; $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; box-sizing: border-box;
@ -25,7 +39,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #333; color: #333;
font-family: $font !important; font-family: $font;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@ -332,7 +346,19 @@ button {
object-fit: contain; 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; background-color: transparent;
color: {{ .Site.Params.color.primary }}; color: {{ .Site.Params.color.primary }};
border: 2px solid {{ .Site.Params.color.primary }}; border: 2px solid {{ .Site.Params.color.primary }};
@ -342,10 +368,9 @@ button {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 1rem; font-size: 1rem;
margin-top: 2rem;
} }
.service-button:hover { .button-outlined:hover {
background-color: {{ .Site.Params.color.primary }}; background-color: {{ .Site.Params.color.primary }};
color: white; color: white;
} }

2
layouts/_default/list.html
View file

@ -27,7 +27,7 @@
{{ $pages := where $.Site.RegularPages "Section" $id }} {{ $pages := where $.Site.RegularPages "Section" $id }}
{{- partial "team.html" (dict "id" $id "team" .Params "pages" $pages "defaultimage" $.Site.Params.defaultimage "odd" $odd) -}} {{- partial "team.html" (dict "id" $id "team" .Params "pages" $pages "defaultimage" $.Site.Params.defaultimage "odd" $odd) -}}
{{ else if eq .Params.type "contact" }} {{ else if eq .Params.type "contact" }}
{{- partial "contact.html" (dict "id" $id "contact" .Params "odd" $odd) -}} {{- partial "contact.html" (dict "id" $id "contact" .Params "content" .Content "odd" $odd) -}}
{{ else if eq .Params.type "logos" }} {{ else if eq .Params.type "logos" }}
{{- partial "logos.html" (dict "id" $id "logos" .Params "odd" $odd) -}} {{- partial "logos.html" (dict "id" $id "logos" .Params "odd" $odd) -}}
{{ else if eq .Params.type "links" }} {{ else if eq .Params.type "links" }}

7
layouts/partials/components/button.html Normal file
View file

@ -0,0 +1,7 @@
{{ $outlined := "outlined"}}
<a class="{{if eq .type $outlined}} button-outlined {{else}} button-filled {{end}}" href="{{ .url }}">
{{ with .icon }}
<i class="icon-{{ . }}"></i>
{{ end }}
{{ .text }}
</a>

3
layouts/partials/contact.html
View file

@ -1,4 +1,5 @@
{{- $contact := .contact }} {{- $contact := .contact }}
{{- $content := .content }}
{{- $id := "contact"}} {{- $id := "contact"}}
{{if $contact.id}} {{if $contact.id}}
{{- $id = $contact.id}} {{- $id = $contact.id}}
@ -9,7 +10,7 @@
<div class="section-content contact"> <div class="section-content contact">
<div class="contact-text"> <div class="contact-text">
<h1>{{ $contact.title }}</h1> <h1>{{ $contact.title }}</h1>
<p>{{ $contact.subtitle }}</p> <p>{{ $content }}</p>
</div> </div>
<div class="contact-button-container"> <div class="contact-button-container">
<a class="contact-button" href="{{ $contact.button.url }}">{{ $contact.button.text }}</a> <a class="contact-button" href="{{ $contact.button.url }}">{{ $contact.button.text }}</a>

32
layouts/partials/header.html
View file

@ -16,23 +16,25 @@
<a class="home" href="/#"><img id="logo" class="logo" src="{{ .Site.Params.logo }}" alt="Logo"></a> <a class="home" href="/#"><img id="logo" class="logo" src="{{ .Site.Params.logo }}" alt="Logo"></a>
<div class="header-items" id="header-items"> <div class="header-items" id="header-items">
{{- range $links}} {{- range $links}}
{{ if .links }} {{ if .links }}
<div class="header-item dropdown"> <div class="header-item dropdown">
<button class="dropbtn">{{ .text }} <button class="dropbtn">{{ .text }}
<i class="icon-caret-down"></i> <i class="icon-caret-down"></i>
</button> </button>
<div class="dropdown-content"> <div class="dropdown-content">
{{- range .links}} {{- range .links}}
<a href="{{ .url }}">{{ .text }}</a> <a href="{{ .url }}">{{ .text }}</a>
{{- end }} {{- end }}
</div> </div>
</div> </div>
{{ else }} {{ else }}
<a class="header-item" href="{{ .url }}">{{ .text }}</a> <a class="header-item" href="{{ .url }}">{{ .text }}</a>
{{ end }} {{ end }}
{{- end }} {{- end }}
{{ if $header.button }} {{ if $header.button }}
<a class="header-contact-button" href="{{ $header.button.url }}">{{ $header.button.text }}</a> {{- range $header.button }}
{{ partial "components/button.html" . }}
{{- end }}
{{ end }} {{ end }}
</div> </div>
</div> </div>

9
layouts/partials/hero.html
View file

@ -21,9 +21,12 @@
<div class="divider"></div> <div class="divider"></div>
</div> </div>
<p>{{ $content }}</p> <p>{{ $content }}</p>
{{if $hero.button.visible}} <br />
<a class="hero-button" href="{{ $hero.button.url }}">{{ $hero.button.text }}</a> {{ with $hero.button }}
{{end}} {{- range .}}
{{ partial "components/button.html" . }}
{{- end }}
{{ end }}
</div> </div>
<div class="hero-icon-container col-7"> <div class="hero-icon-container col-7">
<img class="service-icon" alt="{{ $hero.image.alt }}" src="{{ $hero.image.url }}"> <img class="service-icon" alt="{{ $hero.image.alt }}" src="{{ $hero.image.url }}">

9
layouts/partials/service.html
View file

@ -20,9 +20,12 @@
<div class="divider"></div> <div class="divider"></div>
</div> </div>
<p>{{ $content }}</p> <p>{{ $content }}</p>
{{if and ($service.button) ($service.button.visible)}} <br />
<a class="service-button" href="{{ $service.button.url }}">{{ $service.button.text }}</a> {{ if $service.button }}
{{end}} {{- range $service.button }}
{{ partial "components/button.html" . }}
{{- end }}
{{ end }}
</div> </div>
{{if and ($service.image) (eq $service.image.direction "right")}} {{if and ($service.image) (eq $service.image.direction "right")}}
<div class="service-icon-container col-4"> <div class="service-icon-container col-4">