22 | 
23 |
24 | {% endif %}
25 | {% if include.body %}
26 |
27 | {% if include.label and site.data.icons and site.data.icons[include.label] %}
28 | {{ site.data.icons[include.label] }}
29 | {% endif %}
30 |
38 | {% endif %}
39 |
40 |
--------------------------------------------------------------------------------
/_includes/beatrice/02-molecules/09-slider-group/_slider-group.scss:
--------------------------------------------------------------------------------
1 |
2 | .md-slider-group {
3 | &__slider-unit {
4 | align-items: center;
5 | display: grid;
6 | grid-template-columns: max-content 1fr max-content;
7 | }
8 | [class*="value-"] {
9 | font-family: $sans-serif-novf;
10 | @supports (font-variation-settings: normal) {
11 | font-family: $sans-serif;
12 | font-stretch: 50%;
13 | }
14 | }
15 | .value-tag {
16 | font-weight: var(--link-font-weight);
17 | }
18 | .value-low {
19 | padding-right: 0.5rem;
20 | }
21 | .value-high {
22 | padding-left: 0.5rem;
23 | }
24 | .value-current {
25 | background: transparent;
26 | border: solid 1px $color-gray-600;
27 | display: inline-block;
28 | font-size: 1rem;
29 | grid-column: 2/3;
30 | justify-self: center;
31 | width: 4rem;
32 | margin: 0 auto;
33 | padding: 0.25rem 0.25rem 0.2rem 0.25rem;
34 | text-align: center;
35 | /* Using the 'Discrete Slider' so don't need this to display but still need its value */
36 | display: none;
37 | }
38 | &.wide {
39 | display: grid;
40 | grid-template-columns: 1fr;
41 | @media (min-width: $bp--medium) {
42 | grid-template-columns: max-content 1fr;
43 | }
44 | .value-tag {
45 | line-height: 2;
46 | padding-right: 0.5rem;
47 | @media (min-width: $bp--medium) {
48 | line-height: 3;
49 | }
50 | &::after {
51 | content: ":";
52 | }
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/_includes/beatrice/02-molecules/09-slider-group/slider-group.html:
--------------------------------------------------------------------------------
1 | {% comment %}
2 | include fields:
3 | style: wide (defaults to stacked)
4 | keyword: keyword 'tag' (i.e. 'wght' or 'GRAD')
5 | id: unique id string
6 | min: minimum slider value
7 | max: maximum slider value
8 | now: starting value
9 | step: step increment (1, 0.1, 0.001, etc)
10 |
11 | {% endcomment %}
12 |
13 |
33 |
--------------------------------------------------------------------------------
/_includes/beatrice/02-molecules/11-prettify/_prettify.scss:
--------------------------------------------------------------------------------
1 | pre.css {
2 | background-color: $color-gray-200;
3 | color: $color-black;
4 | border: none !important;
5 | border-radius: 0.5rem;
6 | overflow: hidden;
7 | padding: 0 0 1.5rem 0 !important;
8 | position: relative;
9 | p + & {
10 | margin-top: calc( var(--body-text-spacer) * 2 );
11 | }
12 | &::before {
13 | content: "CSS";
14 | background-color: $color-gray-300;
15 | color: $color-gray-800;
16 | display: block;
17 | font-family: $sans-serif-novf;
18 | font-size: 0.8rem;
19 | padding: 0.6em 1.5rem;
20 | line-height: 1;
21 | text-align: left;
22 | width: 100%;
23 | @supports (font-variation-settings: normal) {
24 | font-family: $sans-serif;
25 | }
26 | }
27 | @media (prefers-color-scheme: dark) {
28 | background-color: $color-gray-800;
29 | color: $color-gray-200;
30 | &::before {
31 | background-color: $color-black;
32 | color: $color-gray-300;
33 | }
34 | }
35 | }
36 |
37 | code.prettyprint {
38 | background-color: transparent !important;
39 | border: none !important;
40 | display: block;
41 | font-size: 0.9rem;
42 | line-height: 1.5;
43 | overflow: scroll;
44 | padding: 0 !important;
45 | }
46 |
47 | .prettyprint {
48 | .pln {
49 | color: var(--color-text);
50 | color: var(--color-prettify-pln);
51 | }
52 | .str {
53 | color: #060;
54 | color: var(--color-prettify-str);
55 | }
56 | .typ {
57 | color: #606;
58 | color: var(--color-prettify-typ);
59 | }
60 | .lit {
61 | color: #055;
62 | color: var(--color-prettify-lit);
63 | }
64 | .clo,
65 | .opn,
66 | .pun {
67 | color: #550;
68 | color: var(--color-prettify-pun);
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/_includes/beatrice/02-molecules/12-gf-friends-badge/_gf-friends-badge.scss:
--------------------------------------------------------------------------------
1 | @media (prefers-color-scheme:dark) {
2 | footer .GoogleFontsBadge-inner svg {
3 | fill: #ffffff;
4 | }
5 | }
6 | .dark {
7 | footer .GoogleFontsBadge-inner svg {
8 | fill: #ffffff;
9 | }
10 | }
--------------------------------------------------------------------------------
/_includes/beatrice/02-molecules/12-gf-friends-badge/gf-friends-badge.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/_includes/beatrice/02-molecules/12-gf-friends-badge/gf-friends-badge.js:
--------------------------------------------------------------------------------
1 | // Declare dependancy
2 |
3 | var gfBadge = require('@googlefonts/badge')
4 |
5 | gfBadge(document.getElementById('gf-badge'));
6 |
7 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/00-global/_global-layout.scss:
--------------------------------------------------------------------------------
1 |
2 | .page-wrapper {
3 | //overflow-x: hidden;
4 | width: 100%;
5 | }
6 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/01-top-app-bar/top-app-bar.html:
--------------------------------------------------------------------------------
1 | {{ include.title }}
31 | {% if include.subtitle %} 32 |by {{ include.subtitle }}
33 | {% endif %} 34 |
35 |
37 | {{ include.body }}
36 |
2 |
36 |
37 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/04-card-grid/_card-grid.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --card-grid-gutter: 0.333rem;
3 | }
4 |
5 | .card-grid.card-grid--singlerow {
6 | display: flex;
7 | flex-wrap: wrap;
8 | @media (min-width: $bp--medium) {
9 | flex-wrap: nowrap;
10 | }
11 | .card-grid-cell {
12 | width: 100%;
13 | }
14 | }
15 |
16 | .card-grid {
17 | display: grid;
18 | grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
19 | grid-auto-rows: 1fr;
20 | overflow: visible;
21 | margin-left: calc( -1 * var(--card-grid-gutter) );
22 | margin-right: calc( -1 * var(--card-grid-gutter) );
23 | margin-top: calc( var(--body-text-spacer) * 2.4 );
24 | margin-bottom: calc( var(--body-text-spacer) * 2 );
25 |
26 | @media (min-width: $bp--medium) {
27 | margin-left: calc( (var(--body-text-spacer) * -1) - var(--card-grid-gutter) );
28 | margin-right: calc( (var(--body-text-spacer) * -1) - var(--card-grid-gutter) );
29 | }
30 |
31 | > * {
32 | --h3-font-size-min: 1.25;
33 | --h3-font-size-max: 1.5;
34 | --h3-line-height-min: 1.25;
35 | --h3-line-height-max: 1.35;
36 | --h4-font-size-min: 0.875;
37 | --h4-font-size-max: 0.925;
38 | --h4-vf-wght-multiplier-s: 1;
39 | --h4-vf-wght-multiplier-m: 1.05;
40 | --h4-vf-wght-multiplier-l: 1.1;
41 | --p-font-size-min: 0.925;
42 | --p-font-size-max: 1;
43 | --p-line-height-min: 1.35;
44 | --p-line-height-max: 1.5;
45 | // border-top-width: 0.33rem;
46 | // margin: 0 1rem 2rem 1rem;
47 | // h4 {
48 | // font-variation-settings: 'slnt' -10;
49 | // }
50 | }
51 | }
52 |
53 | .card-grid-cell {
54 | padding: var(--card-grid-gutter);
55 | display: flex;
56 | align-items: stretch;
57 | }
58 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/05-drawer/_drawer.scss:
--------------------------------------------------------------------------------
1 | @import "@material/drawer/mdc-drawer";
2 | @import "@material/list/mdc-list";
3 |
4 | .mdc-drawer {
5 | // Updated to pass WCAG 2.1 AAA contrast ratio
6 | --mdc-theme-primary: #{$color-blue-100};
7 | background-color: #ffffff;
8 | background-color: var(--color-background);
9 | width: 75vw;
10 | .mdc-drawer &__title {
11 | color: var(--color-text);
12 | }
13 | &__content {
14 | @media (min-width: $bp--large) {
15 | // This was already here, matches the fixed navbar height
16 | // in top-app-bar, but might not be necessary?
17 | height: 4rem;
18 | }
19 | }
20 | // &--modal {
21 | // @media (min-width: $bp--large) {
22 | // border: none;
23 | // box-shadow: none;
24 | // display: block;
25 | // height: auto;
26 | // left: auto;
27 | // right: 0;
28 | // top: 0;
29 | // }
30 | // }
31 | .mdc-list-item {
32 | font-family: $sans-serif-novf;
33 | @supports (font-variation-settings: normal) {
34 | font-family: $sans-serif;
35 | }
36 | @media (prefers-color-scheme:dark) {
37 | color: #ffffff;
38 | }
39 | &__text {
40 | text-overflow: inherit;
41 | white-space: normal;
42 | overflow: hidden;
43 | }
44 | }
45 | .mdc-list-item--activated {
46 | // Updated to pass WCAG 2.1 AAA contrast ratio
47 | color: $color-blue-900;
48 | font-weight: 600;
49 | @media (prefers-color-scheme:dark) {
50 | color: $color-blue-100;
51 | }
52 | }
53 | }
54 |
55 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/05-drawer/drawer.html:
--------------------------------------------------------------------------------
1 | {% if site.data.navigation and site.data.navigation|size >= 1 %}
2 |
3 |
14 |
15 |
16 |
17 | {% endif %}
18 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/05-drawer/drawer.js:
--------------------------------------------------------------------------------
1 | import {MDCDrawer} from "@material/drawer";
2 | import {MDCTopAppBar} from "@material/top-app-bar";
3 |
4 | const drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
5 |
6 | const topAppBar = MDCTopAppBar.attachTo(document.getElementById('js-app-bar'));
7 | topAppBar.setScrollTarget(document.getElementById('main-content'));
8 | topAppBar.listen('MDCTopAppBar:nav', () => {
9 | drawer.open = !drawer.open;
10 | });
11 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/06-content-section/content-section.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jpamental/variable-fonts/9a10141ad8f5cb2ea9bfa705c72ea73d6d8232a0/_includes/beatrice/03-organisms/06-content-section/content-section.html
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/07-home-grid/_home-grid.scss:
--------------------------------------------------------------------------------
1 | .home-grid {
2 |
3 | @media (min-width: $bp--medium) {
4 | display: grid;
5 | grid-template-columns: minmax(15em, 1fr) minmax(15em, 1fr);
6 | }
7 |
8 | &__title {
9 | --h2-vf-wdth: 25;
10 | --h2-font-size-max: 3.75;
11 | --h2-vf-wght-multiplier-s: 0.7;
12 | --h2-vf-wght-multiplier-m: 0.75;
13 | --h2-vf-wght-multiplier-l: 0.8;
14 | align-self: baseline;
15 | @media (min-width: $bp--medium) {
16 | padding-right: 2rem;
17 | }
18 | h2 {
19 | color: var(--color-text-callout);
20 | margin-top: 0;
21 |
22 | }
23 | }
24 |
25 | &__intro {
26 | }
27 |
28 | &__cards {
29 | outline: 2px solid red;
30 | padding-top: calc( var(--body-text-spacer) * 5 );
31 | }
32 |
33 | }
34 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/08-split-header/_split-header.html:
--------------------------------------------------------------------------------
1 |
2 |
39 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/10-embeds/_axis-container.scss:
--------------------------------------------------------------------------------
1 | .embed-container {
2 | width: 100%;
3 | + .embed-container {
4 | margin-top: 2rem;
5 | }
6 | // There is a custom shadow for these cards vs. others
7 | .mdc-card {
8 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
9 | // Some axes ex. width can expand beyond the
10 | // card on small screens
11 | overflow: hidden;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/_includes/beatrice/03-organisms/10-embeds/axis-component.html:
--------------------------------------------------------------------------------
1 | {% if include.axis %}
2 |
3 |
38 |
4 | {% if include.firstImage %}
5 | 
12 | {% endif %}
13 |
21 |
14 |
19 | {{ include.content }}
20 | {{ include.title | default: page.title | default: "" }}
15 | {% if include.subtitle %} 16 |{{ include.subtitle }}
17 | {% endif %} 18 |
22 | {% if include.featureImage %}
23 |
37 |
24 |
35 | {% endif %}
36 |
28 | 
33 |
34 |
37 |
60 |
61 |
38 |
40 | Italic
39 |
41 |
43 | {% include beatrice/02-molecules/09-slider-group/slider-group.html
44 | keyword = 'ital'
45 | style = 'wide'
46 | id = 'ital-text-vf-ital'
47 | min = '0'
48 | max = '1'
49 | now = '1'
50 | step = '1'
51 | %}
52 | Good
42 |
53 |
59 |
54 | .text {
55 | font-variation-settings: 'ital' ;
56 | }
57 |
58 |
18 |
41 |
42 |
43 |
19 |
21 | Optical Size
20 |
22 |
24 | {% include beatrice/02-molecules/09-slider-group/slider-group.html
25 | keyword = 'opsz'
26 | style = 'wide'
27 | id = 'text-vf-opsz'
28 | min = '8'
29 | max = '144'
30 | now = '80'
31 | step = '1'
32 | %}
33 | Due Diligence
23 |
34 |
40 |
35 | .text {
36 | font-variation-settings: 'opsz' ;
37 | }
38 |
39 |
20 |
52 |
53 |
21 |
23 | Slant & Italic
22 |
24 |
26 | {% include beatrice/02-molecules/09-slider-group/slider-group.html
27 | keyword = 'slnt'
28 | style = 'wide'
29 | id = 'slant-ital-text-vf-slnt'
30 | min = '0'
31 | max = '10'
32 | now = '7'
33 | step = '1'
34 | %}
35 | {% include beatrice/02-molecules/09-slider-group/slider-group.html
36 | keyword = 'ital'
37 | style = 'wide'
38 | id = 'slant-ital-text-vf-ital'
39 | min = '0'
40 | max = '1'
41 | now = '0'
42 | step = '1'
43 | %}
44 | Style & Grace
25 |
45 |
51 |
46 | .text {
47 | font-variation-settings: 'slnt' , 'ital' ;
48 | }
49 |
50 |
21 |
44 |
45 |
22 |
24 | Slant
23 |
25 |
27 | {% include beatrice/02-molecules/09-slider-group/slider-group.html
28 | keyword = 'slnt'
29 | style = 'wide'
30 | id = 'slnt-text-vf-slnt'
31 | min = '0'
32 | max = '10'
33 | now = '7'
34 | step = '1'
35 | %}
36 | Great
26 |
37 |
43 |
38 | .text {
39 | font-style: oblique deg;
40 | }
41 |
42 |
11 |
38 |
39 |
40 |
12 |
14 | Weight
13 |
15 |
16 |
19 |
20 | {% include beatrice/02-molecules/09-slider-group/slider-group.html
21 | keyword = 'wght'
22 | style = 'wide'
23 | id = 'wght-text-vf-wght'
24 | min = '100'
25 | max = '900'
26 | now = '800'
27 | step = '1'
28 | %}
29 |
30 | Hello
17 |
18 |
31 |
37 |
32 | .text {
33 | font-weight: ;
34 | }
35 |
36 |
15 |
38 |
39 |
16 |
18 | Width
17 |
19 |
21 | {% include beatrice/02-molecules/09-slider-group/slider-group.html
22 | keyword = 'wdth'
23 | style = 'wide'
24 | id = 'wdth-text-vf-wdth'
25 | min = '25'
26 | max = '150'
27 | now = '95'
28 | step = '1'
29 | %}
30 | Wingspan
20 |
31 |
37 |
32 | .text {
33 | font-stretch: %;
34 | }
35 |
36 |
2 |
3 | {{ include.content }}
4 |
5 |
6 |
--------------------------------------------------------------------------------
/_includes/beatrice/header.html:
--------------------------------------------------------------------------------
1 | {% include /beatrice/03-organisms/05-drawer/drawer.html %}
2 |
3 |
4 | {% include /beatrice/03-organisms/01-top-app-bar/top-app-bar.html %}
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/_includes/beatrice/meta_close.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |