diff --git a/.spelling b/.spelling index a8b5940e..60dbefd8 100644 --- a/.spelling +++ b/.spelling @@ -16,7 +16,9 @@ Collyer Collyer's Deniz Ducktor +endcapture esque +forloop Gallard Greshams Gymnasium diff --git a/_includes/multi-size-picture.html b/_includes/multi-size-picture.html new file mode 100644 index 00000000..be3cfc09 --- /dev/null +++ b/_includes/multi-size-picture.html @@ -0,0 +1,29 @@ +{%- assign sizes_list = include.sizes | split: ',' %} +{%- for size in sizes_list %} + {%- capture tmp %}@{{ size }}.{% endcapture -%} + {% if include.image contains tmp %} + {% assign size_tag = tmp %} + {% endif %} +{% endfor %} +{%- if size_tag -%} + + {%- if include.webp %} + + {%- endif %} + + {{ include.alt }} + +{%- else -%} + No image size tag detected! +{%- endif -%} diff --git a/_includes/picture-with-webp.html b/_includes/picture-with-webp.html new file mode 100644 index 00000000..8e412ad3 --- /dev/null +++ b/_includes/picture-with-webp.html @@ -0,0 +1,4 @@ + + + {{ include.alt }} + diff --git a/_sass/common.scss b/_sass/common.scss index 17dab1b4..7ca95522 100644 --- a/_sass/common.scss +++ b/_sass/common.scss @@ -3,6 +3,14 @@ background-size: cover; } +@mixin gradient-background-with-webp($top, $bottom, $image) { + @include gradient-background($top, $bottom, $image); + + @supports(background-image: url($image + '.webp')) { + @include gradient-background($top, $bottom, $image + '.20pc.webp'); + } +} + .fixed-width { @include media-query("medium") { width: 960px; diff --git a/_sass/hero.scss b/_sass/hero.scss index b355abcc..b316594e 100644 --- a/_sass/hero.scss +++ b/_sass/hero.scss @@ -6,7 +6,7 @@ $hero-top-colour: transparentize($sr-blue, 0.05); $hero-bottom-colour: transparentize($sr-blue, 0.5); .hero { - @include gradient-background( + @include gradient-background-with-webp( $hero-top-colour, $hero-bottom-colour, $hero-background-image diff --git a/_sass/panel.scss b/_sass/panel.scss index 998a2644..cf2a8ac8 100644 --- a/_sass/panel.scss +++ b/_sass/panel.scss @@ -62,23 +62,23 @@ img.image { } .panel-blueshirts { - @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/blueshirts.jpg"); + @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/blueshirts.jpg"); } .panel-boxes { - @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/boxes.jpg"); + @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/boxes.jpg"); } .panel-arena { - @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/arena.jpg"); + @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/arena.jpg"); } .panel-sponsor { - @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/sponsor-hero.jpg"); + @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/sponsor-hero.jpg"); } .panel-grandstand { - @include gradient-background($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/grandstand.jpg"); + @include gradient-background-with-webp($blue-top-colour, $blue-bottom-colour, "#{$image-directory}/grandstand.jpg"); } .panel-container { diff --git a/governance.html b/governance.html index 86f36dd4..a71eb238 100644 --- a/governance.html +++ b/governance.html @@ -2,6 +2,7 @@ layout: page title: Governance permalink: /governance/ +# cspell:ignore headshots ---
@@ -45,9 +46,12 @@

Diane Dowling

- Headshot of Diane + {% + include picture-with-webp.html + class="trustee-avatar" + image="/images/advertising/headshots/trustee-diane-01.jpg" + alt="Headshot of Diane" + %}
@@ -60,9 +64,12 @@

David Massey

- Headshot of David + {% + include picture-with-webp.html + class="trustee-avatar" + image="/images/advertising/headshots/trustee-david-01.jpg" + alt="Headshot of David" + %}
@@ -74,9 +81,12 @@

