Fix blog card link

* Refactor page styles

Signed-off-by: Randy <randymoralesg@gmail.com>

components/PostCard.js

@@ -44,9 +44,9 @@ export default function PostCard({
           </span>
         </div>
 
-        <Link href={url}>
-          <h2 className={blogStyles.cardTitle}>{title}</h2>
-        </Link>
+        <h2 className={blogStyles.cardTitle}>
+          <Link href={url}>{title}</Link>
+        </h2>
 
         <p className={blogStyles.cardDescription}>{description}</p>
       </div>

pages/blog/index.js

@@ -50,14 +50,14 @@ export default function BlogIndex({ allLocalePostsData }) {
   }, [])
 
   return (
-    <Layout pageTitle={t('blog')}>
+    <Layout pageTitle={t('blog')} large={true}>
       <div>
         <div ref={searchRef} className={styles.container}>
           {/* Search bar */}
           <input
             className={styles.search}
             onChange={onChange}
-            placeholder={t('search-posts')}
+            placeholder={'🔎 ' + t('search-posts')}
             type='text'
             value={query}
           />

pages/tags/[tag].js

@@ -11,13 +11,15 @@ export default function TagIndex({ posts, tag }) {
 
   return (
     <Layout pageTitle={`${t('posts-tag')} ${tag}`}>
-      <h1>
-        {t('posts-tag')}: {`#${tag}`}
-      </h1>
+      <h2>
+        {t('posts-tag')}:{' '}
+        <span className={blogStyles.tagPageData}>{`#${tag}`}</span>
+      </h2>
 
-      <h4>
-        {t('posts-found')}: {posts.length}
-      </h4>
+      <h2>
+        {t('posts-found')}:{' '}
+        <span className={blogStyles.tagPageData}>{posts.length}</span>
+      </h2>
 
       <div className='page-separator'>
         <hr />

styles/blog.module.css

@@ -7,14 +7,20 @@
 }
 
 .search {
-  border: 1px solid #666;
+  border: 2px solid var(--border-color);
   cursor: 'pointer';
   font-size: 1.3rem;
+  height: 40px;
   margin-bottom: 1rem;
-  padding: 0.9rem;
+  padding: 0 0.5em;
   width: 100%;
 }
 
+.tagPageData {
+  color: var(--title-color);
+  font-size: inherit;
+}
+
 /* ******** Blogpost Card ******** */
 
 .cardsContainer {
@@ -29,17 +35,11 @@
   background-color: var(--card-color);
   border-radius: 0.5rem;
   box-shadow: 1px 3px 0 var(--border-card-color);
-  height: 375px;
   margin: 0.5rem;
-  position: static;
-  transition: 250ms all ease-in-out;
+  padding-bottom: 0.5rem;
   width: 400px;
 }
 
-.card:hover {
-  transform: scale(1.02);
-}
-
 .cardImg {
   border-radius: 0.5rem;
   object-fit: cover;
@@ -54,7 +54,6 @@
 .cardMetadata {
   align-items: center;
   display: flex;
-  font-size: calc(1em * var(--scale));
   font-weight: 600;
   justify-content: space-between;
   margin: 0;
@@ -64,45 +63,36 @@
 .cardTag {
   border: 2px solid var(--tag-color);
   border-radius: 8px;
+  box-shadow: 3px 3px 0 var(--shadow-color);
   color: var(--tag-color);
-  font-size: calc(0.9em * var(--scale));
+  display: inline-block;
+  font-weight: 600;
   height: 1.8em;
-  margin-right: 0.5rem;
-  padding: 0 0.5em;
+  margin: .25em;
+  padding: 0 .5em;
   text-align: center;
-  text-decoration: none;
-  transition: all 150ms;
+}
+
+.cardTag:hover{
+  box-shadow: none!important;
+  text-shadow: none!important;
+  transform: translate(1px, 2px)!important;
 }
 
 .cardDate {
-  font-size: calc(0.7em * var(--scale));
+  font-size: calc(1em * var(--scale));
   justify-content: right;
 }
 
 .cardTitle {
   color: var(--title-color);
-  cursor: pointer;
   font-size: calc(1.2em * var(--scale));
   line-height: 1.5rem;
   margin: 1rem 0;
 }
 
 .cardDescription {
-  font-size: calc(0.8em * var(--scale));
-}
-
-.highlight {
-  background-color: red;
-  border-radius: 0 2rem 2rem 0;
-  color: white;
-  font-size: 0.8rem;
-  font-weight: bold;
-  margin-left: -16px;
-  padding: 0.5rem 1.3rem 0.5rem 1rem;
-  position: absolute;
-  text-transform: uppercase;
-  top: 1rem;
-  z-index: 1;
+  font-size: calc(1em * var(--scale));
 }
 
 /* ******** Blogpost Content ******** */
@@ -206,7 +196,7 @@
   }
 
   .cardDate {
-    font-size: calc(0.8em * var(--scale));
+    font-size: calc(0.9em * var(--scale));
   }
 
   .cardTitle {
@@ -224,20 +214,13 @@
   }
 
   .card {
-    height: 350px;
     margin: 1rem 0;
     width: 70%;
     background-color: unset;
   }
 
   .cardImg {
     height: 9em;
-    z-index: -1;
-  }
-
-  .card:hover {
-    transform: unset;
-    z-index: -1;
   }
 
   .cardBody {
@@ -271,6 +254,7 @@
   }
 
   .cardTag {
+    box-shadow: none;
     font-size: calc(1.10em * var(--scale));
   }
 

styles/globals.css

@@ -55,15 +55,15 @@
   --font-size: 20px;
 
   /* Color related */
-  --body-background-color: #FAFAFA;
+  --body-background-color: #f7f8fc;
   --border-color: var(--content-text-color);
-  --border-card-color:  rgb(0 0 0 / 10%);
+  --border-card-color:  rgb(0 0 0 / 20%);
   --card-color: white;
   --content-text-color: #09090B;
   --link-hover-underline-color: #FF5D27;
   --nav-mobile-background-color: rgba(237, 241, 243, 0.95);
   --post-link-color: #FF5D27;
-  --shadow-color: #FF5D27;
+  --shadow-color: #09090B;
   --social-networks-icons-color: #141F2D;
   --tag-color: #09090B;
   --title-color: #FF5D27;
@@ -75,12 +75,13 @@
 .darkTheme {
   --body-background-color: #08090C;
   --border-color: var(--content-text-color);
-  --border-card-color: rgb(255 255 255 / 10%);
+  --border-card-color: rgb(255 255 255 / 20%);
   --card-color: #0B0E13;
   --content-text-color: white;
   --link-hover-underline-color: #FC5F25;
   --nav-mobile-background-color: rgba(1, 2, 3, 0.95);
   --post-link-color: #FC5F25;
+  --shadow-color: #FAFAFA;
   --social-networks-icons-color: white;
   --title-color: #FC5F25;
 }
@@ -148,7 +149,7 @@ main {
 }
 
 .page-separator {
-  width: 50%;
+  width: 100%;
   margin: 2em 0;
 }
 
@@ -162,5 +163,5 @@ main {
 }
 
 .comments {
-  background:#e4ffe7
+  background:#d2edd2
 }