ソースを参照

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 4年前
コミット
61d77fc738
署名者: Kevin-Mok GPGキーID: 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. バイナリ
      static/images/backgrounds/codm-reddit-banner.jpg
  11. バイナリ
      static/images/backgrounds/codm-reddit-banner.webp
  12. バイナリ
      static/images/backgrounds/halloween-loading-screen.jpg
  13. バイナリ
      static/images/backgrounds/halloween-loading-screen.webp
  14. バイナリ
      static/images/slider/hero-area.jpg
  15. バイナリ
      static/images/slider/hero-area.webp
  16. 9
      static/images/team/.gitattributes
  17. バイナリ
      static/images/team/bakkuteh.jpg
  18. バイナリ
      static/images/team/bakkuteh.png
  19. バイナリ
      static/images/team/bakkuteh.webp
  20. バイナリ
      static/images/team/duck.jpg
  21. バイナリ
      static/images/team/duck.webp
  22. バイナリ
      static/images/team/helen.jpg
  23. バイナリ
      static/images/team/helen.webp
  24. バイナリ
      static/images/team/hunter-2.webp
  25. バイナリ
      static/images/team/hunter.jpg
  26. バイナリ
      static/images/team/hunter.webp
  27. バイナリ
      static/images/team/josh.jpg
  28. バイナリ
      static/images/team/josh.webp
  29. バイナリ
      static/images/team/pistolfist.jpg
  30. バイナリ
      static/images/team/pistolfist.webp
  31. バイナリ
      static/images/team/slade.jpg
  32. バイナリ
      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

バイナリ
static/images/backgrounds/codm-reddit-banner.jpg

変更後

幅: 1200  |  高さ: 764  |  サイズ: 189 KiB

バイナリ
static/images/backgrounds/codm-reddit-banner.webp (Git LFSで保管されています)

size 68324

バイナリ
static/images/backgrounds/halloween-loading-screen.jpg

変更後

幅: 2160  |  高さ: 800  |  サイズ: 234 KiB

バイナリ
static/images/backgrounds/halloween-loading-screen.webp (Git LFSで保管されています)

size 167104

バイナリ
static/images/slider/hero-area.jpg

変更後

幅: 1920  |  高さ: 932  |  サイズ: 313 KiB

バイナリ
static/images/slider/hero-area.webp (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

バイナリ
static/images/team/bakkuteh.jpg

変更後

幅: 500  |  高さ: 500  |  サイズ: 32 KiB

バイナリ
static/images/team/bakkuteh.png

変更後

幅: 500  |  高さ: 500  |  サイズ: 88 KiB

バイナリ
static/images/team/bakkuteh.webp

バイナリ
static/images/team/duck.jpg

変更後

幅: 500  |  高さ: 500  |  サイズ: 40 KiB

バイナリ
static/images/team/duck.webp

バイナリ
static/images/team/helen.jpg

変更後

幅: 464  |  高さ: 464  |  サイズ: 150 KiB

バイナリ
static/images/team/helen.webp

バイナリ
static/images/team/hunter-2.webp

バイナリ
static/images/team/hunter.jpg

変更後

幅: 500  |  高さ: 500  |  サイズ: 64 KiB

バイナリ
static/images/team/hunter.webp

バイナリ
static/images/team/josh.jpg

変更後

幅: 500  |  高さ: 500  |  サイズ: 51 KiB

バイナリ
static/images/team/josh.webp

バイナリ
static/images/team/pistolfist.jpg

変更後

幅: 500  |  高さ: 500  |  サイズ: 48 KiB

バイナリ
static/images/team/pistolfist.webp

バイナリ
static/images/team/slade.jpg

変更後

幅: 500  |  高さ: 500  |  サイズ: 92 KiB

バイナリ
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]
読み込み中…
キャンセル
保存