mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-07 03:48:30 +02:00
Optimize css build (#2473)
* remove unused styles * wip: optimizing css, wrong vertical spacing * fixes * more changes * fixes
This commit is contained in:
trean
@@ -1,11 +1,12 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/site-container' as site-container;
|
||||
|
||||
.brand-resources-content {
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__container {
|
||||
@extend .container;
|
||||
@include site-container.base;
|
||||
}
|
||||
|
||||
&__block {
|
||||
@@ -162,6 +163,10 @@
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: 0;
|
||||
|
||||
&__container {
|
||||
max-width: map-get($container-max-widths, xl);
|
||||
}
|
||||
|
||||
&__block {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.edge-beta-demo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background: radial-gradient(
|
||||
ellipse 120% 80% at 0% 0%,
|
||||
rgba(231, 29, 95, 0.12) 0%,
|
||||
rgba(133, 71, 255, 0.06) 40%,
|
||||
transparent 70%
|
||||
),
|
||||
$neutral-10;
|
||||
|
||||
&__lights-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: pxToRem(200);
|
||||
background-image: url('/img/elastic-lucene/lights.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-position: center top;
|
||||
background-size: cover;
|
||||
transform: scaleY(-1);
|
||||
filter: blur(6px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 $spacer * 2;
|
||||
font-size: $h4-font-size;
|
||||
line-height: 1.2;
|
||||
font-weight: 600;
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
color: $neutral-90;
|
||||
|
||||
&--secondary {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
max-width: pxToRem(540);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
line-height: 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: pxToRem(540);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.edge-beta-faq {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h3-font-size;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.edge-beta-features {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 0;
|
||||
|
||||
&-title {
|
||||
margin-bottom: pxToRem(12);
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__cards {
|
||||
& > div:first-of-type {
|
||||
.edge-beta-features__card-image {
|
||||
width: calc(100% + ($spacer * 3));
|
||||
margin-left: -$spacer * 1.5;
|
||||
margin-right: -$spacer * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(58);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.edge-beta-form {
|
||||
position: relative;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto $spacer * 3;
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: pxToRem(720);
|
||||
margin: 0 auto;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
* {
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
|
||||
[data-hsfc-id='Renderer'] .hsfc-Step .hsfc-Step__Content {
|
||||
padding: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.hsfc-RichText span,
|
||||
.hsfc-FieldLabel span,
|
||||
.hsfc-ProgressBar__Text {
|
||||
font-size: $font-size-s !important;
|
||||
line-height: $line-height-sm !important;
|
||||
color: $neutral-98 !important;
|
||||
}
|
||||
|
||||
.hsfc-FieldLabel {
|
||||
margin-bottom: $spacer * 0.5 !important;
|
||||
}
|
||||
|
||||
[data-hsfc-id='Renderer'] .hsfc-TextInput,
|
||||
[data-hsfc-id='Renderer'] .hsfc-TextareaInput {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
border: pxToRem(1) solid $neutral-50;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
border-radius: $spacer * 0.5;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
[data-hsfc-id='Renderer'] .hsfc-ErrorAlert {
|
||||
font-size: $font-size-xs;
|
||||
line-height: $font-size-l;
|
||||
color: $primary-40;
|
||||
}
|
||||
|
||||
[data-hsfc-id='Renderer'] .hsfc-Button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: $spacer * 0.5;
|
||||
color: $neutral-100;
|
||||
text-decoration: none;
|
||||
|
||||
height: $spacer * 2.5;
|
||||
padding: pxToRem(22);
|
||||
font-weight: 700;
|
||||
font-size: map-get($font-sizes-text, md);
|
||||
z-index: 1;
|
||||
background: linear-gradient(180deg, $primary-50, $primary-40) !important;
|
||||
box-shadow: 0 2px 1px 0 $primary-60 inset !important;
|
||||
transition: none !important;
|
||||
|
||||
&:hover {
|
||||
background: $primary-50 !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 2px 1px 0 $primary-70 inset !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $primary-50 !important;
|
||||
border: none !important;
|
||||
box-shadow:
|
||||
0 2px 1px 0 $primary-60 inset,
|
||||
0 0 0 2px rgba(220, 36, 76, 0.4) !important;
|
||||
}
|
||||
|
||||
&.button_disabled,
|
||||
&:disabled {
|
||||
background: $primary-70 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: pxToRem(210);
|
||||
height: pxToRem(210);
|
||||
background-image: url('/img/blurred/blurred-light-15.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 pxToRem(12) 0 0;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -$spacer * 1.5;
|
||||
width: pxToRem(637);
|
||||
height: pxToRem(444);
|
||||
background-image: url('/img/blurred/blurred-light-19.svg');
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(58);
|
||||
}
|
||||
|
||||
&__container {
|
||||
[data-hsfc-id='Renderer'] .hsfc-Step .hsfc-Step__Content {
|
||||
padding: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.edge-beta-get-started {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$spacer * 7.5,
|
||||
$spacer * 5,
|
||||
$neutral-94,
|
||||
$neutral-10,
|
||||
$neutral-10
|
||||
);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.edge-beta-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
margin: $spacer * 1.5 0;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h3-font-size;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $h6-font-size;
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
max-width: pxToRem(540);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: pxToRem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
|
||||
&__subtitle,
|
||||
&__description {
|
||||
max-width: pxToRem(500);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.edge-beta-vectors {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
max-width: pxToRem(920);
|
||||
margin: 0 auto $spacer * 4;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h3-font-size;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-info {
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 3.5;
|
||||
width: $spacer * 3.5;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: $h4-font-size;
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(58);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__card {
|
||||
position: relative;
|
||||
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(4) {
|
||||
& > div {
|
||||
&:before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: pxToRem(1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
& > div {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: pxToRem(1);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
max-width: pxToRem(400);
|
||||
margin: auto;
|
||||
padding: $spacer * 3.5 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__card {
|
||||
&-info {
|
||||
max-width: pxToRem(443);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
@use '../mixins/footer-bottom' as footer-bottom;
|
||||
|
||||
.footer {
|
||||
background-color: $neutral-10;
|
||||
@@ -116,14 +117,10 @@
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
width: 100%;
|
||||
padding: $spacer * 2.5 0;
|
||||
@include footer-bottom.base;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
@include footer-bottom.content;
|
||||
}
|
||||
|
||||
&-copyright {
|
||||
@@ -144,17 +141,7 @@
|
||||
}
|
||||
|
||||
&-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer $spacer * 2.5;
|
||||
|
||||
a {
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-70;
|
||||
}
|
||||
@include footer-bottom.links;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,13 +170,11 @@
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__bottom {
|
||||
&-content {
|
||||
flex-direction: row;
|
||||
gap: $spacer * 2.5;
|
||||
@include footer-bottom.content-lg;
|
||||
}
|
||||
|
||||
&-links {
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
@include footer-bottom.links-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
.stars-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
height: pxToRem(285);
|
||||
width: pxToRem(285);
|
||||
background-size: cover;
|
||||
background-image: url('/img/blurred/blurred-light-8.png');
|
||||
background-image: url('/img/blurred/blurred-light-7.png');
|
||||
}
|
||||
|
||||
&__overlay-bottom {
|
||||
@@ -34,7 +34,7 @@
|
||||
height: pxToRem(285);
|
||||
width: pxToRem(285);
|
||||
background-size: cover;
|
||||
background-image: url('/img/blurred/blurred-light-7.png');
|
||||
background-image: url('/img/blurred/blurred-light-8.png');
|
||||
}
|
||||
|
||||
&__description {
|
||||
|
||||
+14
-11
@@ -1,4 +1,5 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/footer-bottom' as footer-bottom;
|
||||
|
||||
.docs-footer {
|
||||
&__cta {
|
||||
@@ -22,11 +23,11 @@
|
||||
|
||||
&__bottom {
|
||||
border-top: pxToRem(1) solid $neutral-20;
|
||||
@extend .footer__bottom;
|
||||
@include footer-bottom.base;
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
@extend .footer__bottom-content;
|
||||
@include footer-bottom.content;
|
||||
|
||||
& span,
|
||||
& a {
|
||||
@@ -42,18 +43,20 @@
|
||||
}
|
||||
|
||||
&__bottom-links {
|
||||
@extend .footer__bottom-links;
|
||||
@include footer-bottom.links;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__bottom-content {
|
||||
@include footer-bottom.content-lg;
|
||||
}
|
||||
|
||||
&__bottom-links {
|
||||
@include footer-bottom.links-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__bottom {
|
||||
@extend .footer__bottom;
|
||||
}
|
||||
|
||||
&__bottom-content {
|
||||
@extend .footer__bottom-content;
|
||||
}
|
||||
|
||||
&__cta {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
+3
-2
@@ -1,5 +1,6 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/mixins' as *;
|
||||
@use '../../mixins/table-variant-styles' as table-variant;
|
||||
|
||||
.documentation-article {
|
||||
padding-bottom: $spacer * 1.5;
|
||||
@@ -118,7 +119,7 @@
|
||||
|
||||
.table-responsive {
|
||||
.table {
|
||||
@extend .table-dark;
|
||||
@include table-variant.variant('dark');
|
||||
}
|
||||
th,
|
||||
td {
|
||||
@@ -169,7 +170,7 @@
|
||||
|
||||
.table-responsive {
|
||||
.table {
|
||||
@extend .table-light;
|
||||
@include table-variant.variant('light');
|
||||
}
|
||||
}
|
||||
&__header-link {
|
||||
|
||||
+2
-1
@@ -1,5 +1,6 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:color';
|
||||
@use '../../mixins/site-container' as site-container;
|
||||
|
||||
.documentation {
|
||||
background-color: $neutral-10;
|
||||
@@ -7,7 +8,7 @@
|
||||
color: $neutral-70;
|
||||
|
||||
&__container {
|
||||
@extend .container;
|
||||
@include site-container.base;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
padding-top: $spacer * 1.5;
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
.edge-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
Reference in New Issue
Block a user