style\refac(front): #2 posts mobile view

- update style - fix color on tags
YeisonAndreyLiCe · Jan 19, 2025 · 46d6cf5 · 46d6cf5
1 parent ef13945
commit 46d6cf5
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 32 deletions.
diff --git a/src/components/Aside.astro b/src/components/Aside.astro
@@ -144,7 +144,7 @@ const { titles } = Astro.props;
     right: 0;
     height: 100%;
     width: 250px;
-    z-index: 1;
+    z-index: 3;
     box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
   }
 
@@ -164,14 +164,21 @@ const { titles } = Astro.props;
 
   #mobile-buttons {
     color: var(--text-color);
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 2;
+    backdrop-filter: blur(10px);
+    opacity: 0.95;
+    width: 100%;
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    display: flex;
+    justify-content: end;
+    z-index: 4;
   }
 
   #mobile-buttons button {
-    background-color: var(--primary);
+    background-color: transparent;
+    backdrop-filter: blur(10px);
+    opacity: 0.95;
     color: var(--text-color);
     padding: 4px;
     border: none;

diff --git a/src/components/MyHero.astro b/src/components/MyHero.astro
@@ -25,7 +25,6 @@ const { BASE_URL } = import.meta.env;
     display: flex;
     flex-direction: column;
     align-items: start;
-    padding: 20px;
     max-width: 1000px;
     gap: 10px;
   }

diff --git a/src/components/PostPreview.astro b/src/components/PostPreview.astro
@@ -22,7 +22,7 @@ const date = new Date(pubDate).toDateString();
 const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
 ---
 
-<div id="preview-container">
+<div class="preview-container">
   <div class="description-container">
     <div>
       <div>
@@ -67,23 +67,28 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
 </div>
 
 <style>
-  button {
-    cursor: pointer;
-  }
   p {
     white-space: break-spaces;
   }
 
-  #preview-container {
+  .preview-container {
     margin-top: 40px;
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    align-items: center;
   }
 
   .description-container {
-    background-color: var(--secondary);
-    padding: 8px;
+    grid-column: 1 / -1;
+    padding: 40px 40px 30px;
+    text-align: left;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    z-index: 2;
+    background-color: transparent;
+    opacity: 0.95;
   }
 
   .description-container > div > div {
@@ -113,6 +118,7 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
 
   .code-tag {
     background-color: var(--code-background);
+    color: var(--text-color);
     padding: 8px;
     border: none;
   }
@@ -122,85 +128,116 @@ const postUrl = `${BASE_URL}posts/${title.toLowerCase().replace(/\s/g, "-")}/`;
     display: flex;
     flex-direction: column;
     gap: 8px;
+    width: 100%;
   }
 
   .tag {
     background-color: var(--text-color);
+    color: var(--primary);
     padding: 8px;
     border-radius: 4px;
     border: none;
+    width: 100%;
   }
 
-  .tag a {
-    color: var(--primary);
+  .tag button {
+    color: var(--text-color);
     text-decoration: none;
   }
 
   .tag:hover {
     background-color: var(--contrast);
   }
 
-  .container-like-image {
-    box-shadow: 0 0 10px var(--neutral);
-  }
-
   .description-container:hover {
     box-shadow: 0 0 10px var(--contrast);
   }
 
   .container-like-image {
+    position: absolute;
+    grid-column: 1 / -1;
+    height: 100%;
+    opacity: 0.25;
     display: flex-inline;
     flex-direction: column;
     justify-content: space-between;
     padding: 8px;
-    background-color: var(--neutral);
 
-    a {
-      color: var(--text-color);
+    button {
       text-decoration: none;
+      cursor: pointer;
     }
 
-    a:hover {
+    a:hover,
+    button:hover {
       text-decoration: underline;
       color: var(--contrast);
       transition: color 0.3s;
     }
   }
 
-  @media (min-width: 992px) {
+  @media (min-width: 720px) {
+    .tags-container {
+      flex-direction: row;
+      gap: 8px;
+      align-items: space-between;
+      justify-items: space-between;
+    }
     .container-like-image,
     .description-container {
       padding: 16px;
       border-radius: 8px;
+      position: relative;
+      height: fit-content;
+    }
+
+    .description-container {
+      background-color: var(--code-background);
+      border-bottom-left-radius: unset;
+      border-bottom-right-radius: unset;
     }
 
-    #preview-container {
+    .container-like-image {
+      background-color: var(--neutral);
+      opacity: unset;
+      border-top-left-radius: unset;
+      border-top-right-radius: unset;
+    }
+
+    .preview-container {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       margin-top: 24px;
       margin-bottom: 24px;
       align-content: center;
       align-items: center;
     }
+  }
+
+  @media (min-width: 992px) {
+    .description-container,
+    .container-like-image {
+      border-radius: 4px;
+    }
 
-    #preview-container:nth-child(even) .description-container {
+    .preview-container:nth-child(even) .description-container {
       grid-column: 1 / 7;
       z-index: 2;
       margin-right: -100px;
       opacity: 0.9;
       grid-row: 1 / 2;
     }
-    #preview-container:nth-child(even) .container-like-image {
+    .preview-container:nth-child(even) .container-like-image {
       align-items: start;
       grid-column: 7 / 13;
       z-index: 1;
     }
 
-    #preview-container:nth-child(odd) .container-like-image {
+    .preview-container:nth-child(odd) .container-like-image {
       grid-column: 1 / 7;
       z-index: 1;
     }
-    #preview-container:nth-child(odd) .description-container {
+    .preview-container:nth-child(odd) .description-container {
       grid-column: 7 / 13;
       z-index: 2;
       margin-left: -100px;

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
@@ -29,6 +29,7 @@ const { title, description } = Astro.props;
 <style>
   #main-content {
     display: flex;
+    padding: 20px;
     flex-direction: column;
     justify-content: center;
     gap: 16px;

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -1,11 +1,11 @@
 :root {
-  --primary: #141314;
+  --primary: #050605;
   --secondary: #202125;
   --neutral: #092e39;
   --contrast: #1d7272;
   --text-color: #d7dce2;
   --text-secondary-color: #b8c1d5;
-  --code-background: #050605;
+  --code-background: #141314;
 
   --max-width: 720px;