refactor(styles): maximum width limit (#438)

globocom · Oct 31, 2023 · ac8463c · ac8463c
1 parent 67ef99e
commit ac8463c
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 76 deletions.
diff --git a/website/components/docs.js b/website/components/docs.js
@@ -48,7 +48,9 @@ export default class Docs extends React.Component {
           <MenuBar showLeft={true} />
           <div className="container--light">
             <div className="page__content docs">
-              <ReactMarkdown source={DOCS[doc]} />
+              <div className="docs__content">
+                <ReactMarkdown source={DOCS[doc]} />
+              </div>
             </div>
           </div>
         </StickyContainer>

diff --git a/website/styles/_megadraft-demo.scss b/website/styles/_megadraft-demo.scss
@@ -4,119 +4,135 @@
  * License: MIT
  */
 
-@import '../../src/styles/megadraft.scss';
+@import "../../src/styles/megadraft.scss";
 
 .jsonpreview {
-    font-family: monospace;
-    color: $gray-300;
-    background-color: $light-yellow;
-    font-size:16px;
+  font-family: monospace;
+  color: $gray-300;
+  background-color: $light-yellow;
+  font-size: 16px;
 }
 
 .public-DraftEditor-content {
-    min-height: 300px;
-    outline: none;
+  min-height: 300px;
+  outline: none;
 }
 
 .public-DraftEditor-content {
-    min-height: 300px;
-    outline: none;
+  min-height: 300px;
+  outline: none;
 }
 
-.container--light{
+.container--light {
   background-color: $white;
 }
 
-.container--dark{
+.container--dark {
   background-color: $gray-400;
 }
 
-.appbar--fixed{
+.appbar--fixed {
   color: $red;
   background: $red;
 }
 
 .docs {
-  padding-left: 256px;
-  padding-right: 256px;
   padding-top: 64px;
   padding-bottom: 64px;
   background-color: $gray-050;
+  height: 100%;
+
+  &__content {
+    width: min(100% - 512px, $max-width);
+    margin-inline: auto;
+  }
 }
 
 @media only #{$media-max767} {
-  .docs{
-    padding-left: 20px;
-    padding-right: 20px;
+  .docs {
     padding-top: 64px;
-    padding-bottom: 64px}
+    padding-bottom: 64px;
+
+    &__content {
+      width: min(100% - 40px, $max-width);
+      margin-inline: auto;
+    }
+  }
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
-  .docs{
-    padding-left: 20px;
-    padding-right: 20px;
+  .docs {
     padding-top: 64px;
     padding-bottom: 64px;
+
+    &__content {
+      width: min(100% - 40px, $max-width);
+      margin-inline: auto;
+    }
   }
 }
 
 .docs {
   h1 {
-      display: block;
-      font-size: 2em;
-      margin-block-end: 0.67em;
-      margin-block-start: 0.67em;
-      font-weight: bold;
+    display: block;
+    font-size: 2em;
+    margin-block-end: 0.67em;
+    margin-block-start: 0.67em;
+    font-weight: bold;
   }
 
   p {
-      display: block;
-      margin-block-end: 1em;
-      margin-block-start: 1em;
+    display: block;
+    margin-block-end: 1em;
+    margin-block-start: 1em;
   }
 
   h2 {
-      display: block;
-      font-size: 1.2em;
-      margin-block-end: 0.83em;
-      margin-block-start: 0.83em;
-      font-weight: bold;
+    display: block;
+    font-size: 1.2em;
+    margin-block-end: 0.83em;
+    margin-block-start: 0.83em;
+    font-weight: bold;
   }
 
   h3 {
-      display: block;
-      font-size: 1.2em;
-      margin-block-end: 0.83em;
-      margin-block-start: 0.83em;
-      font-weight: bold;
+    display: block;
+    font-size: 1.2em;
+    margin-block-end: 0.83em;
+    margin-block-start: 0.83em;
+    font-weight: bold;
   }
 
-  re, xmp, plaintext, listing {
-      display: block;
-      font-family: monospace;
-      white-space: pre;
-      margin: 1em 0px 1em;
+  re,
+  xmp,
+  plaintext,
+  listing {
+    display: block;
+    font-family: monospace;
+    white-space: pre;
+    margin: 1em 0px 1em;
   }
 
-  ul, menu, dir {
-      display: block;
-      list-style-type: disc;
-      margin-block-end: 1em;
-      margin-block-start: 1em;
-      padding-inline-start: 40px;
+  ul,
+  menu,
+  dir {
+    display: block;
+    list-style-type: disc;
+    margin-block-end: 1em;
+    margin-block-start: 1em;
+    padding-inline-start: 40px;
   }
 
   li {
-      display: list-item;
-      text-align: match-parent;
+    display: list-item;
+    text-align: match-parent;
   }
 
   pre {
-      color: rgba(0, 0, 0, 0.87);
-      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
-      border-radius: 2px;
-      background-color: $white;
+    color: rgba(0, 0, 0, 0.87);
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
+    border-radius: 2px;
+    background-color: $white;
   }
 
   a {

diff --git a/website/styles/_variables.scss b/website/styles/_variables.scss
@@ -1,6 +1,7 @@
-$media-max1000: 'screen and (max-width: 1000px)';
-$media-max767: 'screen and (max-width:767px)';
-$media-max450: 'screen and (max-width: 480px)';
+$max-width: 1920px;
+$media-max1000: "screen and (max-width: 1000px)";
+$media-max767: "screen and (max-width:767px)";
+$media-max450: "screen and (max-width: 480px)";
 
-$media-min768: 'screen and (min-width: 768px)';
-$media-min320: 'screen and (min-width: 320px)';
+$media-min768: "screen and (min-width: 768px)";
+$media-min320: "screen and (min-width: 320px)";
diff --git a/website/styles/_website.scss b/website/styles/_website.scss
@@ -189,14 +189,15 @@
 }
 
 .tab-container-editor {
-  padding-left: 256px;
-  padding-right: 256px;
+  width: min(100% - 512px, $max-width);
+  margin-inline: auto;
   padding-top: 95px;
   padding-bottom: 128px;
 }
 
 @media only #{$media-max767} {
   .tab-container-editor {
+    width: 100%;
     padding-left: 65px;
     padding-right: 65px;
     padding-top: 95px;
@@ -206,21 +207,9 @@
 
 .tab-container-json {
   background-color: $gray-400;
-  padding-left: 256px;
-  padding-right: 256px;
-  padding-top: 64px;
-  padding-bottom: 128px;
 }
 
 @media only #{$media-max1000} {
-  .tab-container-json {
-    background-color: $gray-400;
-    padding-left: 0px;
-    padding-right: 0px;
-    padding-top: 64px;
-    padding-bottom: 256px;
-  }
-
   .hljs {
     background-color: $white;
     padding: 1em;
@@ -237,6 +226,11 @@
 }
 
 .appBar {
+  .linear-menu {
+    width: min(100%, $max-width);
+    margin-inline: auto;
+  }
+
   .dropdown-menu {
     width: 100%;
     display: none;