diff --git a/_includes/case-study-styles.html b/_includes/case-study-styles.html deleted file mode 100644 index 48058bd27b..0000000000 --- a/_includes/case-study-styles.html +++ /dev/null @@ -1,313 +0,0 @@ - - diff --git a/_includes/code.html b/_includes/code.html index ce653054e8..59a27ebf1a 100644 --- a/_includes/code.html +++ b/_includes/code.html @@ -7,5 +7,20 @@ ``` {: id="{{include.file | handleize}}"} {% endcapture %} - -
{% if ghlink %}{% endif %}{{include.file}}
{{ mysample | markdownify }}
\ No newline at end of file + + + + + + + + + + + +
+ {% if ghlink %}{% endif %} + {{include.file}} + {% if ghlink %}{% endif %} + +
{{ mysample | markdownify }}
diff --git a/_includes/footer-scripts.html b/_includes/footer-scripts.html new file mode 100644 index 0000000000..091545d12a --- /dev/null +++ b/_includes/footer-scripts.html @@ -0,0 +1,53 @@ + + + + + + + diff --git a/_includes/head-header.html b/_includes/head-header.html deleted file mode 100644 index fa859604d2..0000000000 --- a/_includes/head-header.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - - - - - - - {% seo %} - - -
-
- - -
- - - Try Kubernetes - -
- - -
diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000000..2f85549db5 --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,17 @@ + + + + + + + + + + {% if page.class == "gridPage" %}{% endif %} + + + + + + {% seo %} + diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000000..436e4262c4 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,58 @@ +
+ +
+ + +
+ + + Try Kubernetes + +
+ + +
diff --git a/_layouts/basic.html b/_layouts/basic.html new file mode 100644 index 0000000000..d2b684df52 --- /dev/null +++ b/_layouts/basic.html @@ -0,0 +1,15 @@ + + + + {% include head.html %} + + + {% include header.html %} + + {{ content }} + + {% include footer.html %} + + {% include footer-scripts.html %} + + diff --git a/_layouts/docwithnav.html b/_layouts/docwithnav.html index 4ac68e8acd..073e1c9344 100755 --- a/_layouts/docwithnav.html +++ b/_layouts/docwithnav.html @@ -10,7 +10,11 @@ -{% include head-header.html %} +{% include head.html %} + + + +{% include header.html %}
@@ -43,6 +47,7 @@ +

Edit This Page

@@ -71,57 +76,7 @@
{% include_cached footer.html %} +{% include footer-scripts.html %} - - - - - diff --git a/case-studies/index.html b/case-studies/index.html index f593d73fb9..e4e15111c5 100644 --- a/case-studies/index.html +++ b/case-studies/index.html @@ -1,11 +1,10 @@ --- title: Case Studies +layout: basic +class: gridPage +cid: caseStudies --- - - -{% include head-header.html %} -

Kubernetes User Case Studies

A collection of users running Kubernetes in production.
@@ -98,8 +97,3 @@ title: Case Studies -{% include footer.html %} -{% include case-study-styles.html %} - - - diff --git a/case-studies/pearson.html b/case-studies/pearson.html index 50f16ce7ae..45428b0bf3 100644 --- a/case-studies/pearson.html +++ b/case-studies/pearson.html @@ -1,11 +1,10 @@ --- title: Pearson Case Study +layout: basic +class: gridPage +cid: caseStudies --- - - -{% include head-header.html %} -

Pearson Case Study

@@ -80,9 +79,3 @@ title: Pearson Case Study
- -{% include footer.html %} -{% include case-study-styles.html %} - - - diff --git a/case-studies/wikimedia.html b/case-studies/wikimedia.html index 2d3b686128..7431c13650 100644 --- a/case-studies/wikimedia.html +++ b/case-studies/wikimedia.html @@ -1,11 +1,10 @@ --- title: Wikimedia Case Study +layout: basic +class: gridPage +cid: caseStudies --- - - -{% include head-header.html %} -

Wikimedia Case Study

@@ -95,9 +94,3 @@ title: Wikimedia Case Study - -{% include footer.html %} -{% include case-study-styles.html %} - - - diff --git a/community.html b/community/index.html similarity index 94% rename from community.html rename to community/index.html index a10a100375..4686ebb442 100644 --- a/community.html +++ b/community/index.html @@ -1,13 +1,11 @@ --- title: Community +layout: basic +cid: community --- - - -{% include head-header.html %} -
-

Community

+

Community

@@ -61,8 +59,3 @@ title: Community
- -{% include footer.html %} - - - diff --git a/css/gridpage.css b/css/gridpage.css new file mode 100644 index 0000000000..96a39af9c6 --- /dev/null +++ b/css/gridpage.css @@ -0,0 +1,310 @@ +#caseStudyTitle { + margin-top: 1em !important; +} + +.gridPage p { + color: rgb(26,26,26) !important; + margin-left: 0 !important; + padding-left: 0 !important; + font-weight: 300 !important; +} + +.gridPage #mainContent { + padding: 0; +} + +.gridPage #mainContent .content { + padding-top: 0; +} + +.gridPage main { + max-width: 1100px !important; +} + +.gridPage .content { + position: relative; + margin: 0 auto 50px; + max-width: 90%; +} + +.gridPage .content p { + line-height: 24px !important; +} + +.gridPage .content h3 { + padding: 0 !important; +} + +.gridPage #hero h5 { + padding-left: 20px; + margin: 0; +} + +.case-studies { + position: relative; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: 50px; +} + +.case-study { + position: relative; + width: 50%; + padding: 0 40px 0 242px; + margin-bottom: 60px; + min-height: 152px; +} + +.case-study:nth-child(3), .case-study:nth-child(4) { + margin-bottom: 0; +} + +.case-study img { + position: absolute; + top: 0; + left: 0; +} + +.gridPage #mainContent .content .case-study p { + font-family: "Roboto", sans-serif; + font-size: 16px; + padding: 0; +} + +p.attrib { + font-style: italic; +} + +.gridPage #video { + background: #f9f9f9; + height: auto; + /*height: 340px;*/ +} + +.gridPage #video main { + position: relative; + max-width: 900px !important; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 50px 20px; +} + +.gridPage #video main > div { + width: 50%; +} + +.gridPage #video main #zulilyLogo { + width: 100px; +} + +.gridPage #video main img { + max-width: 100%; +} + +.gridPage #video h3 { + font-size: 32px; + font-weight: 300; + line-height: 38px; + max-width: 80%; + margin: 0 0 1em 0; +} + +.gridPage #video p { + margin: 0; +} + +.gridPage #video p.attrib { + margin-bottom: 20px; +} + +.gridPage #video button > h6 { + font-size: 18px; + font-weight: 500; + margin: 1em 0; + color: #326de6; +} + +.gridPage #users { + padding: 50px; +} + +.gridPage #users main { + max-width: 1150px !important; +} + +.gridPage #users main h3 { + padding-left: 20px; + margin-bottom: 20px; +} + +.gridPage #usersGrid { + position: relative; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.gridPage #usersGrid a { + display: inline-block; + margin: 5px; +} + +.gridPage #usersGrid a img { + box-shadow: 1px 1px 2px transparent; + transition: box-shadow 0.25s; +} + +.gridPage #usersGrid a img:hover { + box-shadow: 1px 1px 2px #cccccc; +} + +.gridPage #usersGrid a:last-child img, +.gridPage #usersGrid a:last-child img:hover { + box-shadow: 1px 1px 2px transparent; +} + +.tell-your-story { + border: 1px solid #dddddd; + border-radius: 6px; + box-shadow: 1px 2px 2px #dddddd; +} + +.gridPage .feature { + position: relative; + padding: 20px 0 20px 242px; +} + +.gridPage .feature img { + position: absolute; + top: 20px; + left: 0; +} + +section.bullets { + background-color: #eeeeee; + margin-bottom: 50px; +} + +section.bullets main { + position: relative; + max-width: 1100px; + padding: 50px 0; +} + +section.bullets .content { + position: relative; + display: flex; + flex-wrap: wrap; + margin-bottom: 0 !important; +} + +.bullet { + position: relative; + width: 50%; + padding: 15px 30px; +} + +.bullet h4 { + margin-bottom: 0.5em; +} + +.bullet li { + margin-left: 1.25em; + list-style: disc; + font-weight: 300; + color: rgb(26,26,26); + line-height: 1.5em; + margin-bottom: 0.5em; +} + +.details h4, p { + margin-bottom: 0.5em; +} + +.gridPage .feature p.quote { + font-size: 20px; + line-height: 28px !important; +} + +@media screen and (max-width: 1024px){ + .case-study { + padding: 0 10%; + margin-bottom: 50px; + } + + .case-study img { + position: relative; + } + + .case-study p.quote { + margin-top: 20px !important; + } + + .case-study p.attrib { + font-style: italic; + } +} + +@media screen and (max-width: 900px){ + .gridPage #video main { + flex-direction: column; + align-items: center; + } + + .gridPage #video main > div { + width: 400px; + } + + .gridPage #video main > div + div { + margin-top: 30px; + } + + .gridPage #video h3 { + max-width: 100%; + } +} + +@media screen and (max-width: 640px){ + .case-study { + width: 100%; + } + + .case-study:nth-child(3) { + margin-bottom: 60px; + } + + .case-study img { + left: 50%; + transform: translateX(-50%); + } + + .gridPage .feature { + margin-top: 50px; + padding: 180px 0 0; + } + + .gridPage .feature img { + top: 0; + left: 50%; + transform: translateX(-50%); + } +} + +@media screen and (max-width: 480px){ + .gridPage #hero { + padding-right: 20px; + padding-left: 20px; + } + + .gridPage #video main > div { + width: 80%; + min-width: 280px; + } + + .bullet { + width: 100%; + } +} diff --git a/index.html b/index.html index 78b964ce39..5e860832d7 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,8 @@ --- +layout: basic +cid: home --- - - - -{% include head-header.html %} -
@@ -182,23 +179,3 @@ - - - - - - diff --git a/partners/index.html b/partners/index.html index 5a8da670a9..13ee6e2396 100644 --- a/partners/index.html +++ b/partners/index.html @@ -1,11 +1,10 @@ --- title: Partners +layout: basic +class: gridPage +cid: partners --- - - -{% include head-header.html %} -

Kubernetes Partners

Growing the Kubernetes ecosystem.
@@ -22,9 +21,6 @@ title: Partners
-{% include footer.html %} -{% include case-study-styles.html %} - @@ -32,6 +28,3 @@ title: Partners - - -