Skip to content

Commit

Permalink
Add platforms' pages and themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@derekjohnson
derekjohnson committed Jun 15, 2022
1 parent 32daec0 commit 8686000
Show file tree
Hide file tree
Showing 17 changed files with 360 additions and 16 deletions.
2 changes: 1 addition & 1 deletion _includes/layout.njk
View file
Expand Up @@ -36,7 +36,7 @@
</header>

<main>
<h1 class="hero {{ heroModifier }}"><span class="layout">{{ pageTitle }}</span></h1>
<h1 class="hero {% if themeModifier %}hero--{{ themeModifier }}{% endif %}"><span class="layout">{{ pageTitle }}</span></h1>

<div class="layout">

Expand Down
69 changes: 69 additions & 0 deletions _site/content/index.html
View file

Large diffs are not rendered by default.

70 changes: 70 additions & 0 deletions _site/fundraising/index.html
View file

Large diffs are not rendered by default.

19 changes: 17 additions & 2 deletions _site/index.html
View file
Expand Up @@ -8,7 +8,7 @@

<!-- feed it through our cssmin filter to minify -->
<style>
@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium);color:#fff}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px;padding:20px}.card-title{font-size:var(--step-3)}.card-summary{margin:0}
@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--purple-base:306.2 54.9%;--purple-medium:hsl(var(--purple-base) 27.8%);--orange-base:27.9 100%;--orange-medium:hsl(var(--orange-base) 37.5%);--pink-base:327.1 100%;--pink-medium:hsl(var(--pink-base) 40%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium)}.hero--content{background:var(--orange-medium)}.hero--services{background:var(--purple-medium)}.hero--fundraising{background:var(--pink-medium)}[class*=hero--]{color:#fff}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px}.card-title{font-size:var(--step-3);padding:20px}.card-title--standards{background:var(--blue-medium)}.card-title--services{background:var(--purple-medium)}.card-title--content{background:var(--orange-medium)}.card-title--fundraising{background:var(--pink-medium)}.card-title a{color:#fff}.card-summary{margin:0;padding:0 20px 20px}
</style>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Expand Down Expand Up @@ -86,7 +86,22 @@ <h2>Our platforms</h2>


<div class="card">
<h3 class="card-title"><a href="/standards/">Standards</a></h3>
<h3 class="card-title card-title--services"><a href="/services/">Services</a></h3>
<p class="card-summary">How we are helping services reach more people.</p>
</div>

<div class="card">
<h3 class="card-title card-title--fundraising"><a href="/fundraising/">Fundraising</a></h3>
<p class="card-summary">How we raise more money to help more people.</p>
</div>

<div class="card">
<h3 class="card-title card-title--content"><a href="/content/">Content</a></h3>
<p class="card-summary">How we use content to help, inform, and fundraise.</p>
</div>

<div class="card">
<h3 class="card-title card-title--standards"><a href="/standards/">Standards</a></h3>
<p class="card-summary">How we build for success.</p>
</div>

Expand Down
71 changes: 71 additions & 0 deletions _site/services/index.html
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions _site/standards/index.html
View file
Expand Up @@ -8,7 +8,7 @@

<!-- feed it through our cssmin filter to minify -->
<style>
@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium);color:#fff}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px;padding:20px}.card-title{font-size:var(--step-3)}.card-summary{margin:0}
@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-light-webfont.woff2") format("woff2"),url("/fonts/proximanova-light-webfont.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-display:swap;font-family:proxima-nova;src:url("/fonts/proximanova-bold-webfont.woff2") format("woff2"),url("/fonts/proximanova-bold-webfont.woff") format("woff");font-weight:700;font-style:normal}:root{--grey-base:0 0%;--grey-dark:hsl(var(--grey-base) 11%);--grey-medium:hsl(var(--grey-base) 82%);--grey-medium-light:hsl(var(--grey-base) 91%);--grey-light:hsl(var(--grey-base) 96%);--yellow-base:39.1 100%;--yellow-medium:hsl(var(--yellow-base) 64%);--blue-base:185.7 100%;--blue-medium:hsl(var(--blue-base) 28%);--focus-outline:hsl(27.9, 100%, 45.5%);--purple-base:306.2 54.9%;--purple-medium:hsl(var(--purple-base) 27.8%);--orange-base:27.9 100%;--orange-medium:hsl(var(--orange-base) 37.5%);--pink-base:327.1 100%;--pink-medium:hsl(var(--pink-base) 40%);--step--2:clamp(0.79rem, calc(0.79rem + 0.01vw), 0.80rem);--step--1:clamp(0.89rem, calc(0.89rem + 0.13vw), 1.00rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.29vw), 1.25rem);--step-1:clamp(1.13rem, calc(1.13rem + 0.50vw), 1.56rem);--step-2:clamp(1.27rem, calc(1.27rem + 0.79vw), 1.95rem);--step-3:clamp(1.42rem, calc(1.42rem + 1.16vw), 2.44rem);--step-4:clamp(1.60rem, calc(1.60rem + 1.66vw), 3.05rem);--step-5:clamp(1.80rem, calc(1.80rem + 2.30vw), 3.82rem)}html{block-size:100%}body{block-size:100%;color:var(--grey-dark);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;font-size:var(--step-0);line-height:1.5;margin:0}header{box-shadow:inset 0 -1px 0 0 #e8e8e8;padding:26px 0}a:hover{text-decoration:none}img,svg{max-inline-size:100%}main>*{margin-block-end:2rem}h1,h2,h3{font-family:proxima-nova,Helvetica,Arial,sans-serif;line-height:1.2;margin:0 0 2rem}h1{font-size:var(--step-5)}h2{font-size:var(--step-4)}h3{font-size:var(--step-3);margin-block-end:1rem}ol,ul{list-style:none;padding:0}li,p{margin:0 0 2rem;max-inline-size:65ch}aside{background-color:var(--grey-light);margin-block-end:2rem;max-inline-size:65ch;padding:16px}summary{inline-size:max-content}footer{background-color:var(--grey-light);border-block-start:4px solid var(--grey-medium-light);margin-block-start:auto;padding:32px 16px}small{font-size:var(--step--1)}:focus{outline:3px solid var(--focus-outline)}:focus:not(:focus-visible){outline:0}:focus-visible{outline:3px solid var(--focus-outline)}.layout{display:block;margin-inline:auto;max-inline-size:87.5rem;inline-size:95vw}.logo{block-size:3.875rem;display:block;inline-size:8.4375rem;max-inline-size:100%}.logo-img{block-size:100%;inline-size:100%}.hero{background:var(--yellow-medium);padding:3rem 0}.hero--standards{background:var(--blue-medium)}.hero--content{background:var(--orange-medium)}.hero--services{background:var(--purple-medium)}.hero--fundraising{background:var(--pink-medium)}[class*=hero--]{color:#fff}.cards-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fill,minmax(30ch,1fr))}.card{border:1px solid var(--grey-medium);border-radius:4px}.card-title{font-size:var(--step-3);padding:20px}.card-title--standards{background:var(--blue-medium)}.card-title--services{background:var(--purple-medium)}.card-title--content{background:var(--orange-medium)}.card-title--fundraising{background:var(--pink-medium)}.card-title a{color:#fff}.card-summary{margin:0;padding:0 20px 20px}
</style>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
Expand Down Expand Up @@ -49,7 +49,7 @@ <h1 class="hero hero--standards"><span class="layout">Our standards platform</sp


<div class="card">
<h2 class="card-title"><a href="/standards/web-accessibility/">Web accessibility</a></h2>
<h2 class="card-title card-title--standards"><a href="/standards/web-accessibility/">Web accessibility</a></h2>
<p class="card-summary">How we make sure people with disabilities can use our online products.</p>
</div>

Expand Down

0 comments on commit 8686000

Please sign in to comment.