diff --git a/content/_index.md b/content/_index.md index fd353601..48850beb 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,38 +1,56 @@ --- -cover_img: images/true-to-who-we-are-v1.png -cover_img_alt: A giant friendly hand, holding a small flower -cta_img: images/raise-expectations-broccoli.png -cta_img_alt: A giant friendly hand, watering a small plant with a tiny watering can. -cta: More about kind -ctaLink: /about/ -cta2: Our approach -cta2Link: /services/#how-we-work cta3Title: Raise your expectations cta3Copy: Ethical work is excellent work. We combine expertise in digital, branding and strategy with an unwavering commitment to social change. cta3: Our work cta3Link: /work/ cta4: Services cta4Link: /services/ +cover_img: images/true-to-who-we-are-v1.png +cover_img_alt: A giant friendly hand, holding a small flower date: 2020-04-24T10:48:46.000Z description: We’re a small but powerful team of carefully selected senior professionals. Strategy, brand, digital – we bring it all together and drive change in ways that really matter. -title: Strategy, Brand, Digital +title: Ethical creative agency services: - brand - digital - strategy hidden: false +preheading: Ethical creative agency heading: For the good folks +work_heading: Partnerships that deliver real impact +work_intro: Our client base is 100% socially responsible and purpose-driven. By using our skills and insights, we empower and lift up these organisations. A force for good behind the scenes. intro: > - The **wildlife protectors**, **cultural contributors** and **green architects**. We’re for everyone who’s making a change for good. - - - That’s not you ~~BP~~, ~~Amazon~~, ~~Shell~~… -intro_md: true + The **wildlife protectors**, **cultural contributors** and **social innovators**. We’re for everyone who’s making a change for good. related_stats: - pay-gap - socially-reponsible - charity-donations - gender-neutral social_img: images/mat-and-michelle.jpg +banner_images: + - img: images/strategy-image-kind-site.jpg + alt: Three people sitting around a wooden table, looking at a tablet and laptop with Backlit Gallery website designs + - img: images/work-chapter-poster-bus-stop-2-landscape.jpg + alt: A single poster mockup for the performance ‘Always Already’. The poster is on a brick wall, a longer perspective view of the street is visible to the right of the image. + - img: images/work-rewilding-britain-teaser.jpg + alt: A Blue Tit on a branch + - img: images/mat-and-michelle.jpg + alt: Kind owners, Mat Hayward and Michelle Pavey + - img: images/strategy-notes.jpg + alt: Pam, brand strategist and Michelle, strategy director planning a project + - img: images/work-garden-organic-laptop-3.jpg + alt: Garden Organic website on a laptop, situated on a garden table. + - img: images/gary-ellis-5vf16lnz-gi-unsplash.jpg + alt: A river in the Scottish Higlands + - img: images/work-jackson-crane-biophillic-house.jpg + alt: Rendered image of a biophilic house + - img: images/work-rewilding-britain-carousel-2.jpg + alt: A beaver on a river bank + - img: images/work-rewilding-britain-carousel-4.jpg + alt: Landscape image of a large tree on farmland + - img: images/work-eti-offshore-wind.jpg + alt: Sunset photograph of the sea with a wind farm in the distance + - img: images/work-garden-organic-laptop-jess-seth.jpg + alt: Over the shoulder view of a man and a woman looking at the Garden Organic website on a laptop --- diff --git a/content/work/chapter.md b/content/work/chapter.md index 9b0ab048..2db7ef5e 100644 --- a/content/work/chapter.md +++ b/content/work/chapter.md @@ -22,7 +22,6 @@ intro: > Chapter needed a brand and website to represent the creative, diverse, community-centric work they do on both a local and international level. They wanted to stand out as an organisation that has something to say, to show, and to make people feel something. They also wanted to ensure they were as inclusive as possible to all communities in the area and much further afield. -featured: true date: 2023-06-28T12:25:28.863Z external_link: https://chapter.org.uk key_stat: null diff --git a/content/work/rewilding-britain.md b/content/work/rewilding-britain.md index 57485608..39400677 100644 --- a/content/work/rewilding-britain.md +++ b/content/work/rewilding-britain.md @@ -53,6 +53,7 @@ teaser: - img: images/work-rewilding-britain-teaser.jpg alt: A Blue Tit on a branch social_img_txt: "A platform to inspire rewilding projects across the country" +client: Rewilding Britain --- diff --git a/content/work/unesco.md b/content/work/unesco.md index 77913c81..4080e11b 100644 --- a/content/work/unesco.md +++ b/content/work/unesco.md @@ -31,8 +31,8 @@ banner_img: images/work-unesco-school.jpg banner_img_alt: Children at desks in a school, working with blue pens. One child is looking directly at the camera toc: true teaser: - title: Ensuring access to education for millions of children - description: A global user-centred design process that resulted in the delivery of a digital report and knowledge base to support governments in strengthening the systems that provide education, in preparation for emergencies such as conflict or natural disaster + title: Access to education for millions of children + description: A user-centred design process delivering a digital report to help governments strengthen education systems for emergencies. images: - img: images/work-unesco-flat.jpg alt: Flat images of pages from a report document @@ -44,6 +44,7 @@ teaser: - img: images/work-unesco-internal-page.jpg alt: A tablet device with a page from the Digital PDF report social_img_txt: "Ensuring access to education for millions of children" +client: UNESCO --- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b10828b5..91845371 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,7 +7,7 @@ {{ partial "head" . }} {{ end }} - + Skip to content diff --git a/layouts/blog/list.html b/layouts/blog/list.html index bd36b56c..8032f556 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -6,7 +6,10 @@

