REWORK button: add option for multiple button, CHANGE font

assets/scss/header.scss

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

assets/scss/hero.scss

@@ -1,25 +1,14 @@
 .hero {
     height: 700px;
-    background-image: url({{ .hero.background }}) !important;
+    {{ 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;
-}

assets/scss/index.scss

@@ -1,12 +1,26 @@
-$font: {{ .Param "font" }};
+$font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
+{{ with .Site.Params.font }}
+
+    {{ if .name }}
+
+        $font: {{ .name }} !important;
+
+    {{ end }}
+
+    {{ if .url }}
 
         @font-face {
             font-family: $font;
-    src: url("/fonts/#{$font}/#{$font}-Regular.woff2") format('woff2');
+            src: url({{ .url }}) format( {{ .format | default "ttf" }} );
             font-weight: 400;
             font-style: normal;
         }
 
+    {{ end }}
+
+{{ end }}
+
 * {
     box-sizing: border-box;
     word-break: break-word;
@@ -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;
 }

layouts/_default/list.html

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

layouts/partials/components/button.html

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

layouts/partials/contact.html

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

layouts/partials/header.html

@@ -32,7 +32,9 @@
                 {{ 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>

layouts/partials/hero.html

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

layouts/partials/service.html

@@ -20,8 +20,11 @@
                 <div class="divider"></div>
             </div>
             <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 }}
+                {{- range $service.button }}
+                    {{ partial "components/button.html" . }}
+                {{- end }}
             {{ end }}
         </div>
         {{if and ($service.image) (eq $service.image.direction "right")}}