Skip to content

Commit 12833ba

Browse files
lazdJian Liaojianliao
authored
docs: bring in main site content to dev site (#646)
* docs: bring in main site content to dev site * feat: add adobe global footer * feat: refactor and apply global footer to every page * fix: move footer out of spectrum-Site-mainContainer * fix: add a wrapper for mainContainer and footerContainer * fix: fix truncation example * fix: fix wrapping example page * docs: fix margin for homepage content, grid for home cards * docs: add dir attr so things render right * docs: correct Adobe logo color * docs: sentence case in nav * fix: padding, margin, and all that * fix: get layout closer to Spectrum site * fix: correct Adobe logo color * docs: fix that pesky sentence casing * fix: global footer will change color and backgroup with theme switcher * fix: global footer will change color and backgroup with theme switcher * docs: make example image a little smaller * docs: make Prism theme change when page theme changes * docs: execute JS in examples on FastLoad * also, fix search reference * docs: re-use Prism dark link, remove it properly * was staying around when switching from dark -> darkest -> light * fix: hide the sidebar when doing VRT Co-authored-by: Jian Liao <jianliao@adobe.com> Co-authored-by: Jian Liao <jianliao@users.noreply.github.com>
1 parent e62419a commit 12833ba

27 files changed

+966
-683
lines changed

‎backstop_data/engine_scripts/puppet/hideStuff.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/*
2+
Copyright 2019 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
module.exports = function (page, scenario) {
14+
page.evaluate(() => {
15+
document.querySelector('#site-sidebar').hidden = true;
16+
});
17+
};

‎backstop_data/engine_scripts/puppet/onReady.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
module.exports = async (page, scenario, vp) => {
14+
await require('./hideStuff')(page, scenario);
1415
await require('./injectSpectrumThemeAndScale')(page, scenario);
1516
};

‎components/colorslider/metadata/colorslider.yml

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ examples:
1616
<div class="spectrum-ColorSlider-checkerboard" role="presentation">
1717
<div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);"></div>
1818
</div>
19-
19+
2020
<div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
2121
<div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
2222
<svg class="spectrum-ColorLoupe">
@@ -37,7 +37,7 @@ examples:
3737
<div class="spectrum-ColorSlider-checkerboard" role="presentation">
3838
<div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);"></div>
3939
</div>
40-
40+
4141
<div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
4242
<div class="spectrum-ColorHandle-color" style="background-color: rgba(0, 0, 0, 1)"></div>
4343
<svg class="spectrum-ColorLoupe">
@@ -58,7 +58,7 @@ examples:
5858
<div class="spectrum-ColorSlider-checkerboard" role="presentation">
5959
<div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);"></div>
6060
</div>
61-
61+
6262
<div class="spectrum-ColorHandle spectrum-ColorSlider-handle is-disabled">
6363
<div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
6464
<svg class="spectrum-ColorLoupe">
@@ -79,7 +79,7 @@ examples:
7979
<div class="spectrum-ColorSlider-checkerboard" role="presentation">
8080
<div class="spectrum-ColorSlider-gradient" role="presentation" style="background: linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);"></div>
8181
</div>
82-
82+
8383
<div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
8484
<div class="spectrum-ColorHandle-color" style="background-color: rgb(255, 0, 0)"></div>
8585
<svg class="spectrum-ColorLoupe">
@@ -100,7 +100,7 @@ examples:
100100
<div class="spectrum-ColorSlider-checkerboard" role="presentation">
101101
<canvas class="spectrum-ColorSlider-gradient" role="presentation"></canvas>
102102
</div>
103-
103+
104104
<div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
105105
<div class="spectrum-ColorHandle-color" style="background-color: #8ED6FF"></div>
106106
<svg class="spectrum-ColorLoupe">
@@ -122,7 +122,7 @@ examples:
122122
123123
var gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
124124
125-
gradient.addColorStop(0, '#8ED6FF');
125+
gradient.addColorStop(0, '#8ED6FF');
126126
gradient.addColorStop(1, '#004CB3');
127127
128128
context.fillStyle = gradient;
@@ -136,7 +136,7 @@ examples:
136136
<div class="spectrum-ColorSlider-checkerboard" role="presentation">
137137
<img class="spectrum-ColorSlider-gradient" role="presentation" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="></img>
138138
</div>
139-
139+
140140
<div class="spectrum-ColorHandle spectrum-ColorSlider-handle">
141141
<div class="spectrum-ColorHandle-color" style="background-color: #ff00de"></div>
142142
<svg class="spectrum-ColorLoupe">

‎components/site/index.css

Lines changed: 71 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ governing permissions and limitations under the License.
2727
--spectrum-csscomponent-margin: var(--spectrum-global-dimension-size-500);
2828
--spectrum-csscomponent-padding: var(--spectrum-global-dimension-size-700);
2929
--spectrum-csscomponent-max-width: 1080px;
30-
--spectrum-csscomponent-sectionheading-margin-top: var(--spectrum-global-dimension-size-700);
31-
--spectrum-csscomponent-sectionheading-margin-bottom: var(--spectrum-global-dimension-size-500);
30+
--spectrum-csscomponent-sectionheading-margin-top: var(--spectrum-global-dimension-size-600);
31+
--spectrum-csscomponent-sectionheading-margin-bottom: var(--spectrum-global-dimension-size-400);
3232
--spectrum-csscomponent-heading-margin-bottom: var(--spectrum-global-dimension-size-500);
3333

34-
--spectrum-csscomponent-description-margin-bottom: var(--spectrum-global-dimension-size-900);
34+
--spectrum-csscomponent-description-margin-bottom: var(--spectrum-global-dimension-size-600);
3535
--spectrum-csscomponent-description-margin-top: var(--spectrum-global-dimension-size-300);
3636

3737
--spectrum-csscomponent-statuscontainer-margin-x: var(--spectrum-global-dimension-size-200);
@@ -98,7 +98,7 @@ governing permissions and limitations under the License.
9898
flex-direction: row;
9999
align-items: center;
100100

101-
padding: var(--spectrum-global-dimension-size-400);
101+
padding: var(--spectrum-global-dimension-size-350) var(--spectrum-global-dimension-size-300);
102102

103103
text-decoration: none;
104104
}
@@ -112,7 +112,7 @@ governing permissions and limitations under the License.
112112
}
113113

114114
.spectrum-Site-search {
115-
padding: 0 var(--spectrum-global-dimension-size-400) var(--spectrum-global-dimension-size-400) var(--spectrum-global-dimension-size-400);
115+
padding: 0 var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300) var(--spectrum-global-dimension-size-300);
116116
}
117117

118118
.spectrum-Site-searchResults {
@@ -130,19 +130,19 @@ governing permissions and limitations under the License.
130130
}
131131

132132
.spectrum-Site-logo {
133-
margin-inline-end: var(--spectrum-global-dimension-size-175);
134-
color: rgb(225, 37, 27);
133+
margin-inline-end: var(--spectrum-global-dimension-size-200);
134+
color: #FA0F00;
135135
}
136136

137137
.spectrum--medium {
138138
.spectrum-Site-logo {
139-
block-size: 31px;
139+
block-size: 32px;
140140
}
141141
}
142142

143143
.spectrum--large {
144144
.spectrum-Site-logo {
145-
block-size: 39px;
145+
block-size: 40px;
146146
}
147147
}
148148

@@ -156,42 +156,45 @@ governing permissions and limitations under the License.
156156
margin-block-start: var(--spectrum-global-dimension-static-size-1000);
157157
}
158158

159-
.spectrum-Site-mainContainer {
160-
flex-grow: 1;
161-
border-block: none;
162-
163-
overflow-y: auto;
164-
}
165-
166159
.spectrum-Site-page {
167160
padding: 40px 52px 24px 52px;
168161
max-inline-size: 1080px;
169162
margin: auto;
163+
box-sizing: border-box;
170164
}
171165

172166
.spectrum-Site-hero {
173-
max-inline-size: 75%;
167+
max-inline-size: 1080px;
174168
margin: auto;
175169
}
176170

177171
.spectrum-Site-heroHeading {
178172
margin-block-end: 16px;
179173
}
174+
.spectrum-Site-heroHeading .spectrum-Heading {
175+
margin-top: 0 !important;
176+
}
180177

181178
.spectrum-Site-heroImage {
182-
margin-block-start: 40px;
183-
margin-block-end: 80px;
179+
display: block;
184180
max-inline-size: 100%;
181+
margin-block-start: var(--spectrum-global-dimension-size-700);
182+
margin-block-end: var(--spectrum-global-dimension-size-700);
183+
margin-inline-start: auto;
184+
margin-inline-end: auto;
185+
border-radius: var(--spectrum-alias-border-radius-regular);
185186
}
186187

187-
.spectrum-Site-footer {
188-
display: flex;
189-
flex-direction: row;
190-
justify-content: space-between;
191-
}
192-
.spectrum-Site-footerContent {
188+
.spectrum-Site-mainContent {
189+
flex-grow: 1;
190+
border-block: none;
191+
overflow-y: auto;
193192
}
194-
.spectrum-Site-footerCopyright {
193+
194+
.spectrum-Site-footerContainer {
195+
max-inline-size: var(--spectrum-csscomponent-max-width);
196+
margin: var(--spectrum-csscomponent-margin) auto;
197+
padding: 0 var(--spectrum-csscomponent-padding);
195198
}
196199

197200
/* Kill the overlay without animating when the page is resized */
@@ -537,6 +540,48 @@ governing permissions and limitations under the License.
537540
}
538541
}
539542

