update to css (operator-framework#2896)

* update to css * spacing * adjust build page
evan-zxx · Apr 24, 2020 · 4dead84 · 4dead84
1 parent c35037c
commit 4dead84
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 54 deletions.
diff --git a/website/assets/scss/_docs.scss b/website/assets/scss/_docs.scss
@@ -0,0 +1,54 @@
+.docs {
+    ul {
+        list-style: disc;
+        margin-left: 1rem;
+    }
+    p + p {
+        margin-top: var(--of--spacer--md);
+    }
+    .td-sidebar-nav .td-sidebar-link__page {
+        font-weight: normal;
+    }
+    h1,h2,h3,h4,h5,h6 {
+        color: var(--of--Color--brand--200);
+        font-weight: 800;
+        letter-spacing: 2px;
+    }
+
+    h5, h6 {
+        font-size: var(--of--FontSize--xs);
+    }
+    h4 {
+        font-size: var(--of--FontSize--sm);
+    }
+    h3 {
+        font-size: var(--of--FontSize--md);
+    }
+    h2 {
+        font-size: var(--of--FontSize--md);
+    }
+    h1 {
+        font-size: var(--of--FontSize--lg);
+    }
+
+    @media (min-width: $ov--breakpoint--lg) {
+        h6 {
+            font-size: var(--of--FontSize--xs);
+        }
+        h5 {
+            font-size: var(--of--FontSize--xs);
+        }
+        h4 {
+            font-size: var(--of--FontSize--sm);
+        }
+        h3 {
+            font-size: var(--of--FontSize--md);
+        }
+        h2 {
+            font-size: var(--of--FontSize--lg);
+        }
+        h1 {
+            font-size: var(--of--FontSize--xl);
+        }
+    }
+}
diff --git a/website/assets/scss/_styles_project.scss b/website/assets/scss/_styles_project.scss
@@ -68,6 +68,7 @@ footer {
 
 //layout
 @import "homepage";
+@import "docs";
 
 //global
 @import "global";

diff --git a/website/content/en/build/_index.html b/website/content/en/build/_index.html
diff --git a/website/content/en/build/_index.md b/website/content/en/build/_index.md
@@ -0,0 +1,9 @@
+---
+title: Build
+linkTitle: Build
+draft: false
+menu:
+  main:
+    weight: 1
+
+---
diff --git a/website/content/en/docs/_index.md b/website/content/en/docs/_index.md
@@ -3,8 +3,7 @@ title: Operator SDK Documentation
 linkTitle: Documentation
 menu:
   main:
-    weight: 3
-weight: 20
+    weight: 2
 ---
 
 {{% alert title="Warning" color="warning" %}}

diff --git a/website/layouts/build/baseof.html b/website/layouts/build/baseof.html
@@ -18,7 +18,48 @@ <h2 class="of-heading of-heading--md">How can I build with Operator SDK?</h2>
 
          <main role="main">
           <section class="of-section-page-intro__content of-page--faq">
-            {{ .Content }}
+            <section class="of-section--largetext">
+              <div class="of-section--largetext__item">
+                  <h2 class="of-heading of-heading--xl">Installing the SDK CLI</h2>
+                  <div class="of-section--largetext__content">
+                    <p>Follow the steps in the <a href="#">installation guide</a> to learn how to install the Operator SDK CLI tool. If you are using a release version of the SDK, make sure to follow the documentation for that version. You make use any of the following installation processes:</p>
+                  <ol class="of-list-ordered">
+                    <li>Install the <a href="#">Homebrew</a> (macOS)</li>
+                    <li>Install from <a href="#">GitHub</a> release</li>
+                    <li>Compile and install from <a href="#">master</a></li>
+                  </ol>
+                  </div>
+                  <a href="#" class="of-button of-button--tertiary">Learn More
+                    <svg class="of-button__icon" enable-background="new 0 0 22 22" version="1.1" viewBox="0 0 22 22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19.5,8l-7.3-7.6c-0.4-0.4-1.1-0.4-1.5,0L9.3,1.8c-0.4,0.4-0.4,1.1,0,1.6l5.2,5.5H1.1C0.5,8.9,0,9.3,0,10V12  c0,0.6,0.5,1.1,1.1,1.1h13.5l-5.2,5.5c-0.4,0.4-0.4,1.1,0,1.6l1.4,1.5c0.4,0.4,1.1,0.4,1.5,0l9.4-9.9c0.4-0.4,0.4-1.1,0-1.6L19.5,8z  "/>
+                        </svg>
+                  </a>
+                  <p class="large-text"><span>homebrew, </span>
+                  <span>github, </span>
+                  <span>master.</span></p>
+              </div>
+              <div class="of-section--largetext__item">
+                <h2 class="of-heading of-heading--xl">CREATE AND DEPLOY AN APP-OPERATOR</h2>
+          <p class="of-section--largetext__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
+          <a href="#" class="of-button of-button--tertiary">Learn More
+                    <svg class="of-button__icon" enable-background="new 0 0 22 22" version="1.1" viewBox="0 0 22 22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19.5,8l-7.3-7.6c-0.4-0.4-1.1-0.4-1.5,0L9.3,1.8c-0.4,0.4-0.4,1.1,0,1.6l5.2,5.5H1.1C0.5,8.9,0,9.3,0,10V12  c0,0.6,0.5,1.1,1.1,1.1h13.5l-5.2,5.5c-0.4,0.4-0.4,1.1,0,1.6l1.4,1.5c0.4,0.4,1.1,0.4,1.5,0l9.4-9.9c0.4-0.4,0.4-1.1,0-1.6L19.5,8z  "/>
+                        </svg>
+                </a>
+                <p class="large-text"><span>create &, </span><span>Deploy </span></p>
+            </div>
+            <div class="of-section--largetext__item">
+                <h2 class="of-heading of-heading--xl">READ THE USER GUIDES</h2>
+                <p class="of-section--largetext__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                <a href="#" class="of-button of-button--tertiary">
+                    Learn More
+                    <svg class="of-button__icon" enable-background="new 0 0 22 22" version="1.1" viewBox="0 0 22 22" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19.5,8l-7.3-7.6c-0.4-0.4-1.1-0.4-1.5,0L9.3,1.8c-0.4,0.4-0.4,1.1,0,1.6l5.2,5.5H1.1C0.5,8.9,0,9.3,0,10V12  c0,0.6,0.5,1.1,1.1,1.1h13.5l-5.2,5.5c-0.4,0.4-0.4,1.1,0,1.6l1.4,1.5c0.4,0.4,1.1,0.4,1.5,0l9.4-9.9c0.4-0.4,0.4-1.1,0-1.6L19.5,8z  "/>
+                        </svg>
+                </a>
+                <p class="large-text"><span>Go </span><span>Ansible </span><span>Helm</span></p>
+            </div>
+          </section>
           </section>
           </main>       
         {{ partial "footer.html" . }}

diff --git a/website/layouts/docs/baseof.html b/website/layouts/docs/baseof.html
@@ -7,7 +7,7 @@
     <header>
       {{ partial "navbar.html" . }}
     </header>
-    <div class="container-fluid td-outer">
+    <div class="container-fluid td-outer docs">
       <div class="td-main">
         <div class="row flex-xl-nowrap">
           <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">