diff --git a/faq.html b/faq.html new file mode 100644 index 0000000..b3d671a --- /dev/null +++ b/faq.html @@ -0,0 +1,160 @@ + + + + + + + + + + + Foodbank | Feed The Community + + + + Jump directly to main content + + +
+
+
+

FAQ

+
+
+ +
+ +
+

When are you open, and where are you located?

+
+

We are open on a Monday between 11am-2pm. We are based at St Christopher's Methodist Church on Convamore Road.

+
+
+ +
+

Who can use the food bank?

+
+

Anyone can access the food bank and you can self refer. However, you must be able to show that you are in financial hardship and are unable to support yourself.

+
+
+ +
+

What do I need to bring with me to the foodbank?

+
+

You must bring with you proof of hardship (Bank statements/proof of benefits) and some carrier bags.

+
+
+ +
+

Can you help with anything other than food?

+
+

Our main mission is preventing food poverty. However, we can redirect you to other services if we can.

+
+
+ +
+

If you are closed where else can I get help with a food parcel?

+
+

We are a member of the food poverty alliance. You can find alternative help by the We are ONE Foundation

+
+
+ +
+

Do you deliver food parcels?

+
+

Unfortunately no

+
+
+ +
+

I want to volunteer, how do I get in touch?

+
+

Please use one of the methods at the bottom of this page. We would be greatful for any help you may be able to offer.

+
+
+ +
+

Can I donate food?

+
+

Donations can be brought into St Christopher's Church on a Monday 11am-2pm. We are partically greatful for non-perishable food produce however any food will help as long as it's in date.

+
+
+ +
+

I am a local business looking to donate, who do I contact?

+
+

Please contact Sue on 07727260285.

+
+
+ +
+

What if I have a specific question

+
+

If you have any questions that are not currently in the FAQ, please contact use via:

+ +
+
+ +
+ +
+ + + + + + + + + + diff --git a/images/ebay.png b/images/ebay.png new file mode 100644 index 0000000..6126bfc Binary files /dev/null and b/images/ebay.png differ diff --git a/images/fb-auctions.webp b/images/fb-auctions.webp new file mode 100644 index 0000000..95371b1 Binary files /dev/null and b/images/fb-auctions.webp differ diff --git a/images/fb-marketplace.webp b/images/fb-marketplace.webp new file mode 100644 index 0000000..d57296d Binary files /dev/null and b/images/fb-marketplace.webp differ diff --git a/images/fb.svg b/images/fb.svg new file mode 100644 index 0000000..44af173 --- /dev/null +++ b/images/fb.svg @@ -0,0 +1 @@ + diff --git a/images/ftc_logo.webp b/images/ftc_logo.webp new file mode 100644 index 0000000..d4130c8 Binary files /dev/null and b/images/ftc_logo.webp differ diff --git a/images/gofundme.png b/images/gofundme.png new file mode 100644 index 0000000..5843569 Binary files /dev/null and b/images/gofundme.png differ diff --git a/images/hero.jpg b/images/hero.jpg new file mode 100644 index 0000000..ac68684 Binary files /dev/null and b/images/hero.jpg differ diff --git a/images/logo_icon.jpg b/images/logo_icon.jpg new file mode 100644 index 0000000..104e92d Binary files /dev/null and b/images/logo_icon.jpg differ diff --git a/images/logo_icon.webp b/images/logo_icon.webp new file mode 100644 index 0000000..f4474a6 Binary files /dev/null and b/images/logo_icon.webp differ diff --git a/images/team/debbie.webp b/images/team/debbie.webp new file mode 100644 index 0000000..1acb1e2 Binary files /dev/null and b/images/team/debbie.webp differ diff --git a/images/team/lacey.webp b/images/team/lacey.webp new file mode 100644 index 0000000..0f505b1 Binary files /dev/null and b/images/team/lacey.webp differ diff --git a/images/team/lindsey.webp b/images/team/lindsey.webp new file mode 100644 index 0000000..335be94 Binary files /dev/null and b/images/team/lindsey.webp differ diff --git a/images/team/susan.webp b/images/team/susan.webp new file mode 100644 index 0000000..373685f Binary files /dev/null and b/images/team/susan.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4415d40 --- /dev/null +++ b/index.html @@ -0,0 +1,122 @@ + + + + + + + + + + + Foodbank | Feed The Community + + + + Jump directly to main content + + +
+
+
+

Feed The Community

+

Fighting Food Poverty

+ Support Us +
+
+ +
+

Our Mission

+

Commitment, transparency, innovation. These three values have stood at the center of the FTC mission since our founding in 2020. We are a foodbank charity in Grimsby. We wholeheartedly commit to the work we do with passion and dedication, transparently sharing it with the local community and inviting others to take part. On top of this, we challenge ourselves to think creatively, applying an innovative approach to all that we do. This mission drives the continued success of FTC.

+
+ +
+

About Us

+

Feed the Community was created on the 25th October 2020 by Lacey Langridge during the covid 19 outbreak. Initially the food bank was run from her home, where herself and volunteers delivered food packages to those in need.

+

In February 2021 FTC (as they are otherwise known) became an associate of 'WE ARE ONE' who helped with a shared data system and really supported FTC in the training of opening up a physical food bank.

+

On 16th April 2021 they set up a food bank at the Fusion Centre on Ladysmith Road. This was a big turning point for FTC as they were now able to reach more people who was in need.

+

Unfortunately, the premises was then outgrown as the need in the community became greater.
+ FTC then moved into St Christopher's Methodist Church 25th May 2022 where they remain today.

+

FTC became a recognised charity on 14th April 2022.

+ Support Us Today +
+ +
+

Fundraising