Thomas "Scarzy" Scarsbrook

- Headshot of Thomas + {% + include picture-with-webp.html + class="trustee-avatar" + image="/images/advertising/headshots/trustee-scarzy-01.jpg" + alt="Headshot of Thomas" + %}
diff --git a/images/advertising/glue-gun@1x.jpg.webp b/images/advertising/glue-gun@1x.jpg.webp new file mode 100644 index 00000000..e2c289a7 Binary files /dev/null and b/images/advertising/glue-gun@1x.jpg.webp differ diff --git a/images/advertising/glue-gun@2x.jpg.webp b/images/advertising/glue-gun@2x.jpg.webp new file mode 100644 index 00000000..ed1b35e5 Binary files /dev/null and b/images/advertising/glue-gun@2x.jpg.webp differ diff --git a/images/advertising/glue-gun@3x.jpg.webp b/images/advertising/glue-gun@3x.jpg.webp new file mode 100644 index 00000000..e73b4016 Binary files /dev/null and b/images/advertising/glue-gun@3x.jpg.webp differ diff --git a/images/advertising/happy-team@1x.jpg.webp b/images/advertising/happy-team@1x.jpg.webp new file mode 100644 index 00000000..68425bf8 Binary files /dev/null and b/images/advertising/happy-team@1x.jpg.webp differ diff --git a/images/advertising/happy-team@2x.jpg.webp b/images/advertising/happy-team@2x.jpg.webp new file mode 100644 index 00000000..274687be Binary files /dev/null and b/images/advertising/happy-team@2x.jpg.webp differ diff --git a/images/advertising/happy-team@3x.jpg.webp b/images/advertising/happy-team@3x.jpg.webp new file mode 100644 index 00000000..80c82357 Binary files /dev/null and b/images/advertising/happy-team@3x.jpg.webp differ diff --git a/images/advertising/headshots/competitor-becky-01.jpg.webp b/images/advertising/headshots/competitor-becky-01.jpg.webp new file mode 100644 index 00000000..8254134f Binary files /dev/null and b/images/advertising/headshots/competitor-becky-01.jpg.webp differ diff --git a/images/advertising/headshots/competitor-james-01.jpg.webp b/images/advertising/headshots/competitor-james-01.jpg.webp new file mode 100644 index 00000000..5389c5c0 Binary files /dev/null and b/images/advertising/headshots/competitor-james-01.jpg.webp differ diff --git a/images/advertising/headshots/competitor-phil-01.jpg.webp b/images/advertising/headshots/competitor-phil-01.jpg.webp new file mode 100644 index 00000000..67cb7854 Binary files /dev/null and b/images/advertising/headshots/competitor-phil-01.jpg.webp differ diff --git a/images/advertising/headshots/trustee-david-01.jpg.webp b/images/advertising/headshots/trustee-david-01.jpg.webp new file mode 100644 index 00000000..4377f0ca Binary files /dev/null and b/images/advertising/headshots/trustee-david-01.jpg.webp differ diff --git a/images/advertising/headshots/trustee-diane-01.jpg.webp b/images/advertising/headshots/trustee-diane-01.jpg.webp new file mode 100644 index 00000000..0e6e72f7 Binary files /dev/null and b/images/advertising/headshots/trustee-diane-01.jpg.webp differ diff --git a/images/advertising/headshots/trustee-scarzy-01.jpg.webp b/images/advertising/headshots/trustee-scarzy-01.jpg.webp new file mode 100644 index 00000000..7af22106 Binary files /dev/null and b/images/advertising/headshots/trustee-scarzy-01.jpg.webp differ diff --git a/images/advertising/robot-competing@1x.jpg.webp b/images/advertising/robot-competing@1x.jpg.webp new file mode 100644 index 00000000..3e7f00c0 Binary files /dev/null and b/images/advertising/robot-competing@1x.jpg.webp differ diff --git a/images/advertising/robot-competing@2x.jpg.webp b/images/advertising/robot-competing@2x.jpg.webp new file mode 100644 index 00000000..c91570ea Binary files /dev/null and b/images/advertising/robot-competing@2x.jpg.webp differ diff --git a/images/advertising/robot-competing@3x.jpg.webp b/images/advertising/robot-competing@3x.jpg.webp new file mode 100644 index 00000000..0e3a2d08 Binary files /dev/null and b/images/advertising/robot-competing@3x.jpg.webp differ diff --git a/images/advertising/sad-robot@1x.jpg.webp b/images/advertising/sad-robot@1x.jpg.webp new file mode 100644 index 00000000..3717d9b9 Binary files /dev/null and b/images/advertising/sad-robot@1x.jpg.webp differ diff --git a/images/advertising/sad-robot@2x.jpg.webp b/images/advertising/sad-robot@2x.jpg.webp new file mode 100644 index 00000000..b159e954 Binary files /dev/null and b/images/advertising/sad-robot@2x.jpg.webp differ diff --git a/images/advertising/team-building-robot@1x.jpg.webp b/images/advertising/team-building-robot@1x.jpg.webp new file mode 100644 index 00000000..e1b174e8 Binary files /dev/null and b/images/advertising/team-building-robot@1x.jpg.webp differ diff --git a/images/advertising/team-building-robot@2x.jpg.webp b/images/advertising/team-building-robot@2x.jpg.webp new file mode 100644 index 00000000..e38241e9 Binary files /dev/null and b/images/advertising/team-building-robot@2x.jpg.webp differ diff --git a/images/advertising/team-building-robot@3x.jpg.webp b/images/advertising/team-building-robot@3x.jpg.webp new file mode 100644 index 00000000..3075e7b0 Binary files /dev/null and b/images/advertising/team-building-robot@3x.jpg.webp differ diff --git a/images/advertising/team-coding@1x.jpg.webp b/images/advertising/team-coding@1x.jpg.webp new file mode 100644 index 00000000..b3129212 Binary files /dev/null and b/images/advertising/team-coding@1x.jpg.webp differ diff --git a/images/advertising/team-coding@2x.jpg.webp b/images/advertising/team-coding@2x.jpg.webp new file mode 100644 index 00000000..1e57e423 Binary files /dev/null and b/images/advertising/team-coding@2x.jpg.webp differ diff --git a/images/advertising/team-coding@3x.jpg.webp b/images/advertising/team-coding@3x.jpg.webp new file mode 100644 index 00000000..7339ce02 Binary files /dev/null and b/images/advertising/team-coding@3x.jpg.webp differ diff --git a/images/advertising/team-in-arena@1x.jpg.webp b/images/advertising/team-in-arena@1x.jpg.webp new file mode 100644 index 00000000..325383b9 Binary files /dev/null and b/images/advertising/team-in-arena@1x.jpg.webp differ diff --git a/images/advertising/team-in-arena@2x.jpg.webp b/images/advertising/team-in-arena@2x.jpg.webp new file mode 100644 index 00000000..fa6fec53 Binary files /dev/null and b/images/advertising/team-in-arena@2x.jpg.webp differ diff --git a/images/advertising/team-in-arena@3x.jpg.webp b/images/advertising/team-in-arena@3x.jpg.webp new file mode 100644 index 00000000..e9dae14f Binary files /dev/null and b/images/advertising/team-in-arena@3x.jpg.webp differ diff --git a/images/arena.jpg.20pc.webp b/images/arena.jpg.20pc.webp new file mode 100644 index 00000000..8839f622 Binary files /dev/null and b/images/arena.jpg.20pc.webp differ diff --git a/images/blueshirts.jpg.20pc.webp b/images/blueshirts.jpg.20pc.webp new file mode 100644 index 00000000..e2ce3499 Binary files /dev/null and b/images/blueshirts.jpg.20pc.webp differ diff --git a/images/boxes.jpg.20pc.webp b/images/boxes.jpg.20pc.webp new file mode 100644 index 00000000..7c56e7de Binary files /dev/null and b/images/boxes.jpg.20pc.webp differ diff --git a/images/grandstand.jpg.20pc.webp b/images/grandstand.jpg.20pc.webp new file mode 100644 index 00000000..62cb5204 Binary files /dev/null and b/images/grandstand.jpg.20pc.webp differ diff --git a/images/hero.jpg.20pc.webp b/images/hero.jpg.20pc.webp new file mode 100644 index 00000000..8c99bcf4 Binary files /dev/null and b/images/hero.jpg.20pc.webp differ diff --git a/images/sponsor-hero.jpg.20pc.webp b/images/sponsor-hero.jpg.20pc.webp new file mode 100644 index 00000000..5a4d1463 Binary files /dev/null and b/images/sponsor-hero.jpg.20pc.webp differ diff --git a/index.html b/index.html index bb79474d..6c263466 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,19 @@ --- layout: home +# cspell:ignore headshots ---

