-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* updated home-page * updated .env.example * updated og image * added planets of design * updated Oz positions on home-page * fix a timing of transitions for fields and noscript * fix app-tabs overflow-x * fix ethereum planet of design * added mobile-adaptation for home-page * added resizing vh variable and transitions for height * updated bg of home-page * added nav links to stats-preview of home-page * updated app-colors * updated bg-small img of home-page * added links to planets and changed planets names --------- Co-authored-by: Yehor Podporinov <[email protected]>
- Loading branch information
1 parent
a3891b9
commit 662939a
Showing
33 changed files
with
492 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,134 @@ | ||
| <template> | ||
| <div class="stats-preview"> | ||
| <div class="stats-preview__header"> | ||
| <h1 class="stats-preview__header-main-title"> | ||
| {{ $t('stats-preview.main-title') }} | ||
| </h1> | ||
| <div class="stats-preview__header-main-title-wrp"> | ||
| <h1 class="stats-preview__header-main-title"> | ||
| {{ $t('stats-preview.main-title-part-1') }} | ||
| </h1> | ||
| <h1 class="stats-preview__header-main-title"> | ||
| {{ | ||
| !isSmallBreakpoint | ||
| ? $t('stats-preview.main-title-part-2') | ||
| : $t('stats-preview.main-title-part-2--short') | ||
| }} | ||
| </h1> | ||
| </div> | ||
| <p class="stats-preview__header-secondary-title"> | ||
| {{ $t('stats-preview.secondary-title') }} | ||
| </p> | ||
| <div class="stats-preview__btn-wrp"> | ||
| <app-button | ||
| class="stats-preview__btn" | ||
| :text="$t('stats-preview.tools-link-text')" | ||
| :route="ROUTE_PATH.abiEncoder" | ||
| /> | ||
| <app-button | ||
| class="stats-preview__btn" | ||
| modification="text" | ||
| :text="$t('stats-preview.docs-link-text')" | ||
| :href="config.DOCUMENTATION_URL" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { AppButton } from '#components' | ||
| import { useViewportSizes } from '@/composables' | ||
| import { config } from '@/config' | ||
| import { ROUTE_PATH } from '@/constants' | ||
| const { isSmallBreakpoint } = useViewportSizes() | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| $z-index: 2; | ||
| .stats-preview { | ||
| aspect-ratio: 1512 / 1126; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| gap: toRem(60); | ||
| background-image: url('/branding/bg.png'); | ||
| background-size: 100% 100%; | ||
| width: 100%; | ||
| min-height: vh(100); | ||
| transition: min-height var(--transition-duration-fast); | ||
| padding: calc(var(--app-height-header) + var(--app-padding-top)) toRem(80) | ||
| var(--app-padding-bottom); | ||
| padding: var(--app-padding-top) toRem(96) 0; | ||
| @include respond-to(medium) { | ||
| padding-right: var(--app-padding-right); | ||
| padding-left: var(--app-padding-left); | ||
| } | ||
| @include respond-to(small) { | ||
| aspect-ratio: 375 / 658; | ||
| } | ||
| } | ||
| .stats-preview__header { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: toRem(24); | ||
| gap: toRem(16); | ||
| @include respond-to(medium) { | ||
| gap: toRem(8); | ||
| } | ||
| } | ||
| .stats-preview__header-main-title-wrp { | ||
| max-width: toRem(1024); | ||
| @include respond-to(medium) { | ||
| max-width: toRem(600); | ||
| } | ||
| } | ||
| .stats-preview__header-main-title { | ||
| max-width: toRem(800); | ||
| position: relative; | ||
| z-index: $z-index; | ||
| display: inline; | ||
| &:first-child { | ||
| color: var(--primary-main); | ||
| } | ||
| &:last-child { | ||
| @include respond-to(small) { | ||
| font-size: toRem(38); | ||
| max-width: toRem(375); | ||
| } | ||
| } | ||
| @include respond-to(small) { | ||
| display: block; | ||
| } | ||
| } | ||
| .stats-preview__header-secondary-title { | ||
| max-width: toRem(440); | ||
| color: var(--text-primary-main); | ||
| position: relative; | ||
| z-index: $z-index; | ||
| max-width: max-content; | ||
| @include respond-to(small) { | ||
| font-size: toRem(14); | ||
| } | ||
| } | ||
| .stats-preview__btn-wrp { | ||
| display: flex; | ||
| gap: toRem(24); | ||
| margin-top: toRem(8); | ||
| } | ||
| .stats-preview__btn { | ||
| position: relative; | ||
| z-index: $z-index; | ||
| display: grid; | ||
| min-width: toRem(210); | ||
| @include respond-to(medium) { | ||
| min-width: toRem(170); | ||
| } | ||
| @include respond-to(small) { | ||
| min-width: toRem(120); | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.