Image issue (#672)

* changed the content of docs

* changed font size

* added socaillist component

* fixed image issue in customer stories and docs page

* fixed Image issue in docs

assets/styles/_variable.scss

@@ -18,6 +18,7 @@ $black-3 : #252526;
 
 $blue: #1761FD;
 $indigo: #8405FF;
+$indigo-1 : #1B0229;
 $purple: #9F9DFF;
 $pink: #FD3C97;
 $red: #E36065;

components/docs/Container.vue

@@ -2,7 +2,7 @@
     <div class="container bd-gutter bd-layout margin">
         <NavSideBar :type="type" v-if="pageList" :page-list="pageList"/>
 
-        <article class="bd-main order-1" v-if="page" :class="{'full': page.rightBar === false}">
+        <article class="bd-main order-1" v-if="page" :class="{'full': page.rightBar === false , 'docs' : isDoc}">
             <ContentRenderer :value="page">
                 <div class="bd-title">
                     <Breadcrumb :slug="props.slug" :pageList="pageList"/>
@@ -42,6 +42,7 @@
             required: true
         },
     })
+    const isDoc = computed(()=> props.type === 'docs')
     const {data: page, error} = await useAsyncData(`Container-${hash(props.slug)}`, () => {
         try {
             return queryContent(props.slug).findOne();
@@ -110,7 +111,12 @@
     font-weight: 600;
     line-height: 2.375;
 }
-</style>
 
 
+.docs :deep(img){
+    width: 100%;
+}
+</style>
+
+
 

components/stories/Header.vue

@@ -45,7 +45,7 @@ const pagelist = ['/stories', props.slug]
 @import "../../assets/styles/variable";
 
 .main {
-    background-color: $purple-35;
+    background-color: $indigo-1;
     background-image: url('/stories/header/dots.svg');
     background-repeat: no-repeat;
     background-position: center;