feat: pre/code blocks now responsive

2021-06-27 20:36:21 +01:00
parent 9a796e4ef6
commit b49ec00b84
5 changed files with 60 additions and 37 deletions
@@ -48627,10 +48627,23 @@ a.no-underline:hover{
  text-decoration: none;
 }

-pre{
+/* pre{
+  white-space: pre-wrap;
+  word-break: break-all;
  max-width: 100%;
-  --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+code{
+  word-break: break-all;
+} */
+
+.kg-image-card{
+  align-content: center;
+}
+
+.kg-image {
+  margin-left: auto;
+  margin-right: auto;
 }

 .text-gradient {
@@ -19,8 +19,22 @@ a.no-underline:hover{
  text-decoration: none;
 }

-pre{
-  @apply shadow-inner max-w-full;
+/* pre{
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-width: 100%;
+}
+
+code{
+  word-break: break-all;
+} */
+
+.kg-image-card{
+  @apply content-center;
+}
+
+.kg-image {
+  @apply mx-auto;
 }

 .text-gradient {
@@ -108,7 +108,7 @@

    {{!-- Body --}}

-    <div class="post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4 max-w-prose">
+    <div class="block post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4 w-full max-w-prose">
      {{content}}
    </div>

@@ -146,8 +146,6 @@
  {{/post}}

  <script>
-    // let pTags = Array.from(document.getElementsByTagName('p')) //.filter( t => t.innerHTML.includes(':::'))
-
    let postContent = Array.from(document.getElementsByClassName('post-content'))[0].innerHTML

    let tips = postContent.match(/<p>::: tip(.*?):::<\/\p>/g)
@@ -196,6 +194,4 @@
      })

    Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
-
-
  </script>
@@ -15,12 +15,7 @@
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
-
-  {{!-- Simple little js lib --}}
-  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
-
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
-  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 </head>

 <body class="{{body_class}} bg-gray-100 dark:bg-gray-800">
@@ -42,6 +37,9 @@
    </script>
    {{/is}}

+  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+  {{!-- Simple little js lib --}}
+  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
  {{ghost_foot}}

 </body>
@@ -42,9 +42,9 @@

        {{!-- unccomment in stage 2 --}}
        <div
-          class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform opacity-90 hover:opacity-100 scale-90 hover:scale-100 transition bg-blue-500 text-white">
+          class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform opacity-90 hover:opacity-100 scale-75 hover:scale-90 transition bg-blue-500 text-white">
          <a href="/features/connectors"
-            class="flex flex-col text-center w-full h-full text-xl items-center justify-center">
+            class="flex flex-col text-center w-full text-xl items-center justify-center">
            All <span class="hidden md:inline-block">Connectors</span>
          </a>
        </div>
@@ -156,27 +156,29 @@
  </div>

  <script>
-    var swiper = new Swiper(".connector-swiper", {
-      slidesPerView: 5,
-      spaceBetween: 20,
-      loop: true,
-      grabCursor: true,
-      pagination: {
-        el: ".swiper-pagination",
-        clickable: true
-      },
-      breakpoints: {
-        1024: {
-          slidesPerView: 5,
-          spaceBetween: 50,
+    window.addEventListener('load', (event) => {      
+      let swiper = new Swiper(".connector-swiper", {
+        slidesPerView: 3,
+        spaceBetween: 20,
+        loop: true,
+        grabCursor: true,
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true
        },
-        1280: {
-          slidesPerView: 7,
-          spaceBetween: 50,
+        breakpoints: {
+          768: {
+            slidesPerView: 5,
+            spaceBetween: 50,
+          },
+          1280: {
+            slidesPerView: 7,
+            spaceBetween: 50,
+          }
        }
-      }
-    })
+      })

-    if(window.innerWidth>=1280)
-      swiper.slideTo(6, false, false)
+      if(window.innerWidth>=1280)
+        swiper.slideTo(6, false, false)
+    })
  </script>