Updates to box.html and golfnow.html (kubernetes#4277)

* Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * Add files via upload * fix layout and logo * fix golfnow layout and logo * fix golfnow link * Update box.html * Update golfnow.html * add custom css logic * switch layouts back to *basic* * remove class gridPage * debug * Update style_golfnow.css realized the footer class was what making the bg dark, so added an override to white * remove logo class on logo image * remove logo class from golfnow image * add mechanism to turn off default styles * debug liquid logic * rename variable * Setup custom SASS * test custom sass for case studies * remove class for image logos * cleanup and simplify * New logo for landing page * change GolfNow logo on landing page * fix spacing on case studies landing page * Updated custom sass Fixed mobile issues and some spacing issues * Update _case-studies.sass * Update _case-studies.sass
jiayingz · Jul 20, 2017 · 9a89b61 · 9a89b61
1 parent 2921631
commit 9a89b61
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 49 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -4,10 +4,11 @@
     <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic">
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
-    <link rel="stylesheet" type="text/css" href="/css/styles.css">
+    {% if page.case_study_styles %}<link rel="stylesheet" type="text/css" href="/css/case_study_styles.css"><!-- custom case_study_styles on -->{% else %}<link rel="stylesheet" type="text/css" href="/css/styles.css"><!-- default styles.css on -->{% endif %}
     <link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css">
     <link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
     {% if page.class == "gridPage" %}<link rel="stylesheet" type="text/css" href="/css/gridpage.css">{% endif %}
+    {% if page.css %}<link rel="stylesheet" type="text/css" href="{{ page.css }}"><!-- custom css added -->{% else %}<!-- no custom css detected -->{% endif %}
 
     {% if page.description %}
     <meta name="description" content="{{ page.description }}" />

diff --git a/_sass/_case-studies.sass b/_sass/_case-studies.sass
@@ -0,0 +1,99 @@
+// SASS for Case Studies pages go here:
+
+hr
+  background-color: #999999
+
+h2
+  margin-bottom: 15px !important
+
+.subhead
+  padding-bottom: 2% !important
+  padding-top: 0% !important
+
+.details
+  margin-left: 1.9%
+  padding-right: 5%
+  font-size: 16px !important
+  padding-bottom: 2% !important
+
+.section1
+  margin-bottom: 3%
+  .cols
+    width: 80% !important
+    margin-left: 6.8%
+    padding-top: 1.5%
+    .col1
+      width: 52% !important
+      font-weight: 300 !important
+    .col2
+      width: 46% !important
+
+.banner2text
+  width: 63%
+  padding-top: 10%
+  padding-left: 0% !important
+  float: initial !important
+  text-align: center
+  margin: 0 auto
+  position: relative
+
+.banner3text, .banner4text, .banner5text
+  width: 63%
+  padding-left: 0% !important
+  float: initial !important
+  text-align: center
+  margin: 0 auto
+  position: relative
+
+.fullcol
+  float: initial !important
+
+body footer
+  background-color: #585858 !important
+
+.section1
+  float: left !important
+
+.banner1
+  padding-left: 11.9% !important
+
+.banner2
+  float: initial !important
+  padding-bottom: 2% !important
+
+footer
+  padding: 0% 7%
+
+.banner4, .banner3, .banner5
+  float: initial !important
+
+@media screen and (max-width: 910px)
+  .banner2text
+    width: 47%
+    padding-top: 45%
+  .details
+    margin-left: 0%
+    margin-bottom: 3%
+  .subhead
+    padding-bottom: 0% !important
+    padding-top: 0% !important
+  .banner3
+    width: 100% !important
+
+@media screen and (max-width: 780px)
+  .section1 .cols
+    width: 100% !important
+    margin-left: 0%
+    padding-top: 5%
+    .col1, .col2
+      width: 100% !important
+      margin-left: 0% !important
+  .fullcol
+    width: 90% !important
+    margin-left: 5% !important
+  .banner1
+    padding-left: 10% !important
+    margin-bottom: 6% !important
+  .banner2text
+    padding-top: 60% !important
+    padding-bottom: 2% !important
diff --git a/case-studies/box.html b/case-studies/box.html
@@ -1,23 +1,13 @@
 ---
 title: Box Case Study
-layout: none
-class: gridPage
+layout: basic
+case_study_styles: true
 cid: caseStudies
+css: /css/style_box.css
 ---
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
-      <link rel="stylesheet" type="text/css" href="/css/style_box.css">
-    <title>Box Case Study</title>
-  </head>
-<body>
-
 
 <div class="banner1">
-  <h1>CASE STUDY: <img src="/images/box_logo.png" class="logo" width="10%" style="margin-bottom:-6px"><br>
+  <h1>CASE STUDY: <img src="/images/box_logo.png" width="10%" style="margin-bottom:-6px"><br>
     <div class="subhead">An Early Adopter Envisions
       a New Cloud Platform</div>
   </h1>
@@ -40,7 +30,6 @@ <h2>Challenge</h2>
         <br>
   </div>
 
-
   <div class="col2">
     <h2>Solution</h2>
       Over the past couple of years, Box has been decomposing its infrastructure into microservices, and became an early adopter of, as well as contributor to, <a href="http://kubernetes.io/">Kubernetes</a> container orchestration. Kubernetes, Ghods says, has allowed Box’s developers to "target a universal set of concepts that are portable across all clouds."<br><br>
@@ -52,14 +41,12 @@ <h2>Impact</h2>
 
 </section>
 
-
 <div class="banner2">
   <div class="banner2text">
       "We looked at a lot of different options, but Kubernetes really stood out....the fact that on day one it was designed to run on bare metal just as well as Google Cloud meant that we could actually migrate to it inside of our data centers, and then use those same tools and concepts to run across public cloud providers as&nbsp;well."<br><br><span style="font-size:15px;letter-spacing:0.08em">- SAM GHOUDS, CO-FOUNDER AND SERVICES ARCHITECT OF BOX</span>
   </div>
 </div>
 
-
 <section class="section2">
 
   <div class="fullcol">
@@ -122,6 +109,3 @@ <h2>2. Keep an open mind about what your company has to abstract away from devel
     "The same way it doesn’t make sense to deviate from Linux because it’s such a standard," Ghods says, "I think Kubernetes is going down the same path. It is still early days—the documentation still needs work and the user experience for writing and publishing specs to the Kubernetes clusters is still rough. When you’re on the cutting edge you can expect to bleed a little. But the bottom line is, this is where the industry is going. Three to five years from now it’s really going to be shocking if you run your infrastructure any other way."
   </div>
 </section>
-
-</body>
-</html>
diff --git a/case-studies/golfnow.html b/case-studies/golfnow.html
@@ -1,27 +1,17 @@
 ---
 title: GolfNow Case Study
-layout: none
-class: gridPage
+layout: basic
+case_study_styles: true
 cid: caseStudies
+css: /css/style_golfnow.css
 ---
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
-      <link rel="stylesheet" type="text/css" href="/css/style_golfnow.css">
-    <title>GolfNow Case Study</title>
-  </head>
-<body>
-
-  <div class="banner1">
-    <h1>CASE STUDY: <img src="/images/golfnow_logo.png" class="logo" width="20%" style="margin-bottom:-6px"><br>
+
+<div class="banner1">
+  <h1>CASE STUDY: <img src="/images/golfnow_logo.png" width="20%" style="margin-bottom:-6px"><br>
     <div class="subhead">Saving Time and Money with Cloud Native Infrastructure</div>
   </h1>
 </div>
 
-
 <div class="details">
     Company&nbsp;<b>GolfNow</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Location&nbsp;<b>Orlando, Florida</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Industry&nbsp;<b>Golf Industry Technology and Services Provider</b>
 </div>
@@ -133,6 +123,3 @@ <h2>It’s not every day that you can say you’ve slashed an operating expense
 
   </div>
 </section>
-
-</body>
-</html>
diff --git a/case-studies/index.html b/case-studies/index.html
@@ -14,12 +14,12 @@ <h5>A collection of users running Kubernetes in production.</h5>
     <main>
         <div class="content">
             <div class="case-studies">
-              <div class="case-study">
-                  <img src="/images/case_studies/golfnow.png" alt="GolfNow">
-                  <p class="quote">"We can move data centers in incredible amounts of time. If you haven’t come from the Kubernetes world and I tell you this is what I’ve been doing, you wouldn’t believe me."</p>
-                  <!--<p class="attrib">— Josh Chandler, Lead Architect, Open Platforms at GolfNow</p>-->
-                  <a href="/case-studies/golfnow/">Read about GolfNow</a>
-              </div>
+                <div class="case-study">
+                    <img src="/images/golfnow.png" alt="GolfNow">
+                    <p class="quote">"We can move data centers in incredible amounts of time. If you haven’t come from the Kubernetes world and I tell you this is what I’ve been doing, you wouldn’t believe me."</p>
+                    <!--<p class="attrib">— Josh Chandler, Lead Architect, Open Platforms at GolfNow</p>-->
+                    <a href="/case-studies/golfnow/">Read about GolfNow</a>
+                </div>
                 <div class="case-study">
                     <img src="/images/case_studies/pearson.png" alt="Pearson">
                     <p class="quote">"We chose Kubernetes because of its flexibility, ease of management and the way it improves our engineers' productivity."</p>
@@ -42,6 +42,9 @@ <h5>A collection of users running Kubernetes in production.</h5>
                     <p class="quote">"Kubernetes has the opportunity to be the new cloud platform. Because it’s a never-before-seen level of automation and intelligence surrounding infrastructure that is portable and agnostic to every way you can run your infrastructure."</p>
                     <a href="/case-studies/box/">Read about Box</a>
                 </div>
+                <div class="case-study">
+                    <p class="quote"></p>
+                </div>
             </div>
         </div>
     </main>

diff --git a/css/case_study_styles.sass b/css/case_study_styles.sass
@@ -0,0 +1,12 @@
+---
+---
+
+@import "../_sass/reset"
+@import "../_sass/skin"
+@import "../_sass/code-styles"
+
+// media queries
+@import "../_sass/base"
+@import "../_sass/case-studies"
+@import "../_sass/tablet"
+@import "../_sass/desktop"
diff --git a/css/style_golfnow.css b/css/style_golfnow.css
@@ -1,6 +1,6 @@
-#caseStudyTitle {
-    margin-top: 1em !important;
-    font-family:"Roboto", sans-serif;
+
+.golfnow {
+  width:100%;
 }
 
 p {
@@ -15,7 +15,12 @@ a {
 
 body {
   margin:0;
+  background-color:#ffffff !important;
+
+}
 
+footer {
+background-color:#ffffff !important;  
 }
 
 h1 {

diff --git a/images/golfnow.png b/images/golfnow.png