added styling to site desc

shurco · Nov 25, 2023 · 932a021 · 932a021
1 parent 1907be5
commit 932a021
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 10 deletions.
diff --git a/web/site/product.html b/web/site/product.html
@@ -3,20 +3,27 @@
     <div class="max-w-screen-xl px-4 py-8 mx-auto sm:px-6 sm:py-12 lg:px-8">
       <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-8" v-if="load">
         <div class="relative h-[350px] sm:h-[450px]">
-          <img :src="(product.images ? `/uploads/${product.images[0].name}_md.${product.images[0].ext}` : '/assets/img/noimage.png')" alt=""
+          <img
+            :src="(product.images ? `/uploads/${product.images[0].name}_md.${product.images[0].ext}` : '/assets/img/noimage.png')"
+            alt
             class="rounded-lg absolute inset-0 h-full w-full object-cover opacity-100 group-hover:opacity-0" />
-          <img :src="(product.images ? `/uploads/${product.images[0].name}_md.${product.images[0].ext}` : '/assets/img/noimage.png')" alt=""
+          <img
+            :src="(product.images ? `/uploads/${product.images[0].name}_md.${product.images[0].ext}` : '/assets/img/noimage.png')"
+            alt
             class="rounded-lg absolute inset-0 h-full w-full object-cover opacity-0 group-hover:opacity-100" />
         </div>
         <div class="lg:col-span-2">
-          <h1 class="text-xl font-bold text-gray-900 sm:text-3xl">{{product.name}}</h1>
-          <p class="mt-4" v-html="product.description"></p>
-            <ul class="mt-4 list-disc pl-4">
-              <li v-for="(item, index) in product.attributes">{{item}}</li>
-            </ul>
-          <p class="mt-4 text-2xl font-black">{{ costFormat( product.amount ) }} {{ currency }}</p>
-          <form-button type="submit" name="Add" color="green" ico="plus" class="mt-4" @click="addCart(product.id)" v-if="!product.inCart"></form-button>
-          <form-button type="submit" name="Remove" color="red" ico="trash" class="mt-4" @click="removeCart(product.id)" v-else></form-button>
+          <h1 class="text-xl font-bold text-gray-900 sm:text-3xl">{{product.name}}</h1>        
+        <div class="mt-4" v-html="product.description"></div>
+          <ul class="mt-4 list-disc pl-4">
+            <li v-for="(item, index) in product.attributes">{{item}}</li>
+          </ul>
+          <p class="mt-4 text-2xl font-black">{{ costFormat( product.amount ) }}
+            {{ currency }}</p>
+          <form-button type="submit" name="Add" color="green" ico="plus"
+            class="mt-4" @click="addCart(product.id)" v-if="!product.inCart"></form-button>
+          <form-button type="submit" name="Remove" color="red" ico="trash"
+            class="mt-4" @click="removeCart(product.id)" v-else></form-button>
         </div>
       </div>
     </div>

diff --git a/web/site/public/assets/css/main.css b/web/site/public/assets/css/main.css
@@ -63,3 +63,35 @@ h3 {
   border-top: 2px solid rgba(13, 13, 13, 0.1);
   margin: 2rem 0;
 }
+
+
+blockquote {
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 1.5em 10px;
+  padding: 0.5em 10px;
+  quotes: "\201C""\201D""\2018""\2019";
+}
+
+blockquote:before {
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+
+blockquote p {
+  display: inline;
+}
+
+ul {
+  list-style: circle inside none;
+  margin: 1.5em 10px;
+}
+
+ol {
+  list-style: decimal-leading-zero;
+  margin: 1.5em 10px;
+}