+ +
+ +
+ + + + + + + + + + diff --git a/js/accordion.js b/js/accordion.js new file mode 100644 index 0000000..552bb19 --- /dev/null +++ b/js/accordion.js @@ -0,0 +1,18 @@ +let accordions = document.getElementsByClassName('accordion'); +let accordionBodies = document.getElementsByClassName('accordion__item__body'); + +for (const accordion of accordions) { + accordion.addEventListener('click', function (e) { + if(e.target.classList.contains('accordion__item__header')){ + let accBody = document.getElementById(e.target.id + '__body'); + accBody.classList.toggle("accordion__item__body__hidden"); + } + console.log('accordion clicked', e); + }); +} + +// Hide all accordion bodies if there's JS +for (let accordionBody of accordionBodies) { + accordionBody.classList.add('accordion__item__body__hidden'); +} + diff --git a/js/alert.js b/js/alert.js new file mode 100644 index 0000000..83b4752 --- /dev/null +++ b/js/alert.js @@ -0,0 +1,17 @@ +//const body = document.body; + +function findAncestor(el, cls){ + while ((el = el.parentElement) && !el.classList.contains(cls)); + return el; +} + +// Event delegation. Body click, then check for buttons +body.addEventListener('click', (e) => { + if(e.target.classList.contains('button-close')){ + let alertD = findAncestor(e.target, 'alert--dismissable'); + if (typeof(alertD) != 'undefined' && alertD != null){ + alertD.remove(); + } + } +}); + diff --git a/js/burger.js b/js/burger.js new file mode 100644 index 0000000..b77972b --- /dev/null +++ b/js/burger.js @@ -0,0 +1,13 @@ +const burger = document.getElementById("burger"); +const body = document.body; +let mobileNav = document.getElementById('mobile-nav'); + +// Hide burger if JS loaded +mobileNav.classList.add('mobile-nav--hidden'); +burger.addEventListener('click', burgerToggle); + +function burgerToggle() { + mobileNav.classList.toggle('mobile-nav--hidden'); + body.classList.toggle('burger-open'); +} + diff --git a/js/cookie.js b/js/cookie.js new file mode 100644 index 0000000..f1d4f85 --- /dev/null +++ b/js/cookie.js @@ -0,0 +1,66 @@ +const cookiePrompt = document.getElementById('cookie-prompt'); +let acceptedCookies = getCookie("acceptCookies"); + +makePopup(); + +const cookieAccept = document.getElementById('cookie-accept'); +const cookieDecline = document.getElementById('cookie-decline'); + +cookieAccept.addEventListener('click', function(e){ + e.preventDefault(); + // Only add cookie if it's not there + if (acceptedCookies == 0){ + acceptCookie(); + } +}); +cookieDecline.addEventListener('click', function(e){ + e.preventDefault(); + alert('Boohoo'); +}); + +function makePopup(){ + // Cookie exists + if (acceptedCookies == 0){ + showCookiePopup(); + } + else if (acceptedCookies == 1){ + // Nothing, no need to do anything + } + else{ + showCookiePopup(); + setCookie("acceptCookies", 0, 365); + } +} + +function showCookiePopup(){ + cookiePrompt.classList.remove('cookie-prompt--hidden'); +} + +function acceptCookie(){ + setCookie("acceptCookies", 1, 365); + cookiePrompt.classList.add('cookie-prompt--hidden'); +} + +function setCookie(cname, cvalue, exdays) { + const d = new Date(); + d.setTime(d.getTime() + (exdays*24*60*60*1000)); + let expires = "expires="+ d.toUTCString(); + document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/" + ";SameSite=Lax"; + } + +function getCookie(cname) { + let name = cname + "="; + let decodedCookie = decodeURIComponent(document.cookie); + let ca = decodedCookie.split(';'); + for(let i = 0; i { + if (window.scrollY >= (headerHeight/2) || window.pageYOffset >= (headerHeight/2)){ + header.classList.add('header--scroll'); + headerContainer.classList.add('header-container--scroll'); + } + else { + header.classList.remove('header--scroll'); + headerContainer.classList.remove('header-container--scroll'); + } +} + +window.onscroll = () => { + requestAnimationFrame(handleScroll) +} + diff --git a/js/hero-toggle.js b/js/hero-toggle.js new file mode 100644 index 0000000..e91ee57 --- /dev/null +++ b/js/hero-toggle.js @@ -0,0 +1,34 @@ +/* To toggle the different hero stylings in demo */ +const small = document.getElementById("small-hero"); +const med = document.getElementById("med-hero"); +const full = document.getElementById("full-hero"); + +const hero = document.getElementById("hero"); +const main = document.getElementById("main"); +const credit = document.getElementById("hero__credit"); + +small.addEventListener('click', function(){burgerToggle('s')}, false); +med.addEventListener('click', function(){burgerToggle('m')}, false); +full.addEventListener('click', function(){burgerToggle('f')}, false); + +function burgerToggle(size) { + /* Remove all then re-add what's needed */ + hero.classList.remove('hero-s'); + hero.classList.remove('hero-m'); + hero.classList.remove('hero-f'); + hero.classList.remove('hero--para'); + main.classList.remove('main--para'); + credit.classList.remove('hero__credit--hidden'); + + if (size == 'm'){ + hero.classList.add('hero-m'); + }else if (size == 'f'){ + hero.classList.add('hero-f'); + hero.classList.add('hero--para'); + main.classList.add('main--para'); + }else{ + hero.classList.add('hero-s'); + credit.classList.add('hero__credit--hidden'); + } +} + diff --git a/js/toast.js b/js/toast.js new file mode 100644 index 0000000..84b018e --- /dev/null +++ b/js/toast.js @@ -0,0 +1,70 @@ +const toastContainer = document.createElement('section'); +let toastCounter = 0; + +document.body.onload = function(){ + addToastContainer(); +} + +function addToastContainer(){ + toastContainer.classList.add('toast-container'); + + // Add the toast container before the first child of body + document.firstElementChild.insertBefore(toastContainer, document.body); +} + +function randomToast(){ + const toasts = ['You\'ve done an error', 'Yea, it\'s broken, try later', 'Yeeheehee, I am the Grinch witch', 'Sucessfully added', 'Thank you!']; + newToast(toasts[Math.floor(Math.random() * (toasts.length - 1))]); +} + +function newToast(innerText){ + let toast = createToast(innerText); + addToast(toast); +} + +async function addToast(toast){ + toastContainer.appendChild(toast); + countToasts(); + + await new Promise(r => setTimeout(r, 2400)); + + // May have been removed by user + if(document.getElementById(toast.id)){ + toastContainer.removeChild(toast); + } +} + +function createToast(innerText){ + // Output so that screenreaders announce it + let toast = document.createElement('output'); + let toastInner = document.createElement('div'); + toast.appendChild(toastInner); + // For screenreaders again, output may not exist + toast.setAttribute('role','status'); + + // Set an Id, so that it can be user removed, etc. + let toastId = 'toast_'+toastCounter; + toastCounter++; + + toastInner.innerText = innerText; + toastInner.classList.add('toast__inner'); + toast.classList.add('toast'); + toast.setAttribute('id', toastId); + + return toast; +} + +function countToasts(){ + let toasts = document.getElementsByClassName('toast'); + let toastCounter2 = 0; + for (const toast of toasts) { + toastCounter2++; + if(toastCounter2 > 5){ + let rToast = document.getElementById('toast_'+(toastCounter-5)); + if(rToast){ + toastContainer.removeChild(rToast); + } + } + } +} + diff --git a/main.css b/main.css new file mode 100644 index 0000000..fe2c9ff --- /dev/null +++ b/main.css @@ -0,0 +1,1394 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Core */ +* { + box-sizing: border-box; +} + +html, body { + height: 100%; +} + +html { + font-size: 10px; +} + +body { + font: 1.6rem/1.62 sans-serif; + color: #444; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + flex-direction: column; +} + +main { + flex: 1 0 auto; + margin-top: 5.31rem; +} + +img { + display: block; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + margin: 1rem 0; +} + +h1 { + color: #111; + font-size: 3rem; + font-weight: bold; + margin: 0.8rem 0; +} + +h1:first-of-type { + margin-top: 0; + line-height: 1; +} + +h2 { + color: #222; + font-size: 2.2rem; + font-weight: bold; + margin: 0.6rem 0; +} + +h3 { + color: #333; + font-size: 1.8rem; + margin: 0.4rem 0; +} + +h4, h5, h6 { + color: #444; + font-size: 1.5rem; + margin: 0.2rem 0; +} + +/* Links */ +a { + text-decoration: none; +} + +a:link, a:visited { + color: #0000CC; +} + +a:hover, a:visited:hover { + color: #07C; +} + +/* Form stuff */ +.form { + padding: 2rem; + background: #FCFCFC; + border: 1px solid #EEE; + border-radius: 1rem; + margin: 2rem 0; +} + +input[type=email], input[type=number], +input[type=search], input[type=text], +input[type=tel], input[type=url], +input[type=password], +textarea, select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #FFF; + border: 1px solid #E1E1E1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; +} + +/* Removes awkward default styles on some inputs for iOS */ +input[type=email], input[type=number], +input[type=search], input[type=text], +input[type=tel], input[type=url], +input[type=password], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +textarea { + min-height: 65px; + resize: vertical; + padding-top: 6px; + padding-bottom: 6px; +} + +input[type=email]:focus, input[type=number]:focus, +input[type=search]:focus, input[type=text]:focus, +input[type=tel]:focus, input[type=url]:focus, +input[type=password]:focus, +textarea:focus, select:focus { + border: 1px solid #33C3F0; + outline: 0; +} + +label, legend { + display: block; + margin-bottom: 0.5rem; + font-weight: 600; +} + +fieldset { + padding: 0; + border-width: 0; +} + +input[type=checkbox], input[type=radio] { + display: inline; +} + +label > .label-body { + display: inline-block; + margin-left: 0.5rem; + font-weight: normal; +} + +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 1.24rem; + box-sizing: border-box; + overflow: auto; +} + +.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve { + width: 100%; + float: left; + box-sizing: border-box; + padding: 0.44rem; + margin: 0.6rem 0; +} + +.grid-visible { + background: #EEE; + text-align: center; + border-radius: 0.44rem; +} + +/* For devices larger than 360px */ +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { + width: 80%; + } + .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve { + margin-left: 4%; + } + .one:first-child, + .two:first-child, .three:first-child, .four:first-child, + .five:first-child, .six:first-child, .seven:first-child, + .eight:first-child, .nine:first-child, .ten:first-child, + .eleven:first-child, .twelve:first-child { + margin-left: 0; + } + .one { + width: 4.6666666667%; + } + .two { + width: 13.3333333333%; + } + .three { + width: 22%; + } + .four { + width: 30.6666666667%; + } + .five { + width: 39.3333333333%; + } + .six { + width: 48%; + } + .seven { + width: 56.6666666667%; + } + .eight { + width: 65.3333333333%; + } + .nine { + width: 74%; + } + .ten { + width: 82.6666666667%; + } + .eleven { + width: 91.3333333333%; + } + .twelve { + width: 100%; + margin-left: 0; + } + /* Offsets */ + .offset-one { + margin-left: 8.6666666667%; + } + .offset-two { + margin-left: 17.3333333333%; + } + .offset-three { + margin-left: 30%; + } + .offset-four { + margin-left: 34.6666666667%; + } + .offset-five { + margin-left: 43.3333333333%; + } + .offset-six { + margin-left: 52%; + } + .offset-seven { + margin-left: 60.6666666667%; + } + .offset-eight { + margin-left: 69.3333333333%; + } + .offset-nine { + margin-left: 78%; + } + .offset-ten { + margin-left: 86.6666666667%; + } + .offset-eleven, .offset-eleven:first-child { + margin-left: 95.3333333333%; + } +} +/* Header */ +.header { + position: absolute; + width: 100%; + background: #FFF; + border-bottom: 1px solid #DDD; + z-index: 9; +} + +.header-container { + margin: 0 auto; + position: relative; + padding: 1.305rem; + /*max-height:52px;*/ + max-width: 960px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header--scroll { + position: fixed; +} + +.header-container--scroll { + padding: 0.24rem 1.24rem; +} + +.logo { + font-weight: bold; +} + +.desktop-nav { + display: none; +} + +.mobile-nav { + height: 100%; + width: 100%; + position: fixed; + top: 51px; + left: 0; + right: 0; + padding: 1.24rem; + background: #FFF; + border-left: 1px solid #EEE; + z-index: 8; +} + +nav > a { + padding: 0.2rem 0; + display: block; + border-top: 1px dotted #101; +} + +nav > a:first-child { + border: none; +} + +.mobile-nav--hidden { + display: none; +} + +.burger-container { + position: relative; + height: 20px; + width: 28px; + cursor: pointer; + z-index: 9; +} + +.burger, .burger::after, .burger::before { + position: absolute; + height: 4px; + width: 28px; + content: ""; + transition: transform 300ms cubic-bezier(0.4, 1, 0.5, 1); + background: #000; +} + +.burger::before { + margin-top: 8px; +} + +.burger::after { + margin-top: 16px; +} + +.burger-open { + overflow: hidden; +} + +@media (min-width: 720px) { + .desktop-nav { + display: inline-block; + } + nav > a { + margin-left: 2rem; + padding: auto; + display: inline; + border: none; + } + nav > a:first-child { + padding: 1rem 0; + margin-left: 0; + } + .burger-container { + display: none; + } + .burger-open { + overflow: auto; + } + .mobile-nav { + display: none; + } +} +@media (max-width: 320px) { + .burger-container { + display: block; + } +} +/* Accordion */ +.accordion, details { + border: 1px solid #EEE; +} + +.accordion__item + .accordion__item { + border-top: 1px solid #EEE; +} + +.accordion__item__header, details summary { + margin: 0; + border: none; + border-bottom: 1px solid #EEE; + border-radius: 0; + width: 100%; + text-align: left; + padding: 1.2rem 1.6rem; + font-size: 1.6rem; + background: #FFF; + cursor: pointer; +} + +.accordion__item__header:focus { + border-bottom: 1px solid #EEE; +} + +.accordion__item__body, .detail__body { + padding: 1.2rem 1.6rem; +} + +.accordion__item__body__hidden { + display: none; +} + +/* Alerts */ +.alert { + border-radius: 1.24rem; + padding: 1.24rem; + position: relative; + margin: 1rem 0; + border: 1px solid #EEE; +} + +.alert--dismissable { + padding-right: 3rem; +} + +.alert--dismissable .button-close { + position: absolute; + top: 0; + right: 0; + padding: 1.9rem 1rem; + margin: 0; +} + +.alert--success { + background: #D1E7DD; +} + +.alert--fail { + background: #F8D7DA; +} + +/* Buttons */ +.button, a.button, +input[type=submit], +input[type=reset], +input[type=button] { + border: 1px solid #275D57; + border-radius: 0.6rem; + padding: 1.2rem 1.6rem; + display: inline-block; + color: #275D57; + margin: 0.6rem 0.2rem; + text-align: center; + background: transparent; + font-size: 1.3rem; + line-height: 1.3rem; + letter-spacing: 0.07rem; + cursor: pointer; + font-weight: bold; +} + +.button:hover, a.button:hover, +input[type=submit]:hover, +input[type=reset]:hover, +input[type=button]:hover, +.button:focus, button:focus, +input[type=submit]:focus, +input[type=reset]:focus, +input[type=button]:focus { + color: #333; + border-color: #275D57; + outline: 0; +} + +.button--fill, +a.button--fill, +button.button--fill, +input[type=submit].button--fill, +input[type=reset].button--fill, +input[type=button].button--fill { + background: #275D57; + color: #FFF; +} + +.button--fill:hover, a.button--fill:hover, button.button--fill:hover, +input[type=submit].button--fill:hover, +input[type=reset].button--fill:hover, +input[type=button].button--fill:hover, +.button--fill:focus, button:focus, +input[type=submit].button--fill:focus, +input[type=reset].button--fill:focus, +input[type=button].button--fill:focus { + color: #000; + background: #FFF; + outline: 0; +} + +.button--alt, +a.button--alt, +button.button--alt, +input[type=submit].button--alt, +input[type=reset].button--alt, +input[type=button].button--alt { + background: #DF7E77; + border-color: #DF7E77; + color: #FFF; +} + +.button--alt:hover, a.button--alt:hover, button.button--alt:hover, +input[type=submit].button--alt:hover, +input[type=reset].button--alt:hover, +input[type=button].button--alt:hover, +.button--alt:focus, button:focus, +input[type=submit].button--alt:focus, +input[type=reset].button--alt:focus, +input[type=button].button--alt:focus { + color: #333; + border-color: #888; + outline: 0; +} + +.button-close { + box-sizing: content-box; + width: 1em; + height: 1em; + padding: 0.25em 0.25em; + color: #000; + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; + border: 0; + border-radius: 0.375rem; + opacity: 0.5; + vertical-align: middle; + cursor: pointer; +} + +/* Card */ +.card { + background: #DDD; + text-align: center; + transition: transform 0.2s; + width: 240px; + display: inline-block; + vertical-align: top; + margin: 1rem; + overflow: hidden; +} + +.card:hover { + /*transform:scale(1.04); + filter: brightness(1.03);*/ +} + +.card__header { + padding: 2rem; + width: 100%; + height: auto; + background: red; + color: #FFF; + position: relative; + padding: 0; + margin: 0; +} + +.card__header--image { + padding: 0; + width: 100%; +} + +.card__header img { + max-width: 100%; + height: auto; + display: block; + overflow: hidden; +} + +.card__header__absolute { + color: #FFF; + position: absolute; + width: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.card__content { + padding: 2.2rem; +} + +.card__footer { + padding: 1.2rem; + padding-top: 0; +} + +.flip-card:hover .flip-card__front { + display: none; +} +.flip-card:hover .flip-card__back { + display: block; +} + +.flip-card__front { + display: block; +} + +.flip-card__back { + display: none; +} + +/* Code */ +pre { + background: #F8F8F8; + padding: 1rem; + margin: 1rem 0; + white-space: pre-wrap; + overflow-x: auto; + border: 1px solid #F8F8F8; + border-radius: 6px; +} + +code { + background: #F8F8F8; + padding: 0.1rem 0.4rem; + border: 1px solid #F8F8F8; + border-radius: 6px; + font-size: 1.5rem; + color: #555; +} + +pre code { + border: none; +} + +/* Cookies */ +.cookie-prompt { + position: fixed; + bottom: 0; + background: #EEE; + border-top: 1px solid #333; + width: 100%; + padding: 1.2rem; +} + +.cookie-prompt--hidden { + display: none; +} + +/* Hero */ +#hero { + -webkit-transition: all 0.3s linear; + -moz-transition: all 0.3s linear; + -o-transition: all 0.3s linear; + transition: all 0.3s linear; +} + +.hero__credit { + position: absolute; + bottom: 0; + right: 0; + padding: 1.24rem; + border-radius: 1rem 0 0 0; + background: #EEE; +} + +.hero__credit--hidden { + display: none; +} + +.hero-s { + padding: 4.64rem; + background: #275D57; +} + +.hero-m { + height: 400px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + max-height: 70vh; +} + +.hero-f { + height: 100vh; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} + +.hero--image { + background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)), url("./images/hero.jpg"); +} + +.hero-content { + text-align: center; +} + +.hero-m .hero-content, +.hero-f .hero-content { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} + +.hero-s *, .hero-m *, .hero-f * { + color: #FFF; +} + +.hero--para { + background-attachment: fixed; +} + +.main--para { + margin-top: 0; +} + +/* Lists */ +ul { + padding-left: 0; + margin-left: 0; + list-style: inside; +} + +ul li { + margin: 0.35rem; +} + +li > ul { + margin-left: 1em; +} + +/* Quotes */ +blockquote { + margin: 1.7rem 0.2rem; + border-left: 2px solid; + padding: 1rem 0.4rem; + padding-left: 2rem; +} + +/* Tables */ +.tblcon { + overflow-x: auto; +} + +table { + text-align: left; + width: 100%; + border-collapse: collapse; + overflow-wrap: normal; + margin: 24px 0; +} + +th { + font-weight: bold; +} + +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; +} + +th:first-child, +td:first-child { + padding-left: 0; +} + +th:last-child, +td:last-child { + padding-right: 0; +} + +thead tr { + border-color: red; +} + +tbody tr:nth-child(odd) td { + background-color: #FCFCFC; +} + +tbody tr:hover td { + background: #F8F8F8; +} + +@media print { + .container { + max-width: none; + } +} +@media (min-width: 720px) { + ul li { + margin: auto; + } +} +@media (max-width: 320px) { + body { + overflow-wrap: anywhere; + } + img { + width: 100%; + height: auto; + } +} +/* Tags */ +.tag { + font-size: 0.8rem; + vertical-align: middle; + padding: 0.2rem 0.5rem; + border-radius: 0.33rem; + border: 1px solid #DDD; +} + +.tag--m { + font-size: 1rem; +} + +.tag--l { + font-size: 1.2rem; +} + +.tag--fill { + background: #275D57; + color: #FFF; + border-color: #275D57; +} + +.tag--alt { + background: #DF7E77; + color: #FFF; + border-color: #DF7E77; +} + +/* Toasts */ +.toast-container { + position: fixed; + z-index: 9; + bottom: 0; + padding: 1rem; + pointer-events: none; /* Prevent interaction */ + width: 100%; +} + +.toast { + text-align: center; + display: block; +} + +.toast__inner { + margin: 0 auto; + font: 1.4rem sans-serif; + color: #444; + padding: 1.2rem 2rem; + border-radius: 0.3rem; + background: #222; + color: #FFF; + text-align: center; + box-shadow: 0px 2px 8px -5px rgb(0, 0, 0); + display: inline-block; +} + +.toast + .toast { + margin-top: 0.4rem; +} + +/* Utilities */ +.hidden { + display: none; +} + +.tac { + text-align: center; +} + +.vh { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + width: 1px; + padding: 2px 8px; + overflow: hidden; + white-space: nowrap; + background: #FFF; + z-index: 10; +} + +.vh:focus { + clip: auto; + overflow: auto; + height: auto; + width: auto; +} + +.u-full-width { + width: 100%; + box-sizing: border-box; +} + +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; +} + +.u-pull-right { + float: right; +} + +.u-pull-left { + float: left; +} + +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; +} + +/* Site specific */ +strong { + font-weight: bold; +} + +.section { + padding: 1.75rem 1.24rem; + margin: 1.75rem auto; + background: #FFF; +} + +.section--no-bg { + padding: 0; /*1.24rem*/ + background: none; +} + +nav a { + color: #000; +} +nav a:hover, nav a:visited:hover { + color: #275D57; + border-bottom: 1px solid #275D57; +} +nav a:visited { + color: #000; +} + +main { + margin-top: 84px; + background: #FAECE1; +} + +.hero--image { + background-size: cover; + background-position-x: center; + background-position-y: top; +} + +a.button--hero { + border-color: #FFF; + background: #FCFCFC; + color: #275D57; + font-size: 1.5rem; + margin-top: 1.2rem; +} +a.button--hero:hover { + background: #FFF; + color: #000; +} + +.section h2 { + border-bottom: 1px solid #EEE; + padding-bottom: 1.4rem; + margin-bottom: 1.4rem; +} + +.hero-m .hero-content { + top: auto; + transform: translate(-50%, 0); + bottom: 50px; +} +.hero-m .hero-content h1 { + font-size: 3.8rem; +} +.hero-m .hero-content h2 { + font-size: 2.6rem; +} + +details { + margin-bottom: 1rem; +} + +details summary, +details .detail__body { + background: #FFF; +} + +.header { + height: 84px; + /* + background:#39897B; + */ +} + +.header--scroll { + height: auto; +} + +.mobile-nav { + top: 84px; +} + +main { + /* + background:#C8BDB4; + */ +} + +nav > a { + padding: 0.7rem; +} + +.fundraiser-container { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); +} +@media (min-width: 360px) { + .fundraiser-container { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 768px) { + .fundraiser-container { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } +} + +.fundraiser { + /* + float:left; + width:25%; + */ + border-bottom: 1px solid #DDD; + text-align: center; + padding-bottom: 1rem; + display: flex; + flex-direction: column; +} +.fundraiser img { + align-items: center; + width: 100%; + height: auto; + /* + flex: 1 0 auto; + */ +} +.fundraiser p { + padding-top: 0.6rem; + margin-bottom: auto; +} +.fundraiser:nth-child(odd) { + border-bottom: 1px solid #EEE; +} +.fundraiser:hover { + border-bottom: 1px solid #275D57; +} + +p + p { + margin-top: 1rem; +} + +p + .button { + margin-top: 2rem; +} + +.footer { + border-top: 1px solid #111; + background: #368179; + padding: 1.6rem 0; + padding-bottom: 2.4rem; +} + +.footer * { + color: #FFF; +} + +.footer__sub { + margin-top: 2rem; +} + +.footer__title { + font-weight: bold; + font-size: 1.85rem; + margin-bottom: 1rem; + margin-top: 0.8rem; +} + +.footer__logo__container { + display: flex; + gap: 1.6rem; + align-items: center; + margin-bottom: 1rem; +} +.footer__logo__container .footer__title { + margin: 0; +} + +.footer__logo { + border-radius: 9999px; +} + +a.footer__link { + color: #FFF; +} +a.footer__link:hover { + color: #000; +} + +.subfooter { + border-top: 1px solid #222; + background: #275D57; + padding: 0.8rem 0; +} + +.subfooter * { + color: #FFF; +} + +.subfooter a { + color: #FFF; + text-decoration: underline; +} +.subfooter a:hover { + color: #DDD; +} + +.footer__container { + display: flex; + flex-wrap: wrap; + gap: 3rem; +} + +a.footer__icon { + width: 32px; + height: 32px; + display: inline-block; +} + +.siteby { + text-align: right; +} + +.section summary h2 { + font-size: 1.6rem; + border: none; + margin: 0; + padding: 0; + display: inline; + vertical-align: middle; +} + +.card__content { + background: #FFF; + padding: 1rem; +} + +.team-grid { + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); +} +@media (min-width: 700px) { + .team-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 1000px) { + .team-grid { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +.team-grid .card { + width: 100%; + height: auto; + background: #FFF; + position: relative; +} + +.card__image { + width: 100%; + height: auto; +} + +.flip-card { + margin: 0; + position: relative; + height: 286px; + width: 100%; +} +.flip-card:hover .flip-card__front { + display: block; +} +@media (min-width: 320px) { + .flip-card:hover .flip-card__front .card__content { + display: none; + } +} +.flip-card:hover .flip-card__back { + display: block; +} + +.flip-card__front { + position: relative; +} + +.flip-card__front .card__content { + background: #275D57; + background: rgba(39, 93, 87, 0.8); +} +@media (min-width: 320px) { + .flip-card__front .card__content { + position: absolute; + bottom: 0; + max-width: 85%; + } +} +.flip-card__front .card__content * { + color: #FFF; +} +.flip-card__front .card__content h2 { + border: 0; + padding: 0; +} +.flip-card__front .card__content h3 { + font-size: 1.6rem; +} + +.flip-card__back { + display: block; +} +@media (min-width: 320px) { + .flip-card__back { + display: none; + } + .flip-card__back .card__content { + position: relative; + } + .flip-card__back .card__content p { + position: relative; + } +} + +@media (min-width: 320px) { + .flip-card__back .card__content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #275D57; + background: rgba(39, 93, 87, 0.8); + } + .flip-card__back .card__content p { + padding: 1rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + color: #FFF; + } +} + +.donate-container { + display: grid; + gap: 1rem; + grid-template-columns: repeat(1, minmax(0, 1fr)); +} +@media (min-width: 720px) { + .donate-container { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +.donate-container section { + padding: 1rem; +} +.donate-container section h3 { + border-bottom: 1px solid #EEE; + padding-bottom: 1rem; + margin-bottom: 1rem; +} +.donate-container section a.button { + display: block; +} + +.contact-container { + display: grid; + gap: 1rem; + margin: 0 auto; + margin-top: 1rem; + gap: 1rem; + grid-template-columns: repeat(1, minmax(0, 1fr)); +} +@media (min-width: 720px) { + .contact-container { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} +@media (min-width: 960px) { + .contact-container { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} +.contact-container a, .contact-container a:visited { + display: block; + background: #368179; + padding: 1rem; + text-align: center; + color: #FFF; +} +.contact-container a:hover, .contact-container a:visited:hover { + background: #3e9389; +} +.contact-container a:nth-child(odd), .contact-container a:visited:nth-child(odd) { + background: #275D57; +} +.contact-container a:nth-child(odd):hover, .contact-container a:visited:nth-child(odd):hover { + background: #3e9389; +} + +/*# sourceMappingURL=main.css.map */ diff --git a/main.css.map b/main.css.map new file mode 100644 index 0000000..ae890d8 --- /dev/null +++ b/main.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["scss/core/_reset.scss","scss/core/_core.scss","scss/core/_colours.scss","scss/core/_typography.scss","scss/core/_forms.scss","scss/core/_grid.scss","scss/core/_header.scss","scss/core/_nav.scss","scss/components/_accordion.scss","scss/components/_alerts.scss","scss/components/_buttons.scss","scss/components/_card.scss","scss/components/_code.scss","scss/components/_cookies.scss","scss/components/_hero.scss","scss/components/_lists.scss","scss/components/_quotes.scss","scss/components/_tables.scss","scss/components/_tags.scss","scss/components/_toast.scss","scss/utilities/_utilities.scss","scss/site/_site.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaC;EACA;EACA;EACA;EACA;EACA;;;AAED;AACA;AAAA;EAEC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AC9CD;AACA;EACC;;;AAED;EAAU;;;AACV;EAAK;;;AACL;EACA;EAA4B,OCPlB;EDQV;EAAqB;EAAoB;EACzC;;;AACA;EACC;EACA;;;AAGD;EACC;;;AEhBD;AACA;EAAkB;EAAgB;;;AAClC;EAAG,ODQU;ECRQ;EAAe;EAAiB;;;AACrD;EAAiB;EAAa;;;AAC9B;EAAG,ODOY;ECPQ;EAAiB;EAAkB;;;AAC1D;EAAG,ODOI;ECPQ;EAAkB;;;AACjC;EAAS,ODNC;ECMc;EAAkB;;;AAE1C;AACA;EAAE;;;AACF;EAAiB,ODIH;;;ACHd;EAAwB,ODEZ;;;AEbZ;AACA;EACC;EACA,YFEU;EEDV;EACA;EACA;;;AAED;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA,kBFbO;EEcP;EACA;EACA;EACA;;;AACD;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA;;;AACD;EACC;EACA;EACA;EACA;;;AACD;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;;;AACD;EACC;EACA;EACA;;;AACD;EACC;EACA;;;AACD;EACC;;;AACD;EACC;EACA;EACA;;;ACrDD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;AAQA;AACA;EACE;IAAa;;EACb;IAA2E;;EAC3E;AAAA;AAAA;AAAA;AAAA;IAIwC;;EAExC;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;;EAC1B;IAA0B;IAAa;;AAEvC;EACA;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAuB;;EACvB;IAAkD;;;AChEpD;AACA;EACA;EACA;EACA,YJFQ;EIGR;EACA;;;AAEA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;;AAEA;EACA;;;AAEA;EACA;;;AAEA;EAAM;;;ACxBN;EAAa;;;AACZ;EAAY;EACZ;EACA;EACA;EAAS;EAAO;EAChB;EACA;EAAgB;EAChB;;;AACD;EACA;EACA;EACA;;;AACA;EAAkB;;;AAClB;EACC;;;AAGD;EACA;EAAkB;EAAY;EAC9B;EAAe;;;AACf;EACA;EACA;EAAW;EAAW;EACtB;EACA,YLvBQ;;;AKwBR;EAAgB;;;AAChB;EAAe;;;AACf;EAAa;;;AAEb;EACC;IAAa;;EACb;IAAM;IAAiB;IAAa;IAAe;;EACnD;IAAkB;IAAe;;EACjC;IAAkB;;EAClB;IAAa;;EACb;IAAY;;;AAEb;EACC;IAAkB;;;ACtCnB;AACA;EACC;;;AAGD;EAAqC;;;AACrC;EAA0C;EAAS;EAAY;EAAoC;EAAgB;EAAW;EAAgB;EAAsB;EAAiB,YNJ7K;EMI+L;;;AACvM;EAA+B;;;AAC/B;EAAqC;;;AACrC;EAA+B;;;ACT/B;AACA;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;EAAM;EACN;EACA;;;AAED;EACC,YPES;;;AOAV;EACC;;;ACrBD;AACA;AAAA;AAAA;AAAA;EAIC;EACA;EACA;EACA;EACA,OROS;EQNT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,ORfK;EQgBL,cRZQ;EQaR;;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC,YRrBS;EQsBT,ORpCO;;;AQsCR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,OR/CM;EQgDN,YR/CM;EQgDN;;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC,YRzCK;EQ0CL,cR1CK;EQ2CL,OR1DO;;;AQ4DR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,OR1DK;EQ2DL,cRxDkB;EQyDlB;;;AAGF;EACE;EACA;EACA;EACA;EACA,OR/EM;EQgFN;EACA;EACA;EACA;EACA;EACA;;;ACtFF;AACA;EACC,YTEc;ESDd;EACA;EACA;EACA;EACA;EACA;EACA;;;AAED;AACC;AAAA;;;AAGD;EACC;EACA;EACA;EACA;EACA,OTlBO;ESmBP;EACA;EAAU;;;AAEX;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC,OTjCO;ESkCP;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;EACA;;;AAKC;EACC;;AAED;EACC;;;AAKH;EACC;;;AAED;EACC;;;ACjED;AACA;EACA,YVIO;EUJU;EAAa;EAC9B;EAAqB;EACrB;EAAuB;;;AACvB;EACA;EAAiB;EACjB;EAAuB;EACvB;EAAiB,OVDN;;;AUEX;EAAS;;;ACTT;AACA;EACC;EACA;EACA,YXDY;EWEZ;EACA;EACA;;;AAED;EACC;;;ACVD;AACA;EACC;EACG;EACA;EACA;;;AAEJ;EACC;EACA;EAAS;EACT;EACA;EACA,YZTY;;;AYWb;EACC;;;AAED;EAAQ;EAAgB,YZDd;;;AYEV;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;EACA;;;AAED;EACC;;;AAED;EACC;;;AAED;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACC,OZ/CO;;;AYiDR;EACC;;;AAED;EACC;;;ACvDD;AACA;EAAG;EAAe;EAAc;;;AAChC;EAAM;;;AACN;EAAM;;;ACHN;AACA;EACA;EACA;EACA;EAAmB;;;ACJnB;AACA;EAAQ;;;AACR;EAAM;EAAgB;EACtB;EACA;EACA;;;AACA;EAAG;;;AACH;AAAA;EAEE;EACA;EACA;;;AACF;AAAA;EAEE;;;AACF;AAAA;EAEE;;;AACF;EAAS;;;AACT;EAA2B,kBfdhB;;;AeeX;EAAkB,YfdX;;;AegBP;EAAa;IAAW;;;AACxB;EACC;IAAM;;;AAEP;EACC;IAAK;;EACL;IAAI;IAAW;;;AC5BhB;AACA;EACA;EAAgB;EAChB;EAAoB;EACpB;;;AACA;EAAQ;;;AACR;EAAQ;;;AACR;EAAW,YhBSD;EgBTqB,OhBLvB;EgBKoC,chBSlC;;;AgBRV;EAAU,YhBSJ;EgBToB,OhBNlB;EgBM+B,chBSjC;;;AiBjBN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAED;EACC;EACA;;;AAED;EACC;EACA;EAAuB,OjBfd;EiBgBT;EAAqB;EACrB;EACA,OjBhBO;EiBgBM;EACb;EACA;;;AAED;EACC;;;ACvBD;AACA;EAAQ;;;AACR;EAAK;;;AAEL;EACA;EACA;EACA;EAAW;EACX;EAAgB;EAChB;EACA,YlBRQ;EkBQU;;;AAClB;EACA;EAAU;EACV;EAAY;;;AAEZ;EACE;EACA;;;AACF;EACE;EACA;;;AACF;EACE;;;AACF;EACE;;;AAEF;AACA;AAAA;AAAA;EAGE;EACA;EACA;;;AChCF;AAGA;EACC;;;AAGD;EACA;EACA;EACA,YnBRQ;;;AmBUR;EACA;EACA;;;AAEA;EACC,OnBhBO;;AmBiBP;EACC,OnBHQ;EmBIR;;AAED;EACC,OnBtBM;;;AmByBR;EACA,YA1Be;EA2Bf,YnBNa;;;AmBQb;EACC;EACA;EACA;;;AAED;EACC,cnBlCO;EmBmCP,YnBhCU;EmBiCV,OnBtBS;EmBuBT;EACA;;AACA;EACC,YnBxCM;EmByCN,OnB1CM;;;AmB6CR;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAED;EACC;;;AAIF;EACC;;;AAED;AAAA;EAEC,YnBlEO;;;AmBqER;EACC,QAvEc;AAwEd;AAAA;AAAA;;;AAID;EACC;;;AAED;EACC,KAhFc;;;AAkFf;AACC;AAAA;AAAA;;;AAID;EACC;;;AAED;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EAND;IAOE;;;;AAGF;AACC;AAAA;AAAA;AAAA;EAKA;EACA;EACA;EAEA;EACA;;AAEA;EACC;EACA;EACA;AACA;AAAA;AAAA;;AAKD;EACC;EACA;;AAGD;EACC;;AAED;EACC;;;AAIF;EACC;;;AAED;EACC;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC,OnBnJO;;;AmBqJR;EACC;;;AAED;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;EACA;;AACA;EACC;;;AAGF;EACC;;;AAED;EACC,OnB3KO;;AmB4KP;EACC,OnB9KM;;;AmBiLR;EACC;EACA,YnBpKS;EmBqKT;;;AAED;EACC,OnBtLO;;;AmBwLR;EACC,OnBzLO;EmB0LP;;AACA;EACC,OnB1La;;;AmB6Lf;EACC;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC,YnBvNO;EmBwNP;;;AAED;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EAND;IAOE;;;AAGD;EACC;EACA;EACA,YnBvOM;EmBwON;;;AAIF;EACC;EACA;;;AAED;EACC;EACA;EACA;EACA;;AAEC;EACC;;AACC;EACA;IACC;;;AAIH;EACC;;;AAIH;EACC;;;AAED;EAMC,YnB9PS;EmB+PT;;AANA;EADD;IAEE;IACA;IACA;;;AAID;EAAE,OnB9QK;;AmBgRP;EACC;EACA;;AAED;EACC;;;AAGF;EACC;;AACA;EAFD;IAGE;;EACA;IACC;;EACA;IACC;;;;AAMH;EADD;IAEE;IACA;IACA;IACA;IACA;IACA,YnB7RQ;ImB8RR;;EAEA;IACC;IACA;IACA;IAAQ;IACR;IACA;IACA,OnBpTK;;;;AmB0TR;EACC;EACA;EACA;;AACA;EAJD;IAKE;;;AAGD;EACC;;AACA;EACC;EACA;EACA;;AAED;EACC;;;AAIH;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EAPD;IAQE;;;AAED;EAVD;IAWE;;;AAED;EACC;EACA;EACA;EACA;EACA,OnBhWM;;AmBiWN;EACC;;AAGD;EACC,YnBxVO;;AmByVP;EACC","file":"main.css"} \ No newline at end of file diff --git a/scss/_colorscheme.scss b/scss/_colorscheme.scss new file mode 100644 index 0000000..99d0266 --- /dev/null +++ b/scss/_colorscheme.scss @@ -0,0 +1,15 @@ +@media(prefers-color-scheme:dark){ + body{color:#CCC;background:#101} + a:link,a:visited{color:#9CF} + a:hover,a:visited:hover{color:#C34} + h1{color:#FFF}h2{color:#EEE} + h3,h4,h5,h6{color:#EEE} + td,th{border-color:#444} + thead tr{background:#101} + tbody tr:nth-child(odd){background:#222} + tbody tr:hover{background:#333} + pre{background:#333;color:#EEE;border-color:#555} + code{background:#333} + .tag{border-color:#555} +} + diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss new file mode 100644 index 0000000..a997b8b --- /dev/null +++ b/scss/components/_accordion.scss @@ -0,0 +1,11 @@ +/* Accordion */ +.accordion, details{ + border:1px solid $lightWhite; +} +.accordion__item{} +.accordion__item + .accordion__item {border-top:1px solid $lightWhite;} +.accordion__item__header, details summary{margin:0;border:none;border-bottom:1px solid $lightWhite;border-radius:0;width:100%;text-align:left;padding:1.2rem 1.6rem;font-size:1.6rem;background:$white;cursor:pointer;} +.accordion__item__header:focus{border-bottom:1px solid $lightWhite;} +.accordion__item__body,.detail__body{padding:1.2rem 1.6rem;} +.accordion__item__body__hidden{display:none} + diff --git a/scss/components/_alerts.scss b/scss/components/_alerts.scss new file mode 100644 index 0000000..1dc86ff --- /dev/null +++ b/scss/components/_alerts.scss @@ -0,0 +1,24 @@ +/* Alerts */ +.alert{ + border-radius:1.24rem; + padding:1.24rem; + position:relative; + margin:1rem 0; + border:1px solid $lightWhite; +} +.alert--dismissable{ + padding-right:3rem; +} +.alert--dismissable .button-close{ + position:absolute; + top:0;right:0; + padding:1.9rem 1rem; + margin:0; +} +.alert--success{ + background: $success; +} +.alert--fail{ + background: $fail; +} + diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss new file mode 100644 index 0000000..650bc53 --- /dev/null +++ b/scss/components/_buttons.scss @@ -0,0 +1,89 @@ +/* Buttons */ +.button,a.button, +input[type="submit"], +input[type="reset"], +input[type="button"] { + border:1px solid $primary; + border-radius:.6rem; + padding:1.2rem 1.6rem; + display:inline-block; + color:$primary; + margin:.6rem .2rem; + text-align:center; + background:transparent; + font-size:1.3rem; + line-height:1.3rem; + letter-spacing:.07rem; + cursor:pointer; + font-weight:bold; +} +.button:hover,a.button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.button:focus,button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + color: $grey;; + border-color: $primary; + outline: 0; +} +.button--fill, +a.button--fill, +button.button--fill, +input[type="submit"].button--fill, +input[type="reset"].button--fill, +input[type="button"].button--fill { + background:$primary; + color:$white; +} +.button--fill:hover,a.button--fill:hover,button.button--fill:hover, +input[type="submit"].button--fill:hover, +input[type="reset"].button--fill:hover, +input[type="button"].button--fill:hover, +.button--fill:focus,button:focus, +input[type="submit"].button--fill:focus, +input[type="reset"].button--fill:focus, +input[type="button"].button--fill:focus { + color: $black; + background: $white; + outline: 0; +} +.button--alt, +a.button--alt, +button.button--alt, +input[type="submit"].button--alt, +input[type="reset"].button--alt, +input[type="button"].button--alt { + background:$alt; + border-color:$alt; + color:$white; +} +.button--alt:hover,a.button--alt:hover,button.button--alt:hover, +input[type="submit"].button--alt:hover, +input[type="reset"].button--alt:hover, +input[type="button"].button--alt:hover, +.button--alt:focus,button:focus, +input[type="submit"].button--alt:focus, +input[type="reset"].button--alt:focus, +input[type="button"].button--alt:focus { + color: $grey; + border-color: $buttonHoverColour; + outline: 0; +} + +.button-close{ + box-sizing: content-box; + width: 1em; + height: 1em; + padding: .25em .25em; + color: $black; + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; + border: 0; + border-radius: .375rem; + opacity: .5; + vertical-align:middle; + cursor:pointer; +} + diff --git a/scss/components/_card.scss b/scss/components/_card.scss new file mode 100644 index 0000000..72bc6d4 --- /dev/null +++ b/scss/components/_card.scss @@ -0,0 +1,68 @@ +/* Card */ +.card{ + background: $lighterWhite; + text-align:center; + transition:transform .2s; + width: 240px; + display: inline-block; + vertical-align:top; + margin:1rem; + overflow:hidden; +} +.card:hover{ + /*transform:scale(1.04); + filter: brightness(1.03);*/ +} +.card__header{ + padding: 2rem; + width:100%; + height:auto; + background:red; + color:$white; + position:relative; + padding:0;margin:0; +} +.card__header--image{ + padding:0; + width:100%; +} +.card__header img{ + max-width:100%; + height:auto; + display:block; + overflow:hidden; +} +.card__header__absolute{ + color:$white; + position: absolute; + width:100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.card__content{ + padding:2.2rem; +} +.card__footer{ + padding:1.2rem; + padding-top:0; +} + +.flip-card{ + &:hover{ + .flip-card__front{ + display: none; + } + .flip-card__back{ + display: block; + } + } + +} +.flip-card__front{ + display:block; +} +.flip-card__back{ + display:none; +} + diff --git a/scss/components/_code.scss b/scss/components/_code.scss new file mode 100644 index 0000000..d31469d --- /dev/null +++ b/scss/components/_code.scss @@ -0,0 +1,11 @@ +/* Code */ +pre{ +background:$code;padding:1rem;margin:1rem 0; +white-space:pre-wrap;overflow-x:auto; +border:1px solid $code;border-radius:6px} +code{ +background:$code;padding:.1rem .4rem; +border:1px solid $code;border-radius:6px; +font-size:1.5rem;color:$codeText} +pre code{border:none} + diff --git a/scss/components/_cookies.scss b/scss/components/_cookies.scss new file mode 100644 index 0000000..f2e7e97 --- /dev/null +++ b/scss/components/_cookies.scss @@ -0,0 +1,13 @@ +/* Cookies */ +.cookie-prompt{ + position:fixed; + bottom:0; + background:$lightWhite; + border-top: 1px solid $grey; + width:100%; + padding: 1.2rem; +} +.cookie-prompt--hidden{ + display:none; +} + diff --git a/scss/components/_hero.scss b/scss/components/_hero.scss new file mode 100644 index 0000000..5461d11 --- /dev/null +++ b/scss/components/_hero.scss @@ -0,0 +1,58 @@ +/* Hero */ +#hero{ + -webkit-transition: all .3s linear; + -moz-transition: all .3s linear; + -o-transition: all .3s linear; + transition: all .3s linear; +} +.hero__credit{ + position:absolute; + bottom:0;right:0; + padding:1.24rem; + border-radius: 1rem 0 0 0; + background:$lightWhite; +} +.hero__credit--hidden{ + display:none; +} +.hero-s{padding:4.64rem;background:$primary} +.hero-m{ + height:400px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + max-height:70vh; +} +.hero-f{ + height:100vh; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} +.hero--image{ + background-image:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)), url("./images/hero.jpg"); +} +.hero-content{ + text-align:center; +} +.hero-m .hero-content, +.hero-f .hero-content{ + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; +} +.hero-s *, .hero-m *, .hero-f *{ + color: $white; +} +.hero--para{ + background-attachment:fixed; +} +.main--para{ + margin-top:0; +} + diff --git a/scss/components/_lists.scss b/scss/components/_lists.scss new file mode 100644 index 0000000..49d4bdc --- /dev/null +++ b/scss/components/_lists.scss @@ -0,0 +1,5 @@ +/* Lists */ +ul{padding-left:0;margin-left:0;list-style:inside} +ul li{margin:.35rem} +li>ul{margin-left:1em} + diff --git a/scss/components/_main.scss b/scss/components/_main.scss new file mode 100644 index 0000000..46db313 --- /dev/null +++ b/scss/components/_main.scss @@ -0,0 +1,13 @@ +@import 'accordion'; +@import 'alerts'; +@import 'buttons'; +@import 'card'; +@import 'code'; +@import 'cookies'; +@import 'hero'; +@import 'lists'; +@import 'quotes'; +@import 'tables'; +@import 'tags'; +@import 'toast'; + diff --git a/scss/components/_quotes.scss b/scss/components/_quotes.scss new file mode 100644 index 0000000..6d8d645 --- /dev/null +++ b/scss/components/_quotes.scss @@ -0,0 +1,6 @@ +/* Quotes */ +blockquote{ +margin:1.7rem .2rem; +border-left:2px solid; +padding:1rem .4rem;padding-left:2rem} + diff --git a/scss/components/_tables.scss b/scss/components/_tables.scss new file mode 100644 index 0000000..0094469 --- /dev/null +++ b/scss/components/_tables.scss @@ -0,0 +1,31 @@ +/* Tables */ +.tblcon{overflow-x:auto} +table{text-align:left;width:100%; +border-collapse:collapse; +overflow-wrap:normal; +margin:24px 0} +th{font-weight:bold} +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid $tableBorder; } +th:first-child, +td:first-child { + padding-left: 0; } +th:last-child, +td:last-child { + padding-right: 0; } +thead tr{border-color:red} +tbody tr:nth-child(odd) td{background-color: $offWhite} +tbody tr:hover td{background:$code} + +@media print{.container{max-width:none}} +@media(min-width:720px){ + ul li{margin:auto} +} +@media(max-width:320px){ + body{overflow-wrap:anywhere} + img{width:100%;height:auto} +} + diff --git a/scss/components/_tags.scss b/scss/components/_tags.scss new file mode 100644 index 0000000..a8528dd --- /dev/null +++ b/scss/components/_tags.scss @@ -0,0 +1,10 @@ +/* Tags */ +.tag{ +font-size:.8rem;vertical-align:middle; +padding:.2rem .5rem;border-radius:.33rem; +border:1px solid $tag} +.tag--m{font-size:1rem;} +.tag--l{font-size:1.2rem;} +.tag--fill{background:$primary;color:$white;border-color:$primary} +.tag--alt{background:$alt;color:$white;border-color:$alt} + diff --git a/scss/components/_toast.scss b/scss/components/_toast.scss new file mode 100644 index 0000000..fd253ae --- /dev/null +++ b/scss/components/_toast.scss @@ -0,0 +1,26 @@ +/* Toasts */ +.toast-container{ + position:fixed; + z-index:9; + bottom: 0; + padding:1rem; + pointer-events:none; /* Prevent interaction */ + width:100%; +} +.toast{ + text-align:center; + display:block; +} +.toast__inner{ + margin:0 auto; + font:1.4rem sans-serif;color:$content; + padding: 1.2rem 2rem;border-radius:.3rem; + background:#222; + color:$white;text-align:center; + box-shadow: 0px 2px 8px -5px rgba(0, 0, 0, 1); + display:inline-block; +} +.toast + .toast{ + margin-top:.4rem; +} + diff --git a/scss/core/_colours.scss b/scss/core/_colours.scss new file mode 100644 index 0000000..90281f1 --- /dev/null +++ b/scss/core/_colours.scss @@ -0,0 +1,24 @@ +$content: #444; +$black: #000; +$white: #FFF; +$lightWhite: #EEE; +$lighterWhite: #DDD; +$offWhite: #FCFCFC; +$code: #F8F8F8; +$codeText: #555; +$tableBorder: #E1E1E1; +$h1: $black; +$lightBlack: #111; +$lighterBlack: #222; +$grey: #333; +$linkHover: #07C; +$linkVisited: #0000CC; +$buttonHoverColour: #888; +$primary: #275D57; +$alt: #DF7E77; +$focus: #33C3F0; +$tag: #DDD; +$success: #D1E7DD; +$fail: #F8D7DA; +$background: #FAECE1; + diff --git a/scss/core/_core.scss b/scss/core/_core.scss new file mode 100644 index 0000000..223fa17 --- /dev/null +++ b/scss/core/_core.scss @@ -0,0 +1,19 @@ +/* Core */ +*{ + box-sizing: border-box; +} +html,body{height:100%} +html{font-size:10px} +body{ +font:1.6rem/1.62 sans-serif;color:$content; +display:-webkit-flex;display:-ms-flexbox;display:flex; +flex-direction:column} +main{ + flex:1 0 auto; + margin-top:5.31rem; +} + +img{ + display:block; +} + diff --git a/scss/core/_forms.scss b/scss/core/_forms.scss new file mode 100644 index 0000000..6302c5b --- /dev/null +++ b/scss/core/_forms.scss @@ -0,0 +1,55 @@ +/* Form stuff */ +.form{ + padding:2rem; + background:$offWhite; + border: 1px solid $lightWhite; + border-radius:1rem; + margin:2rem 0; +} +input[type="email"],input[type="number"], +input[type="search"],input[type="text"], +input[type="tel"],input[type="url"], +input[type="password"], +textarea,select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: $white; + border: 1px solid $tableBorder; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; } +/* Removes awkward default styles on some inputs for iOS */ +input[type="email"],input[type="number"], +input[type="search"],input[type="text"], +input[type="tel"],input[type="url"], +input[type="password"], +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } +textarea { + min-height: 65px; + resize: vertical; + padding-top: 6px; + padding-bottom: 6px; } +input[type="email"]:focus,input[type="number"]:focus, +input[type="search"]:focus,input[type="text"]:focus, +input[type="tel"]:focus,input[type="url"]:focus, +input[type="password"]:focus, +textarea:focus,select:focus { + border: 1px solid $focus; + outline: 0; } +label,legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; } +fieldset { + padding: 0; + border-width: 0; } +input[type="checkbox"],input[type="radio"] { + display: inline; } +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + diff --git a/scss/core/_grid.scss b/scss/core/_grid.scss new file mode 100644 index 0000000..25740dc --- /dev/null +++ b/scss/core/_grid.scss @@ -0,0 +1,66 @@ +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 1.24rem; + box-sizing: border-box; + overflow:auto; } + +.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve { + width: 100%; + float: left; + box-sizing: border-box; + padding: .44rem; + margin: .6rem 0; +} +.grid-visible{ + background: #EEE; + text-align: center; + border-radius: .44rem; +} + +/* For devices larger than 360px */ +@media (min-width: 360px) { + .container { +// width: 85%; +// padding: 0; + } +} + +/* For devices larger than 550px */ +@media (min-width: 550px) { + .container { width: 80%; } + .one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve{margin-left: 4%; } + .one:first-child, + .two:first-child,.three:first-child,.four:first-child, + .five:first-child,.six:first-child,.seven:first-child, + .eight:first-child,.nine:first-child,.ten:first-child, + .eleven:first-child,.twelve:first-child{margin-left: 0; } + + .one { width: 4.66666666667%; } + .two { width: 13.3333333333%; } + .three { width: 22%; } + .four { width: 30.6666666667%; } + .five { width: 39.3333333333%; } + .six { width: 48%; } + .seven { width: 56.6666666667%; } + .eight { width: 65.3333333333%; } + .nine { width: 74.0%; } + .ten { width: 82.6666666667%; } + .eleven { width: 91.3333333333%; } + .twelve { width: 100%; margin-left: 0; } + + /* Offsets */ + .offset-one { margin-left: 8.66666666667%; } + .offset-two { margin-left: 17.3333333333%; } + .offset-three { margin-left: 30%; } + .offset-four { margin-left: 34.6666666667%; } + .offset-five { margin-left: 43.3333333333%; } + .offset-six { margin-left: 52%; } + .offset-seven { margin-left: 60.6666666667%; } + .offset-eight { margin-left: 69.3333333333%; } + .offset-nine { margin-left: 78.0%; } + .offset-ten { margin-left: 86.6666666667%; } + .offset-eleven,.offset-eleven:first-child { margin-left: 95.3333333333%; } +} diff --git a/scss/core/_header.scss b/scss/core/_header.scss new file mode 100644 index 0000000..c023cbd --- /dev/null +++ b/scss/core/_header.scss @@ -0,0 +1,26 @@ +/* Header */ +.header{ +position:absolute; +width:100%; +background: $white; +border-bottom:1px solid $lighterWhite; +z-index:9; +} +.header-container{ +margin:0 auto; +position:relative; +padding:1.305rem; +/*max-height:52px;*/ +max-width:960px; +display:flex; +justify-content:space-between; +align-items:center; +} +.header--scroll{ +position:fixed; +} +.header-container--scroll{ +padding:.24rem 1.24rem; +} +.logo{font-weight:bold} + diff --git a/scss/core/_main.scss b/scss/core/_main.scss new file mode 100644 index 0000000..4081f40 --- /dev/null +++ b/scss/core/_main.scss @@ -0,0 +1,12 @@ +@import 'reset'; + +@import 'colours'; + +@import 'core'; +@import 'typography'; + +@import 'forms'; +@import 'grid'; +@import 'header'; +@import 'nav'; + diff --git a/scss/core/_nav.scss b/scss/core/_nav.scss new file mode 100644 index 0000000..49002ba --- /dev/null +++ b/scss/core/_nav.scss @@ -0,0 +1,41 @@ +.desktop-nav{display:none} + .mobile-nav{height:100%; + width:100%; + position:fixed; + top:51px;left:0;right:0; + padding:1.24rem; + background:#FFF;border-left:1px solid #EEE; + z-index:8;} +nav>a{ +padding:.2rem 0; +display:block; +border-top:1px dotted #101} +nav>a:first-child{border:none} +.mobile-nav--hidden{ + display:none; +} + +.burger-container{ +position:relative;height:20px;width:28px; +cursor:pointer;z-index:9} +.burger,.burger::after,.burger::before{ +position:absolute; +height:4px;width:28px;content:""; +transition:transform 300ms cubic-bezier(.4,1,.5,1); +background:$black;} +.burger::before{margin-top:8px} +.burger::after{margin-top:16px} +.burger-open{overflow:hidden;} + +@media(min-width:720px){ + .desktop-nav{display:inline-block} + nav>a{margin-left:2rem;padding:auto;display:inline;border:none} + nav>a:first-child{padding:1rem 0;margin-left:0} + .burger-container{display:none} + .burger-open{overflow:auto;} + .mobile-nav{display:none} +} +@media(max-width:320px){ + .burger-container{display:block} +} + diff --git a/scss/core/_reset.scss b/scss/core/_reset.scss new file mode 100644 index 0000000..e29c0f5 --- /dev/null +++ b/scss/core/_reset.scss @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/scss/core/_typography.scss b/scss/core/_typography.scss new file mode 100644 index 0000000..d33e198 --- /dev/null +++ b/scss/core/_typography.scss @@ -0,0 +1,13 @@ +/* Typography */ +h1,h2,h3,h4,h5,h6{line-height:1.2;margin:1rem 0} +h1{color:$lightBlack;font-size:3rem;font-weight:bold;margin:.8rem 0} +h1:first-of-type{margin-top:0;line-height:1;} +h2{color:$lighterBlack;font-size:2.2rem;font-weight:bold; margin:.6rem 0} +h3{color:$grey;font-size:1.8rem; margin:.4rem 0} +h4,h5,h6{color:$content;font-size:1.5rem; margin:.2rem 0} + +/* Links */ +a{text-decoration:none} +a:link,a:visited{color:$linkVisited} +a:hover,a:visited:hover{color:$linkHover} + diff --git a/scss/main.scss b/scss/main.scss new file mode 100644 index 0000000..d9e36f3 --- /dev/null +++ b/scss/main.scss @@ -0,0 +1,6 @@ +@import 'core/main'; +@import 'components/main'; +@import 'utilities/main'; +@import 'site/main'; +@import 'pages/main'; + diff --git a/scss/pages/_main.scss b/scss/pages/_main.scss new file mode 100644 index 0000000..139597f --- /dev/null +++ b/scss/pages/_main.scss @@ -0,0 +1,2 @@ + + diff --git a/scss/site/_main.scss b/scss/site/_main.scss new file mode 100644 index 0000000..e5d3e0a --- /dev/null +++ b/scss/site/_main.scss @@ -0,0 +1,2 @@ +@import 'site'; + diff --git a/scss/site/_site.scss b/scss/site/_site.scss new file mode 100644 index 0000000..20d792d --- /dev/null +++ b/scss/site/_site.scss @@ -0,0 +1,368 @@ +/* Site specific */ +$headerHeight: 84px; + +strong{ + font-weight:bold; +} + +.section{ +padding:1.75rem 1.24rem; +margin:1.75rem auto; +background: $white; +} +.section--no-bg{ +padding:0; /*1.24rem*/ +background: none; +} +nav a{ + color: $black; + &:hover, &:visited:hover{ + color:$primary; + border-bottom:1px solid $primary; + } + &:visited{ + color: $black; + } +} +main{ +margin-top:$headerHeight; +background:$background; +} +.hero--image{ + background-size:cover; + background-position-x:center; + background-position-y:top; +} +a.button--hero{ + border-color:$white; + background:$offWhite; + color:$primary; + font-size:1.5rem; + margin-top:1.2rem; + &:hover{ + background:$white; + color:$black; + } +} +.section h2{ + border-bottom:1px solid $lightWhite; + padding-bottom:1.4rem; + margin-bottom:1.4rem; +} +.hero-m .hero-content{ + top:auto; + transform:translate(-50%, 0); + bottom: 50px; + h1{ + font-size:3.8rem; + } + h2{ + font-size:2.6rem; + } +} + +details{ + margin-bottom: 1rem; +} +details summary, +details .detail__body{ + background: $white; +} + +.header{ + height: $headerHeight; + /* + background:#39897B; + */ +} +.header--scroll{ + height:auto; +} +.mobile-nav{ + top:$headerHeight; +} +main{ + /* + background:#C8BDB4; + */ +} +nav > a{ + padding:.7rem; +} +.fundraiser-container{ + display:grid; + grid-template-columns: repeat(1,minmax(0,1fr)); + @media(min-width:360px){ + grid-template-columns: repeat(2,minmax(0,1fr)); + } + @media(min-width: 768px){ + grid-template-columns: repeat(4,minmax(0,1fr)); + } +} +.fundraiser{ + /* + float:left; + width:25%; + */ + + border-bottom:1px solid $lighterWhite; + text-align:center; + padding-bottom:1rem; + + display:flex; + flex-direction: column; + + img{ + align-items:center; + width:100%; + height:auto; + /* + flex: 1 0 auto; + */ + } + + p{ + padding-top:.6rem; + margin-bottom:auto; + } + + &:nth-child(odd){ + border-bottom:1px solid $lightWhite; + } + &:hover{ + border-bottom:1px solid $primary; + } +} + +p + p { + margin-top:1rem; +} +p + .button { + margin-top:2rem; +} +.footer{ + border-top:1px solid $lightBlack; + background: lighten($primary,10); + padding:1.6rem 0; + padding-bottom: 2.4rem; +} +.footer *{ + color: $white; +} +.footer__sub{ + margin-top:2rem; +} +.footer__title,{ + font-weight:bold; + font-size:1.85rem; + margin-bottom:1rem; + margin-top:.8rem; +} +.footer__logo__container{ + display:flex; + gap: 1.6rem; + align-items: center; + margin-bottom:1rem; + .footer__title{ + margin:0; + } +} +.footer__logo{ + border-radius: 9999px; +} +a.footer__link{ + color: $white; + &:hover{ + color: $black; + } +} +.subfooter{ + border-top:1px solid $lighterBlack; + background: $primary; + padding:.8rem 0; +} +.subfooter *{ + color: $white; +} +.subfooter a{ + color: $white; + text-decoration:underline; + &:hover{ + color:$lighterWhite; + } +} +.footer__container{ + display:flex; + flex-wrap: wrap; + gap:3rem; +} +a.footer__icon{ + width:32px; + height:32px; + display:inline-block; +} +.siteby{ + text-align:right; +} + +.section summary h2{ + font-size:1.6rem; + border:none; + margin: 0; + padding: 0; + display: inline; + vertical-align: middle; +} + +.card__content{ + background:$white; + padding:1rem; +} +.team-grid{ + display:grid; + grid-template-columns: repeat(1,minmax(0,1fr)); + @media(min-width:700px){ + grid-template-columns: repeat(2,minmax(0,1fr)); + } + @media(min-width:1000px){ + grid-template-columns: repeat(3,minmax(0,1fr)); + } + + & .card{ + width:100%; + height:auto; + background: $white; + position:relative; + } +} + +.card__image{ + width:100%; + height:auto; +} +.flip-card{ + margin:0; + position:relative; + height:286px; + width:100%; + &:hover{ + .flip-card__front{ + display: block; // Overwrite of _cards + @media(min-width:320px){ + .card__content{ + display:none; + } + } + } + .flip-card__back{ + display: block; + } + } +} +.flip-card__front{ + position:relative; +} +.flip-card__front .card__content{ + @media(min-width:320px){ + position:absolute; + bottom:0; + max-width:85%; + } + background: $primary; + background: rgba($primary, .8); + *{color:$white;} + + h2{ + border:0; + padding:0; + } + h3{ + font-size:1.6rem; + } +} +.flip-card__back{ + display:block; + @media(min-width:320px){ + display:none; + .card__content{ + position:relative; + & p{ + position:relative; + } + } + } +} +.flip-card__back .card__content{ + @media(min-width:320px){ + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + background: $primary; + background: rgba($primary, .8); + + & p{ + padding:1rem; + position:absolute; + top:50%;left:50%; + transform:translate(-50%, -50%); + width:100%; + color:$white; + } + } + +} + +.donate-container{ + display:grid; + gap:1rem; + grid-template-columns: repeat(1,minmax(0,1fr)); + @media(min-width:720px){ + grid-template-columns: repeat(2,minmax(0,1fr)); + } + + section{ + padding:1rem; + h3{ + border-bottom:1px solid $lightWhite; + padding-bottom:1rem; + margin-bottom:1rem; + } + a.button{ + display:block; + } + } +} +.contact-container{ + display:grid; + gap:1rem; + margin:0 auto; + margin-top:1rem; + gap:1rem; + grid-template-columns: repeat(1,minmax(0,1fr)); + @media(min-width:720px){ + grid-template-columns: repeat(2,minmax(0,1fr)); + } + @media(min-width:960px){ + grid-template-columns: repeat(3,minmax(0,1fr)); + } + a, a:visited{ + display:block; + background:lighten($primary,10); + padding:1rem; + text-align:center; + color:$white; + &:hover{ + background:lighten($primary,15); + } + + &:nth-child(odd){ + background:$primary; + &:hover{ + background:lighten($primary,15); + } + } + } +} + diff --git a/scss/utilities/_main.scss b/scss/utilities/_main.scss new file mode 100644 index 0000000..1ace615 --- /dev/null +++ b/scss/utilities/_main.scss @@ -0,0 +1,2 @@ +@import 'utilities'; + diff --git a/scss/utilities/_utilities.scss b/scss/utilities/_utilities.scss new file mode 100644 index 0000000..e0dff70 --- /dev/null +++ b/scss/utilities/_utilities.scss @@ -0,0 +1,34 @@ +/* Utilities */ +.hidden{display:none;} +.tac{text-align:center;} + +.vh{ +position:absolute; +clip:rect(1px,1px,1px,1px); +height:1px;width:1px; +padding:2px 8px;overflow:hidden; +white-space:nowrap; +background:$white;z-index:10} +.vh:focus{ +clip:auto;overflow:auto; +height:auto;width:auto} + +.u-full-width { + width: 100%; + box-sizing: border-box; } +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; } +.u-pull-right { + float: right; } +.u-pull-left { + float: left; } + +/* Self Clearing Goodness */ +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } + diff --git a/support.html b/support.html new file mode 100644 index 0000000..51084a9 --- /dev/null +++ b/support.html @@ -0,0 +1,136 @@ + + + + + + + + + + + Foodbank | Feed The Community + + + + Jump directly to main content + + +
+
+
+

