Merge pull request #33 from Sreesanth46/refactor/update-styles-to-typ…

…ography Updated Styles
Sreesanth46 · Apr 7, 2024 · 6b46bcd · 6b46bcd
2 parents a039f03 + 0685684
commit 6b46bcd
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 47 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,7 +8,7 @@ import SlideEnterTransition from '~/components/SlideEnterTransition.vue';
   <div class="flex flex-col h-screen pb-2 px-6">
     <Plum />
     <Navbar />
-    <main class="flex-auto py-10">
+    <main class="flex-auto py-10 md:pt-14 md:pb-10">
       <router-view v-slot="{ Component }">
         <slide-enter-transition>
           <component :is="Component" />

diff --git a/src/components/Markdown.vue b/src/components/Markdown.vue
@@ -34,9 +34,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <section
+  <article
     v-html="render"
-    class="prose dark:prose-invert prose-p:text-gray-500/80 prose-p:dark:text-gray-100/80" />
+    class="prose dark:prose-invert prose-p:text-gray-500/80 prose-p:dark:text-gray-100/80 lg:prose-lg" />
 </template>
 
 <style>

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -35,52 +35,46 @@ const Frameworks = [
 
 <template>
   <div class="sm:m-auto max-w-[75ch]">
-    <div class="max-w-prose mb-8">
-      <hi class="mb-0 text-4xl font-bold"> Sreesanth </hi>
-    </div>
-    <article>
-      <div class="m-auto flex flex-col gap-4">
-        <p>Hey, I am Sreesanth, a Full-Stack Developer | open sourceror</p>
-
-        <div>
-          <p>
-            Detail-oriented Full-Stack Developer with expertise developing and
-            deploying complete web applications with technologies like
-          </p>
-          <div class="flex flex-wrap">
-            <div
-              class="flex items-center pr-3"
-              v-for="({ label, icon }, i) in Frameworks"
-              :key="label">
-              <p class="mr-1">{{ label }}</p>
-              <component :is="icon" />
-              <span v-if="Frameworks.length - 1 !== i">&#65104;</span>
-            </div>
+    <article class="prose dark:prose-invert lg:prose-lg">
+      <h1 class="mb-0 text-4xl font-bold">Sreesanth</h1>
+      <p>Hey, I am Sreesanth, a Full-Stack Developer | open sourceror</p>
+      <p class="mb-0">
+        Detail-oriented Full-Stack Developer with expertise developing and
+        deploying complete web applications with technologies like
+        <span class="flex flex-wrap not-prose">
+          <div
+            class="flex items-center pr-3"
+            v-for="({ label, icon }, i) in Frameworks"
+            :key="label">
+            <p class="mr-1">{{ label }}</p>
+            <component :is="icon" />
+            <span v-if="Frameworks.length - 1 !== i">&#65104;</span>
           </div>
-        </div>
+        </span>
+      </p>
 
-        <p>
-          Dreaming up ideas and making them come true is where my passion lies.
-          I excel in roles that require versatility, whether it's leading
-          collaborative planning sessions, designing scalable backend
-          architectures for growth, or coding intuitive and responsive frontend.
-        </p>
-        <p>Outside coding, I enjoy doing photography and traveling.</p>
-      </div>
-      <hr class="w-24 m-auto my-10 border-[#7d7d7d4d]" />
+      <p>
+        Dreaming up ideas and making them come true is where my passion lies. I
+        excel in roles that require versatility, whether it's leading
+        collaborative planning sessions, designing scalable backend
+        architectures for growth, or coding intuitive and responsive frontend.
+      </p>
+      <p>Outside coding, I enjoy doing photography and traveling.</p>
+      <hr
+        class="w-24 m-auto my-10 border-[#7d7d7d4d] dark:border-[#e9e9e94d]" />
+    </article>
 
-      <div class="flex flex-col gap-2">
-        <p>Find me on</p>
-        <div class="flex gap-4">
-          <find-me
-            v-for="me in FindMeLinks"
-            :key="me.link"
-            :label="me.label"
-            :link="me.link">
-            <component :is="me.icons.outlined" />
-          </find-me>
-        </div>
+    <div class="flex flex-col gap-2 mt-10">
+      <p>Find me on</p>
+      <div class="flex gap-4">
+        <find-me
+          v-for="me in FindMeLinks"
+          :key="me.link"
+          :label="me.label"
+          :link="me.link">
+          <component :is="me.icons.outlined" />
+        </find-me>
       </div>
-    </article>
+    </div>
   </div>
 </template>
diff --git a/src/pages/blogs/Blogs.vue b/src/pages/blogs/Blogs.vue
@@ -7,7 +7,7 @@ const prettyName = (name: string) => name.split('-').join(' ');
 </script>
 
 <template>
-  <div class="max-w-[75ch] m-auto pt-4 md:p-6">
+  <div class="max-w-[75ch] m-auto">
     <div v-if="route.name === 'Blogs'" class="flex flex-col gap-2">
       <router-link
         :to="`blogs/${name}`"

diff --git a/src/tailwind.css b/src/tailwind.css
@@ -55,3 +55,19 @@ html.dark {
   border-radius: 14px;
   border: 3px solid var(--primary);
 }
+
+@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@1,500&display=swap');
+
+.shiki,
+.shiki span {
+  font-family: 'DM Mono', monospace;
+  font-style: italic;
+}
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  font-family: 'DM Mono', monospace;
+  font-style: italic;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}