From 29432605a0388a6968dec9547adbb06f80732e9f Mon Sep 17 00:00:00 2001
From: nelyaklyusa <nelya.klyusa@gmail.com>
Date: Thu, 24 Oct 2024 14:31:28 +0300
Subject: [PATCH] =?UTF-8?q?=D1=96=D1=8C=D1=84=D0=B4=D0=B4=20=D0=B0=D1=88?=
 =?UTF-8?q?=D1=87=D1=83=D1=96=D1=96=D1=8C=D1=84=D0=B4=D0=B4=20=D0=B0=D1=88?=
 =?UTF-8?q?=D1=87=D1=83=D1=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseImage/BaseImage.vue        |   6 +-
 .../CheckmarkedItem/CheckmarkedItem.vue       |  10 +-
 src/styles/components/_code.sass              | 115 +++++++++---------
 src/styles/components/_link.sass              |   2 +-
 4 files changed, 72 insertions(+), 61 deletions(-)

diff --git a/src/components/BaseImage/BaseImage.vue b/src/components/BaseImage/BaseImage.vue
index e6b1ba5..fe1cfe4 100644
--- a/src/components/BaseImage/BaseImage.vue
+++ b/src/components/BaseImage/BaseImage.vue
@@ -22,7 +22,7 @@ const onImageLoaded = () => {
 <template>
 	<div
 		class="BaseImage base-image"
-		:class="[`is--${fit}`]"
+		:class="[`is--${fit}`, { 'is--bg': !src }]"
 	>
 		<BaseSkeleton
 			v-show="!isImageLoaded"
@@ -48,12 +48,14 @@ const onImageLoaded = () => {
 	$root:&
 	width: 100%
 	height: 100%
-	background-color: $default-background-color
 	display: flex
 	justify-content: center
 	align-items: center
 	overflow: hidden
 
+	&.is--bg
+		background-color: $default-background-color
+
 	&__image
 		height: 100%
 		width: 100%
diff --git a/src/components/common/CheckmarkedItem/CheckmarkedItem.vue b/src/components/common/CheckmarkedItem/CheckmarkedItem.vue
index 164c035..c0748fc 100644
--- a/src/components/common/CheckmarkedItem/CheckmarkedItem.vue
+++ b/src/components/common/CheckmarkedItem/CheckmarkedItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { BaseSvgIcon } from 'UiKit/components/BaseSvgIcon'
 import BaseTooltip from 'UiKit/components/BaseTooltip/BaseTooltip.vue';
+import { PropType } from 'vue';
 
 
 export interface ICheckmarkedItem {
@@ -12,7 +13,7 @@ defineProps({
   title: String,
   description: String,
   darkMode: Boolean,
-  iconHollow: Boolean,
+  icon: String as PropType<'hollow' | 'darkbg'>,
   card: Boolean,
   tooltip: String,
 });
@@ -32,7 +33,7 @@ defineProps({
         <div class="checkmarked-item__top">
           <div
             class="checkmarked-item__icon-wrap"
-            :class="{'is--icon-hollow': iconHollow }"
+            :class="{'is--icon-hollow': icon === 'hollow', 'is--icon-dark-bg': icon === 'darkbg'  }"
           >
             <BaseSvgIcon
               name="check"
@@ -92,6 +93,7 @@ defineProps({
     height: auto
     color: $secondary-dark
 
+
   &__icon-wrap
     display: flex
     padding: 4px
@@ -105,6 +107,10 @@ defineProps({
       background-color: transparent
       border: 1px solid $secondary
       padding: 3px
+    &.is--icon-dark-bg
+      background-color: $secondary-dark
+      #{$root}__icon
+        color: $black
 
   &__bottom
     opacity: 0.9
diff --git a/src/styles/components/_code.sass b/src/styles/components/_code.sass
index 57806b0..badb802 100644
--- a/src/styles/components/_code.sass
+++ b/src/styles/components/_code.sass
@@ -11,44 +11,45 @@
 //     margin-bottom: 20px
 //     position: relative
 
-  :not(pre) > code
-    padding: 0 5px
-    display: inline-block
-    margin: 0
-    background-color: $gray-10
+:not(pre) > code
+  padding: 0 5px
+  display: inline-block
+  margin: 0
+  background-color: $gray-10
 
 
-  a > code
-    color: $black
+a > code
+  color: $black
 
 
-  a:hover > code
+a:hover > code
     color: $primary
 
-  pre > code
+pre > code
     display: block
     a
       margin: 0 !important
 
 
-  h1 > code,
-  h2 > code,
-  h3 > code,
-  h4 > code
+h1 > code,
+h2 > code,
+h3 > code,
+h4 > code
     font-size: 0.9em
 
 
-  div[class*='language-'],
-  .vp-block
+div[class*='language-'],
+.vp-block
     position: relative
     margin: 16px -24px
     overflow-x: auto
     transition: background-color 0.5s
+    max-width: 100%
 
 
-  @media (min-width: 640px)
-    div[class*='language-'],
-    .vp-block
+@media (min-width: 640px)
+  div[class*='language-'],
+  .vp-block
       margin-top: 40px
       margin-left: 0
       margin-right: 0
@@ -59,8 +60,8 @@
 
 
 
-  [class*='language-'] pre,
-  [class*='language-'] code
+[class*='language-'] pre,
+[class*='language-'] code
     /*rtl:ignore*/
     direction: ltr
     /*rtl:ignore*/
@@ -78,7 +79,7 @@
     hyphens: none
 
 
-  [class*='language-'] pre
+[class*='language-'] pre
     position: relative
     z-index: 1
     margin: 0
@@ -87,16 +88,17 @@
     overflow-x: auto
 
 
-  [class*='language-'] code
+[class*='language-'] code
     display: block
     width: fit-content
     min-width: 100%
     border: none
     transition: color 0.5s
     margin-bottom: 0
+    padding: 10px
 
 
-  [class*='language-'] code .highlighted
+[class*='language-'] code .highlighted
     background-color: $primary-light
     transition: background-color 0.5s
     margin: 0 -24px
@@ -105,15 +107,15 @@
     display: inline-block
 
 
-  [class*='language-'] code .highlighted.error
+[class*='language-'] code .highlighted.error
     background-color: $red
 
 
-  [class*='language-'] code .highlighted.warning
+[class*='language-'] code .highlighted.warning
     background-color: $yellow
 
 
-  [class*='language-'] code .diff
+[class*='language-'] code .diff
     transition: background-color 0.5s
     margin: 0 -24px
     padding: 0 24px
@@ -121,52 +123,52 @@
     display: inline-block
 
 
-  [class*='language-'] code .diff::before
+[class*='language-'] code .diff::before
     position: absolute
     left: 10px
 
 
-  [class*='language-'] .has-focused-lines .line:not(.has-focus)
+[class*='language-'] .has-focused-lines .line:not(.has-focus)
     filter: blur(0.095rem)
     opacity: 0.4
     transition: filter 0.35s, opacity 0.35s
 
 
-  [class*='language-'] .has-focused-lines .line:not(.has-focus)
+[class*='language-'] .has-focused-lines .line:not(.has-focus)
     opacity: 0.7
     transition: filter 0.35s, opacity 0.35s
 
 
-  [class*='language-']:hover .has-focused-lines .line:not(.has-focus)
+[class*='language-']:hover .has-focused-lines .line:not(.has-focus)
     filter: blur(0)
     opacity: 1
 
 
-  [class*='language-'] code .diff.remove
+[class*='language-'] code .diff.remove
     background-color: $red
     opacity: 0.7
 
 
-  [class*='language-'] code .diff.remove::before
+[class*='language-'] code .diff.remove::before
     content: '-'
     color: $red
 
 
-  [class*='language-'] code .diff.add
+[class*='language-'] code .diff.add
     background-color: $secondary
 
 
-  [class*='language-'] code .diff.add::before
+[class*='language-'] code .diff.add::before
     content: '+'
     color: $secondary
 
 
-  div[class*='language-'].line-numbers-mode
+div[class*='language-'].line-numbers-mode
     /*rtl:ignore*/
     padding-left: 32px
 
 
-  .line-numbers-wrapper
+.line-numbers-wrapper
     position: absolute
     top: 0
     bottom: 0
@@ -181,7 +183,7 @@
     transition: border-color 0.5s, color 0.5s
 
 
-  [class*='language-'] > button.copy
+[class*='language-'] > button.copy
     /*rtl:ignore*/
     direction: ltr
     position: absolute
@@ -201,18 +203,19 @@
     transition: border-color 0.25s, background-color 0.25s, opacity 0.25s
 
 
-  [class*='language-'] > button.copy:focus
+[class*='language-'] > button.copy:focus,
+[class*='language-'] > button.copy:hover
     opacity: 1
 
 
-  [class*='language-'] > button.copy.copied,
-  [class*='language-'] > button.copy:hover.copied
+[class*='language-'] > button.copy.copied,
+[class*='language-'] > button.copy:hover.copied
     background-image: url("UiKit/assets/check.svg?url")
 
 
 
 
-  [class*='language-'] > span.lang
+[class*='language-'] > span.lang
     position: absolute
     top: 2px
     right: 8px
@@ -221,16 +224,16 @@
     transition: color 0.4s, opacity 0.4s
 
 
-  [class*='language-']:hover > button.copy + span.lang,
-  [class*='language-'] > button.copy:focus + span.lang
+[class*='language-']:hover > button.copy + span.lang,
+[class*='language-'] > button.copy:focus + span.lang
     opacity: 0
 
 
-  .vp-code-group
+.vp-code-group
     margin-top: 16px
   
 
-  .vp-code-group .tabs
+.vp-code-group .tabs
     position: relative
     display: flex
     margin-right: -24px
@@ -242,20 +245,20 @@
     border-radius: 2px
   
 
-  @media (min-width: 640px)
-    .vp-code-group .tabs
+@media (min-width: 640px)
+  .vp-code-group .tabs
       margin-right: 0
       margin-left: 0
     
   
 
-  .vp-code-group .tabs input
+.vp-code-group .tabs input
     position: fixed
     opacity: 0
     pointer-events: none
   
 
-  .vp-code-group .tabs label
+.vp-code-group .tabs label
     position: relative
     display: inline-block
     border-bottom: 1px solid transparent
@@ -268,28 +271,28 @@
     transition: all 0.25s
   
 
-  .vp-code-group label:hover
+.vp-code-group label:hover
     color: $black
   
 
-  .vp-code-group input:checked + label
+.vp-code-group input:checked + label
     color: $black
     background-color: $white
     box-shadow: $box-shadow-small
   
 
-  .vp-code-group div[class*='language-'],
-  .vp-block
+.vp-code-group div[class*='language-'],
+.vp-block
     display: none
     margin-top: 0 !important
     border-top-left-radius: 0 !important
     border-top-right-radius: 0 !important
   
 
-  .vp-code-group div[class*='language-'].active,
-  .vp-block.active
+.vp-code-group div[class*='language-'].active,
+.vp-block.active
     display: block
   
 
-  .vp-block
+.vp-block
     padding: 20px 24px
diff --git a/src/styles/components/_link.sass b/src/styles/components/_link.sass
index c4181ab..4128904 100644
--- a/src/styles/components/_link.sass
+++ b/src/styles/components/_link.sass
@@ -75,7 +75,7 @@ h1, h2, h3, h4, h5, h6,
 
 
 // SPACING
-a + *:not(.is--no-margin)
+a + *:not(.is--no-margin):not(br)
     margin-top: 12px
 .is--no-margin
     a + *,