What is Student Robotics?

- Competitors talking while placing their robot in their starting corner in the arena + {% + include multi-size-picture.html + sizes="1x,2x,3x" + image="/images/advertising/team-in-arena@3x.jpg" + webp="true" + alt="Competitors talking while placing their robot in their starting corner in the arena" + %}

@@ -57,11 +60,13 @@

Valuable skills for young people

- A team of students looking happy standing behind their robot + {% + include multi-size-picture.html + sizes="1x,2x,3x" + image="/images/advertising/happy-team@3x.jpg" + webp="true" + alt="A team of students looking happy standing behind their robot" + %}

Working as a team

For a team to succeed at Student Robotics, they need to work @@ -70,11 +75,13 @@

Working as a team

- Three competitors sitting in front of a laptop + {% + include multi-size-picture.html + sizes="1x,2x,3x" + image="/images/advertising/team-coding@3x.jpg" + webp="true" + alt="Three competitors sitting in front of a laptop" + %}

Writing real code

Without some serious code, even the most masterfully built robots @@ -83,11 +90,13 @@

Writing real code

- Students and a teacher sitting around their robot + {% + include multi-size-picture.html + sizes="1x,2x,3x" + image="/images/advertising/team-building-robot@3x.jpg" + webp="true" + alt="Students and a teacher sitting around their robot" + %}

