Style blog page a little bit

consensusnetworks · Oct 5, 2023 · 5927741 · 5927741
1 parent 17c8b54
commit 5927741
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 38 deletions.
diff --git a/apps/landing/src/pages/blog/Blog.vue b/apps/landing/src/pages/blog/Blog.vue
@@ -55,29 +55,29 @@ const {
         :to="`/blog/${blog.id}`"
         class="blog_card flex flex-col mb-[50px]"
       >
-        <div class="flex items-center gap-10 text-6 text-gray-400">
-          <span>
+        <div class="flex items-center gap-5">
+          <span class="text-[0.833rem] font-[500]">
             {{ blog.type }} •
           </span>
-          <span>
+          <span class="text-8">
             {{ new Date(blog.timestamp).toDateString() }}
           </span>
         </div>
 
-        <div class="text-1">
+        <div class="text-[1.574rem] font-[600] py-10">
           {{ blog.title }}
         </div>
 
 
-        <div class="h-full  w-full overflow-hidden  pt-5">
+        <div class="h-full  w-full overflow-hidden  ">
           <div
             class="overview_blog_content"
             v-html="blog.content"
           />
         </div>
 
         <div class="h-[100px] flex items-end text-8 highlight ">
-          <div class="flex items-center">
+          <div class="flex items-center gap-3">
             Read More
             <vue-feather
               type="arrow-right"
@@ -141,6 +141,8 @@ const {
 }
 
 .overview_blog_content {
+  font-size: 1.074rem;
+  font-weight: 300;
 
   h1,
   ul,

diff --git a/apps/landing/src/pages/blog/components/SingleBlog.vue b/apps/landing/src/pages/blog/components/SingleBlog.vue
@@ -6,32 +6,32 @@ import router from '@/composables/router.ts'
 
 
 const {
-    allBlogs,
-    loadingBlogs,
+  allBlogs,
+  loadingBlogs,
 } = useBlogs()
 
 const activeBlog = ref(null)
 
 function findBlog(activeRoute) {
-    const blogItem = allBlogs.value.filter(item => item.id === activeRoute)[0]
-    activeBlog.value = blogItem
+  const blogItem = allBlogs.value.filter(item => item.id === activeRoute)[0]
+  activeBlog.value = blogItem
 }
 
 onMounted(() => {
-    let currentRoutes = router.currentRoute.value.fullPath.split('/')
-    let activeRoute = currentRoutes[currentRoutes.length - 1]
+  let currentRoutes = router.currentRoute.value.fullPath.split('/')
+  let activeRoute = currentRoutes[currentRoutes.length - 1]
 
-    // Finds active blog based on route 
-    if (!loadingBlogs) findBlog(activeRoute)
+  // Finds active blog based on route 
+  if (!loadingBlogs) findBlog(activeRoute)
 })
 
 watch([allBlogs, loadingBlogs], () => {
 
-    let currentRoutes = router.currentRoute.value.fullPath.split('/')
-    let activeRoute = currentRoutes[currentRoutes.length - 1]
+  let currentRoutes = router.currentRoute.value.fullPath.split('/')
+  let activeRoute = currentRoutes[currentRoutes.length - 1]
 
-    // Finds active blog based on route 
-    findBlog(activeRoute)
+  // Finds active blog based on route 
+  findBlog(activeRoute)
 })
 
 </script>
@@ -86,7 +86,7 @@ watch([allBlogs, loadingBlogs], () => {
               to="/blogs"
               class=""
             >
-              <div class="text-[0.833rem;] font-[400] highlight flex items-center gap-5">
+              <div class="text-[0.833rem;] font-[400] highlight flex items-center gap-5 tracking-wide">
                 <vue-feather
                   type="arrow-left"
                   class="h-[0.92rem] mb-3"
@@ -96,19 +96,19 @@ watch([allBlogs, loadingBlogs], () => {
             </router-link>
           </div>
           <div class="mb-[300px]">
-            <h5 class="text-7 text-gray-600 flex items-center">
+            <h5 class="text-[16px] font-[500] tracking-wide flex items-center">
               ConsensusNetworks
             </h5>
-            <h6 class="text-8 text-gray-400">
+            <h6 class="text-[16px] font-[400] tracking-wide opacity-[0.75]">
               Team
             </h6>
           </div>
 
           <div>
-            <h5 class="text-7 text-gray-600">
+            <h5 class="text-[16px] font-[500] tracking-wide flex items-center">
               {{ activeBlog.type }}
             </h5>
-            <h6 class="text-8 text-gray-400">
+            <h6 class="text-[16px] font-[400] tracking-wide opacity-[0.75]">
               {{ new Date(activeBlog.timestamp).toDateString() }}
             </h6>
           </div>
@@ -160,29 +160,32 @@ watch([allBlogs, loadingBlogs], () => {
 
 <style>
 .activeblog_content {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    padding-bottom: 50px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 50px;
+
+  font-size: 1.074rem;
+  font-weight: 300;
 }
 
 .activeblog_content ul {
-    margin-left: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .activeblog_content img {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .activeblog_content h1 {
-    font-size: 2.986rem;
-    font-weight: 400;
-    letter-spacing: -2px;
-    line-height: 1.38;
-    color: hsl(210, 12%, 12.5%);
+
+  font-size: 1.574rem;
+  font-weight: 600;
+  letter-spacing: -0.75px;
+  color: hsl(210, 12%, 12.5%);
 }
 </style>