sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TRI-283: start adaptive 1920

Browse Source
This commit is contained in:
Artyom Pratsko
2024-11-16 20:03:47 +03:00
parent 3d28a1ee86
commit 89166100e3
15 changed files with 333 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
static/css/moover.css
View File

@@ -1,15 +1,16 @@
.container {
margin: 0 auto;
max-width: 1280px;
width: 1280px;
position: relative;
min-height: 695px;
}
/*@media (max-width: 1339.98px) {*/
/* .container {*/
/* width: 992px*/
/* }*/
/*}*/
@media (min-width: 1720px) {
.container {
width: 1720px;
}
}
/*@media (max-width: 1019.98px) {*/
/* .container {*/
/* width: 720px*/
@@ -39,11 +40,18 @@
font-weight: 700;
}
h1, .title {
h1, .h1 {
font-size: 44px;
line-height: 52px;
}
@media (min-width: 1720px) {
h1, .h1 {
font-size: 48px;
line-height: 52px;
}
}
h2, .h2 {
font-size: 24px;
line-height: 36px;
@@ -99,27 +107,64 @@ b {
margin-right: auto;
}
@media (min-width: 1720px) {
.title {
font-size: 44px;
margin-bottom: 22px;
}
}
.subtitle {
margin-bottom: 81px;
line-height: 22px;
}
@media (min-width: 1720px) {
.subtitle {
font-size: 20px;
margin-bottom: 97px;
}
}
.hide {
display: none;
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
}
.presentation {
margin: 20px -65px 140px;
}
@media (min-width: 1720px) {
.presentation {
margin-left: 0;
margin-right: 0;
}
}
.presentation__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/webp/Box9.webp), url(/static/img/webp/Box10.webp), url(/static/img/webp/Box11.webp), url(/static/img/webp/Box12.webp);
background-position: top -5px left 44px, top -30px right -15px, bottom 70px left 276px, bottom 67px right 274px;
background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 17.5%,21.8%,8.5%,8.8%;
}
@media (min-width: 1720px) {
.presentation__top {
background-size: 18.5%, 22%, 9%, 10.1%;
background-position: top -47px left 58px, top -31px right 20px, bottom 8px left 347px, bottom -5px right 352px;
padding-top: 95px;
margin-bottom: 176px;
}
}
.presentation__title {

84
static/css/moover/presentation.css Normal file
View File

@@ -0,0 +1,84 @@
.presentation {
margin: 20px -65px 140px;
}
@media (min-width: 1720px) {
.presentation {
margin-left: 0;
margin-right: 0;
}
}
.presentation__top {
position: relative;
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png);
background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 17.5%,21.8%,8.5%,8.8%;
}
@media (min-width: 1720px) {
.presentation__top {
background-size: 18.5%, 22%, 9%, 10.1%;
background-position: top -47px left 58px, top -31px right 20px, bottom 8px left 347px, bottom -5px right 352px;
padding-top: 95px;
margin-bottom: 176px;
}
}
.presentation__title {
margin-bottom: 23px;
}
.presentation__subtitle {
margin-bottom: 41px;
font-weight: 600;
}
.presentation__btn {
margin-bottom: 40px;
}
.presentation__next {
font-weight: 500;
line-height: 22px;
padding-right: 5px;
}
.presentation__arrows {
padding-top: 2px;
animation: jump 2s ease-in-out infinite;
}
@keyframes jump {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
60% {
transform: translateY(20px);
}
70% {
transform: translateY(0px);
}
80% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
.presentation__bottom .presentation__title {
margin-bottom: 13px;
}
.presentation__cards {
max-width: 1300px;
margin: 0 auto;
}

137
static/css/moover/root.css Normal file
View File

@@ -0,0 +1,137 @@
.container {
margin: 0 auto;
width: 1280px;
position: relative;
min-height: 695px;
}
@media (min-width: 1720px) {
.container {
width: 1720px;
}
}
/*@media (max-width: 1019.98px) {*/
/* .container {*/
/* width: 720px*/
/* }*/
/*}*/
/*@media (max-width: 767.98px) {*/
/* .container {*/
/* margin: 0 15px;*/
/* width: auto*/
/* }*/
/*}*/
:root {
--color-primary: #FF613A;
--color-white: #FFFFFF;
--color-black: #000000;
--color-black2: #272424;
--color-grey: #F1F1F1;
--color-grey2: #7A7979;
--color-orange: #FF613A;
--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
0 -1px 10px 0 rgba(198, 199, 203, 0.20);
text-align: center;
color: var(--color-black2);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-weight: 700;
}
h1, .h1 {
font-size: 44px;
line-height: 52px;
}
@media (min-width: 1720px) {
h1, .h1 {
font-size: 48px;
line-height: 52px;
}
}
h2, .h2 {
font-size: 24px;
line-height: 36px;
margin-bottom: 10px;
}
h3, .h3 {
font-size: 20px;
line-height: 28px;
margin-bottom: 12px;
}
h4, .h4 {
font-size: 18px;
line-height: 26px;
margin-bottom: 20px;
}
p {
line-height: 22px;
margin-bottom: 20px;
}
b {
font-weight: 500;
}
.btn {
display: inline-flex;
text-decoration: none;
color: black;
line-height: 22px;
border-radius: 10px;
padding: 20px 76px 18px;
justify-content: center;
align-items: center;
margin: 0 3px;
letter-spacing: 0.2px;
font-size: 18px;
}
.btn--primary {
background: var(--color-primary);
color: var(--color-white);
}
.title {
font-size: 44px;
font-weight: 700;
line-height: 52px;
margin-bottom: 13px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 1720px) {
.title {
font-size: 44px;
margin-bottom: 22px;
}
}
.subtitle {
margin-bottom: 81px;
line-height: 22px;
}
@media (min-width: 1720px) {
.subtitle {
font-size: 20px;
margin-bottom: 97px;
}
}
.hide {
display: none;
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
}

BIN
static/img/png/Box10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
static/img/png/Box11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
static/img/png/Box12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
static/img/png/Box9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
static/img/webp/Box10.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
static/img/webp/Box11.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/img/webp/Box12.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/img/webp/Box9.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

32
styles/moover/presentation.scss
View File

@@ -1,5 +1,10 @@
.presentation {
margin: 20px -65px 140px;
@media (min-width: 1720px) {
margin-left: 0;
margin-right: 0;
}
}
.presentation__top {
@@ -7,18 +12,29 @@
min-height: 270px;
margin: 0 auto 116px;
padding: 29px 0 40px;
background-image: url(/static/img/webp/Box9.webp),
url(/static/img/webp/Box10.webp),
url(/static/img/webp/Box11.webp),
url(/static/img/webp/Box12.webp);
background-position: top -5px left 44px,
top -30px right -15px,
bottom 70px left 276px,
bottom 67px right 274px;
background-image: url(/static/img/png/Box9.png),
url(/static/img/png/Box10.png),
url(/static/img/png/Box11.png),
url(/static/img/png/Box12.png);
background-position: top -4px left 46px,
top -30px right -14px,
bottom 73px left 278px,
bottom 71px right 276px;
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-size: 17.5%,21.8%,8.5%,8.8%;
@media (min-width: 1720px) {
background-size: 18.5%, 22%, 9%, 10.1%;
background-position: top -47px left 58px,
top -31px right 20px,
bottom 8px left 347px,
bottom -5px right 352px;
padding-top: 95px;
margin-bottom: 176px;
}
}
.presentation__title {

43
styles/moover/root.scss
View File

@@ -1,15 +1,16 @@
.container {
margin: 0 auto;
max-width: 1280px;
width: 1280px;
position: relative;
min-height: 695px;
}
/*@media (max-width: 1339.98px) {*/
/* .container {*/
/* width: 992px*/
/* }*/
/*}*/
@media (min-width: 1720px) {
.container {
width: 1720px;
}
}
/*@media (max-width: 1019.98px) {*/
/* .container {*/
@@ -23,6 +24,7 @@
/* width: auto*/
/* }*/
/*}*/
:root {
--color-primary: #FF613A;
--color-white: #FFFFFF;
@@ -33,8 +35,6 @@
--color-orange: #FF613A;
--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20),
0 -1px 10px 0 rgba(198, 199, 203, 0.20);
text-align: center;
@@ -46,9 +46,14 @@
}
h1, .title {
h1, .h1 {
font-size: 44px;
line-height: 52px;
@media (min-width: 1720px) {
font-size: 48px;
line-height: 52px;
}
}
h2, .h2 {
@@ -58,8 +63,8 @@ h2, .h2 {
}
h3, .h3 {
font-size: 20px;
line-height: 28px;
font-size: 20px;
line-height: 28px;
margin-bottom: 12px;
}
@@ -105,13 +110,29 @@ b {
margin-bottom: 13px;
margin-left: auto;
margin-right: auto;
@media (min-width: 1720px) {
font-size: 44px;
margin-bottom: 22px;
}
}
.subtitle {
margin-bottom: 81px;
line-height: 22px;
@media (min-width: 1720px) {
font-size: 20px;
margin-bottom: 97px;
}
}
.hide {
display: none;
}
@media (min-width: 1440px) {
.is-container.wrapper_main {
max-width: initial;
}
}

2
templates/pages/p_mover_landing_page.html
View File

@@ -12,7 +12,7 @@
{% block content %}
<section class="presentation">
<div class="presentation__top">
<h1 class="presentation__title title">
<h1 class="presentation__title">
{% blocktrans %}
Сервис попутных посылок
{% endblocktrans %}

2
templates/tb_base.html
View File

@@ -176,7 +176,7 @@ function gtag_report_conversion(url) {
{% if mobile == 'false' or mobile %}
{% endif %}
<div class="block_overlay {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}" onclick="close_open_curtain()"></div>
<div class="wrapper_main">
<div class="wrapper_main{% if page.url == "landing_mover" %} is-container{% endif %}">
{% include 'blocks/b_header.html' %}