mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-05 19:08:32 +02:00
Add Events page (#2502)
* Add Events page * Create test * delete * A lot of edits * Change date * Add-SF-placeholder * Date edits * Copy edit Edited title and added Berlin save the date * add events link to menus * fix link --------- Co-authored-by: Maddie Duhon <madelyn.duhon@qdrant.com> Co-authored-by: trean <trean.mi@gmail.com>
This commit is contained in:
nastyapash
co-authored by
Maddie Duhon
trean
Maddie Duhon
trean
parent
46c1255fca
commit
282f74c749
@@ -81,6 +81,8 @@
|
||||
@import 'partials/cloud-inference-faq';
|
||||
@import 'partials/cta-banner';
|
||||
@import 'partials/subscribe';
|
||||
@import 'partials/events/events-card';
|
||||
@import 'partials/events/events-list';
|
||||
// used by landing pages under /lp/ (e.g. /lp/lucene)
|
||||
@import 'partials/elastic-lucene/index';
|
||||
@import 'partials/vsd/index';
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
@use 'sass:math';
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.events-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 4;
|
||||
padding: $spacer * 2 $spacer * 1.5;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
color: $neutral-70;
|
||||
|
||||
&__date {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
color: $neutral-90;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&__type {
|
||||
padding: pxToRem(2) pxToRem(10);
|
||||
border-radius: pxToRem(20);
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-webinar {
|
||||
border: pxToRem(1) solid $secondary-blue-50;
|
||||
color: $secondary-blue-50;
|
||||
background-color: rgba($secondary-blue-50, 0.1);
|
||||
}
|
||||
|
||||
&-conference {
|
||||
border: pxToRem(1) solid $secondary-violet-50;
|
||||
color: $secondary-violet-50;
|
||||
background-color: rgba($secondary-violet-50, 0.1);
|
||||
}
|
||||
|
||||
&-meetup {
|
||||
border: pxToRem(1) solid $secondary-teal-50;
|
||||
color: $secondary-teal-50;
|
||||
background-color: rgba($secondary-teal-50, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__place {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: math.div($spacer, 4);
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
|
||||
svg {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&__time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: math.div($spacer, 4);
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
|
||||
svg {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg, rgba(14, 20, 36, 0.00) 0%, $neutral-20 100%);
|
||||
|
||||
.events-card__date,
|
||||
.events-card__description,
|
||||
.events-card__place,
|
||||
.events-card__time {
|
||||
color: $neutral-90;
|
||||
|
||||
svg {
|
||||
path {
|
||||
stroke: $neutral-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
flex-direction: row;
|
||||
align-items: start;
|
||||
gap: $spacer * 2;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&__date {
|
||||
flex-shrink: 0;
|
||||
width: pxToRem(228);
|
||||
color: $neutral-70;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-l;
|
||||
line-height: $spacer * 1.5;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: pxToRem(18);
|
||||
width: pxToRem(18);
|
||||
|
||||
path {
|
||||
stroke: $neutral-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
&__location {
|
||||
gap: $spacer $spacer * 2;
|
||||
}
|
||||
|
||||
&__type {
|
||||
font-size: $font-size-xs;
|
||||
line-height: pxToRem(18);
|
||||
padding: pxToRem(1) pxToRem(10);
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__place {
|
||||
font-size: $font-size-xs;
|
||||
line-height: pxToRem(18);
|
||||
|
||||
svg {
|
||||
height: pxToRem(12);
|
||||
width: pxToRem(12);
|
||||
}
|
||||
}
|
||||
|
||||
&__time {
|
||||
font-size: $font-size-xs;
|
||||
line-height: pxToRem(18);
|
||||
|
||||
svg {
|
||||
height: pxToRem(12);
|
||||
width: pxToRem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.events-list {
|
||||
margin-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__section {
|
||||
padding: $spacer * 5 0;
|
||||
|
||||
&-header {
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
font-family: $font-family-monospace;
|
||||
font-weight: $font-weight-medium;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: pxToRem(2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
|
||||
&__section {
|
||||
padding: $spacer * 7.5 0;
|
||||
|
||||
&-upcoming {
|
||||
border-bottom: pxToRem(1) solid $neutral-30;
|
||||
}
|
||||
|
||||
&-past {
|
||||
position: relative;
|
||||
|
||||
.events-list__section-list {
|
||||
height: pxToRem(972);
|
||||
margin: pxToRem(-120) 0;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
|
||||
&-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.events-card:first-of-type {
|
||||
margin-top: $spacer * 7.5;
|
||||
}
|
||||
|
||||
.events-card:last-of-type {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: $spacer * 7.5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
background: linear-gradient(0deg, rgba($neutral-10, 0.00) 0%, $neutral-10 70%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
background: linear-gradient(0deg, $neutral-10 30%, rgba($neutral-10, 0.00) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-title {
|
||||
max-width: pxToRem(250);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-list {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
@import 'events-card';
|
||||
@import 'events-list';
|
||||
Reference in New Issue
Block a user