Building a robot

There's nothing quite like building something and bringing it to @@ -119,9 +128,12 @@

Testimonials

- Headshot of Phil + {% + include picture-with-webp.html + class="testimonial-avatar" + image="/images/advertising/headshots/competitor-phil-01.jpg" + alt="Headshot of Phil" + %}
@@ -138,9 +150,12 @@

Testimonials

- Headshot of Becky + {% + include picture-with-webp.html + class="testimonial-avatar" + image="/images/advertising/headshots/competitor-becky-01.jpg" + alt="Headshot of Becky" + %}
@@ -159,9 +174,12 @@

Testimonials

- Headshot of James + {% + include picture-with-webp.html + class="testimonial-avatar" + image="/images/advertising/headshots/competitor-james-01.jpg" + alt="Headshot of James" + %}
diff --git a/scripts/convert-image.sh b/scripts/convert-image.sh new file mode 100755 index 00000000..8e6a6c85 --- /dev/null +++ b/scripts/convert-image.sh @@ -0,0 +1,19 @@ +#/bin/bash + +set -euo pipefail +IFS=$'\n\t' + + +if [ "$#" -lt 1 ] +then + echo "Usage $0 FILE ..." + exit 1 +fi + + +for f in "$@" +do + echo "Converting $f to WEBP" + # Via ImageMagick + convert "$f" "${f}.webp" +done diff --git a/sponsor.html b/sponsor.html index 7351f50f..8937de32 100644 --- a/sponsor.html +++ b/sponsor.html @@ -52,20 +52,24 @@

£500 or more