Skip to content

Commit

Permalink
Update images
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesdoc
jamesdoc committed Feb 4, 2024
1 parent 9fefa2c commit 62491e9
Show file tree
Hide file tree
Showing 5 changed files with 179 additions and 79 deletions.
Binary file added src/_assets/img/core/the-globe-church-calendar.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/_assets/img/core/the-globe-church-preaching.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 57 additions & 35 deletions src/calendar/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,76 +2,99 @@
title: Calendar
layout: layouts/base.njk
description: "We would love to meet you at The Globe Church. We gather each Sunday, 4pm, and there are other events throughout the month from Bible Studies, to Prayer Meetings and more…"
featuredImage: "./src/_assets/img/core/the-globe-church-people.jpg"
featuredImage: "./src/_assets/img/core/the-globe-church-calendar.jpg"
---

<header class="relative">

<div class="sm:grid sm:grid-cols-2 min-h-[30vh] sm:min-h-[80vh]">
<div class="hidden sm:block bg-orange text-white">
</div>

<div class="min-h-[30vh] sm:min-h-[auto] bg-[#ccc] relative w-full bg-cover bg-center overflow-hidden">
{% rwdImg "./src/_assets/img/core/the-globe-church-people.jpg", "Members of The Globe Church", [330, 550, 1024, 1500, 2560], "block h-full w-full inset-0 absolute object-cover", "50vw" %}
<div class="hidden sm:block bg-orange text-white"></div>

