diff --git a/patternfly-org-demo/src/images/homeHeroLines.svg b/patternfly-org-demo/src/images/homeHeroLines.svg
new file mode 100644
index 0000000..6aa64db
--- /dev/null
+++ b/patternfly-org-demo/src/images/homeHeroLines.svg
@@ -0,0 +1,94 @@
+
+
+
diff --git a/patternfly-org-demo/src/pages/homepage.css b/patternfly-org-demo/src/pages/homepage.css
index 4ecc4a0..306ebc0 100644
--- a/patternfly-org-demo/src/pages/homepage.css
+++ b/patternfly-org-demo/src/pages/homepage.css
@@ -4,16 +4,31 @@
.pf4-c-background-image {
background-size: contain;
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NzMuNCAxMTA1LjIiPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4MTYuMDI4IiB5MT0iMTU5MC4xMTciIHgyPSI3NTQuODc3IiB5Mj0iMjA0NS4yNjQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNhKSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02NzMuNCAwTDI3Ni4xIDMyMyIvPjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4MjEuMTgzIiB5MT0iMTUzNy44MTYiIHgyPSI3NjEuMDUzIiB5Mj0iMTk4NS4zNjciIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNiKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgNzguNkwyMTEgMzQ2LjUiLz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iODk3LjA2NyIgeTE9IjEyOTEuNTQ2IiB4Mj0iODEwLjgxOCIgeTI9IjE5MzMuNDg4IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEuMTEzOCAuOTQ4OCAuNjkyOCAtLjgxMzIgLTE2NTkuMzczIDg5NC40MTMpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1NGVlZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjEyNiIgc3RvcC1jb2xvcj0iIzQ1Y2ZlZSIgc3RvcC1vcGFjaXR5PSIuMTI2Ii8+PHN0b3Agb2Zmc2V0PSIuMjgzIiBzdG9wLWNvbG9yPSIjMzdhZWRjIiBzdG9wLW9wYWNpdHk9Ii4yODMiLz48c3RvcCBvZmZzZXQ9Ii40NDciIHN0b3AtY29sb3I9IiMyYjk1Y2UiIHN0b3Atb3BhY2l0eT0iLjQ0NyIvPjxzdG9wIG9mZnNldD0iLjYxNiIgc3RvcC1jb2xvcj0iIzIzODNjNCIgc3RvcC1vcGFjaXR5PSIuNjE2Ii8+PHN0b3Agb2Zmc2V0PSIuNzk1IiBzdG9wLWNvbG9yPSIjMWU3OGJlIiBzdG9wLW9wYWNpdHk9Ii43OTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYzc1YmMiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIG9wYWNpdHk9Ii41IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjYykiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgMTU0LjRsLTUyOSA0NzcuOCIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI4OTcuNDkzIiB5MT0iMTUyNy43NTQiIHgyPSI4OTYuMjM2IiB5Mj0iMTUzNy4xMDkiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNkKSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgNjgzTDEyOSAzMTUuMyIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDc2LjExIiB5MT0iMTE2OC44NDYiIHgyPSIxMDUxLjQ3NyIgeTI9IjEzNTIuMTg1IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEuMTEzOCAuOTQ4OCAuNjkyOCAtLjgxMzIgLTE2NTkuMzczIDg5NC40MTMpIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1NGVlZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjEyNiIgc3RvcC1jb2xvcj0iIzQ1Y2ZlZSIgc3RvcC1vcGFjaXR5PSIuMTI2Ii8+PHN0b3Agb2Zmc2V0PSIuMjgzIiBzdG9wLWNvbG9yPSIjMzdhZWRjIiBzdG9wLW9wYWNpdHk9Ii4yODMiLz48c3RvcCBvZmZzZXQ9Ii40NDciIHN0b3AtY29sb3I9IiMyYjk1Y2UiIHN0b3Atb3BhY2l0eT0iLjQ0NyIvPjxzdG9wIG9mZnNldD0iLjYxNiIgc3RvcC1jb2xvcj0iIzIzODNjNCIgc3RvcC1vcGFjaXR5PSIuNjE2Ii8+PHN0b3Agb2Zmc2V0PSIuNzk1IiBzdG9wLWNvbG9yPSIjMWU3OGJlIiBzdG9wLW9wYWNpdHk9Ii43OTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxYzc1YmMiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIG9wYWNpdHk9Ii41IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZSkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNjczLjQgOTUwLjFMMTI0LjEgODA3LjMiLz48bGluZWFyR3JhZGllbnQgaWQ9ImYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTE0Ni4wNiIgeTE9IjkxOS4zOTYiIHgyPSIxMDkzLjY3IiB5Mj0iMTMwOS4zMzUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMS4xMTM4IC45NDg4IC42OTI4IC0uODEzMiAtMTY1OS4zNzMgODk0LjQxMykiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzU0ZWVmZiIgc3RvcC1vcGFjaXR5PSIwIi8+PHN0b3Agb2Zmc2V0PSIuMTI2IiBzdG9wLWNvbG9yPSIjNDVjZmVlIiBzdG9wLW9wYWNpdHk9Ii4xMjYiLz48c3RvcCBvZmZzZXQ9Ii4yODMiIHN0b3AtY29sb3I9IiMzN2FlZGMiIHN0b3Atb3BhY2l0eT0iLjI4MyIvPjxzdG9wIG9mZnNldD0iLjQ0NyIgc3RvcC1jb2xvcj0iIzJiOTVjZSIgc3RvcC1vcGFjaXR5PSIuNDQ3Ii8+PHN0b3Agb2Zmc2V0PSIuNjE2IiBzdG9wLWNvbG9yPSIjMjM4M2M0IiBzdG9wLW9wYWNpdHk9Ii42MTYiLz48c3RvcCBvZmZzZXQ9Ii43OTUiIHN0b3AtY29sb3I9IiMxZTc4YmUiIHN0b3Atb3BhY2l0eT0iLjc5NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFjNzViYyIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNmKSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik02NzMuNCAxMDEyLjZsLTYyNi45IDc2LjMiLz48L3N2Zz4=),linear-gradient(180deg,#004080,#06c);
width: 100%;
max-width: 100%;
height: 100%;
background-repeat: no-repeat;
- background-position: top, 100%;
- /* background-position: 100% 0,100%; */
+ /* background-image: url("../images/homeHeroLines.svg"), linear-gradient(to bottom, #004080, #0066cc); */
+ background-image: none,linear-gradient(180deg,#004080,#06c);
background-size: cover;
}
+@media (min-width: 576px) {
+ .pf4-c-background-image {
+ background-position: 50%, 100%;
+ background-image: url("../images/aboutPF4Lines.svg"), linear-gradient(to bottom, #004080, #0066cc);
+ background-size: contain;
+ }
+}
+
+@media (min-width: 992px) {
+ .pf4-c-background-image {
+ background-image: url("../images/homeHeroLines.svg"), linear-gradient(to bottom, #004080, #0066cc);
+ background-position: top, right;
+ background-size: cover;
+ }
+}
+
.pf-m-white,
.pf-m-white.ws-mdx-a {
color: white;
@@ -104,6 +119,12 @@
padding: var(--pf-global--spacer--xl) var(--pf-global--spacer--2xl) var(--pf-global--spacer--2xl);
}
+.ws-homepage-main-section.pf4-c-background-image .pf4-site-c-hero {
+ margin-bottom: 0;
+ max-width: 600px;
+ margin: 24px auto 0;
+}
+
.ws-mdx-a {
font-size: 18px;
}
diff --git a/patternfly-org-demo/src/pages/index.js b/patternfly-org-demo/src/pages/index.js
index 9783f93..7a0cfc4 100644
--- a/patternfly-org-demo/src/pages/index.js
+++ b/patternfly-org-demo/src/pages/index.js
@@ -24,7 +24,7 @@ const IndexPage = ({ location }) => (
@@ -161,9 +161,9 @@ const IndexPage = ({ location }) => (
-
+
{patternFlyPrinciples}
-
+
Modular & flexible
Arrange self-contained components in any number of ways to build a variety of applications and