diff --git a/_layouts/docs.html b/_layouts/docs.html index 1e81e741..3d5367f4 100755 --- a/_layouts/docs.html +++ b/_layouts/docs.html @@ -27,13 +27,15 @@ {% include header.html %}
-

Documentation

-
- +
+

Documentation

+
+
+
diff --git a/_scss/vars.scss b/_scss/vars.scss index 3953da2f..d3a46d27 100644 --- a/_scss/vars.scss +++ b/_scss/vars.scss @@ -6,6 +6,8 @@ $sm-width: map-get($gl-mq-list, "sm"); $xs-width: map-get($gl-mq-list, "xs"); $page-width: 1280px; +$page-padding: 60px; +$page-padding-small: 30px; $dark-background-color: #183d54; $light-background-color: #f3f5fa; $red: #f3807b; diff --git a/css/docs.scss b/css/docs.scss index 7542dd28..6f7ae41f 100644 --- a/css/docs.scss +++ b/css/docs.scss @@ -101,12 +101,14 @@ pre > code { } .page { - max-width: 1199px; + max-width: $page-width; margin-left: auto; margin-right: auto; - padding: 0 50px 30px; + padding: 0 $page-padding 30px; min-height: calc(100% - 374px); color: #505a72; + -webkit-box-sizing: border-box; + box-sizing: border-box; @media (min-width: $md-width) { display: -webkit-box; @@ -114,20 +116,40 @@ pre > code { display: flex; } + @media (max-width: $sm-width) { + padding-left: $page-padding-small; + padding-right: $page-padding-small; + } + .menu-open & { display: none; } } #docs-header { - padding: 37px 50px 38px; background-color: #f3f5fa; color: #505a72; + .menu-open & { + display: none; + } + + & > div { + max-width: $page-width; + margin: 0 auto; + padding: 37px $page-padding 38px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + @media (max-width: $sm-width) { + padding-left: $page-padding-small; + padding-right: $page-padding-small; + } + } + h1 { line-height: 40px; margin: 0; - margin-left: 10px; display: inline-block; } @@ -135,26 +157,36 @@ pre > code { float: right; position: relative; - &.latest::after { - content: "Latest"; - font-family: Avenir-Roman; - font-size: 14px; - line-height: 1.79; - color: #505a72; - border-radius: 12px; - background-color: #3bbdc4; - color: white; + @media (max-width: $sm-width) { + float: none; + margin-top: 20px; + } + + &.latest > div { display: inline-block; - padding: 0 15px; - height: 24px; - right: 37px; - top: 8px; - position: absolute; - pointer-events: none; + position: relative; + + & > div::after { + content: "Latest"; + font-family: Avenir-Roman; + font-size: 14px; + line-height: 1.79; + color: #505a72; + border-radius: 12px; + background-color: #3bbdc4; + color: white; + display: inline-block; + padding: 0 15px; + height: 24px; + right: 37px; + top: 8px; + position: absolute; + pointer-events: none; + } } &.latest select { - padding-right: 107px; + padding-right: 95px; } } } @@ -228,6 +260,10 @@ pre > code { color: #3bbdc4; margin-top: 55px; + @media (max-width: $md-width) { + float: none; + } + img { vertical-align: middle; margin-right: 5px; diff --git a/css/main.scss b/css/main.scss index 60c8e56b..111cee28 100644 --- a/css/main.scss +++ b/css/main.scss @@ -95,11 +95,11 @@ body { & > div { max-width: $page-width; margin: 0 auto; - padding: 0 60px; + padding: 0 $page-padding; box-sizing: border-box; @media (max-width: $sm-width) { - padding: 0 30px; + padding: 0 $page-padding-small; } } } diff --git a/docs/latest.html b/docs/latest.html index e1bad609..86108e41 100644 --- a/docs/latest.html +++ b/docs/latest.html @@ -1,5 +1,5 @@ --- -layout: false +layout: none --- {% include values.inc %}