5 |
{{ meta.siteName }}
8 |
19 |
20 |
--------------------------------------------------------------------------------
/src/_layouts/base.njk:
--------------------------------------------------------------------------------
1 |
2 |
3 | {%- set pageTitle %}{% if title %}{{ title }} | {% endif %}{{ meta.siteName }}{% endset -%}
4 | {%- set pageDescription %}{% if description %}{{ description }}{% else %}{{ meta.siteDescription }}{% endif %}{% endset -%}
5 |
6 |
7 |
8 |
9 |
10 |
{{pageTitle}}
11 |
15 |
16 |
17 |
18 | {% if meta.twitterUsername %}
19 |
20 | {% endif %}
21 |
25 |
29 |
30 |
34 |
38 |
39 |
40 |
41 |
42 |
48 |
49 |
50 | {{ content | safe }}
51 |
52 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/src/_layouts/page.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: base.njk
3 | ---
4 | {% include 'sitenav.njk' %}
5 |
6 |
14 |
15 |
16 | {{ content | safe }}
17 |
18 |
19 |
--------------------------------------------------------------------------------
/src/css/_buttons.scss:
--------------------------------------------------------------------------------
1 | @use "theme" as *;
2 | @use "sass:math";
3 |
4 | .tdbc-button {
5 | display: inline-flex;
6 | align-items: center;
7 | align-self: start;
8 | justify-content: center;
9 | min-width: 10ch;
10 | min-height: 44px;
11 | padding: 0.25em 1em;
12 | transition: 180ms ease-in-out;
13 | transition-property: background, border;
14 | border-radius: math.div($tdbc-border-radius, 2);
15 | background-color: tdbc-color("primary");
16 | color: #fff;
17 | font-size: 1.125rem;
18 | line-height: 1.1;
19 | text-align: center;
20 | text-decoration: none;
21 | cursor: pointer;
22 |
23 | @media screen and (-ms-high-contrast: active) {
24 | border: 2px solid currentColor;
25 | }
26 |
27 | &:focus {
28 | outline-color: transparent;
29 | outline-style: solid;
30 | box-shadow: 0 0 0 3px scale-color(tdbc-color("primary"), $lightness: -30%);
31 | }
32 |
33 | &--small {
34 | min-height: 34px;
35 | font-size: 1rem;
36 | }
37 |
38 | &--center {
39 | align-self: center;
40 | margin-right: auto;
41 | margin-left: auto;
42 | }
43 |
44 | &__icon {
45 | width: 1.5em;
46 | height: 1.5em;
47 | margin-right: 0.25em;
48 |
49 | &--end {
50 | margin-right: 0;
51 | margin-left: 0.25em;
52 | }
53 |
54 | svg {
55 | width: 100%;
56 | height: 100%;
57 | fill: currentColor;
58 | }
59 | }
60 |
61 | &-outlined {
62 | border: 2px solid tdbc-color("primary");
63 | background-color: transparent;
64 | color: tdbc-color("primary");
65 |
66 | &:hover,
67 | &:focus {
68 | background-color: scale-color(tdbc-color("primary"), $lightness: 80%);
69 | }
70 | }
71 |
72 | @each $key in $tdbc-button-variants {
73 | $color: tdbc-color($key);
74 |
75 | @if ($key != "primary") {
76 | &--#{$key} {
77 | background-color: $color;
78 |
79 | @if ($key == "light") {
80 | color: tdbc-color("dark");
81 | }
82 |
83 | &:focus {
84 | box-shadow: 0 0 0 3px scale-color($color, $lightness: -30%);
85 | }
86 | }
87 |
88 | &-outlined--#{$key} {
89 | border-color: scale-color($color, $lightness: 30%, $saturation: 15%);
90 | color: $color;
91 |
92 | &:focus {
93 | box-shadow: 0 0 0 3px scale-color($color, $lightness: -30%);
94 | }
95 |
96 | @if ($key == "light") {
97 | &:hover,
98 | &:focus {
99 | background-color: rgba($color, 0.15);
100 | }
101 | } @else {
102 | &:hover,
103 | &:focus {
104 | background-color: scale-color($color, $lightness: 90%);
105 | }
106 | }
107 | }
108 | }
109 | }
110 | }
111 |
112 | .tdbc-button__icon,
113 | .tdbc-icon-button {
114 | display: inline-flex;
115 | position: relative;
116 | width: 1em;
117 | height: 1em;
118 | padding: 0;
119 | border: none;
120 | background: transparent;
121 | font-size: 1.5rem;
122 | cursor: pointer;
123 |
124 | svg {
125 | flex-shrink: 0;
126 | width: 100%;
127 | height: 100%;
128 | }
129 | }
130 |
131 | .tdbc-icon-button {
132 | svg {
133 | fill: currentColor;
134 | opacity: 0.7;
135 | }
136 |
137 | &:focus,
138 | &:hover {
139 | outline: none;
140 |
141 | svg {
142 | opacity: 1;
143 | }
144 | }
145 |
146 | &:focus {
147 | &::after {
148 | position: absolute;
149 | top: -0.3em;
150 | right: -0.3em;
151 | bottom: -0.3em;
152 | left: -0.3em;
153 | border: 1px solid currentColor;
154 | border-radius: 50%;
155 | content: "";
156 | }
157 | }
158 | }
159 |
--------------------------------------------------------------------------------
/src/css/_card.scss:
--------------------------------------------------------------------------------
1 | @use "theme" as *;
2 |
3 | .tdbc-card {
4 | display: flex;
5 | position: relative;
6 | flex-direction: column;
7 | width: 100%;
8 | border-radius: $tdbc-border-radius;
9 | background-color: #fff;
10 | box-shadow: 0 3px 5px rgb(0 0 0 / 18%);
11 |
12 | &__title {
13 | margin-bottom: 1rem;
14 | font-size: $tdbc-h4-font-size;
15 | line-height: 1.15;
16 | text-decoration: none;
17 | }
18 |
19 | a.tdbc-card__title {
20 | &::before {
21 | position: absolute;
22 | top: 0;
23 | left: 0;
24 | width: 100%;
25 | height: 100%;
26 | transition: 180ms box-shadow ease-in;
27 | border-radius: 8px;
28 | content: "";
29 | }
30 |
31 | &:focus {
32 | outline: none;
33 |
34 | &::before {
35 | box-shadow: 0 0 0 3px tdbc-color("primary");
36 | }
37 | }
38 | }
39 |
40 | &__content {
41 | display: flex;
42 | position: relative;
43 | flex-direction: column;
44 | flex-grow: 1;
45 | padding: 24px;
46 |
47 | a:last-child {
48 | align-self: start;
49 | margin-top: auto;
50 | }
51 |
52 | p {
53 | position: relative;
54 | margin: 0 0 1rem;
55 | z-index: 1;
56 | }
57 |
58 | > ul {
59 | list-style-type: disc;
60 | padding-left: 1rem;
61 |
62 | li + li {
63 | margin-top: 0.5rem;
64 | }
65 | }
66 | }
67 |
68 | &:hover a.tdbc-card__title::before {
69 | box-shadow: 0 0 0 3px tdbc-color("primary");
70 | }
71 |
72 | img:first-child {
73 | object-fit: cover;
74 | max-height: 10em;
75 | border-radius: $tdbc-border-radius $tdbc-border-radius 0 0;
76 | }
77 |
78 | &--outlined {
79 | border: 1px solid scale-color($tdbc-color-gray, $lightness: 50%);
80 | background-color: transparent;
81 | box-shadow: none;
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/css/_fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Baloo 2";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local("Baloo 2 Regular"), local("Baloo-2-Regular"),
6 | url("../fonts/baloo-2-v1-latin-regular.woff2") format("woff2");
7 | font-display: swap;
8 | }
9 |
10 | @font-face {
11 | font-family: "Baloo 2";
12 | font-style: normal;
13 | font-weight: 500;
14 | src: local("Baloo 2 Medium"), local("Baloo-2-Medium"),
15 | url("../fonts/baloo-2-v1-latin-500.woff2") format("woff2");
16 | font-display: swap;
17 | }
18 |
--------------------------------------------------------------------------------
/src/css/_layout.scss:
--------------------------------------------------------------------------------
1 | @use "theme" as *;
2 |
3 | body {
4 | display: flex;
5 | flex-direction: column;
6 | min-height: 100vh;
7 | background-color: tdbc-color("background");
8 | color: $tdbc-color-body;
9 | font-family: $tdbc-font-family;
10 | }
11 |
12 | main,
13 | main.tdbc-container {
14 | padding-top: 5vh;
15 | padding-bottom: 5vh;
16 | }
17 |
18 | footer {
19 | margin-top: auto;
20 | }
21 |
22 | article {
23 | max-width: 80ch;
24 |
25 | > img {
26 | margin-right: auto;
27 | margin-left: auto;
28 | }
29 | }
30 |
31 | .tdbc-container {
32 | display: flex;
33 | flex-direction: column;
34 | width: 100%;
35 | max-width: 120ch;
36 | margin-right: auto;
37 | margin-left: auto;
38 | padding: 1rem;
39 | }
40 |
41 | .tdbc-column-container {
42 | display: grid;
43 | grid-gap: 2em;
44 | grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
45 | }
46 |
47 | ul.tdbc-column-container {
48 | padding-left: 0;
49 | }
50 |
51 | .tdbc-section {
52 | width: 100%;
53 |
54 | &--padded {
55 | padding-top: 10vh;
56 | padding-bottom: 10vh;
57 | }
58 |
59 | *:last-child {
60 | margin-bottom: 0;
61 | }
62 | }
63 |
64 | .tdbc-hero {
65 | display: grid;
66 | min-height: 40vh;
67 | place-content: center;
68 | padding-top: 10vh;
69 | padding-bottom: 10vh;
70 | text-align: center;
71 | }
72 |
73 | .tdbc-row {
74 | display: grid;
75 | grid-gap: 1rem;
76 |
77 | @media (min-width: 80ch) {
78 | grid-auto-flow: column;
79 | grid-auto-columns: max-content;
80 | }
81 |
82 | &--center-content {
83 | justify-content: center;
84 | }
85 |
86 | &--center-alignitems {
87 | align-items: center;
88 | }
89 | }
90 |
91 | hr {
92 | margin-top: 4rem;
93 | margin-bottom: 4rem;
94 | border: 1px solid tdbc-color("secondary");
95 | }
96 |
--------------------------------------------------------------------------------
/src/css/_prism.scss:
--------------------------------------------------------------------------------
1 | @use "theme" as *;
2 |
3 | /**
4 | * a11y-dark theme for JavaScript, CSS, and HTML
5 | * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
6 | * @author ericwbailey
7 | */
8 |
9 | code[class*="language-"],
10 | pre[class*="language-"] {
11 | color: tdbc-color("gray");
12 | background: none;
13 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
14 | text-align: left;
15 | white-space: pre;
16 | word-spacing: normal;
17 | word-break: normal;
18 | word-wrap: normal;
19 | line-height: 1.5;
20 | tab-size: 4;
21 | hyphens: none;
22 | }
23 |
24 | /* Code blocks */
25 | pre[class*="language-"] {
26 | padding: 1em;
27 | margin: 2rem 0;
28 | overflow: auto;
29 | border-radius: 0.3em;
30 | max-width: calc(100vw - 2rem);
31 | }
32 |
33 | :not(pre) > code[class*="language-"],
34 | pre[class*="language-"] {
35 | background: tdbc-color("light");
36 | }
37 |
38 | /* Inline code */
39 | :not(pre) > code[class*="language-"] {
40 | padding: 0.1em;
41 | border-radius: 0.3em;
42 | white-space: normal;
43 | }
44 |
45 | .token.comment,
46 | .token.prolog,
47 | .token.doctype,
48 | .token.cdata {
49 | color: #76747f;
50 | }
51 |
52 | .token.punctuation {
53 | color: tdbc-color("gray");
54 | }
55 |
56 | .token.property,
57 | .token.tag,
58 | .token.constant,
59 | .token.symbol,
60 | .token.deleted {
61 | color: #4d48e8;
62 | }
63 |
64 | .token.boolean,
65 | .token.number {
66 | color: #348614;
67 | }
68 |
69 | .token.selector,
70 | .token.attr-name,
71 | .token.string,
72 | .token.char,
73 | .token.builtin,
74 | .token.inserted {
75 | color: #171392;
76 | }
77 |
78 | .token.operator,
79 | .token.entity,
80 | .token.url,
81 | .language-css .token.string,
82 | .language-scss .token.string,
83 | .style .token.string,
84 | .token.variable {
85 | color: #d92d7a;
86 | }
87 |
88 | .token.function {
89 | color: #6f34a3;
90 | }
91 |
92 | .token.atrule,
93 | .token.attr-value {
94 | color: #6b65e8;
95 | }
96 |
97 | .token.keyword {
98 | color: #171392;
99 | }
100 |
101 | .token.regex,
102 | .token.important {
103 | color: #348614;
104 | }
105 |
106 | .token.important,
107 | .token.bold {
108 | font-weight: bold;
109 | }
110 |
111 | .token.italic {
112 | font-style: italic;
113 | }
114 |
115 | .token.entity {
116 | cursor: help;
117 | }
118 |
119 | @media screen and (-ms-high-contrast: active) {
120 | code[class*="language-"],
121 | pre[class*="language-"] {
122 | color: windowText;
123 | background: window;
124 | }
125 |
126 | :not(pre) > code[class*="language-"],
127 | pre[class*="language-"] {
128 | background: window;
129 | }
130 |
131 | .token.important {
132 | background: highlight;
133 | color: window;
134 | font-weight: normal;
135 | }
136 |
137 | .token.atrule,
138 | .token.attr-value,
139 | .token.function,
140 | .token.keyword,
141 | .token.operator,
142 | .token.selector {
143 | font-weight: bold;
144 | }
145 |
146 | .token.attr-value,
147 | .token.comment,
148 | .token.doctype,
149 | .token.function,
150 | .token.keyword,
151 | .token.operator,
152 | .token.property,
153 | .token.string {
154 | color: highlight;
155 | }
156 |
157 | .token.attr-value,
158 | .token.url {
159 | font-weight: normal;
160 | }
161 | }
162 |
--------------------------------------------------------------------------------
/src/css/_reset.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * [Modified] Modern CSS Reset
3 | * @link https://github.com/hankchizljaw/modern-css-reset
4 | */
5 |
6 | /* Box sizing rules */
7 | *,
8 | *::before,
9 | *::after {
10 | box-sizing: border-box;
11 | }
12 |
13 | /* Remove default margin */
14 | body,
15 | h1,
16 | h2,
17 | h3,
18 | h4,
19 | h5,
20 | h6 {
21 | margin: 0;
22 | }
23 |
24 | p,
25 | li,
26 | h1,
27 | h2,
28 | h3,
29 | h4 {
30 | // Help prevent overflow of long words/names/URLs
31 | word-break: break-word;
32 |
33 | // Optional, not supported for all languages
34 | // hyphens: auto;
35 | }
36 |
37 | html,
38 | body {
39 | overflow-x: hidden;
40 | }
41 |
42 | html {
43 | scroll-behavior: smooth;
44 | }
45 |
46 | /* Set core body defaults */
47 | body {
48 | min-height: 100vh;
49 | font-family: sans-serif;
50 | font-size: 100%;
51 | line-height: 1.5;
52 | text-rendering: optimizeSpeed;
53 | }
54 |
55 | /* Make images easier to work with */
56 | img {
57 | display: block;
58 | max-width: 100%;
59 | }
60 |
61 | /* Inherit fonts for inputs and buttons */
62 | input,
63 | button,
64 | textarea,
65 | select {
66 | font: inherit;
67 | }
68 |
69 | /* Remove all animations and transitions for people that prefer not to see them */
70 | @media (prefers-reduced-motion: reduce) {
71 | *,
72 | *::before,
73 | *::after {
74 | animation-duration: 0.01ms !important;
75 | animation-iteration-count: 1 !important;
76 | transition-duration: 0.01ms !important;
77 | scroll-behavior: auto !important;
78 | }
79 |
80 | html {
81 | scroll-behavior: initial;
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/src/css/_sitenav.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 | @use "theme" as *;
3 |
4 | #tdbc-siteid {
5 | font-size: $tdbc-h3-font-size;
6 | text-decoration: none;
7 | }
8 |
9 | .tdbc-sitenav {
10 | background-color: tdbc-color("primary");
11 |
12 | &__container,
13 | &__navlist {
14 | display: flex;
15 | flex-wrap: wrap;
16 | align-items: center;
17 | }
18 |
19 | &__container {
20 | justify-content: space-between;
21 | width: 100%;
22 | max-width: 120ch;
23 | margin: 0 auto;
24 | padding: 0.25rem 0.5rem;
25 | }
26 |
27 | &__navlist {
28 | li + li {
29 | margin-left: 0.5rem;
30 | }
31 | }
32 |
33 | &,
34 | a:not(.tdbc-button) {
35 | color: tdbc-color("light");
36 | }
37 |
38 | a:not(.tdbc-button):focus {
39 | border-radius: math.div($tdbc-border-radius, 2);
40 | outline-color: transparent;
41 | outline-style: solid;
42 | box-shadow: 0 0 1px 2px tdbc-color("light");
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/css/_theme.scss:
--------------------------------------------------------------------------------
1 | $tdbc-color-primary: #171392 !default;
2 | $tdbc-color-secondary: #db0a76 !default;
3 | $tdbc-color-background: #f9f9f9 !default;
4 |
5 | $tdbc-brand-colors: (
6 | "primary": $tdbc-color-primary,
7 | "secondary": $tdbc-color-secondary,
8 | ) !default;
9 |
10 | $tdbc-color-body: scale-color($tdbc-color-primary, $lightness: -30%, $saturation: -50%) !default;
11 | $tdbc-color-gray: mix(#767676, $tdbc-color-body, 70%) !default;
12 |
13 | $tdbc-colors: map-merge(
14 | $tdbc-brand-colors,
15 | (
16 | "text": $tdbc-color-body,
17 | "background": $tdbc-color-background,
18 | "light": #fff,
19 | "dark": rgba(0 0 0 / 87%),
20 | "gray": $tdbc-color-gray,
21 | )
22 | );
23 |
24 | @function tdbc-color($key) {
25 | @return map-get($tdbc-colors, $key);
26 | }
27 |
28 | // Add/remove to selectively generate `ink` (text color) classes
29 | $tdbc-ink-colors: "primary", "secondary", "text", "gray", "light", "dark" !default;
30 |
31 | // Add/remove to selectively generate `background` (text color) classes
32 | $tdbc-background-colors: "primary", "secondary", "background", "gray", "light" !default;
33 |
34 | $tdbc-button-variants: "primary", "secondary", "light", "gray" !default;
35 | $tdbc-link-color: tdbc-color("primary") !default;
36 | $tdbc-border-radius: 8px !default;
37 |
38 | $tdbc-font-family: "Baloo 2", sans-serif !default;
39 | $tdbc-strong-font-weight: 500 !default;
40 | $tdbc-h1-font-size: 4.2rem !default;
41 | $tdbc-h2-font-size: 3.15rem !default;
42 | $tdbc-h3-font-size: 2rem !default;
43 | $tdbc-h4-font-size: 1.35rem !default;
44 | $tdbc-text-font-size: 1.15rem !default;
45 | $tdbc-lead-font-size: 1.35rem !default;
46 |
47 | $tdbc-spacing: (
48 | sm: 1rem,
49 | md: 3rem,
50 | lg: 6rem,
51 | xl: 10rem,
52 | auto: "auto",
53 | ) !default;
54 |
--------------------------------------------------------------------------------
/src/css/_typography.scss:
--------------------------------------------------------------------------------
1 | @use "theme" as *;
2 |
3 | $tdbc-typography-variants: h1, h2, h3, h4;
4 |
5 | @each $type in $tdbc-typography-variants {
6 | #{$type},
7 | .tdbc-#{$type} {
8 | font-weight: $tdbc-strong-font-weight;
9 | line-height: 1.15;
10 | margin-bottom: 0.65em;
11 | }
12 | }
13 |
14 | h1,
15 | .tdbc-h1 {
16 | font-size: $tdbc-h1-font-size;
17 | font-size: clamp(3rem, 5vw + 1rem, #{$tdbc-h1-font-size});
18 | }
19 |
20 | h2,
21 | .tdbc-h2 {
22 | font-size: $tdbc-h2-font-size;
23 | font-size: clamp(2.5rem, 5vw + 1rem, #{$tdbc-h2-font-size});
24 | }
25 |
26 | h3,
27 | .tdbc-h3 {
28 | font-size: $tdbc-h3-font-size;
29 | }
30 |
31 | h4,
32 | .tdbc-h4 {
33 | font-size: $tdbc-h4-font-size;
34 | color: tdbc-color("gray");
35 | }
36 |
37 | p,
38 | li {
39 | font-size: $tdbc-text-font-size;
40 | }
41 |
42 | p {
43 | margin: 0 0 1rem;
44 | }
45 |
46 | article {
47 | > ul,
48 | > ol {
49 | > li + li {
50 | margin-top: 1rem;
51 | }
52 | }
53 |
54 | * {
55 | + h2 {
56 | margin-top: 4rem;
57 | }
58 |
59 | + h3 {
60 | margin-top: 2rem;
61 | }
62 | }
63 | }
64 |
65 | strong {
66 | font-weight: $tdbc-strong-font-weight;
67 | }
68 |
69 | a:not(.tdbc-button) {
70 | color: $tdbc-link-color;
71 | }
72 |
73 | code:not([class*="language"]) {
74 | display: inline-flex;
75 | padding: 0.15em;
76 | background-color: tdbc-color("light");
77 | color: tdbc-color("gray");
78 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
79 | border: 1px solid scale-color(tdbc-color("gray"), $lightness: 50%);
80 | border-radius: 2px;
81 | font-size: 0.75em;
82 | line-height: 1.1;
83 | }
84 |
85 | pre code:not([class*="language"]) {
86 | width: 100%;
87 | max-width: calc(100vw - 2rem);
88 | overflow-x: auto;
89 | }
90 |
91 | blockquote {
92 | margin-left: 0;
93 | margin-right: 0;
94 | padding-left: 1.5rem;
95 | border-left: 2px solid tdbc-color("secondary");
96 | color: tdbc-color("gray");
97 |
98 | &,
99 | p {
100 | font-size: $tdbc-h4-font-size;
101 | }
102 |
103 | + * {
104 | margin-top: 3rem;
105 | }
106 |
107 | :last-child {
108 | margin-bottom: 0;
109 | }
110 | }
111 |
112 | .tdbc-lead {
113 | font-size: $tdbc-lead-font-size;
114 | letter-spacing: 0.01em;
115 | margin-bottom: 1em;
116 | line-height: 1.3;
117 | }
118 |
119 | .tdbc-list-unstyled {
120 | list-style: none;
121 | padding: 0;
122 | }
123 |
--------------------------------------------------------------------------------
/src/css/_utilities.scss:
--------------------------------------------------------------------------------
1 | @use "theme" as *;
2 |
3 | .tdbc-content-maxlength {
4 | max-width: 80ch;
5 | }
6 |
7 | .tdbc-anchor {
8 | display: inline-block;
9 | margin-left: 0.25em;
10 | transition: 180ms opacity ease-in-out;
11 | opacity: 0.6;
12 | font-size: 0.65em;
13 | vertical-align: top;
14 |
15 | &:hover {
16 | opacity: 1;
17 | }
18 | }
19 |
20 | $tdbc-alignments: left, center, right !default;
21 |
22 | @each $alignment in $tdbc-alignments {
23 | .tdbc-text-align--#{$alignment} {
24 | text-align: #{$alignment};
25 |
26 | @if ($alignment == "center") {
27 | > a {
28 | align-self: center !important;
29 | }
30 | }
31 | }
32 | }
33 |
34 | @each $key in $tdbc-background-colors {
35 | .tdbc-background--#{$key} {
36 | background-color: tdbc-color($key);
37 | }
38 | }
39 |
40 | @each $key in $tdbc-ink-colors {
41 | .tdbc-ink--#{$key},
42 | a.tdbc-ink--#{$key} {
43 | color: tdbc-color(#{$key});
44 | }
45 |
46 | .tdbc-ink--#{$key} > a:not(.tdbc-button) {
47 | color: inherit;
48 | }
49 | }
50 |
51 | .tdbc-mx-auto {
52 | margin-right: auto;
53 | margin-left: auto;
54 | }
55 |
56 | @each $key, $unit in $tdbc-spacing {
57 | .tdbc-my-#{$key} {
58 | margin-top: $unit;
59 | margin-bottom: $unit;
60 | }
61 |
62 | .tdbc-mt-#{$key} {
63 | margin-top: $unit;
64 | }
65 | }
66 |
67 | .tdbc-mb-none {
68 | margin-bottom: 0;
69 | }
70 |
--------------------------------------------------------------------------------
/src/css/css.json:
--------------------------------------------------------------------------------
1 | {
2 | "eleventyExcludeFromCollections": true
3 | }
4 |
--------------------------------------------------------------------------------
/src/css/style.scss:
--------------------------------------------------------------------------------
1 | @use "fonts";
2 | @use "reset";
3 | @use "layout";
4 | @use "sitenav";
5 | @use "typography";
6 | @use "buttons";
7 | @use "card";
8 | @use "prism";
9 | @use "utilities";
10 |
--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5t3ph/11ty-netlify-jumpstart/ec2bedebd635eb9e88f8e9ea4b96e6fc5adca8bc/src/favicon.png
--------------------------------------------------------------------------------
/src/fonts/baloo-2-v1-latin-500.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5t3ph/11ty-netlify-jumpstart/ec2bedebd635eb9e88f8e9ea4b96e6fc5adca8bc/src/fonts/baloo-2-v1-latin-500.woff2
--------------------------------------------------------------------------------
/src/fonts/baloo-2-v1-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/5t3ph/11ty-netlify-jumpstart/ec2bedebd635eb9e88f8e9ea4b96e6fc5adca8bc/src/fonts/baloo-2-v1-latin-regular.woff2
--------------------------------------------------------------------------------
/src/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: base.njk
3 | templateEngineOverride: md, njk
4 | ---
5 |
6 | {# A tiny extra style for the starter home page, intended to be removed as you customize to fit your own content! #}
7 |
8 |
30 |
31 |
32 |
33 |
55 |
56 |
{{ meta.siteName }}
57 |
58 | {{ meta.siteDescription }}
59 |
60 |
62 |
63 |
64 |
65 | {%- for page in collections.pages -%}
66 | -
67 |
68 |
{{ page.data.title }}
69 |
{{ page.data.description }}
70 |
72 | {%- endfor -%}
73 |
74 |
Quick Start
80 |
81 | 1. [Generate a repo from this template](https://github.com/5t3ph/11ty-netlify-jumpstart/generate) which will copy this project into your own new repo.
82 |
83 | 1. Once cloned, run `npm install` to install 11ty and other dependencies. Then run `npm start` to run 11ty in watch mode. Use `npm run build` to run a production version.
84 |
85 | 1. Open `src/_data/meta.js` and adjust the values to your details.
86 |
87 | 1. Review the [styling documentation](https://5t3ph.github.io/html-sass-jumpstart/) for the included minimal Sass framework, particularly the theme variables, to quickly customize the starter.
88 |
89 | 1. Edit `src/index.njk` to change the home page - including changing the template type if desired - and then create content within `_pages` using any templating format you prefer to add content.
90 |
91 | 1. Check out the [About page](/about/) for expanded details on included features of this starter.
92 |
93 | 1. Review the [11ty documentation](https://11ty.dev) to more deeply apply customizations, including adding custom data sources and reviewing what template languages are available.
94 |
95 | Is Netlify hosting required?
96 |
97 | It's not required, but highly recommended, and is also how the build process is setup to run.
98 |
99 | > For more Eleventy resources, check out my extended collection on [11ty.Rocks](https://11ty.rocks)!
100 |
101 | {{ content | safe }}
102 |
103 |
104 |
--------------------------------------------------------------------------------
/src/pages/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "About"
3 | description: "Review feature info and customization details."
4 | ---
5 |
6 | ## Intro to Jumpstart
7 |
8 | This jumpstart is intended to be _just enough_ to be a functional site/blog using 11ty, and also to introduce essential 11ty features.
9 |
10 | [**Review the "Quick Start"**](/#quickstart) on the home page for how to get this starter up and running for your project.
11 |
12 | ### Colophon
13 |
14 | Hi, I'm Stephanie Eckles - @5t3ph on [Twitter](https://twitter.com/5t3ph), [Github](https://github.com/5t3ph), [CodePen](https://codepen.com/5t3ph), and [DEV](https://dev.to/5t3ph). You may know me as the author of [ModernCSS.dev](https://moderncss.dev) or the creator of [StyleStage.dev](https://stylestage.dev). I can also be found on [egghead as an instructor](https://egghead.io/instructors/stephanie-eckles?af=2s65ms).
15 |
16 | > Check out my extended collection of Eleventy resources available on [11ty.Rocks](https://11ty.rocks)!
17 |
18 | ### Jump to:
19 |
20 | - [Global Site Data and .env](#global-site-data-and-env)
21 | - [Template Languages Used](#template-languages-used)
22 | - [Layout Hierarchy and Features](#layout-hierarchy-and-features)
23 | - [Expected Frontmatter](#expected-frontmatter)
24 | - [Permalink Style](#permalink-style)
25 | - [Asset Handling](#asset-handling)
26 | - [Linting](#linting)
27 | - [Sass Framework](#sass-framework)
28 | - [Anchor links](#anchor-links)
29 | - [Sitemap](#sitemap)
30 | - [RSS Feed](#rss-feed)
31 | - [Prism Syntax Highlighting](#prism-syntax-highlighting)
32 | - [.eleventy.js Config Features](#eleventyjs-config-features)
33 | - [VSCode Tips](#vscode-tips)
34 |
35 | ## Global Site Data and .env
36 |
37 | As noted in the [Quick Start](/#quickstart), there are global site data variables in `src/_data/meta.json`.
38 |
39 | Those include:
40 |
41 | - `url` - should remain unchanged, reads from the single expected `.env` value of `URL`
42 | - `siteName` - your "brand" if you will, appended to the `
` tag, shown in the `sitenav`, displayed in the "hero" for the `home` layout, in the footer by the copyright, and as the identifier throughout the RSS feed
43 | - `siteDescription` - used in the "description" meta tag, and below the `siteName` on the `home` layout
44 | - `authorName` - Used in the RSS feed, intended to be your full name
45 | - `twitterUsername` - without the "@", this value is used for the Twitter meta tags, and for the URL of the icon link in the footer
46 |
47 | ### .env
48 |
49 | See `.env-sample` for the single expected value of `URL` which should be set to your localhost. The sample uses the default 11ty port, so you can simply rename the file to `.env` if you haven't changed the port.
50 |
51 | The `URL` value is then available via the global data described previously, and can be used in templates with `meta.url`. You can see this used for the RSS feed and sitemap to create the absolute URLs.
52 |
53 | ## Template Languages Used
54 |
55 | Page templates are created as Nunjucks (`.njk`), and feature are added that expect Markdown for most page content.
56 |
57 | The home page - `src/index.njk` - is set to process first as Markdown followed by Nunjucks. This allows mixing HTML with Markdown, with benefits being code syntax highlighting and ability to include classes on HTML elements. This functionality is provided by the `templateEngineOverride: md, njk` in the frontmatter.
58 |
59 | Review the list of [available templating languages](https://www.11ty.dev/docs/languages/) in the 11ty docs.
60 |
61 | ## Layout Hierarchy and Features
62 |
63 | There are two layouts and one partial included.
64 |
65 | **New in v1.1.0** - layouts are customized to be located in `src/_layouts`.
66 |
67 | - `_layouts/base.njk` includes the standard HTML boilerplate including meta and "og" tags in `<head>`.
68 |
69 | - `_layouts/page.njk` includes the `sitenav.njk` partial and chains up to `base`
70 |
71 | The `src/index.njk` template chains to the `base` layout and includes a loop that will create "cards" for everything in `collections.pages`.
72 |
73 | ## Expected Frontmatter
74 |
75 | There are only two fields expected:
76 |
77 | - `title` - essentially required, by default is used in the page `<title>`, and in the layout "hero".
78 | - `description` - optional, by default appears below the title for the `page` template and is used as for the "description" meta tag.
79 |
80 | > If you want typed front matter, consider my plugin for [collection schemas](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-collection-schemas)
81 |
82 | ## Permalink Style
83 |
84 | The default setup expects content - using any template language - within `pages/`.
85 |
86 | The `pages.json` in that directory includes a `permalink` setting so that the file name is used directly to prevent 'pages' being the base of the URL.
87 |
88 | You can [override permalinks per file](https://www.11ty.dev/docs/permalinks/).
89 |
90 | ## Asset Handling
91 |
92 | In the `.eleventy.js` config, there are included "pass-throughs" for an `img/` directory as well as `favicon.png`.
93 |
94 | You can replace the included favicon, and create an `img` directory or remove the `addPassthroughCopy` if you do not have need of images.
95 |
96 | Creating an `img` directory and keeping the pass-through directive will make images available at `/img/[image-file-path]` relative to the site root.
97 |
98 | ## Linting
99 |
100 | A `prettier` config is included, with the only update being `printWidth: 100`.
101 |
102 | > As of v2.0.0, stylelint was removed.
103 |
104 | ## Sass Framework
105 |
106 | Review the [styling documentation](https://5t3ph.github.io/html-sass-jumpstart/) for the included minimal Sass framework, particularly the theme variables, to quickly customize the starter.
107 |
108 | The only notable differences are:
109 |
110 | 1. `sitenav` - adjust the styles for the navigation header that appears on pages
111 | 1. `tdbc-anchor` - styles for the `#` anchor that appears next to page headings ([or turn that feature off](#anchor-links)) can be adjusted in `sass/_utilities`
112 | 1. Additional `article`-scoped styling for typography as it appears on `pages`
113 | 1. A theme for the [`prism` syntax highlighting](#prism-syntax-highlighting) for code blocks. You can adjust or replace the theme in `sass/_prism`.
114 |
115 | Additionally, the Sass in this starter is processed using LightningCSS by way of my plugin: [@11tyrocks/eleventy-plugin-sass-lightningcss](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-sass-lightningcss). This affords you access to some super modern CSS features, if you choose to use them.
116 |
117 | ### Fonts
118 |
119 | The default font is [Baloo 2](https://fonts.google.com/specimen/Baloo+2) and is locally hosted with files in `fonts/`. If you swap to a different font, be sure to remove the font files as well as the `@font-face` rules at the top of `sass/_fonts.scss`, and update the `$tdbc-font-family` Sass variable.
120 |
121 | ## Anchor Links
122 |
123 | Anchor links next to headings throughout Markdown content are generated by an add-on plugin for `markdownIt`.
124 |
125 | This feature can be adjusted or removed in the `.eleventy.js` config file.
126 |
127 | ## Generated Features
128 |
129 | ### Sitemap
130 |
131 | A `sitemap.xml` is generated from all available content.
132 |
133 | To exclude non-page or non-public content from the sitemap, include `eleventyExcludeFromCollections: true` in frontmatter, or [create a custom filter](https://www.11ty.dev/docs/collections/#advanced-custom-filtering-and-sorting).
134 |
135 | ### RSS Feed
136 |
137 | An RSS feed is included, and output at `[siteurl]/feed/feed.xml`.
138 |
139 | If publishing from Netlify, the included `netlify.toml` file will create a redirect so that the feed becomes available at `[siteurl]/feed`.
140 |
141 | ## Prism Syntax Highlighting
142 |
143 | Syntax highlighting of inline or code blocks found within Markdown content is provided by Prism via `@11ty/eleventy-plugin-syntaxhighlight`.
144 |
145 | You can change the theme used in `sass/_prism.scss`.
146 |
147 | Or, remove the plugin if you are not in need of code highlighting.
148 |
149 | ## .eleventy.js Config Features
150 |
151 | ### Overrides
152 |
153 | - **Input directory**: `src`
154 | - **Output directory**: `public`
155 | - **Layout directory**: `_layouts`
156 |
157 | Also, `markdownLibrary` is extended to add the `markdownItAnchor` plugin for [anchor links](#anchor-links).
158 |
159 | ### Shortcode: `year`
160 |
161 | Returns the current `YYYY` year, used by the footer copyright.
162 |
163 | ### Filter: `slug`
164 |
165 | Makes the default `slug` function more strict to ensure things like excluding emojis and enforcing lowercase.
166 |
167 | ## VSCode Tips
168 |
169 | ### Nunjucks
170 |
171 | If you haven't previously worked with Nunjucks, you will want a syntax highlighting extension: [Nunjucks](https://marketplace.visualstudio.com/items?itemName=ronnidc.nunjucks)
172 |
173 | In addition, you may want to ensure Emmet works on `.njk` files by updating/adding the following in the `settings.json`:
174 |
175 | ```json
176 | "emmet.includeLanguages": {
177 | "nunjucks": "html",
178 | },
179 | ```
180 |
181 | ### Formatting
182 |
183 | As noted previously, a `prettier` config is included, and you may want to get the
184 | Prettier extension and update your VSCode settings to "Format on Save".
185 |
186 | However, to format template files Prettier doesn't recognize like `.njk`, you can update the "Language Mode" on the currently open file from "Nunjucks" (or other current templating language) to "HTML" to allow formatting to be applied. Then, flip it back to re-allow the syntax highlighting if needed.
187 |
188 | This is located in the VSCode bottom toolbar near the right-hand side and will display the value of the current file's detected language. Click the name to open the selector.
189 |
--------------------------------------------------------------------------------
/src/pages/helloworld.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Hello World"
3 | description: 'A demo of the "Page" template and kitchen sink sample of styled elements.'
4 | ---
5 |
6 | > Credit for the kitchen sink elements to the ["Just the Docs"](https://github.com/pmarsceill/just-the-docs) project by [pmarsceill](https://github.com/pmarsceill).
7 |
8 | # Header 1
9 |
10 | This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
11 |
12 | Text can be **bold**, _italic_, or ~~strikethrough~~.
13 |
14 | [Link to another page](/about).
15 |
16 | ## Header 2
17 |
18 | > This is a blockquote following a header.
19 | >
20 | > When something is important enough, you do it even if the odds are not in your favor.
21 |
22 | ### Header 3
23 |
24 | ```js
25 | // Javascript code with syntax highlighting.
26 | var fun = function lang(l) {
27 | dateformat.i18n = require("./lang/" + l);
28 | return true;
29 | };
30 | ```
31 |
32 | ```ruby
33 | # Ruby code with syntax highlighting
34 | GitHubPages::Dependencies.gems.each do |gem, version|
35 | s.add_dependency(gem, "= #{version}")
36 | end
37 | ```
38 |
39 | ```
40 | Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
41 | ```
42 |
43 | #### Header 4
44 |
45 | - This is an unordered list following a header.
46 | - This is an unordered list following a header.
47 | - This is an unordered list following a header.
48 |
49 | ##### Header 5
50 |
51 | 1. This is an ordered list following a header.
52 | 2. This is an ordered list following a header.
53 | 3. This is an ordered list following a header.
54 |
55 | ### There's a horizontal rule below this.
56 |
57 | ---
58 |
59 | ### Here is an unordered list:
60 |
61 | - Item foo
62 | - Item bar
63 | - Item baz
64 | - Item zip
65 |
66 | ### And an ordered list:
67 |
68 | 1. Item one
69 | 1. Item two
70 | 1. Item three
71 | 1. Item four
72 |
73 | ### And a nested list:
74 |
75 | - level 1 item
76 | - level 2 item
77 | - level 2 item
78 | - level 3 item
79 | - level 3 item
80 | - level 1 item
81 | - level 2 item
82 | - level 2 item
83 | - level 2 item
84 | - level 1 item
85 | - level 2 item
86 | - level 2 item
87 | - level 1 item
88 |
89 | ### Small Image
90 |
91 | 
92 |
93 | ### Large image
94 |
95 | 
96 |
--------------------------------------------------------------------------------
/src/pages/pages.json:
--------------------------------------------------------------------------------
1 | {
2 | "tags": "pages",
3 | "layout": "page",
4 | "permalink": "/{{ page.fileSlug }}/"
5 | }
6 |
--------------------------------------------------------------------------------