543+
.spectrum-CenteredImage {
544+
width: 100%;
545+
max-width: 720px;
546+
margin: auto;
547+
display: block;
548+
}
549+
550+
.spectrum-CodeBlock {
551+
border-width: var(--spectrum-alias-border-size-thin);
552+
border-style: solid;
553+
border-radius: var(--spectrum-global-dimension-size-50);
554+
padding: var(--spectrum-global-dimension-size-175) var(--spectrum-global-dimension-size-200);
555+
556+
margin: var(--spectrum-global-dimension-size-250) 0;
557+
}
558+
559+
.spectrum-HomeCards {
560+
display: grid;
561+
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
562+
grid-gap: 1rem;
563+
margin: var(--spectrum-global-dimension-size-700) 0;
564+
}
565+
566+
.spectrum-HomeCard {
567+
display: flex;
568+
569+
align-items: flex-start;
570+
571+
margin-bottom: var(--spectrum-global-dimension-size-350);
572+
padding: 0 var(--spectrum-global-dimension-size-250);
573+
}
574+
575+
.spectrum-HomeCard-image {
576+
width: var(--spectrum-global-dimension-size-1250);
577+
margin-right: var(--spectrum-global-dimension-size-250);
578+
flex: 0 0 auto;
579+
}
580+
581+
.spectrum-HomeCard-content {
582+
flex: 1 1 auto;
583+
}
584+
540585
/* Scrollable */
541586
.u-scrollable {
542587
overflow-x: hidden;

‎components/site/skin.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ governing permissions and limitations under the License.
5656
}
5757

