Design improvements

Author: ardatan

src/assets/css/_css/code.less

@@ -54,8 +54,46 @@
   }
   .intro-note {
     margin-top: 20px;
+    display: flex;
+    strong {
+      width: 50%;
+      margin-right: 5%;
+      font-size: 24px;
+      line-height: 36px;
+    }
+    .goto-section {
+      display: flex;
+      flex-direction: row;
+      width: 40%;
+      p {
+        width: 20%;
+        margin: 0;
+        color: #8C8C8C;
+        font-weight: bold;
+      }
+      .sections {
+        display: flex;
+        width: 80%;
+        flex-direction: column;
+        a {
+          h3 {
+            margin: 0 0 14px 0;
+            border-left: 1px solid #B7B7B7;
+            font-weight: bold;
+            padding-left: 15px;
+          }
+        }
+      }
+    }
   }
   .inner-content {
     max-width: 100%;
   }
+  .language-box {
+    border: 1px inset #979797;
+    .article_title {
+      text-align: left;
+      font-size: 24px;
+    }
+  }
 }

src/pages/code.tsx

@@ -23,7 +23,7 @@ export function buildLanguagesMenu(pageContext: any) {
               const slug = toSlug(languageName)
               return (
                 <div className="column">
-                  <div className="article">
+                  <div className="article language-box">
                     <a href={`#${slug}`}>
                       <h3 className="article_category">
                         <img
@@ -133,37 +133,29 @@ export default ({ pageContext }: any) => {
                 to help you get started working which support GraphQL in all
                 sorts of languages.
               </strong>{" "}
-              <div className="container-bl1">
-                <div className="column">
-                  <a href="#languages">
-                    <h3>Languages</h3>
-                  </a>
-                </div>
-                <div className="column">
+              <div className="goto-section">
+                <p>Go to</p>
+                <div className="sections">
                   <a href="#generic-tools">
                     <h3>Tools</h3>
                   </a>
-                </div>
-                <div className="column">
                   <a href="#services">
                     <h3>Services</h3>
                   </a>
-                </div>
-                <div className="column">
                   <a href="#more-stuff">
                     <h3>More Stuff</h3>
                   </a>
                 </div>
               </div>
-              <Marked pageContext={pageContext}>{`
-## Languages
-`}</Marked>
-              <p>
-                This page will help you get started with GraphQL in languages
-                you are already using.
-              </p>
             </div>
 
+            <Marked pageContext={pageContext}>{`
+## Language Support
+`}</Marked>
+            <p>
+              This page will help you get started with GraphQL in languages you
+              are already using.
+            </p>
             {buildLanguagesMenu(pageContext)}
             {buildLanguagesContent(pageContext)}
             <h2>