sc-14570 rotational.io social buttons have disappeared (#144)

rotationalio · Mar 21, 2023 · f2a2d56 · f2a2d56
1 parent bbb7429
commit f2a2d56
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 133 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+*.html
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -36,35 +36,33 @@ <h3 class="font-bold text-xl sm:text-2xl lg:text-3xl text-center" data-blog-titl
   </div>
 
   <div class="bg-[#E8EFF6] max-w-[800px] mx-auto mt-9 p-8 rounded-lg">
-    <div class="text-center">
-      <h3 class="font-bold text-xl sm:text-2xl lg:text-3xl">
-        <b class="text-[#1D65A6]">{{ with i18n "aboutPost" }} {{ index (split . " ") 0 | safeHTML }} {{ end }}</b>
-        {{ with i18n "aboutPost" }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}
-      </h3>
-    </div>
-    <p class="mt-4 text-base mx-auto text-center sm:mt-5 lg:mt-7 lg:text-base max-w-2xl">
+    <h3 class="font-bold text-xl sm:text-2xl lg:text-3xl text-center mb-3">
+      <span class="text-[#1D65A6] font-bold">{{ with i18n "aboutPost" }} {{ index (split . " ") 0 | safeHTML }} {{ end }}</span>
+      {{ with i18n "aboutPost" }} {{ after (len (index (split . " ") 0)) . | safeHTML }} {{ end }}
+    </h3>
+    <p class="text-base mx-auto px-2 text-center lg:text-base">
       {{ .Params.description }}
     </p>
 
-    <div class="md:flex text-center max-w-[600px] mx-auto border-t pt-6 mt-6 align-center justify-between">
-      <div>
-        <div class="text-lg text-[#1D65A6] font-bold mb-3 ">
-          {{ i18n "writtenBy" }}:</div>
-        <div class="flex items-center mt-4 mb-6  ">
-          <img src="{{ .Params.profile }}" alt="" class="border-4 border-white rounded-full h-11 drop-shadow-lg"><span
-            class="ml-3">{{ .Params.author }}</span>
+    <div class="flex flex-col md:flex-row text-center mx-auto border-t pt-6 mt-6 align-center justify-between gap-10">
+      <div class="lg:w-1/2 text-center">
+        <h2 class="text-lg text-[#1D65A6] font-bold mb-3">
+          {{ i18n "writtenBy" }}:</h2>
+        <div class="flex items-center justify-center">
+          <img src="{{ .Params.profile }}" alt="" class="border-4 border-white rounded-full drop-shadow-lg"><span
+            class="ml-3 lg:w-[20ch]">{{ .Params.author }}</span>
         </div>
       </div>
-      <div class="sm:ml-10 sm:mt-0 mt-12 ">
-        <div class="text-lg text-[#1D65A6] font-bold mb-3">{{ i18n "sharePost" }}:</div>
-        <ul class="grid grid-cols-3 gap-6 mt-4">
-          <li><a onClick="shareByEmail()" class="flex items-center"><img src="img/email.png" alt=""
-                class="p-3 bg-white rounded-lg mr-3"></a></li>
-
-          <li><a onClick="shareOnTwitterWithTitle()" class="flex items-center"><img src="img/twitter.png" alt=""
-                class="p-3 bg-white rounded-lg mr-4"></a></li>
-          <li><a onClick="shareOnLinkedIn()" class="flex items-center"><img src="img/linkedin.png" alt=""
-                class="p-3 bg-white rounded-lg mr-3"></a></li>
+      <div class="lg:w-1/2">
+        <h2 class="text-lg text-[#1D65A6] font-bold mb-3">{{ i18n "sharePost" }}:</h2>
+        <ul class="flex items-center justify-center gap-6 mt-4">
+          <li><a onClick="shareByEmail()" class="cursor-pointer "><img src="img/email.png" alt=""
+                class="rounded-lg bg-white p-3"></a></li>
+
+          <li><a onClick="shareOnTwitterWithTitle()" class="cursor-pointer"><img src="img/twitter.png" alt=""
+                class="rounded-lg bg-white p-3"></a></li>
+          <li><a onClick="shareOnLinkedIn()" class="cursor-pointer"><img src="img/linkedin.png" alt=""
+                class="rounded-lg bg-white p-3"></a></li>
         </ul>
       </div>
 

diff --git a/static/img/email.png b/static/img/email.png
diff --git a/static/img/linkedin.png b/static/img/linkedin.png
diff --git a/static/img/twitter.png b/static/img/twitter.png
diff --git a/static/output.css b/static/output.css
@@ -1345,72 +1345,40 @@ video {
   width: 100%;
 }
 
-.w-\[215px\] {
-  width: 215px;
-}
-
-.w-\[15px\] {
-  width: 15px;
-}
-
-.w-\[115px\] {
-  width: 115px;
-}
-
-.w-2\/3 {
-  width: 66.666667%;
-}
-
-.w-1\/3 {
-  width: 33.333333%;
-}
-
-.w-1\/4 {
-  width: 25%;
-}
-
-.w-3\/4 {
-  width: 75%;
-}
-
-.w-\[100px\] {
-  width: 100px;
-}
-
-.w-5 {
-  width: 1.25rem;
+.w-1\/2 {
+  width: 50%;
 }
 
-.w-20 {
-  width: 5rem;
+.w-2\/5 {
+  width: 40%;
 }
 
-.w-40 {
-  width: 10rem;
+.w-3\/5 {
+  width: 60%;
 }
 
-.w-60 {
-  width: 15rem;
+.w-3\/6 {
+  width: 50%;
 }
 
-.w-1\/5 {
-  width: 20%;
+.w-\[65ch\] {
+  width: 65ch;
 }
 
-.w-2\/5 {
-  width: 40%;
+.w-\[5ch\] {
+  width: 5ch;
 }
 
-.w-3\/5 {
-  width: 60%;
+.w-\[50ch\] {
+  width: 50ch;
 }
 
-.w-4\/5 {
-  width: 80%;
+.w-\[30ch\] {
+  width: 30ch;
 }
 
-.w-1\/2 {
-  width: 50%;
+.w-\[20ch\] {
+  width: 20ch;
 }
 
 .max-w-2xl {
@@ -1433,30 +1401,6 @@ video {
   max-width: 36rem;
 }
 
-.max-w-\[215px\] {
-  max-width: 215px;
-}
-
-.max-w-\[115px\] {
-  max-width: 115px;
-}
-
-.max-w-\[15px\] {
-  max-width: 15px;
-}
-
-.max-w-\[65px\] {
-  max-width: 65px;
-}
-
-.flex-shrink {
-  flex-shrink: 1;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
 .grow {
   flex-grow: 1;
 }
@@ -1505,10 +1449,6 @@ video {
   flex-direction: column;
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
 .content-center {
   align-content: center;
 }
@@ -1545,21 +1485,27 @@ video {
   gap: 2rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-20 {
   -moz-column-gap: 5rem;
        column-gap: 5rem;
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-x-reverse: 0;
   border-right-width: calc(2px * var(--tw-divide-x-reverse));
   border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
 }
 
-.overflow-hidden {
-  overflow: hidden;
-}
-
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1663,11 +1609,6 @@ video {
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 
-.border-red-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(185 28 28 / var(--tw-border-opacity));
-}
-
 .border-teal-500 {
   --tw-border-opacity: 1;
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
@@ -1678,16 +1619,6 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.\!border-red-700 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(185 28 28 / var(--tw-border-opacity)) !important;
-}
-
-.\!border-\[red\] {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(255 0 0 / var(--tw-border-opacity)) !important;
-}
-
 .bg-\[\#00743F\] {
   --tw-bg-opacity: 1;
   background-color: rgb(0 116 63 / var(--tw-bg-opacity));
@@ -1890,6 +1821,11 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -2445,10 +2381,6 @@ body {
     width: 60%;
   }
 
-  .sm\:w-\[50\%\] {
-    width: 50%;
-  }
-
   .sm\:grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
@@ -2559,14 +2491,6 @@ body {
     display: none;
   }
 
-  .md\:w-2\/3 {
-    width: 66.666667%;
-  }
-
-  .md\:w-1\/3 {
-    width: 33.333333%;
-  }
-
   .md\:w-1\/2 {
     width: 50%;
   }
@@ -2722,6 +2646,10 @@ body {
     width: 94%;
   }
 
+  .lg\:w-\[20ch\] {
+    width: 20ch;
+  }
+
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }