Parcourir la source

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.
master
Kevin Mok il y a 4 ans
Parent
révision
61d77fc738
Signé par: Kevin-Mok ID de la clé GPG: 6E920656BBAD3E6C
  1. 3
      assets/css/style.css
  2. 7
      assets/sass/custom.scss
  3. 5
      config.toml
  4. 17
      data/team.yml
  5. 33
      data/testimonial.yml
  6. 19
      layouts/partials/counter.html
  7. 18
      layouts/partials/hero-area.html
  8. 8
      layouts/partials/team.html
  9. 2
      static/images/.gitattributes
  10. BIN
      static/images/backgrounds/codm-reddit-banner.jpg
  11. BIN
      static/images/backgrounds/codm-reddit-banner.webp
  12. BIN
      static/images/backgrounds/halloween-loading-screen.jpg
  13. BIN
      static/images/backgrounds/halloween-loading-screen.webp
  14. BIN
      static/images/slider/hero-area.jpg
  15. BIN
      static/images/slider/hero-area.webp
  16. 9
      static/images/team/.gitattributes
  17. BIN
      static/images/team/bakkuteh.jpg
  18. BIN
      static/images/team/bakkuteh.png
  19. BIN
      static/images/team/bakkuteh.webp
  20. BIN
      static/images/team/duck.jpg
  21. BIN
      static/images/team/duck.webp
  22. BIN
      static/images/team/helen.jpg
  23. BIN
      static/images/team/helen.webp
  24. BIN
      static/images/team/hunter-2.webp
  25. BIN
      static/images/team/hunter.jpg
  26. BIN
      static/images/team/hunter.webp
  27. BIN
      static/images/team/josh.jpg
  28. BIN
      static/images/team/josh.webp
  29. BIN
      static/images/team/pistolfist.jpg
  30. BIN
      static/images/team/pistolfist.webp
  31. BIN
      static/images/team/slade.jpg
  32. BIN
      static/images/team/slade.webp
  33. 10
      static/images/team/webp.fish

3
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 {

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

5
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"

17
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.

33
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.

19
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 }}

18
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}}

8
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"> -->

2
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

BIN
static/images/backgrounds/codm-reddit-banner.jpg

Après

Largeur: 1200  |  Hauteur: 764  |  Taille: 189 KiB

BIN
static/images/backgrounds/codm-reddit-banner.webp (Stocké avec Git LFS)

size 68324

BIN
static/images/backgrounds/halloween-loading-screen.jpg

Après

Largeur: 2160  |  Hauteur: 800  |  Taille: 234 KiB

BIN
static/images/backgrounds/halloween-loading-screen.webp (Stocké avec Git LFS)

size 167104

BIN
static/images/slider/hero-area.jpg

Après

Largeur: 1920  |  Hauteur: 932  |  Taille: 313 KiB

BIN
static/images/slider/hero-area.webp (Stocké avec Git LFS)

size 157022

9
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

BIN
static/images/team/bakkuteh.jpg

Après

Largeur: 500  |  Hauteur: 500  |  Taille: 32 KiB

BIN
static/images/team/bakkuteh.png

Après

Largeur: 500  |  Hauteur: 500  |  Taille: 88 KiB

BIN
static/images/team/bakkuteh.webp

BIN
static/images/team/duck.jpg

Après

Largeur: 500  |  Hauteur: 500  |  Taille: 40 KiB

BIN
static/images/team/duck.webp

BIN
static/images/team/helen.jpg

Après

Largeur: 464  |  Hauteur: 464  |  Taille: 150 KiB

BIN
static/images/team/helen.webp

BIN
static/images/team/hunter-2.webp

BIN
static/images/team/hunter.jpg

Après

Largeur: 500  |  Hauteur: 500  |  Taille: 64 KiB

BIN
static/images/team/hunter.webp

BIN
static/images/team/josh.jpg

Après

Largeur: 500  |  Hauteur: 500  |  Taille: 51 KiB

BIN
static/images/team/josh.webp

BIN
static/images/team/pistolfist.jpg

Après

Largeur: 500  |  Hauteur: 500  |  Taille: 48 KiB

BIN
static/images/team/pistolfist.webp

BIN
static/images/team/slade.jpg

Après

Largeur: 500  |  Hauteur: 500  |  Taille: 92 KiB

BIN
static/images/team/slade.webp

10
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]
Chargement…
Annuler
Enregistrer