Welcome to the dwyl website!

It's as ever a work in progress, so please don't hesitate to share your ideas on how to make it better!

The current site was designed by @harrygfox and built by @Cleop, @ZooeyMiller & @finnhodgkin.

You can see the original Invision slides here ✨

How?

Technology

Hosted on GitHub Pages with Cloudflare for SSL

Functional CSS with Tachyons ❤️

Hop over to learn-tachyons to find out how we use functional css to power our website.

Javascript

We've kept JS to a minimum on the site, using it only when required to enhance UX, and taking every care to ensure that it gracefully degrades for users with JavaScript disabled.

Viewing locally

With Live Reload

To view the site locally, execute the following two commands:

git clone git@github.com:dwyl/dwyl-site.git & cd dwyl-site
python3 -m http.server

Then open your web browser to: http://localhost:8000

Accessibility

The site meets WCAG 2.0 Level A for accessibility. Please raise an issue if you notice any accessibility problems!

Cloudflare setup

We're using the Cloudflare free tier to serve dwyl.com over https.

To add your own account head over to cloudflare.com and sign up for an account. Add your custom domain and wait while Cloudflare scans your domain setup. Once that's done you'll need to add the Cloudflare nameservers to your own DNS.

Changes involving nameservers can sometime take time, so if something isn't working straight away just be patient and come back to it later.

Adding SSL

GitHub page don't provide https access to custom domains, so we use Cloudflare to reroute requests through their secure server. Hop over to the Crypto tab of the Cloudflare control panel and change SSL to flexible:

To force the site to always redirect http requests to https add a page rule:

Adding subdomains

dwyl.com has three subdomains all set up in a slightly different way.

Google form redirect - one subdomain on dwyl.com just redirects to a Google form. First add a general CNAME record:

Then add a page rule to redirect to the specific URL:

A name subdomain - hits.dwyl.com is added via a standard A name record:

GitHub pages subdomain - tachyons-bootstrap.dwyl.com is hosted via GitHub pages. There's a slightly more complicated setup process for subdomains hosted in this way which is explained well in this guide.

How do I add myself to the team page?

You'll need to copy and past this block of code, replace your details where noted, and paste it at the bottom of the team section (just before the closing <section> tag, with a comment ) in team.html.

<div class="dib w-25-l w-30-ml w-90 pt5 v-top">
  <input type="checkbox" id="YOUR-NAME" class="dn">
  <label for="YOUR-NAME" class="pointer">
    <img src="./img/common/team/YOUR-GITHUB-HANDLE.png" alt="YOUR-NAME" class="br-100 w5 w4-plus-l">
    <p class="b dwyl-dark-grey f4 mb2">YOUR-NAME</p>
    <p class="mt1">YOUR-JOB-ROLE</p>
  </label>
  <div class="dn description">
    <a href="https://github.com/YOUR-GITHUB-HANDLE" class="mr3 link dwyl-bg-yellow br-100 center w2 h2 dib">
      <span class="f0">YOUR-NAME's GitHub</span>
      <i class="fa fa-github dwyl-dark-gray f3 v-mid pt1 center pr1" aria-hidden="true"></i>
    </a>
    <div class="mh1 dib"> </div>
    <a href="https://twitter.com/YOUR-TWITTER-HANDLE" class="ml3 link dwyl-bg-yellow br-100 center w2 h2 dib">
      <span class="f0">YOUR-NAME's Twitter</span>
      <i class="fa fa-twitter dwyl-dark-gray f3 v-mid pt1 center pr1" aria-hidden="true"></i>
    </a>
    <p class="ph4 lh-copy tl">
      YOUR-SELF-DESCRIPTION-(50-100 words)
    </p>
  </div>
</div>