mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-04 18:38:30 +02:00
Updated Articles Pages (#1329)
* Updated Articles Pages * fixes * Links removed * Fixed url * light theme fix * toc fix * new article categories * categorize articles * fix article preview images * rename categories --------- Co-authored-by: trean <trean.mi@gmail.com> Co-authored-by: generall <andrey@vasnetsov.com>
This commit is contained in:
nastyapash
co-authored by
trean
generall
trean
generall
parent
481b359860
commit
5baacc44ec
+109
-6
@@ -1,31 +1,134 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.dev-portal-articles-posts {
|
||||
.docs-articles {
|
||||
&__title {
|
||||
margin-bottom: math.div($spacer, 2);
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__blocks {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 5;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__block {
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-link {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&__posts {
|
||||
margin-top: $spacer * 2;
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
padding-top: $spacer * 5;
|
||||
}
|
||||
|
||||
.post {
|
||||
&-preview {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: $spacer;
|
||||
border-radius: $spacer * 0.5;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: math.div($spacer, 4);
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-about {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-50;
|
||||
}
|
||||
[data-theme="light"] & {
|
||||
&-about {
|
||||
color: $neutral-30;
|
||||
}
|
||||
&-title {
|
||||
color: $neutral-30;
|
||||
}
|
||||
&-description {
|
||||
color: $neutral-50;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-sm {
|
||||
.post-title {
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
}
|
||||
|
||||
.post-description {
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
}
|
||||
|
||||
.post-md {
|
||||
.post-title {
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
.post-description {
|
||||
font-size: $spacer;
|
||||
line-height: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__block {
|
||||
&-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
gap: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="light"] & {
|
||||
&__title {
|
||||
color: $neutral-30;
|
||||
}
|
||||
&__description {
|
||||
color: $neutral-50;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+75
@@ -5,6 +5,59 @@
|
||||
padding-bottom: $spacer * 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
.documentation-article__header-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: $spacer;
|
||||
padding: $spacer * 0.5 0;
|
||||
color: $neutral-70;
|
||||
&:hover {
|
||||
color: $neutral-90;
|
||||
svg path {
|
||||
stroke: $neutral-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.documentation-article__header-title {
|
||||
margin-bottom: $spacer;
|
||||
padding-top: 0;
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
.documentation-article__header-about {
|
||||
margin-bottom: $spacer * 2;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-90;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.documentation-article__header-preview {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
@@ -60,6 +113,13 @@
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
width: 100%;
|
||||
|
||||
&__header {
|
||||
.documentation-article__header-title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: pxToRem(50);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,5 +144,20 @@
|
||||
@extend .table-light;
|
||||
}
|
||||
}
|
||||
&__header-link {
|
||||
color: $neutral-50;
|
||||
svg path {
|
||||
stroke: $neutral-50;
|
||||
}
|
||||
&:hover {
|
||||
color: $neutral-30;
|
||||
svg path {
|
||||
stroke: $neutral-30;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__header-about {
|
||||
color: $neutral-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+22
@@ -200,6 +200,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__articles-link {
|
||||
&.active {
|
||||
background-color: $neutral-20;
|
||||
border-radius: $spacer * 0.5;
|
||||
|
||||
a {
|
||||
color: $neutral-98;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
height: calc(100vh - 80px);
|
||||
width: pxToRem(256);
|
||||
@@ -364,5 +375,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&__articles-link {
|
||||
&.active {
|
||||
background-color: $neutral-90;
|
||||
border-radius: $spacer * 0.5;
|
||||
|
||||
a {
|
||||
color: $neutral-30;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user