chore: add section layout to the website (#3068)

* add layout to the website * switch to use fast-anchor. update naming to use BEM. update comment naming
microsoft · May 15, 2020 · 2ab8a25 · 2ab8a25
1 parent 958df39
commit 2ab8a25
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 2 deletions.
diff --git a/sites/fast-website/src/public/index.html b/sites/fast-website/src/public/index.html
@@ -3,12 +3,110 @@
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <fast-design-system-provider use-defaults>
-      <fast-button>Hello, World!</fast-button>
-      <gradient-picker>stub</gradient-picker>
+      <div class="wrapper">
+        <!-- header:start -->
+        <header class="header">
+          <fast-anchor href="#" appearance="lightweight">Logo</fast-anchor>
+          <div class="header-link-group">
+            <fast-anchor href="#" appearance="lightweight">Component</fast-anchor>
+            <fast-anchor href="#" appearance="lightweight">Integration</fast-anchor>
+            <fast-anchor href="#" appearance="lightweight">Documentation</fast-anchor>
+            <fast-anchor href="#" appearance="lightweight">Community</fast-anchor>
+          </div>
+          <fast-anchor href="#" appearance="lightweight">Github</fast-anchor>
+        </header>
+        <!-- header:end -->
+
+        <!-- hero-section:start -->
+        <section class="section">
+          <div class="section-content">
+            Hero section header
+          </div>
+        </section>
+        <!-- hero-section:end -->
+
+        <section class="section">
+          <div class="section-content">
+            Page section header
+          </div>
+        </section>
+
+        <!-- adaptive-ui-system:start -->
+        <section class="section">
+          <div class="section-component">
+            Adaptive UI System
+            <fast-button>Hello, World!</fast-button>
+            <gradient-picker>stub</gradient-picker>
+          </div>
+        </section>
+        <!-- adaptive-ui-system:end -->
+
+        <section class="section">
+          <div class="section-content">
+            Page section header
+          </div>
+        </section>
+
+        <!-- frameworks:start -->
+        <section class="section">
+          <div class="section-component">
+            Framework components
+          </div>
+        </section>
+        <!-- frameworks:end -->
+
+        <section class="section">
+          <div class="section-content">
+            Page section header
+          </div>
+        </section>
+
+        <!-- documentation:start -->
+        <section class="section">
+          <div class="section-component">
+            Documentation components
+          </div>
+        </section>
+        <!-- documentation:end -->
+
+        <section class="section">
+          <div class="section-content">
+            Page section header
+          </div>
+        </section>
+
+        <!-- community:start -->
+        <section class="section">
+          <div class="section-component">
+            Social community components
+          </div>
+        </section>
+        <!-- community:end -->
+
+        <!-- footer:start -->
+          <footer class="footer">
+            <fast-divider></fast-divider>
+            <fast-anchor href="#" appearance="lightweight">Logo</fast-anchor>
+            <div class="footer-links">
+                <div class="footer-link-group">
+                    <span>License</span>
+                    <span>Privacy</span>
+                    <span>Terms of use</span>
+                    <span>&copy; 2020 Microsoft</span>
+                </div>
+                <div class="footer-link-group">
+                  <fast-anchor href="#" appearance="lightweight">Medium</fast-anchor>
+                  <fast-anchor href="#" appearance="lightweight">Github</fast-anchor>
+                </div>
+            </div>
+        </footer>
+        <!-- footer:end -->
+      </div>
     </fast-design-system-provider>
   </body>
 </html>
diff --git a/sites/fast-website/src/public/style.css b/sites/fast-website/src/public/style.css
@@ -0,0 +1,53 @@
+body {
+  margin: 0;
+  padding: 0;
+  background: #242424;
+  color: #ddd;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: minmax(5vw, 1fr) minmax(0px, 1600px) minmax(5vw, 1fr);
+}
+
+.header {
+  grid-column: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px;
+}
+
+.section {
+  grid-column: 2;
+}
+
+.section-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+}
+
+.section-component {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 600px;
+  background-color: #3A3A3A;
+}
+
+.footer {
+  grid-column: 2;
+  height: 240px;
+  margin-top: 100px
+}
+
+.footer-links {
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer-copyright-group {
+  display: flex;
+}