Add jpg's as webp fallback for Safari

Replaced webp backgrounds with jpg's because couldn't figure out
how to use Modernizr (detect webp support for CSS fallback) for Hugo.

Also added back testimonial section with leader testimonials.

assets/css/style.css

@@ -568,7 +568,8 @@ a:hover {
 .bg-2 {
   background-repeat: no-repeat;
   background-size: cover;
-  background-attachment: fixed;
+  /* background-attachment: fixed; */
+  background-position: center;
 }
 
 .hero-area {

assets/sass/custom.scss

@@ -77,3 +77,10 @@ p, h3, h4 {
   // width: auto;
   // height: auto;
 }
+
+#counter {
+  background-position: center;
+  background-repeat: no-repeat;
+  // background-size: auto;
+  // background-size: contain;
+}

config.toml

@@ -48,7 +48,8 @@ custom_css = ["css/custom.css"]
     # Banner Section
     [params.banner]
     enable = true
-    bgImage = "images/slider/hero-area.webp"
+    # bgImage = "images/slider/hero-area.webp"
+    bgImage = "images/slider/hero-area.jpg"
     # bgImage = "images/slider/eagle.png"
     heading = "Ataraxy"
     content= "NA, MP-focused clan that is currently looking for friendly and active clan members to play together with."
@@ -59,7 +60,7 @@ custom_css = ["css/custom.css"]
     # counter
     [params.counter]
     enable = true
-    bgImage = "images/backgrounds/codm-reddit-banner.webp"
+    bgImage = "images/backgrounds/codm-reddit-banner.jpg"
         [[params.counter.counterItem]]
         title = "Season 2 Ranking"
         icon = "tf-ion-trophy"

data/team.yml

@@ -2,17 +2,17 @@ enable : true
 heading : Our
 headingSpan : Team
 teamMember :
-  - image : images/team/josh.webp
+  - imageName : josh
     name : JoshuaAustin07
     designation : Clan Master
     description : Oversees entire clan's operations. Has final say on all major clan decisions.
 
-  - image : images/team/bakkuteh.webp
+  - imageName : bakkuteh
     name : bakkuteh
     designation : Vice Master
     description : In charge of player management. Created spreadsheet to help keep track of player performance metrics.
 
-  - image : images/team/pistolfist.webp
+  - imageName : pistolfist
     name : PistolFist
     designation : Vice Master
     description : In charge of recruiting and assists with player management. Created this site and co-designed clan logo. Founder of clan. 
@@ -20,23 +20,24 @@ teamMember :
       # - icon : tf-ion-social-facebook
         # url : "#"
 
-  # - image : images/team/hunter.webp
-  - image : images/team/hunter-2.webp
+  - imageName : hunter
+  # - imageName : hunter-rs
     name : Hunter
     designation : MP Leader
     description : Runs MP lobbies and go-to person for MP strategy.
 
-  - image : images/team/duck.webp
+  - imageName : duck
     name : Duckmaster
     designation : BR Leader
     description : Runs BR lobbies and go-to person for BR strategy.
 
-  - image : images/team/slade.webp
+  - imageName : slade
+  # - imageName : slade-rs
     name : Slade
     designation : BR Leader
     description : Runs BR lobbies and go-to person for BR strategy.
 
-  - image : images/team/helen.webp
+  - imageName : helen
     name : Heleners
     designation : Discord Administrator
     description : Manages Discord server. Co-founder of clan.

data/testimonial.yml

@@ -1,15 +1,26 @@
 heading: Our
 headingSpan: Members
-# bgImage : "images/backgrounds/halloween-loading-screen.jpg"
-bgImage : "images/backgrounds/halloween-loading-screen.webp"
-enable : false
+bgImage : "images/backgrounds/halloween-loading-screen.jpg"
+# enable : false
+enable : true
 testimonialItem :
-  - name : bakkuteh
-    image : images/team/bakkuteh.webp
-    date : Nov 24, 2019
-    content : Pigs go oink.
-
   - name : PistolFist
-    image : images/team/pistolfist.webp
-    date : Nov 24, 2019
-    content : Bang.
+    image : images/team/pistolfist.jpg
+    date : Oct 21, 2019
+    content : Hip-hop/trap EDM fan.
+
+  - name : Heleners
+    image : images/team/helen.jpg
+    date : Oct 22, 2019
+    content : Loves Frozen.
+
+  - name : JoshuaAustin07
+    image : images/team/josh.jpg
+    date : Nov 10, 2019
+    content : Likes to use dogs that aren't his as his profile picture.
+
+  - name : bakkutteh
+    image : images/team/bakkuteh.png
+    date : Nov 15, 2019
+    content : Name means pork bone tea.
+

layouts/partials/counter.html

@@ -0,0 +1,19 @@
+{{ if .Site.Params.counter.enable }}
+{{"<!-- Start Counter Section -->" | safeHTML}}
+<section id="counter" class="bg-1 section overly" style='background-image: url("{{ .Site.Params.counter.bgImage | absURL }}")'>
+    <div class="container">
+        <div class="row">
+            {{ range .Site.Params.counter.counterItem }}
+            <div class="col-lg-3 col-md-6 col-12 text-center wow fadeInDown" data-wow-duration="500ms">
+                <div class="counters-item">
+                    <i class="{{ .icon }}"></i>
+                    <span data-speed="3000" data-to="{{ .count }}">{{ .count }}</span>
+                    <h3>{{ .title }}</h3>
+                </div>
+            </div>
+            {{ end }}
+        </div>
+    </div>
+</section>
+{{"<!-- /Counter Section -->" | safeHTML}}
+{{ end }}

layouts/partials/hero-area.html

@@ -0,0 +1,18 @@
+{{ if .Site.Params.banner.enable }}
+{{"<!-- Welcome Slider-->" | safeHTML}}
+<section class="hero-area" style='background-image: url("{{ .Site.Params.banner.bgImage | absURL }}");'>
+    <div class="block">
+        {{with .Site.Params.banner.icon}}
+        <div class="video-button">
+            <i class="{{ . }}"></i>
+        </div>
+        {{ end }}
+       {{with .Site.Params.banner.heading}} <h1>{{ . }}</h1>{{ end }}
+       {{with .Site.Params.banner.content}} <p>{{ . }}</p> {{ end }}
+       {{ if .Site.Params.banner.btn}}
+        <a data-scroll href="{{ .Site.Params.banner.btnURL}}" class="btn btn-transparent">{{ .Site.Params.banner.btnText}}</a>
+        {{ end }}
+    </div>
+</section>
+{{"<!-- /Welcome Slider-->" | safeHTML}}
+{{end}}

layouts/partials/team.html

@@ -18,7 +18,13 @@
                 <div class="team-member">
                     <div class="member-photo">
                         {{"<!-- member photo -->" | safeHTML}}
-                        <img class="img-fluid" src="{{ .image | absURL }}" alt="">
+                        <picture>
+                          <source class="img-fluid"
+                          srcset="images/team/{{ .imageName }}.webp" type="image/webp">
+                          <source class="img-fluid"
+                          srcset="images/team/{{ .imageName }}.jpg" type="image/jpeg"> 
+                          <img class="img-fluid" src="images/team/{{ .imageName }}.jpg" alt="{{ .name }}-profile-picture">
+                        </picture>
 
                         {{"<!-- member social profile -->" | safeHTML}}
                         <!-- <div class="mask"> -->

static/images/.gitattributes

@@ -40,3 +40,5 @@ team/hunter.webp filter=lfs diff=lfs merge=lfs -text
 clan-logo.png filter=lfs diff=lfs merge=lfs -text
 mee6-icon.png filter=lfs diff=lfs merge=lfs -text
 clan-logo-christmas.png filter=lfs diff=lfs merge=lfs -text
+backgrounds/codm-reddit-banner.jpg filter=lfs diff=lfs merge=lfs -text
+backgrounds/halloween-loading-screen.jpg filter=lfs diff=lfs merge=lfs -text

static/images/team/.gitattributes

@@ -4,3 +4,12 @@ slade.webp filter=lfs diff=lfs merge=lfs -text
 bakkuteh.webp filter=lfs diff=lfs merge=lfs -text
 duck.webp filter=lfs diff=lfs merge=lfs -text
 helen.webp filter=lfs diff=lfs merge=lfs -text
+hunter.jpg filter=lfs diff=lfs merge=lfs -text
+slade.jpg filter=lfs diff=lfs merge=lfs -text
+bakkuteh.jpg filter=lfs diff=lfs merge=lfs -text
+bakkuteh.png filter=lfs diff=lfs merge=lfs -text
+duck.jpg filter=lfs diff=lfs merge=lfs -text
+helen.jpg filter=lfs diff=lfs merge=lfs -text
+josh.jpg filter=lfs diff=lfs merge=lfs -text
+pistolfist.jpg filter=lfs diff=lfs merge=lfs -text
+webp.fish filter=lfs diff=lfs merge=lfs -text

static/images/team/webp.fish

@@ -0,0 +1,10 @@
+# regular
+# convert $argv[1].$argv[2] -resize 500x500 $argv[1]-rs.jpg
+# cwebp -q 80 $argv[1]-rs.jpg -o $argv[1].webp
+# mv $argv[1]-rs.jpg $argv[1].jpg
+# rm $argv[1].$argv[2]
+
+# png
+convert $argv[1].$argv[2] -resize 500x500 $argv[1]-rs.$argv[2]
+cwebp -q 80 $argv[1]-rs.$argv[2] -o $argv[1].webp
+mv $argv[1]-rs.$argv[2] $argv[1].$argv[2]