From a7669d2bcbcd5d59c5cf356b522de905063664be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Werlley=20Gon=C3=A7alves?= Date: Tue, 31 Oct 2023 00:10:14 -0300 Subject: [PATCH] refactor(styles): maximum width limit --- website/components/docs.js | 4 +- website/styles/_megadraft-demo.scss | 128 ++++++++++++++++------------ website/styles/_variables.scss | 11 +-- website/styles/_website.scss | 22 ++--- 4 files changed, 89 insertions(+), 76 deletions(-) diff --git a/website/components/docs.js b/website/components/docs.js index b4e5a784..b26a5352 100644 --- a/website/components/docs.js +++ b/website/components/docs.js @@ -48,7 +48,9 @@ export default class Docs extends React.Component {
- +
+ +
diff --git a/website/styles/_megadraft-demo.scss b/website/styles/_megadraft-demo.scss index 8294d995..3c90c796 100644 --- 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 index 3f02fc07..5fb11e66 100644 --- 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)'; \ No newline at end of file +$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 index 227c4aa7..6839d159 100644 --- 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;