5858
.spectrum-CSSComponent-resource--adobe {
59-
color: rgb(255, 2, 1) !important;
59+
color: #FA0F00 !important;
6060
background-color: var(--spectrum-global-color-gray-100) !important;
6161
}
6262

@@ -103,3 +103,8 @@ governing permissions and limitations under the License.
103103
.spectrum-CSSExample-oldAPI {
104104
color: var(--spectrum-semantic-negative-color-text-small);
105105
}
106+
107+
.spectrum-CodeBlock {
108+
border-color: var(--spectrum-global-color-gray-400);
109+
background-color: var(--spectrum-global-color-gray-75);
110+
}

‎site/get-started.pug

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
doctype html
2+
html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
3+
head
4+
title Getting Started - Spectrum CSS
5+
6+
include includes/dependencies.pug
7+
8+
body
9+
10+
.spectrum-Site
11+
12+
include includes/header.pug
13+
14+
.spectrum-Site-content
15+
16+
include includes/sidebar.pug
17+
18+
.spectrum-Site-mainContent
19+
20+
.spectrum-Site-mainContainer
21+
.spectrum-Site-page.spectrum-Typography
22+
h1.spectrum-Heading.spectrum-Heading--XXL.spectrum-Heading--serif Get Started with Spectrum CSS
23+
24+
p.spectrum-Body.spectrum-Body--L We have a number of resources that outline how to set up Spectrum CSS for your project, as well as an introductory tutorial that’s a hands-on way to understand how our implementation works.
25+
26+
header(id="resources")
27+
h2.spectrum-Heading.spectrum-Heading--M
28+
a(href="#resources").spectrum-BigSubtleLink Resources
29+
hr.spectrum-Rule.spectrum-Rule--large
30+
31+
section
32+
p.spectrum-Body.spectrum-Body--L If you’re ready to jump in, here’s how to set up Spectrum CSS on our GitHub:
33+
34+
ul.spectrum-Body.spectrum-Body--L
35+
li
36+
a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/master/README.md") Full README
37+
li
38+
a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/master/README.md#importing-ui-icons") Importing icons
39+
li
40+
a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/master/README-legacy.md") IE 11 / legacy support
41+
42+
header(id="tutorial")
43+
h2.spectrum-Heading.spectrum-Heading--M
44+
a(href="#tutorial").spectrum-BigSubtleLink Tutorial: add a Spectrum button
45+
hr.spectrum-Rule.spectrum-Rule--large
46+
47+
section
48+
p.spectrum-Body.spectrum-Body--L This introductory exercise will show you how to quickly add a Spectrum button to your project.
49+
50+
h3.spectrum-Heading.spectrum-Heading--S Installing Spectrum CSS
51+
p.spectrum-Body.spectrum-Body--L Spectrum CSS requires a Node.js environment with a minimum version of 10.
52+
53+
p.spectrum-Body.spectrum-Body--L First, install the required button dependencies by running:
54+
55+
pre.spectrum-CodeBlock
56+
code.spectrum-Code.spectrum-Code--S.language-markup!=util.Prism.highlight('$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page', util.Prism.languages.markup, 'markup')
57+
58+
p.spectrum-Body.spectrum-Body--L Installed components will be available in the node_modules/@spectrum-css/ folder or on the Spectrum CSS NPM page.
59+
60+
h3.spectrum-Heading.spectrum-Heading--S Setting up global variables
61+
p.spectrum-Body.spectrum-Body--L Create a new HTML file (e.g., #[code.spectrum-Code.spectrum-Code--S button.html]) in your project’s root folder.
62+
63+
p.spectrum-Body.spectrum-Body--L or displaying a button in Spectrum’s light color theme and medium scale, a couple of classes need to be added to the document’s #[code.spectrum-Code.spectrum-Code--S &lt;html&gt;] tag:
64+
65+
pre.spectrum-CodeBlock
66+
code.spectrum-Code.spectrum-Code--S.language-markup!=util.Prism.highlight('<html class="spectrum spectrum--medium spectrum--light">', util.Prism.languages.markup, 'markup')
67+
68+
h3.spectrum-Heading.spectrum-Heading--S Adding Spectrum CSS
69+
p.spectrum-Body.spectrum-Body--L Inside the #[code.spectrum-Code.spectrum-Code--S &lt;head&gt;] tag, include the stylesheets that contain the design system tokens for global variables, scales, and color themes, as well as the stylesheets for the components themselves:
70+
71+
-
72+
htmlMarkup = util.Prism.highlight(`<head>
73+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
74+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
75+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
76+
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
77+
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
78+
</head>`, util.Prism.languages.markup, 'markup');
79+
pre.spectrum-CodeBlock
80+
code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
81+
82+
p.spectrum-Body.spectrum-Body--L Inside the #[code.spectrum-Code.spectrum-Code--S &lt;body&gt;] tag, add the markup for a Spectrum button. Note that the example also includes the CSS class name, #[code.spectrum-Code.spectrum-Code--S spectrum-Button--cta], to use the call to action (CTA) option.
83+
84+
-
85+
htmlMarkup = util.Prism.highlight(`<button class="spectrum-Button spectrum-Button--cta">
86+
<span class="spectrum-Button-label">Button</span>
87+
</button>`, util.Prism.languages.markup, 'markup');
88+
pre.spectrum-CodeBlock
89+
code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
90+
91+
p.spectrum-Body.spectrum-Body--L Here’s what your final button.html file should look like:
92+
93+
-
94+
htmlMarkup = util.Prism.highlight(`<html class="spectrum spectrum--light spectrum--medium">
95+
<head>
96+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-global.css">
97+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-medium.css">
98+
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-light.css">
99+
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
100+
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
101+
</head>
102+
<body>
103+
<button class="spectrum-Button spectrum-Button--cta">
104+
<span class="spectrum-Button-label">Button</span>
105+
</button>
106+
</body>
107+
</html>`, util.Prism.languages.markup, 'markup');
108+
pre.spectrum-CodeBlock
109+
code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
110+
111+
img(alt="Screenshot of the rendered CTA button in a browser window", src="img/button-screen-shot.png").spectrum-CenteredImage
112+
113+
header(id="contribute")
114+
h2.spectrum-Heading.spectrum-Heading--M
115+
a(href="#contribute").spectrum-BigSubtleLink Contribute to Spectrum CSS
116+
hr.spectrum-Rule.spectrum-Rule--large
117+
118+
p.spectrum-Body.spectrum-Body--L We’d love for you to contribute to the Spectrum CSS project. Review the <a href="https://github.com/adobe/spectrum-css/blob/master/.github/CONTRIBUTING.md" class="spectrum-Link spectrum-Link--quiet" target="_blank">contribution guidelines on our GitHub</a> to get started.
119+
120+
include includes/footer.pug
121+
122+
include includes/pageBottom.pug

0 commit comments

Comments
 (0)