From 0b4256892e3a2513ebc285d419acf5fed07beaa3 Mon Sep 17 00:00:00 2001 From: trean Date: Wed, 22 Jun 2022 17:01:11 +0200 Subject: [PATCH] changed styles of article so that they would not affect docs pages (#59) --- .../qdrant/layouts/partials/blogpost.html | 4 +- .../themes/qdrant/static/css/article.scss | 164 ++++++++++--- .../themes/qdrant/static/css/main.css | 231 ++++++++++++------ .../themes/qdrant/static/css/main.scss | 2 - .../themes/qdrant/static/css/responsive.css | 10 - 5 files changed, 290 insertions(+), 121 deletions(-) diff --git a/qdrant-landing/themes/qdrant/layouts/partials/blogpost.html b/qdrant-landing/themes/qdrant/layouts/partials/blogpost.html index a3c5479ca..821c0bd36 100644 --- a/qdrant-landing/themes/qdrant/layouts/partials/blogpost.html +++ b/qdrant-landing/themes/qdrant/layouts/partials/blogpost.html @@ -12,7 +12,9 @@ {{ end }}
-
{{ .Content }}
+
+ {{ .Content }} +
diff --git a/qdrant-landing/themes/qdrant/static/css/article.scss b/qdrant-landing/themes/qdrant/static/css/article.scss index a9b737fdd..551c6b604 100644 --- a/qdrant-landing/themes/qdrant/static/css/article.scss +++ b/qdrant-landing/themes/qdrant/static/css/article.scss @@ -1,16 +1,16 @@ article aside[role="alert"], article aside[role="status"] { - border: 1px solid transparent; - position: relative; - padding: .75rem 1.25rem .75rem 3rem; margin-bottom: 1rem; + padding: .75rem 1.25rem .75rem 3rem; + position: relative; + border: 1px solid transparent; border-radius: 0.25rem; } article aside[role="alert"] { color: var(--brand-primary); - background-color: #FBBFBF; border-color: #fdb8b8; + background-color: #FBBFBF; } article aside[role="alert"]:before, @@ -19,46 +19,34 @@ article aside[role="status"]:before { position: absolute; top: calc(50% - 0.75rem); left: 0; - font-size: 1rem; text-align: center; + font-size: 1rem; } article aside[role="alert"]:before { content: "\f071"; font-family: "Font Awesome 5 Free"; - font-weight: 900; font-size: 1rem; + font-weight: 900; } article aside[role="status"] { color: var(--brand-secondary); - background-color: #d1ecf1; border-color: #bee5eb; + background-color: #d1ecf1; } article aside[role="status"]:before { content: "\f129"; font-family: "Font Awesome 5 Free"; - font-weight: 900; font-size: 1rem; + font-weight: 900; } article:first-of-type { - padding-top: 18px; - font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; - font-size: 20px; - - @include media-breakpoint-up(md) { - padding-top: 38px; - } table { @extend .table; - font-size: 18px; - color: rgb(41, 41, 41); - @include media-breakpoint-up(md) { - font-size: 20px; - } } pre { @@ -67,8 +55,73 @@ article:first-of-type { img { display: block; - margin-left: auto; margin-right: auto; + margin-left: auto; + } + + ul, + ol { + margin-top: 1em; + margin-bottom: 1em; + } + + ul > li { + margin: 0 0 0 2em; + position: relative; + list-style: disc; + } + + ol > li { + margin: 0 0 0 2em; + position: relative; + list-style: decimal; + } + + h1 { + font-size: 2.25rem; + } + + h2 { + font-size: 1.75rem; + } + + h3 { + font-size: 1.25rem; + } + + h4 { + font-size: 1.25rem; + } + + h5 { + font-size: 1.25rem; + } + + h6 { + font-size: 1.25rem; + } + + p { + margin-bottom: 0.7rem; + line-height: 1.8em; + } + + figure { + text-align: center; + } +} + +.article, +.blog { + font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 20px; + + table { + color: rgb(41, 41, 41); + font-size: 18px; + @include media-breakpoint-up(md) { + font-size: 20px; + } } ul, @@ -78,11 +131,8 @@ article:first-of-type { } ul > li { - list-style: disc; - margin: 0 0 0 2em; - position: relative; - font-size: 18px; color: rgb(41, 41, 41); + font-size: 18px; line-height: 32px; @include media-breakpoint-up(md) { font-size: 20px; @@ -90,11 +140,8 @@ article:first-of-type { } ol > li { - list-style: decimal; - margin: 0 0 0 2em; - position: relative; - font-size: 18px; color: rgb(41, 41, 41); + font-size: 18px; line-height: 32px; @include media-breakpoint-up(md) { font-size: 20px; @@ -126,23 +173,62 @@ article:first-of-type { font-size: 1.45rem; } - h6 { - font-size: 1.25rem; - } - p { - line-height: 32px; - margin-top: 0.86em; - margin-bottom: 1.5em; - font-size: 18px; color: rgb(41, 41, 41); + font-size: 18px; + line-height: 32px; @include media-breakpoint-up(md) { font-size: 20px; } } +} - figure { - text-align: center; +.article { + padding-right: 180px; + padding-left: 180px; + padding-top: 18px; + + @media only screen and (max-width: 599px) { + padding-right: 0; + padding-left: 0; } + @media only screen and (max-width: 1023px) { + padding-right: 10px; + padding-left: 10px; + } + + @include media-breakpoint-up(md) { + padding-top: 38px; + } + + p { + margin-top: 0.86em; + margin-bottom: 1.5em; + } +} + +.blog { + padding-right: 70px; + padding-left: 70px; + padding-top: 20px; + + @media only screen and (max-width: 599px) { + padding-right: 0; + padding-left: 0; + } + + @media only screen and (max-width: 1023px) { + padding-right: 10px; + padding-left: 10px; + } + + p { + margin-top: 0.86em; + margin-bottom: 1.5em; + + &:first-child { + margin-top: 0; + } + } } diff --git a/qdrant-landing/themes/qdrant/static/css/main.css b/qdrant-landing/themes/qdrant/static/css/main.css index 371634d2f..41cfcb291 100644 --- a/qdrant-landing/themes/qdrant/static/css/main.css +++ b/qdrant-landing/themes/qdrant/static/css/main.css @@ -9999,17 +9999,17 @@ article:first-of-type table th { /* @import url('jquery.mCustomScrollbar.min.css'); */ article aside[role=alert], article aside[role=status] { - border: 1px solid transparent; - position: relative; - padding: 0.75rem 1.25rem 0.75rem 3rem; margin-bottom: 1rem; + padding: 0.75rem 1.25rem 0.75rem 3rem; + position: relative; + border: 1px solid transparent; border-radius: 0.25rem; } article aside[role=alert] { color: var(--brand-primary); - background-color: #FBBFBF; border-color: #fdb8b8; + background-color: #FBBFBF; } article aside[role=alert]:before, @@ -10018,126 +10018,221 @@ article aside[role=status]:before { position: absolute; top: calc(50% - 0.75rem); left: 0; - font-size: 1rem; text-align: center; + font-size: 1rem; } article aside[role=alert]:before { content: "\f071"; font-family: "Font Awesome 5 Free"; - font-weight: 900; font-size: 1rem; + font-weight: 900; } article aside[role=status] { color: var(--brand-secondary); - background-color: #d1ecf1; border-color: #bee5eb; + background-color: #d1ecf1; } article aside[role=status]:before { content: "\f129"; font-family: "Font Awesome 5 Free"; - font-weight: 900; font-size: 1rem; + font-weight: 900; } -article:first-of-type { - padding-top: 18px; - font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; - font-size: 20px; -} -@media (min-width: 768px) { - article:first-of-type { - padding-top: 38px; - } -} -article:first-of-type table { - font-size: 18px; - color: rgb(41, 41, 41); -} -@media (min-width: 768px) { - article:first-of-type table { - font-size: 20px; - } -} article:first-of-type pre { position: relative; } article:first-of-type img { display: block; - margin-left: auto; margin-right: auto; + margin-left: auto; } article:first-of-type ul, article:first-of-type ol { - margin-top: 0.86em; - margin-bottom: 1.5em; + margin-top: 1em; + margin-bottom: 1em; } article:first-of-type ul > li { - list-style: disc; margin: 0 0 0 2em; position: relative; - font-size: 18px; - color: rgb(41, 41, 41); - line-height: 32px; -} -@media (min-width: 768px) { - article:first-of-type ul > li { - font-size: 20px; - } + list-style: disc; } article:first-of-type ol > li { - list-style: decimal; margin: 0 0 0 2em; position: relative; - font-size: 18px; - color: rgb(41, 41, 41); - line-height: 32px; -} -@media (min-width: 768px) { - article:first-of-type ol > li { - font-size: 20px; - } -} -article:first-of-type h1, article:first-of-type h2, article:first-of-type h3, article:first-of-type h4, article:first-of-type h5, article:first-of-type h6 { - margin-bottom: 1rem; - font-weight: 600; + list-style: decimal; } article:first-of-type h1 { - font-size: 2.45rem; + font-size: 2.25rem; } article:first-of-type h2 { - font-size: 2rem; + font-size: 1.75rem; } article:first-of-type h3 { - font-size: 1.45rem; + font-size: 1.25rem; } article:first-of-type h4 { - font-size: 1.45rem; + font-size: 1.25rem; } article:first-of-type h5 { - font-size: 1.45rem; + font-size: 1.25rem; } article:first-of-type h6 { font-size: 1.25rem; } article:first-of-type p { - line-height: 32px; - margin-top: 0.86em; - margin-bottom: 1.5em; - font-size: 18px; - color: rgb(41, 41, 41); -} -@media (min-width: 768px) { - article:first-of-type p { - font-size: 20px; - } + margin-bottom: 0.7rem; + line-height: 1.8em; } article:first-of-type figure { text-align: center; } +.article, +.blog { + font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; + font-size: 20px; +} +.article table, +.blog table { + color: rgb(41, 41, 41); + font-size: 18px; +} +@media (min-width: 768px) { + .article table, +.blog table { + font-size: 20px; + } +} +.article ul, +.article ol, +.blog ul, +.blog ol { + margin-top: 0.86em; + margin-bottom: 1.5em; +} +.article ul > li, +.blog ul > li { + color: rgb(41, 41, 41); + font-size: 18px; + line-height: 32px; +} +@media (min-width: 768px) { + .article ul > li, +.blog ul > li { + font-size: 20px; + } +} +.article ol > li, +.blog ol > li { + color: rgb(41, 41, 41); + font-size: 18px; + line-height: 32px; +} +@media (min-width: 768px) { + .article ol > li, +.blog ol > li { + font-size: 20px; + } +} +.article h1, .article h2, .article h3, .article h4, .article h5, .article h6, +.blog h1, +.blog h2, +.blog h3, +.blog h4, +.blog h5, +.blog h6 { + margin-bottom: 1rem; + font-weight: 600; +} +.article h1, +.blog h1 { + font-size: 2.45rem; +} +.article h2, +.blog h2 { + font-size: 2rem; +} +.article h3, +.blog h3 { + font-size: 1.45rem; +} +.article h4, +.blog h4 { + font-size: 1.45rem; +} +.article h5, +.blog h5 { + font-size: 1.45rem; +} +.article p, +.blog p { + color: rgb(41, 41, 41); + font-size: 18px; + line-height: 32px; +} +@media (min-width: 768px) { + .article p, +.blog p { + font-size: 20px; + } +} + +.article { + padding-right: 180px; + padding-left: 180px; + padding-top: 18px; +} +@media only screen and (max-width: 599px) { + .article { + padding-right: 0; + padding-left: 0; + } +} +@media only screen and (max-width: 1023px) { + .article { + padding-right: 10px; + padding-left: 10px; + } +} +@media (min-width: 768px) { + .article { + padding-top: 38px; + } +} +.article p { + margin-top: 0.86em; + margin-bottom: 1.5em; +} + +.blog { + padding-right: 70px; + padding-left: 70px; + padding-top: 20px; +} +@media only screen and (max-width: 599px) { + .blog { + padding-right: 0; + padding-left: 0; + } +} +@media only screen and (max-width: 1023px) { + .blog { + padding-right: 10px; + padding-left: 10px; + } +} +.blog p { + margin-top: 0.86em; + margin-bottom: 1.5em; +} +.blog p:first-child { + margin-top: 0; +} + .logo__link { display: block; height: 100%; @@ -17850,8 +17945,6 @@ img { font-size: 16px; line-height: 1.8em; margin-bottom: 28px; - padding-left: 180px; - padding-right: 180px; } .blog-detail .inner-box .lower-box .column { diff --git a/qdrant-landing/themes/qdrant/static/css/main.scss b/qdrant-landing/themes/qdrant/static/css/main.scss index 495e9900a..9aa7251e4 100644 --- a/qdrant-landing/themes/qdrant/static/css/main.scss +++ b/qdrant-landing/themes/qdrant/static/css/main.scss @@ -6920,8 +6920,6 @@ img{ font-size:16px; line-height:1.8em; margin-bottom:28px; - padding-left:180px; - padding-right:180px; } .blog-detail .inner-box .lower-box .column{ diff --git a/qdrant-landing/themes/qdrant/static/css/responsive.css b/qdrant-landing/themes/qdrant/static/css/responsive.css index 4e7e0fc17..dbef3b4d0 100644 --- a/qdrant-landing/themes/qdrant/static/css/responsive.css +++ b/qdrant-landing/themes/qdrant/static/css/responsive.css @@ -975,11 +975,6 @@ padding-left: 25px; } - .blog-detail .inner-box .lower-box article { - padding-left: 25px; - padding-right: 25px; - } - } @media only screen and (max-width: 599px) { @@ -1069,11 +1064,6 @@ padding-left: 15px; } - .blog-detail .inner-box .lower-box article { - padding-left: 0; - padding-right: 0; - } - } @media only screen and (max-width: 479px) {