Skip to content
GitLab

Newsletter pages

Merged Byte Blaze requested to merge newsletter-pages into main
Compare
and
11 files
+ 195
- 7
s‎rc‎
_inclu‎des/nav‎
copyright-ba‎ck-to-top.njk‎ +8 -3
foote‎r.njk‎ +2 -2
c‎ss‎
compo‎nents‎
_c-40‎4.scss‎ +5 -0
_c-foot‎er.scss‎ +5 -0
lay‎out‎
_l-li‎p.scss‎ +2 -1
ven‎dor‎
_v-newsle‎tter.scss‎ +86 -0
scree‎n.scss‎ +1 -0
newslet‎ter.njk‎ +45 -0
subscri‎bed.njk‎ +20 -0
unsubscr‎ibed.njk‎ +20 -0
packag‎e.json‎ +1 -1
src/_includes/nav/copyright-back-to-top.njk
+ 8
- 3
<p class="l-footer__copyright c-footer__copyright">
&copy; 2013–2020 The Accessibility Project. <a class="c-footer__copyright-link" href="https://www.apache.org/licenses/LICENSE-2.0"><abbr>APLv2</abbr></a>. Powered by <a class="c-footer__copyright-link" href="https://www.11ty.io/">Eleventy</a>, <a class="c-footer__copyright-link" href="https://www.netlify.com/">Netlify</a>, and <a class="c-footer__copyright-link" href="https://github.com/a11yproject/a11yproject.com">GitHub</a>.
</p>
<div class="l-footer__copyright">
<p class="c-footer__copyright">
&copy; 2013–2020 The Accessibility Project. <a class="c-footer__copyright-link" href="https://www.apache.org/licenses/LICENSE-2.0"><abbr>APLv2</abbr></a>. <a class="c-footer__copyright-link" href="{{ '/sitemap.xml' | url }}">Sitemap</a>.
</p>
<p class="c-footer__copyright">
Powered by <a class="c-footer__copyright-link" href="https://www.11ty.io/">Eleventy</a>, <a class="c-footer__copyright-link" href="https://www.netlify.com/">Netlify</a>, and <a class="c-footer__copyright-link" href="https://github.com/a11yproject/a11yproject.com">GitHub</a>.
</p>
</div>
<p class="l-footer__top c-footer__top">
<a class="c-footer__copyright-link" href="#header">Back to top</a>
</p>
src/_includes/nav/copyright-back-to-top.njk
+ 8
- 3
<p class="l-footer__copyright c-footer__copyright">
&copy; 2013–2020 The Accessibility Project. <a class="c-footer__copyright-link" href="https://www.apache.org/licenses/LICENSE-2.0"><abbr>APLv2</abbr></a>. Powered by <a class="c-footer__copyright-link" href="https://www.11ty.io/">Eleventy</a>, <a class="c-footer__copyright-link" href="https://www.netlify.com/">Netlify</a>, and <a class="c-footer__copyright-link" href="https://github.com/a11yproject/a11yproject.com">GitHub</a>.
</p>
<div class="l-footer__copyright">
<p class="c-footer__copyright">
&copy; 2013–2020 The Accessibility Project. <a class="c-footer__copyright-link" href="https://www.apache.org/licenses/LICENSE-2.0"><abbr>APLv2</abbr></a>. <a class="c-footer__copyright-link" href="{{ '/sitemap.xml' | url }}">Sitemap</a>.
</p>
<p class="c-footer__copyright">
Powered by <a class="c-footer__copyright-link" href="https://www.11ty.io/">Eleventy</a>, <a class="c-footer__copyright-link" href="https://www.netlify.com/">Netlify</a>, and <a class="c-footer__copyright-link" href="https://github.com/a11yproject/a11yproject.com">GitHub</a>.
</p>
</div>
<p class="l-footer__top c-footer__top">
<a class="c-footer__copyright-link" href="#header">Back to top</a>
</p>
src/_includes/nav/footer.njk
+ 2
- 2
@@ -72,10 +72,10 @@
<a class="c-footer__link" href="https://www.linkedin.com/company/the-a11y-project/">LinkedIn</a>
</li>
<li>
<a class="c-footer__link" href="{{ '/feed/feed.xml' | url }}"><abbr>RSS</abbr></a>
<a class="c-footer__link" href="{{ '/newsletter/' | url }}">Newsletter</a>
</li>
<li>
<a class="c-footer__link" href="{{ '/sitemap.xml' | url }}">Sitemap</a>
<a class="c-footer__link" href="{{ '/feed/feed.xml' | url }}"><abbr>RSS</abbr></a>
</li>
</ul>
</div>
src/css/components/_c-404.scss
+ 5
- 0
.c-newsletter,
.c-404 {
background-color: $color-yellow;
}
.c-404 {
background-image: url("#{$path-to-img}/heroes/404.svg");
background-position: center;
background-repeat: no-repeat;
src/css/components/_c-footer.scss
+ 5
- 0
@@ -90,4 +90,9 @@
.c-footer__copyright-link {
@include link-states($color-black);
// States
&:hover {
text-decoration: none;
}
}
src/css/layout/_l-lip.scss
+ 2
- 1
@@ -12,7 +12,8 @@
// Contexts
.template-home &,
.template-post &,
.template-404 & {
.template-404 &,
.template-newsletter & {
display: none;
}
}
src/css/vendor/_v-newsletter.scss 0 → 100644
+ 86
- 0
// https://buttondown.email/
.v-newsletter {
margin-top: 1rem;
}
.v-newsletter__label {
display: inline-block;
font-weight: $font-weight-bold;
margin-top: 1rem;
padding-bottom: 0.5rem;
}
.v-newsletter__input {
background-color: $color-sand;
border: $border-thinner solid $color-gray-shade;
padding: 0.5rem;
transition: background-color $animation-duration-shorter $animation-easing-character;
width: 100%;
&:hover,
&:active {
background-color: $color-white;
}
&:focus {
border-color: $color-black;
outline: $border-thinner solid $color-black;
}
&:active {
transition: none;
}
// User Queries
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
}
.v-newsletter__button {
background-color: $color-pink-shade;
border: none;
border-radius: 0.25rem;
color: $color-white;
cursor: pointer;
font-family: $font-family-secondary;
margin-top: 1.25rem;
padding: 0.75rem 1.25rem;
text-transform: uppercase;
transition: background-color $animation-duration-shorter $animation-easing-character;
// States
&:hover {
background-color: $color-black;
}
&:focus {
box-shadow:
0 0 0 em(2) $color-sand,
0 0 0 em(4) $color-pink-shade;
outline: $border-thin solid transparent;
}
&:active {
@include shift-click();
}
// User Queries
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
}
.v-newsletter__vendor {
color: $color-black;
font-size: $font-size-body-small;
&:hover,
&:focus {
text-decoration: none;
}
}
src/css/screen.scss
+ 1
- 0
@@ -218,6 +218,7 @@
// Styleguide Vendor
@import
"vendor/v-prism-a11y-dark",
"vendor/v-newsletter",
"vendor/v-toc";
src/newsletter.njk 0 → 100755
+ 45
- 0
---
layout: layouts/home.njk
title: Newsletter
subtitle: A weekly collection of accessibility-related links we share on Twitter.
tags:
- newsletter
templateClass: template-newsletter
eleventyExcludeFromCollections: true
---
<div class="l-404 c-newsletter">
<div class="c-404__hero">
<h1 id="page-not-found" class="c-heading-large">
{{ title }}
</h1>
<p>
{{ subtitle }}
</p>
<form
action="https://buttondown.email/api/emails/embed-subscribe/the-a11y-project"
method="post"
target="_self"
onsubmit="window.open('https://buttondown.email/the-a11y-project', 'popupwindow')"
class="v-newsletter embeddable-buttondown-form">
<label class="v-newsletter__label" for="bd-email">
Your email address
</label>
<input
id="bd-email"
autocapitalize="off"
autocorrect="off"
spellcheck="false"
class="v-newsletter__input"
type="email"
name="email">
<input type="hidden" value="1" name="embed"></input>
<input class="v-newsletter__button" type="submit" value="Subscribe (Opens in a new tab)"></input>
<p>
<a class="v-newsletter__vendor" href="https://buttondown.email" target="_blank">Powered by Buttondown.</a>
</p>
</form>
</div>
</div>
src/subscribed.njk 0 → 100755
+ 20
- 0
---
layout: layouts/home.njk
title: Thank you for subscribing
subtitle: You'll recieve a weekly newsletter from us at the email address you provided.
tags:
- newsletter
templateClass: template-newsletter
eleventyExcludeFromCollections: true
---
<div class="l-404 c-newsletter">
<div class="c-404__hero">
<h1 id="page-not-found" class="c-heading-large">
{{ title }}
</h1>
<p>
{{ subtitle }}
</p>
</div>
</div>
src/unsubscribed.njk 0 → 100755
+ 20
- 0
---
layout: layouts/home.njk
title: You have been unsubscribed
subtitle: Thank you for reading.
tags:
- newsletter
templateClass: template-newsletter
eleventyExcludeFromCollections: true
---
<div class="l-404 c-newsletter">
<div class="c-404__hero">
<h1 id="page-not-found" class="c-heading-large">
{{ title }}
</h1>
<p>
{{ subtitle }} You can <a href="{{ '/newsletter/' | url }}">resubscribe</a> at any time.
</p>
</div>
</div>
package.json
+ 1
- 1
@@ -2,7 +2,7 @@
"name": "the-a11y-project",
"description": "A community-driven effort to make digital accessibility easier.",
"homepage": "https://a11yproject.com/",
"version": "1.1.5",
"version": "1.1.6",
"license": "Apache-2.0",
"author": "Dave Rupert <hello@a11yproject.com> (https://daverupert.com/)",
"contributors": [