[#3304] Redesign Vuestic landing

packages/docs/assets/fonts.scss

@@ -2,33 +2,35 @@
 @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
 @mixin text-font() {
  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

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;
 

packages/docs/assets/variables.scss

@@ -0,0 +1,13 @@
+:root {
+ --bg-header: #5887F9;
+ --bg-preview-1: #5887F9;
+ --bg-preview-2: #759EED;
+ --bg-partners: #5986F0;
+ --bg-customize-1: #8667F5;
+ --bg-customize-2: #9799EE;
+ --bg-seamless: #F4F9FC;
+ --bg-admin: #F4F9FC;
+
+ --header-height: 4rem;
+ --header-z-index: 2000;
+}

packages/docs/components/HeaderBanner.client.vue

@@ -10,98 +10,94 @@
  <div class="header__wrapper">
  <div class="header-banner__left">
  <strong>{{ $t("landing.header.banner.partner") }}</strong>
- <a
- href="https://vuejs.org/partners/epicmax.html"
- title="Epicmax creates high performance Vue.js interfaces"
- class="nuxt-link ml-7"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- height="35"
- width="35"
- viewBox="-39.26295 -56.672 340.2789 340.032"
- ><path
- fill="#41b883"
- d="M161.101 0l-30.224 52.35L100.652 0H0l130.877 226.688L261.753 0z"
- /><path
- fill="#34495e"
- d="M161.101 0l-30.224 52.35L100.652 0H52.351l78.526 136.01L209.403 0z"
- /></svg>
- </a>
- <a
- href="https://vuejs.org/partners/epicmax.html"
- target="_blank"
- class="link-4"
- >
- <strong class="bold-text-9"> Vue.js </strong>
- </a>
-
- <strong class="ml-7">{{ $t("landing.header.banner.and") }}</strong>
-
- <a
- href="https://nuxtjs.org/partners/epicmax"
- title="Epicmax creates high performance Vue.js interfaces"
- class="nuxt-link ml-7"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="30"
- height="30"
- viewBox="0 0 400 303"
- version="1"
+ <div class="header-banner__left-links">
+ <a
+ href="https://vuejs.org/partners/epicmax.html"
+ title="Epicmax creates high performance Vue.js interfaces"
+ target="_blank"
+ class="header-banner__link"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ height="24"
+ width="24"
+ viewBox="-39.26295 -56.672 340.2789 340.032"
+ ><path
+ fill="#41b883"
+ d="M161.101 0l-30.224 52.35L100.652 0H0l130.877 226.688L261.753 0z"
+ /><path
+ fill="#34495e"
+ d="M161.101 0l-30.224 52.35L100.652 0H52.351l78.526 136.01L209.403 0z"
+ /></svg>
+ <strong>Vue.js</strong>
+ </a>
+
+ <strong>{{ $t("landing.header.banner.and") }}</strong>
+
+ <a
+ href="https://nuxtjs.org/partners/epicmax"
+ title="Epicmax creates high performance Vue.js interfaces"
+ target="_blank"
+ class="header-banner__link"
  >
- <g
- fill="none"
- fill-rule="evenodd"
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 400 303"
  >
- <path
- d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"
- fill="#00C58E"
- />
- <path
- d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"
- fill="#108775"
- />
- <path
- d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"
- fill="#2F495E"
- fill-rule="nonzero"
- />
- </g>
- </svg>
- </a>
- <a
- href="https://nuxtjs.org/partners/epicmax"
- target="_blank"
- class="link-5"
- ><strong class="bold-text-9">Nuxt</strong></a>
+ <g
+ fill="none"
+ fill-rule="evenodd"
+ >
+ <path
+ d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z"
+ fill="#00C58E"
+ />
+ <path
+ d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z"
+ fill="#108775"
+ />
+ <path
+ d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z"
+ fill="#2F495E"
+ fill-rule="nonzero"
+ />
+ </g>
+ </svg>
+ <strong>Nuxt</strong>
+ </a>
+ </div>
  </div>
- <div class="header-banner__button">
+
+ <div class="header-banner__buttons">
  <va-button
  href="https://epicmax.co/?ref=vuestic-header"
  target="blank"
  >
  {{ $t("landing.header.banner.hire") }}
  </va-button>
- <div
+ <va-button
  v-if="closeable"
- class="header-banner__button--close"
- >
- <va-icon
- class="cursor-pointer"
- size="small"
- name="close"
- @click="hide"
- />
- </div>
+ icon="close"
+ preset="secondary"
+ round
+ :text-color="textColor"
+ class="header-banner__buttons--close"
+ :aria-label="$t('landing.header.banner.close')"
+ @click="hide"
+ />
  </div>
  </div>
  </div>
  </transition>
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from 'vue'
+import { ref } from 'vue'
+
+import { useElementTextColor } from 'vuestic-ui'
+
 const props = defineProps({
  closeable: {
  type: Boolean,
@@ -113,6 +109,8 @@ const props = defineProps({
  },
 })
 
+const textColor = useElementTextColor('primary')
+
 const closeable = ref(props.closeable)
 const isHidden = ref(closeable.value && localStorage.getItem('banner') === 'official-partner')
 
@@ -139,28 +137,35 @@ const hide = () => {
 }
 
 .header-banner {
+ $text-color: white;
+
  min-height: 40px;
- padding: 7px 1rem;
+ padding: 0.5rem 0;
  background-color: #012875;
  font-size: 0.9rem;
- color: white;
+ color: $text-color;
+ flex-shrink: 0;
+
+ &:not(.header-banner--wrapped) {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
 
- &--wrapped { 
+ &--wrapped {
  .header__wrapper {
  @include wrapper();
  }
  }
 
- &__button {
+ &__buttons {
  z-index: 10;
  display: flex;
  align-items: center;
 
+ @include xs(margin-top, 0.5rem);
+
  &--close {
  margin-left: 1rem;
- cursor: pointer;
- display: flex;
- align-items: center;
  }
  }
 
@@ -174,16 +179,29 @@ const hide = () => {
  }
 
  a {
- color: white !important;
+ color: $text-color !important;
  }
 
  &__left {
  display: flex;
  align-items: center;
+ flex-wrap: wrap;
+ justify-content: center;
  }
 
- .ml-7 {
- margin-left: 7px;
+ &__left-links {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ & > * {
+ margin-left: 0.75rem;
+ }
+ }
+
+ &__link {
+ display: flex;
+ align-items: center;
  }
 }
 </style>