<div
class="min-h-[30vh] sm:min-h-[auto] bg-[#ccc] relative w-full bg-cover bg-center overflow-hidden"
>
{% rwdImg "./src/_assets/img/core/the-globe-church-calendar.jpg", "Members
of The Globe Church", [330, 550, 1024, 1500, 2560], "block h-full w-full
inset-0 absolute object-cover", "50vw" %}
</div>
</div>

<div class="bg-orange">
<div class="inset-4 mx-auto lg:container grid items-center sm:bg-transparent sm:absolute">
<div
class="inset-4 mx-auto lg:container grid items-center sm:bg-transparent sm:absolute"
>
<div class="p-8 sm:px-4 sm:max-w-[40%] text-white lg:text-lg">
<h1 class="glbHeading text-white lg:text-2xl">Church Calendar</h1>

{% if meta.service.overrides %}
<span class="mt-6 rounded text-orange px-2 py-1 mb-2 text-xs bg-white inline-block uppercase font-bold">
<span
class="mt-6 rounded text-orange px-2 py-1 mb-2 text-xs bg-white inline-block uppercase font-bold"
>
gathering change
</span>
{% endif %}
<p class="mb-4">
{{ meta.sundays | safe }}
<p class="mb-4">{{ meta.sundays | safe }}</p>

<p class="my-4">
<a
href="/sundays"
class="glbBtn bg-blue hover:bg-white hover:text-orange"
>Join us this Sunday</a
>
</p>

<p class="my-4"><a href="/sundays" class="glbBtn bg-blue hover:bg-white hover:text-orange">Join us this Sunday</a></p>

<p class="py-2">
<a href="#thisWeek" class="text-white no-underline inline-flex gap-2 items-center group">
{% svgIcon "icon-arrowDown", "h-6 w-6 inline-block transition group-hover:translate-y-1" %}
<a
href="#thisWeek"
class="text-white no-underline inline-flex gap-2 items-center group"
>
{% svgIcon "icon-arrowDown", "h-6 w-6 inline-block transition
group-hover:translate-y-1" %}
<span class="underline hover:no-underline">All events</span>
</a>
</p>

</div>
</div>
</div>
</header>


<main class="mt-16 px-4">

<div class="mx-auto lg:container mb-4 scroll-mt-4 lg:scroll-mt-12" id="thisWeek">
{% set eventList = events | eventsFuture | eventsSort %}
{# <h2 class="glbHeading px-4 mb-4">Events this week</h2> #}
{% include 'blocks/cal/eventList.njk' %}
<div
class="mx-auto lg:container mb-4 scroll-mt-4 lg:scroll-mt-12"
id="thisWeek"
>
{% set eventList = events | eventsFuture | eventsSort %} {#
<h2 class="glbHeading px-4 mb-4">Events this week</h2>
#} {% include 'blocks/cal/eventList.njk' %}
</div>


{# {% set featuredEvent = events | eventsFuture | eventsFeatured | eventsSort | limit(1) | first %}
{% if featuredEvent %}
{# {% set featuredEvent = events | eventsFuture | eventsFeatured | eventsSort
| limit(1) | first %} {% if featuredEvent %}
<div class="mx-auto lg:container mb-4 grid gap-4">
<h2 class="glbHeading px-4 mt-4">Featured event</h2>
<a href="/calendar/{{ featuredEvent.startDate | formatDate}}/{{ featuredEvent.slug }}/" class="w-full group text-blue no-underline p-4">
<a
href="/calendar/{{ featuredEvent.startDate | formatDate}}/{{ featuredEvent.slug }}/"
class="w-full group text-blue no-underline p-4"
>
{% if featuredEvent.data.tags %}
<div class="rounded bg-orange px-2 py-1 mb-1 text-xs text-white inline-block uppercase font-bold">
<div
class="rounded bg-orange px-2 py-1 mb-1 text-xs text-white inline-block uppercase font-bold"
>
{{ featuredEvent.data.tags | first }}
</div>
{% endif %}
<p class="font-bold group-hover:text-orange">{{ featuredEvent.title }}</p>
<date class="flex gap-2 items-start" content="{{ featuredEvent.startDate }}">
<date
class="flex gap-2 items-start"
content="{{ featuredEvent.startDate }}"
>
{% svgIcon "icon-calendar", "shrink-0 h-4 w-4 mt-1", "Event time" %}
<spon>{{ featuredEvent.startDate | formatDate('dddd Do MMMM, H:mm') }} ({{ featuredEvent.duration }})</span>
<span
>{{ featuredEvent.startDate | formatDate('dddd Do MMMM, H:mm') }} ({{
featuredEvent.duration }})</span
>
</date>
{% if featuredEvent.location %}
Expand All @@ -82,12 +105,11 @@ featuredImage: "./src/_assets/img/core/the-globe-church-people.jpg"
{% endif %}
</a>
</div>
{% endif %} #}


{# <div class="mx-auto lg:container mb-4 scroll-mt-4" id="futureEvents">
{% endif %} #} {#
<div class="mx-auto lg:container mb-4 scroll-mt-4" id="futureEvents">
{% set eventList = events | eventsFuture(8, 'day') | eventsSort %}
<h2 class="glbHeading px-4 mb-4">Future events</h2>
{% include 'blocks/cal/eventList.njk' %}
</div> #}
</div>
#}
</main>
101 changes: 81 additions & 20 deletions src/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,73 @@ eleventyComputed:
description: "{{ meta.subtitle }}"
---

<section class="mt-12 bg-orange/10 sm:grid sm:grid-cols-3 sm:h-[80vh] uppercase text-white font tracking-wider text-lg text-center md:text-3xl" aria-label="About The Globe Church">
<a href="/about#jesus" class="block relative h-[200px] w-full bg-cover bg-center sm:h-[80vh] text-white overflow-hidden group">
{% rwdImg "./src/_assets/img/core/the-globe-church-bible-study.jpg", "People looking reading the Bible at a church service", [330, 550, 1024, 1500, 2560], "block h-full w-full left-0 right-0 absolute object-cover transition group-hover:scale-110", "100vw", false %}
<div class="absolute inset-0 flex items-center justify-center bg-blue/80 px-2">
<p class="max-w-[240px]">The Globe Church is all about <span class="border-2 border-white font-bold px-1 inline-block transition group-hover:bg-white group-hover:text-blue">Jesus</span></p>
<section
class="mt-12 bg-orange/10 sm:grid sm:grid-cols-3 sm:h-[80vh] uppercase text-white font tracking-wider text-lg text-center md:text-3xl"
aria-label="About The Globe Church"
>
<a
href="/about#jesus"
class="block relative h-[200px] w-full bg-cover bg-center sm:h-[80vh] text-white overflow-hidden group"
>
{% rwdImg "./src/_assets/img/core/the-globe-church-bible-study.jpg", "People
looking reading the Bible at a church service", [330, 550, 1024, 1500,
2560], "block h-full w-full left-0 right-0 absolute object-cover transition
group-hover:scale-110", "100vw", false %}
<div
class="absolute inset-0 flex items-center justify-center bg-blue/80 px-2"
>
<p class="max-w-[240px]">
The Globe Church is all about
<span
class="border-2 border-white font-bold px-1 inline-block transition group-hover:bg-white group-hover:text-blue"
>Jesus</span
>
</p>
</div>
</a>
<a href="/about#people" class="block relative h-[200px] w-full bg-cover bg-center sm:h-[80vh] text-white overflow-hidden group">
{% rwdImg "./src/_assets/img/core/the-globe-church-people.jpg", "Members of The Globe Church", [330, 550, 1024, 1500, 2560], "block h-full w-full left-0 right-0 absolute object-cover transition group-hover:scale-110", "100vw", false %}
<div class="absolute inset-0 flex items-center justify-center bg-gold/60 px-2">
<p class="max-w-[240px]">Made up of all sorts of <span class="border-2 border-white font-bold px-1 inline-block transition group-hover:bg-white group-hover:text-gold">people</span></p>
<a
href="/about#people"
class="block relative h-[200px] w-full bg-cover bg-center sm:h-[80vh] text-white overflow-hidden group"
>
{% rwdImg "./src/_assets/img/core/the-globe-church-calendar.jpg", "Members
of The Globe Church", [330, 550, 1024, 1500, 2560], "block h-full w-full
left-0 right-0 absolute object-cover transition group-hover:scale-110",
"100vw", false %}
<div
class="absolute inset-0 flex items-center justify-center bg-gold/60 px-2"
>
<p class="max-w-[240px]">
Made up of all sorts of
<span
class="border-2 border-white font-bold px-1 inline-block transition group-hover:bg-white group-hover:text-gold"
>people</span
>
</p>
</div>
</a>
<a href="/about#mission" class="block relative h-[200px] w-full bg-cover bg-center sm:h-[80vh] text-white overflow-hidden group">
{% rwdImg "./src/_assets/img/core/the-globe-church-london-southwark.jpg", "London, The Shard", [330, 550, 1024, 1500, 2560], "block h-full w-full left-0 right-0 absolute object-cover transition group-hover:scale-110", "100vw", false %}
<div class="absolute inset-0 flex items-center justify-center bg-green/80 px-2">
<p class="max-w-[240px]">Involved in the greatest <span class="border-2 border-white font-bold px-1 inline-block transition group-hover:bg-white group-hover:text-green">mission</span></p>
<a
href="/about#mission"
class="block relative h-[200px] w-full bg-cover bg-center sm:h-[80vh] text-white overflow-hidden group"
>
{% rwdImg "./src/_assets/img/core/the-globe-church-london-southwark.jpg",
"London, The Shard", [330, 550, 1024, 1500, 2560], "block h-full w-full
left-0 right-0 absolute object-cover transition group-hover:scale-110",
"100vw", false %}
<div
class="absolute inset-0 flex items-center justify-center bg-green/80 px-2"
>
<p class="max-w-[240px]">
Involved in the greatest
<span
class="border-2 border-white font-bold px-1 inline-block transition group-hover:bg-white group-hover:text-green"
>mission</span
>
</p>
</div>
</a>
</section>

<main class="p-4">

<section class="mb-4 lg:container mx-auto sm:mb-8">
<div class="bg-orange/10 grid sm:grid-cols-2">
<div class="p-4 text-xl flex flex-col justify-around order-2 sm:order-1">
Expand All @@ -37,28 +81,45 @@ eleventyComputed:

<p class="max-w-lg">
{% if meta.service.overrides %}
<span class="rounded bg-[#dd7f67] px-2 py-1 mb-2 text-xs text-black inline-block uppercase font-bold">
<span
class="rounded bg-[#dd7f67] px-2 py-1 mb-2 text-xs text-black inline-block uppercase font-bold"
>
gathering change
</span>
{% endif %}
<br />
{{ meta.sundays | safe }}
</p>
<p class="mt-8">
<a href="/sundays" class="px-2 py-1 mr-2 rounded bg-blue text-white no-underline transition-colors hover:bg-orange">Find out more</a>
<a href="{% mapUrl meta.service.fullAddress %}" class="text-blue decoration-orange" target="_blank" rel="noopener">See a map</a>
<a
href="/sundays"
class="px-2 py-1 mr-2 rounded bg-blue text-white no-underline transition-colors hover:bg-orange"
>Find out more</a
>
<a
href="{% mapUrl meta.service.fullAddress %}"
class="text-blue decoration-orange"
target="_blank"
rel="noopener"
>See a map</a
>
</p>
</div>

<div class="block relative min-h-[200px] order-1 sm:order-2 sm:min-h-[400px] w-full bg-cover bg-center text-white overflow-hidden">
{% rwdImg "./src/_assets/img/core/the-globe-church-at-ark-academy.jpg", "Sunday service at The Globe Church", [330, 550, 1024, 1500], "block h-full w-full inset-0 absolute object-cover", "(min-width: 640px) 50vw, 100vw" %}
<div
class="block relative min-h-[200px] order-1 sm:order-2 sm:min-h-[400px] w-full bg-cover bg-center text-white overflow-hidden"
>
{% rwdImg "./src/_assets/img/core/the-globe-church-at-ark-academy.jpg",
"Sunday service at The Globe Church", [330, 550, 1024, 1500], "block
h-full w-full inset-0 absolute object-cover", "(min-width: 640px) 50vw,
100vw" %}
</div>
</div>
</section>

{% include 'blocks/cal/eventsUpcoming.njk' %}

<div class="mx-auto lg:container mb-4">
{% include 'blocks/latestSermon.njk' %}
{% include 'blocks/latestSermon.njk' %}
</div>
</main>
65 changes: 41 additions & 24 deletions src/preaching/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,48 @@
title: Preaching
description: We believe that the Bible is the Word of God. God speaks to us today as we carefully and humbly listen to His Word, That is why preaching is so central to all we do at The Globe Church…
layout: layouts/base.njk
featuredImage: ./src/_assets/img/core/the-globe-church-bible-study.jpg
featuredImage: ./src/_assets/img/core/the-globe-church-preaching.jpg
---
<header class="relative">

<header class="relative">
<div class="sm:grid sm:grid-cols-2 min-h-[30vh] sm:min-h-[80vh]">
<div class="hidden sm:block bg-orange text-white">
</div>
<div class="hidden sm:block bg-orange text-white"></div>

<div class="min-h-[30vh] sm:min-h-[auto] bg-[#ccc] relative w-full bg-cover bg-center overflow-hidden">
{% rwdImg "./src/_assets/img/core/the-globe-church-bible-study.jpg", "Members of The Globe Church", [330, 550, 1024, 1500, 2560], "block h-full w-full inset-0 absolute object-cover", "50vw" %}
<div
class="min-h-[30vh] sm:min-h-[auto] bg-[#ccc] relative w-full bg-cover bg-center overflow-hidden"
>
{% rwdImg "./src/_assets/img/core/the-globe-church-preaching.jpg",
"Members of The Globe Church", [330, 550, 1024, 1500, 2560], "block h-full
w-full inset-0 absolute object-cover", "50vw" %}
</div>
</div>

<div class="bg-orange">
<div class="inset-4 mx-auto lg:container grid items-center sm:bg-transparent sm:absolute">
<div
class="inset-4 mx-auto lg:container grid items-center sm:bg-transparent sm:absolute"
>
<div class="p-8 sm:px-4 sm:max-w-[40%] text-white lg:text-lg">
<h1 class="glbHeading text-white lg:text-2xl">{{ title }}</h1>
<p class="my-4">
We believe that the Bible is the Word of God. It is utterly true, relevant and life transforming. God speaks to us today as we carefully and humbly listen to His Word.
We believe that the Bible is the Word of God. It is utterly true,
relevant and life transforming. God speaks to us today as we carefully
and humbly listen to His Word.
</p>
<p class="my-4">
That is why preaching is so central to all we do at The Globe Church. As God’s Word is unfolded and applied then we understand God’s Word to us. It isn’t just preaching though… in small groups, one to one, individually, we are serious about being changed by what God says in the Bible.
That is why preaching is so central to all we do at The Globe Church.
As God’s Word is unfolded and applied then we understand God’s Word to
us. It isn’t just preaching though… in small groups, one to one,
individually, we are serious about being changed by what God says in
the Bible.
</p>

<p>
<a href="#allSeries" class="text-white no-underline inline-flex gap-2 items-center group">
{% svgIcon "icon-arrowDown", "h-6 w-6 inline-block transition group-hover:translate-y-1" %}
<a
href="#allSeries"
class="text-white no-underline inline-flex gap-2 items-center group"
>
{% svgIcon "icon-arrowDown", "h-6 w-6 inline-block transition
group-hover:translate-y-1" %}
<span class="underline hover:no-underline">All series</span>
</a>
</p>
Expand All @@ -39,9 +54,7 @@ featuredImage: ./src/_assets/img/core/the-globe-church-bible-study.jpg

<section class="mt-12 px-4">
<div class="mx-auto lg:container mb-4">

{% include 'blocks/latestSermon.njk' %}

</div>
</section>

Expand All @@ -51,17 +64,25 @@ featuredImage: ./src/_assets/img/core/the-globe-church-bible-study.jpg
<h2 class="px-4 glbHeading">Sermon Series</h2>
</div>
<div class="px-4 pt-4">
<div class="grid gap-4 grid-cols-2 sm:gap-8 sm:grid-cols-3 md:grid-cols-4">
<div
class="grid gap-4 grid-cols-2 sm:gap-8 sm:grid-cols-3 md:grid-cols-4"
>
{% for series in sermonseries | sort(true, true, 'start_date') %}
<a href="/preaching/{{ series.slug }}" class="block no-underline group">
<div class="aspect-square rounded bg-cover bg-center overflow-hidden relative">
{% rwdImg series.artwork_url, "", [450, 600], "inset-0 w-full h-full absolute object-cover saturate-100 transition group-hover:saturate-[1.1] group-hover:scale-110", "33vw" %}
<div
class="aspect-square rounded bg-cover bg-center overflow-hidden relative"
>
{% rwdImg series.artwork_url, "", [450, 600], "inset-0 w-full h-full
absolute object-cover saturate-100 transition
group-hover:saturate-[1.1] group-hover:scale-110", "33vw" %}
</div>
<div class="px-1">
<p class="uppercase font-bold wrap-balance">{{ series.title }}</p>
{% if series.start_date %}
{% set sermons = series | sermonsInSeries(preaching) | sort(false, true, 'date') %}
<p class="text-sm text-blue">{% dateRange sermons.at(0).date, sermons.at(-1).date %}</p>
{% if series.start_date %} {% set sermons = series |
sermonsInSeries(preaching) | sort(false, true, 'date') %}
<p class="text-sm text-blue">
{% dateRange sermons.at(0).date, sermons.at(-1).date %}
</p>
{% endif %}
</div>
</a>
Expand All @@ -73,9 +94,5 @@ featuredImage: ./src/_assets/img/core/the-globe-church-bible-study.jpg

{# TODO: This needs a bit of a tidy here #}
<div class="mt-12 px-4">
<div class="mx-auto lg:container">

{% include 'blocks/podcast.njk' %}

</div>
<div class="mx-auto lg:container">{% include 'blocks/podcast.njk' %}</div>
</div>

0 comments on commit 62491e9

Please sign in to comment.