diff --git a/packages/docs/assets/fonts.scss b/packages/docs/assets/fonts.scss index cf9c36c824..6768839eb5 100644 --- a/packages/docs/assets/fonts.scss +++ b/packages/docs/assets/fonts.scss @@ -2,22 +2,24 @@ @mixin title-font() { font-weight: 900; font-size: 4.5rem; + line-height: 1; - @include lg(font-size, 4rem); - @include md(font-size, 3rem); - @include sm(font-size, 2.5rem); + @include lg(font-size, 4.5rem); + @include md(font-size, 4rem); + @include sm(font-size, 3.0rem); @include xs(font-size, 2rem); } // sub headers @mixin subtitle-font() { - font-weight: 700; - font-size: 1.4rem; + font-weight: 900; + font-size: 4rem; + line-height: 1; - @include lg(font-size, 1.4rem); - @include md(font-size, 1.3rem); - @include sm(font-size, 1.25rem); - @include xs(font-size, 1.2rem); + @include lg(font-size, 4rem); + @include md(font-size, 3.5rem); + @include sm(font-size, 2.5rem); + @include xs(font-size, 2.0rem); } // text @@ -25,10 +27,10 @@ font-weight: normal; font-size: 1.2rem; - @include lg(font-size, 1rem); - @include md(font-size, 0.95rem); - @include sm(font-size, 0.925rem); - @include xs(font-size, 0.9rem); + @include lg(font-size, 1.2rem); + @include md(font-size, 1.2rem); + @include sm(font-size, 1.2rem); + @include xs(font-size, 1.2rem); } // link @@ -45,12 +47,12 @@ // button @mixin button-font() { font-weight: 600; - font-size: 1.1rem; + font-size: 1.2rem; - @include lg(font-size, 1rem); - @include md(font-size, 0.95rem); - @include sm(font-size, 0.925rem); - @include xs(font-size, 0.9rem); + @include lg(font-size, 1.2rem); + @include md(font-size, 1.2rem); + @include sm(font-size, 1.2rem); + @include xs(font-size, 1.2rem); } // code diff --git a/packages/docs/assets/smart-grid.scss b/packages/docs/assets/smart-grid.scss index 993ba0e0ed..f9821c03de 100644 --- a/packages/docs/assets/smart-grid.scss +++ b/packages/docs/assets/smart-grid.scss @@ -2,12 +2,12 @@ $columns: 12; -$break_lg: 1100px; -$break_md: 960px; -$break_sm: 780px; -$break_xs: 560px; +$break_lg: 1920px; +$break_md: 1440px; +$break_sm: 1024px; +$break_xs: 640px; -$offset: 30px; +$offset: 32px; $offset_lg: $offset; $offset_md: $offset; $offset_sm: $offset; @@ -19,7 +19,7 @@ $offset_md_one_side: ($offset_md * 0.5); $offset_sm_one_side: ($offset_sm * 0.5); $offset_xs_one_side: ($offset_xs * 0.5); -$fields: 15px; +$fields: 1rem; @mixin wrapper-full() { padding-left: $fields; @@ -36,8 +36,8 @@ $fields: 15px; #{$type}-right: $offset_one_side; } -@mixin wrapper() { - max-width: 1280px; +@mixin wrapper($width: 1440px) { + max-width: $width; margin: 0 auto; @include wrapper-full(); @@ -123,6 +123,12 @@ $fields: 15px; @include sm(margin-left, #{calc(#{$val} + #{$offset_sm_one_side})}); } +@mixin shift-sm-right($n) { + $val: math.div(100%, $columns) * $n; + + @include md(margin-right, #{calc(#{$val} + #{$offset_sm_one_side})}); +} + @mixin shift-xs-left($n) { $val: math.div(100%, $columns) * $n; diff --git a/packages/docs/assets/variables.scss b/packages/docs/assets/variables.scss new file mode 100644 index 0000000000..7906b8b830 --- /dev/null +++ b/packages/docs/assets/variables.scss @@ -0,0 +1,13 @@ +:root { + --bg-header: #2450BE; + --bg-preview-1: #2450BE; + --bg-preview-2: #557DE2; + --bg-partners: #335DC9; + --bg-customize-1: #4D2CC1; + --bg-customize-2: #847EE2; + --bg-seamless: #F4F9FC; + --bg-admin: #F4F9FC; + + --header-height: 4rem; + --header-z-index: 2000; +} diff --git a/packages/docs/components/HeaderBanner.client.vue b/packages/docs/components/HeaderBanner.client.vue index dc8097f633..78d167c09d 100644 --- a/packages/docs/components/HeaderBanner.client.vue +++ b/packages/docs/components/HeaderBanner.client.vue @@ -10,90 +10,85 @@
Name | -Country | -Status | -|
---|---|---|---|
{{ user.fullName }} | -{{ user.email }} | -{{ user.country }} | -
- |
-