Support Us

+
+
+ +
+

Volunteer

+

We are always on the lookout for new volunteers. As our organisation is growing larger we NEED people who have a can do, positive attitude. If you can spare a few hours a week please get in touch with us using one of the contact options below.

+
+ +

Phone:
07727260285

+
+ +

Email:
feedthecommunity@outlook.com

+
+ +

Facebook:
/feedthecommunitygy

+
+
+
+ +
+

Donate

+
+ +
+

Fundraising

+ +
+ +
+ + + + + + + + + diff --git a/team.html b/team.html new file mode 100644 index 0000000..90f7b11 --- /dev/null +++ b/team.html @@ -0,0 +1,147 @@ + + + + + + + + + + + Foodbank | Feed The Community + + + + Jump directly to main content + + +
+
+
+

The Team

+
+
+ +
+
+ +
+
+ +
+

Lacey Langridge

+

Founder & CEO

+
+
+
+
+

Lacey is a mum of 3 and wanted to make a difference during the covid 19 crisis. She is the founder and CEO of FTC. She is also a Law Student and still plays an active role in leading this charity in the right direction.

+
+
+
+ +
+ +
+
+

Lindsey Dickinson

+

Chair Woman

+
+
+
+
+

Lindsey is a mum to 2 children, and a nurse at Scunthorpe Hospital. She enjoys family time and socialising with others. She became the chair woman of the charity as she is passionate about making a difference to the local community.

+
+
+
+ +
+ +
+
+

Susan Williams

+

Food Bank Co-ordinator / Treasurer / Secretary

+
+
+
+
+

Susan is a very committed member of our team and will be the person that you most see on a regular basis. She is a book of knowledge and will be able to answer most enquiries.

+
+
+
+ +
+ +
+
+

Debbie Burley

+

Trustee

+
+
+
+
+

Debbie is a wife and doting mum of 3. She also works full time as a manager. Debbie helps on the trustee board offering ideas and inspiration to the team.

+
+
+
+ +
+
+ +
+ + + + + + + + + +