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;
}
.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;

23
assets/scss/hero.scss
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;
}

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 {
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;
}

2
layouts/_default/list.html
View file

@ -27,7 +27,7 @@
{{ $pages := where $.Site.RegularPages "Section" $id }}
{{- partial "team.html" (dict "id" $id "team" .Params "pages" $pages "defaultimage" $.Site.Params.defaultimage "odd" $odd) -}}
{{ 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" }}
{{- partial "logos.html" (dict "id" $id "logos" .Params "odd" $odd) -}}
{{ 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 }}
{{- $content := .content }}
{{- $id := "contact"}}
{{if $contact.id}}
{{- $id = $contact.id}}
@ -9,7 +10,7 @@
<div class="section-content contact">
<div class="contact-text">
<h1>{{ $contact.title }}</h1>
<p>{{ $contact.subtitle }}</p>
<p>{{ $content }}</p>
</div>
<div class="contact-button-container">
<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>
<div class="header-items" id="header-items">
{{- range $links}}
{{ if .links }}
<div class="header-item dropdown">
<button class="dropbtn">{{ .text }}
<i class="icon-caret-down"></i>
</button>
<div class="dropdown-content">
{{- range .links}}
<a href="{{ .url }}">{{ .text }}</a>
{{- end }}
</div>
</div>
{{ else }}
<a class="header-item" href="{{ .url }}">{{ .text }}</a>
{{ end }}
{{ if .links }}
<div class="header-item dropdown">
<button class="dropbtn">{{ .text }}
<i class="icon-caret-down"></i>
</button>
<div class="dropdown-content">
{{- range .links}}
<a href="{{ .url }}">{{ .text }}</a>
{{- end }}
</div>
</div>
{{ else }}
<a class="header-item" href="{{ .url }}">{{ .text }}</a>
{{ end }}
{{- end }}
{{ 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 }}
</div>
</div>

9
layouts/partials/hero.html
View file

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