Featured posts

    {{ range ( where ( where .Pages "Params.featured" "==" true ) "Params.unlisted" "!=" true ) }}
  1. - {{ partial "card" . }} + {{ partial "card" (dict + "context" . + "tall" false + ) }}
    2. {{ end }}
diff --git a/layouts/index.html b/layouts/index.html index d640597b..bfc8f2b1 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,9 +1,13 @@ +{{ define "header" }} + {{ partial "header__homepage.html" . }} +{{ end }} + {{ define "main" }} - {{ partial "services.html" . }} - {{ partial "header__landing.html" . }} - {{ partial "featured_work.html" . }} - {{ partial "cta.html" . }} - {{ partial "our-stats.html" . }} - {{ partial "our-insights.html" . }} - {{ partial "mailing-list.html" . }} + {{ partial "homepage-work.html" . }} + {{ partial "homepage-impact.html" . }} + {{ partial "homepage-insights.html" . }} {{ end }} + +{{ define "footer" }} + {{ partial "homepage-footer.html" . }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/card.html b/layouts/partials/card.html index 28ac9513..537e51ac 100644 --- a/layouts/partials/card.html +++ b/layouts/partials/card.html @@ -1,36 +1,38 @@ -
- -
+ +
- {{ if .Params.cover_img }} - {{ partial "image__card" . }} - {{ end }} -
- {{ with .Params.key_topic }} - {{ title . }} - {{end}} -

{{ .Title }}

- - {{ if .Params.illustration }} -
- {{ partial "image__blog-illustration" . }} -
+ "> + {{ if .Params.cover_img }} + {{ partial "image__card" . }} {{ end }} +
+ {{ with .Params.key_topic }} + {{ title . }} + {{end}} +

{{ .Title }}

+ + {{ if .Params.illustration }} +
+ {{ partial "image__blog-illustration" . }} +
+ {{ end }} +
+
+ -
- - -
+ + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/featured_work.html b/layouts/partials/featured_work.html deleted file mode 100644 index 335a747a..00000000 --- a/layouts/partials/featured_work.html +++ /dev/null @@ -1,18 +0,0 @@ - -
-

Case studies

- -
diff --git a/layouts/partials/header__homepage.html b/layouts/partials/header__homepage.html new file mode 100644 index 00000000..8c0f5488 --- /dev/null +++ b/layouts/partials/header__homepage.html @@ -0,0 +1,97 @@ +
+
+ {{ partial "logo" . }} + + +
+ +
+
+
+

{{ .Params.preheading }} +

{{ .Params.Heading|safeHTML }}

+ +
+ {{ .Params.Intro | markdownify }} +
+
+
+ {{ with .Params.banner_images }} + {{ range $i, $image := . }} + {{ if eq $i 0 }} +
+ {{ partial "image" (dict + "alt" $image.alt + "class" "h-full w-full object-cover" + "src" $image.img + ) }} +
+ {{ else if eq $i 1 }} +
+
+ {{ partial "image" (dict + "alt" $image.alt + "class" "h-full w-full object-cover" + "src" $image.img + ) }} +
+ {{ else if eq $i 2 }} +
+ {{ partial "image" (dict + "alt" $image.alt + "class" "h-full w-full object-cover" + "src" $image.img + ) }} +
+
+ {{ else }} + + {{ end }} + {{ end }} + {{ end }} +
+
+
+ + {{ partial "mobile-navigation" . }} +
+ + {{/* Sticky desktop (homepage) */}} + {{ if .IsHome }} + + {{ end }} \ No newline at end of file diff --git a/layouts/partials/header__landing.html b/layouts/partials/header__landing.html index dc0fa3a6..99611971 100644 --- a/layouts/partials/header__landing.html +++ b/layouts/partials/header__landing.html @@ -15,14 +15,14 @@

{{ .Params.Heading|safeHTML }}

{{ end }} {{ if isset .Params "cta" }}
- + {{ title .Params.Cta }} {{ if .Params.cta2 }} - + {{ title .Params.Cta2 }} diff --git a/layouts/partials/homepage-footer.html b/layouts/partials/homepage-footer.html new file mode 100644 index 00000000..7bb3c661 --- /dev/null +++ b/layouts/partials/homepage-footer.html @@ -0,0 +1,125 @@ +
+
+
+
+ {{ partial "logo" . }} +
+

Let’s make a difference, together

+
+
+ +

If you put purpose before profit and need some expert guidance on brand, strategy, or digital, we’re here to help.

+ +
+ {{ partial "newsletter" (dict + "url" .Permalink + "block_class" "" + "btn_text" "Subscribe" + "btn_class" "btn--pink-claret" + "border_class" "border-white focus:border-teal text-indigo" + "heading" "Stay in the loop" + "heading_class" "h3 h--condensed" + "text_class" "font-sans leading-tight text-base" + "hide_img" true + ) }} +
+
+ + +
+ +
+
+ + + + + + +
+
+
+ 16 Commerce Square, Nottingham, NG1 1HS +
+

+ + Policies and legal information + + + ©{{ .Site.Copyright }} + +

+
+
+ \ No newline at end of file diff --git a/layouts/partials/homepage-impact.html b/layouts/partials/homepage-impact.html new file mode 100644 index 00000000..2a929d48 --- /dev/null +++ b/layouts/partials/homepage-impact.html @@ -0,0 +1,53 @@ +
+
+
+
+

Let’s be clear – we’re not for everyone

+
+

We don’t leave our ethics at the agency door. We live our values round the clock, professionally and personally.

+
+
+ Our manifesto + + + + Our impact + + + +
+
+ +
+
+ + + +
+

Our impact in numbers

+ {{ with .Params.related_stats }} +
    + {{ range . }} + {{ with site.GetPage . }} +
  • +
    +

    + {{ if .Params.prefix }}{{ .Params.prefix }}{{ end }}{{ .Title }}{{ if .Params.suffix }}{{ .Params.suffix }}{{ end }} +

    +
    {{ .Content }}
    +
    +
    • + {{ end }} + {{ end }} +
+ {{ end }} +
+
+
+
+ + diff --git a/layouts/partials/homepage-insights.html b/layouts/partials/homepage-insights.html new file mode 100644 index 00000000..1c5156dd --- /dev/null +++ b/layouts/partials/homepage-insights.html @@ -0,0 +1,16 @@ +
+
+
+

Insights from our strategic, creative and technical experts.

+
+ {{ partial "latest_posts.html" . }} +
+ + More insights + + + + +
+
+
diff --git a/layouts/partials/homepage-work.html b/layouts/partials/homepage-work.html new file mode 100644 index 00000000..b4779dc7 --- /dev/null +++ b/layouts/partials/homepage-work.html @@ -0,0 +1,32 @@ +
+
+
+
+

{{ .Params.work_heading }}

+

{{ .Params.work_intro }}

+
+ Our work + + + +
+
+ + +
diff --git a/layouts/partials/image__illustration.html b/layouts/partials/image__illustration.html index aedc3b7d..b6d8e002 100644 --- a/layouts/partials/image__illustration.html +++ b/layouts/partials/image__illustration.html @@ -8,7 +8,7 @@ {{ $alt }} + diff --git a/layouts/partials/mobile-navigation.html b/layouts/partials/mobile-navigation.html new file mode 100644 index 00000000..0d0f7c5a --- /dev/null +++ b/layouts/partials/mobile-navigation.html @@ -0,0 +1,27 @@ + +
+ +
+ +
+ + + + + + +
+
+
\ No newline at end of file diff --git a/layouts/partials/newsletter.html b/layouts/partials/newsletter.html index b82c5ca1..a2fca1f2 100644 --- a/layouts/partials/newsletter.html +++ b/layouts/partials/newsletter.html @@ -13,23 +13,25 @@
- {{ with $src }} - - - Illustration of a person holding a watering can that waters many plants - + {{ if not $.hide_img }} + {{ with $src }} + + + Illustration of a person holding a watering can that waters many plants + + {{ end }} {{ end }}
diff --git a/layouts/partials/our-insights.html b/layouts/partials/our-insights.html deleted file mode 100644 index 3f5d6dfe..00000000 --- a/layouts/partials/our-insights.html +++ /dev/null @@ -1,12 +0,0 @@ -
-

Insights from our strategic, creative and technical experts.

- {{ partial "latest_posts.html" . }} -
- - More insights - - - - -
-
diff --git a/layouts/partials/our-stats.html b/layouts/partials/our-stats.html deleted file mode 100644 index 7bb1241a..00000000 --- a/layouts/partials/our-stats.html +++ /dev/null @@ -1,31 +0,0 @@ -
-
-
-

Sustainable isn’t what we do it’s who we are

-
-
-

We don’t leave our ethics at the agency door. We live our values round the clock, professionally and personally.

-
-
- - - -
-
-
-

Our impact in numbers

- {{ with .Params.related_stats }} - {{ partial "related-stats.html" . }} - {{ end }} -
- Our manifesto - - - - Our impact - - - -
-
-
diff --git a/layouts/partials/related-posts.html b/layouts/partials/related-posts.html index d304bed2..9db91951 100644 --- a/layouts/partials/related-posts.html +++ b/layouts/partials/related-posts.html @@ -3,7 +3,10 @@ {{ range . }} {{ with site.GetPage . }}
  • - {{ partial "card" . }} + {{ partial "card" (dict + "context" . + "tall" false + ) }}
    • {{ end }} {{ end }} diff --git a/layouts/partials/site__header.html b/layouts/partials/site__header.html index 37b91644..6c273937 100644 --- a/layouts/partials/site__header.html +++ b/layouts/partials/site__header.html @@ -1,13 +1,13 @@
    {{ partial "logo" . }} - -
    + {{ partial "mobile-navigation" . }} + \ No newline at end of file diff --git a/layouts/partials/teaser__client.html b/layouts/partials/teaser__client.html index 504549db..eeda0b4a 100644 --- a/layouts/partials/teaser__client.html +++ b/layouts/partials/teaser__client.html @@ -1,46 +1,69 @@ - +{{ $button := false }} +{{ if .button }} + {{ $button = .button }} +{{ end }} + +{{ if $button }} + +{{ else }}
    -
    - {{ range $index, $image := first 2 $.context.Params.teaser.images }} - - {{ $img_class := "h-full object-cover" }} - {{ if $image.darken }} - {{ $img_class = "h-full w-full object-cover brightness-75" }} - {{ end }} - - {{ $odd := false }} - {{ if not (modBool $index 2)}} - {{ $odd = true }} - {{ end }} +{{ end }} + +
    + {{ range $index, $image := first 2 $.context.Params.teaser.images }} + + {{ $img_class := "h-full object-cover group-hover:scale-110 group-focus:scale-110 transition-all duration-200 ease-in" }} + {{ if $image.darken }} + {{ $img_class = "h-full object-cover group-hover:scale-110 group-focus:scale-110 transition-all duration-200 ease-in brightness-75" }} + {{ end }} + + {{ $odd := false }} + {{ if not (modBool $index 2)}} + {{ $odd = true }} + {{ end }} -
    - {{ partial "image" (dict - "alt" $image.alt - "class" $img_class - "src" $image.img - ) }} - {{ range $image.stat }} - {{ with site.GetPage . }} -
    -

    {{ if .Params.prefix }}{{ .Params.prefix }}{{ end }}{{ .Title }}{{ if .Params.suffix }}{{ .Params.suffix }}{{ end }}

    -
    - {{ if .Params.short_text }}{{ .Params.short_text }} {{ else }}{{ .Content }}{{ end }} -
    +
    + {{ partial "image" (dict + "alt" $image.alt + "class" $img_class + "src" $image.img + ) }} + {{ range $image.stat }} + {{ with site.GetPage . }} +
    +

    {{ if .Params.prefix }}{{ .Params.prefix }}{{ end }}{{ .Title }}{{ if .Params.suffix }}{{ .Params.suffix }}{{ end }}

    +
    + {{ if .Params.short_text }}{{ .Params.short_text }} {{ else }}{{ .Content }}{{ end }}
    - {{ end }} +
    {{ end }} -
    - {{ end }} + {{ end }} +
    + {{ end }} +
    +
    + {{ with $.context.Params.icon }} + + + + {{ end }} +

    {{ $.context.Params.teaser.title }}

    +
    + {{ $.context.Params.teaser.description }}
    -
    - {{ with $.context.Params.icon }} - - + {{ if $button }} + {{ $services := delimit $.context.Params.services ", " " and "}} +
    + Read case study about our {{ $services }} work for {{ $.context.Params.client }} + + - {{ end }} -

    {{ $.context.Params.teaser.title }}

    -
    - {{ $.context.Params.teaser.description }}
    -
    -
    \ No newline at end of file + {{ end }} +
    + +{{ if $button }} +     +{{ else }} +
    +{{ end }} \ No newline at end of file diff --git a/src/css/components/button.postcss b/src/css/components/button.postcss index 1712b9d4..91a3b924 100644 --- a/src/css/components/button.postcss +++ b/src/css/components/button.postcss @@ -72,6 +72,23 @@ } } +.btn--pink-claret { + @apply + border-pink + text-claret + bg-pink + ; + + &:hover, + &:focus { + @apply + text-pink + border-claret + bg-claret + } + +} + .btn--blue { @apply border-blue diff --git a/src/css/components/contact.postcss b/src/css/components/contact.postcss index 2f835cd1..425a54be 100644 --- a/src/css/components/contact.postcss +++ b/src/css/components/contact.postcss @@ -9,7 +9,7 @@ transition-all duration-300 ease-in-out - z-10 + z-50 ; } diff --git a/src/css/components/mobile-navigation.postcss b/src/css/components/mobile-navigation.postcss index 1f208417..15e4212d 100644 --- a/src/css/components/mobile-navigation.postcss +++ b/src/css/components/mobile-navigation.postcss @@ -1,20 +1,20 @@ .mobile-navigation { @apply fixed - -top-[200%] + -top-[101vh] left-0 - z-20 + z-50 w-screen transition-all duration-300 ease-in-out + min-h-dynamic-screen + h-auto ; } .mobile-navigation.active { @apply top-0 - h-auto - min-h-dynamic-screen ; } \ No newline at end of file diff --git a/src/js/toggle-class.js b/src/js/toggle-class.js index b91ce8c4..ba7a95bb 100644 --- a/src/js/toggle-class.js +++ b/src/js/toggle-class.js @@ -1,9 +1,31 @@ +function fixedCallBack(setScroll, resetScroll, scrollPosition) { + + if (typeof setScroll !== "undefined") { + scrollPosition = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0); + document.querySelector("body").setAttribute('data-scroll-position', scrollPosition); + } + + document.querySelector("body").classList.toggle("overflow-hidden"); + document.querySelector("body").classList.toggle("fixed"); + + if (typeof resetScroll !== "undefined") { + window.scrollTo({ + top: document.querySelector("body").dataset.scrollPosition, + left: 0, + behavior: "instant", + }); + } + +} + + function ToggleClass(el) { const target = document.querySelector(el.dataset.target); const classes = el.dataset.toggleClass.split(" "); const fixed = el.hasAttribute("data-toggle-fixed"); const setScroll = el.dataset.toggleSetScroll; const resetScroll = el.dataset.toggleResetScroll; + const delayCallback = el.dataset.toggleDelayCallback; let scrollPosition; el.addEventListener("click", function(e) { @@ -14,21 +36,12 @@ function ToggleClass(el) { }); if (fixed) { - - if (typeof setScroll !== "undefined") { - scrollPosition = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0); - document.querySelector("body").setAttribute('data-scroll-position', scrollPosition); - } - - document.querySelector("body").classList.toggle("overflow-hidden"); - document.querySelector("body").classList.toggle("fixed"); - - if (typeof resetScroll !== "undefined") { - window.scrollTo({ - top: document.querySelector("body").dataset.scrollPosition, - left: 0, - behavior: "instant", - }); + if (typeof delayCallback !== undefined) { + setTimeout(function() { + fixedCallBack(setScroll, resetScroll, scrollPosition); + }, delayCallback); + } else { + fixedCallBack(setScroll, resetScroll, scrollPosition); } } diff --git a/tailwind.config.js b/tailwind.config.js index c8bf70f3..91c82bc9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -39,6 +39,9 @@ module.exports = { extend: { screens: { '3xl': '1800px', + 'fix': { + raw: '(min-height: 58.125rem) and (min-width: 64rem)', + } }, aspectRatio: { '3/4': '3 / 4', @@ -76,6 +79,7 @@ module.exports = { minHeight: { '90vh': '90vh', 'dynamic-screen': '100dvh', + 'home-dynamic-screen': 'calc(100dvh - 80px)', }, spacing: { '7.5': '1.875rem', @@ -85,6 +89,7 @@ module.exports = { width: { 'iphone': '400px', 'ipad': '1080px', + '7/10': '70%', }, transitionTimingFunction: { 'bounce': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',