fix some responsiveness on main page.

Hopelezz · Aug 12, 2022 · 1815200 · 1815200
1 parent 9f7ad69
commit 1815200
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 40 deletions.
diff --git a/authorship.md b/authorship.md
@@ -13,7 +13,7 @@ Things you'll need to complete the following steps:
     ,
     "John": {
         "name": "",
-        "born": "00-00-0000",
+        "born": "DD-MMM-YYYY",
         "twitter": "#",
         "twitterHandle": "@#",
         "linkedin": "#",

diff --git a/src/components/Aside.astro b/src/components/Aside.astro
@@ -15,12 +15,12 @@ const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle
     <div class="text">
         <p class='text1'>Writer: {name}</p>
 
-        <hr style="width: 80%;">
+        <!-- <hr /> -->
 
-        <h5 class='text1'>Bio:</h5>
+        <h5 class='text'>Bio:</h5>
         <p class='text2'>{bio}</p>
 
-        <hr style="width: 80%;">
+        <!-- <hr style="width: 80%;"> -->
 
         <!--Social Icons-->
         <div class="social-icons">
@@ -39,7 +39,7 @@ const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle
   flex-direction: column;
   height: 600px;
   gap: var(--size-2);
-  background: var(--surface-2);
+  background: var(--surface2);
   border: 1px solid var(--surface-1);
   padding: var(--size-4);
   border: 1px solid var(--brand);
@@ -49,8 +49,15 @@ const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle
   transition: all 0.3s ease-in-out;
 }
 
+.card {
+    &:hover {
+        box-shadow: var(--shadow-3);
+    }
+}
+
 .card:hover {
   transform: scale(1.05);
+  background: var(--surface3);
   box-shadow: var(--shadow-3);
   transition: transform 0.3s ease-in-out;
 }
@@ -98,15 +105,28 @@ const { name, bio, photo, twitter, twitterHandle, linkedin, github, githubHandle
 
 .text span{
     /* font-size: 1rem; */
-    color: #858585;
+    /* color: #858585; */
     padding-top: 5px;
     text-transform: uppercase;
 }
 
 /*---------Media-----------*/
 @media (max-width: 768px) {
-    .aside{
+    .card{
         display: none;
     }
 }
+
+@media (min-width: 768px) {
+    .card{
+    }
+}
+
+/* media reduce the size of the card */
+@media (max-width: 768px) {
+    .card{
+        display: none;
+    }
+}
+
 </style>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -84,5 +84,13 @@ h2 a{
     }
 }
 
+/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
+@media (pointer:coarse) {
+    input[type="checkbox"], input[type="radio"] {
+        min-width:30px;
+        min-height:40px;
+        background:transparent;
+    }
+}
 
 </style>
diff --git a/src/components/blog/PostPreview.astro b/src/components/blog/PostPreview.astro
@@ -37,7 +37,7 @@ const tag = tags.split(",")[0]; // returns the first tag
 <style>
 /*----------------Section--------------*/
 /* defines card size */
-article{
+article {
     width: 500px;
     height: 200px;
     margin: 25px;
@@ -52,20 +52,21 @@ article{
   display: flex;
   flex-direction: row;
   gap: var(--size-4);
-  background: var(--surface-2);
-  border: 20px solid var(--surface-1);
+  background: var(--surface2);
   padding: var(--size-4);
   border-radius: var(--radius-3);
   box-shadow: var(--shadow-3);
   margin: var(--size-5);
   border: 1px solid var(--brand);
 }
-
-article:hover {
-    transform: translateY(-5px);
+.card:hover {
+  box-shadow: var(--shadow-4);
+  background: var(--surface3);
+  transform: translateY(-5px);
 }
 
-a{
+
+a {
     text-decoration: none;
 }
 li {
@@ -89,24 +90,24 @@ li {
 }
 
 /*--------Article Details-------------*/
-.details h2{
+.details h2 {
     text-transform: uppercase;
 }
-.details span{
+.details span {
     text-transform: capitalize;
     font-size: var(--size-fluid-1);
     font-weight: 300;
     /* color: #303030; */
 }
 
-.details p{
-    font-size: var(--size-fluid-1);
+.details p {
+    font-size: var(--size-2);
     margin-top: 5px;
     padding-top: var(--gap-3);
 }
 
 /* remove link decoration */
-.details a{
+.details a {
     font-size: 12px;
     text-decoration: none;
 }
@@ -130,16 +131,16 @@ a:hover {
 }
 
 /*-------------Media --------------------*/
-/* make media verticle cards width fit screen with small margin-left and margin-right*/
-@media (max-width: 600px) {
-    article{
-        width: 100%;
-    }
-    .coffee{
-        width: 100%;
+@media (max-width: 768px) {
+    article {
+        display: flex;
+        flex-direction: column;
+        width: 460px;
     }
-    .details{
-        width: 100%;
+    .card:pointer {
+        box-shadow: var(--shadow-4);
+        background: var(--surface3);
+        transform: translateY(-5px);
     }
 }
 

diff --git a/src/styles/search.css b/src/styles/search.css
@@ -1,20 +1,20 @@
-/* .searchContainer{
+.searchContainer{
     position: relative;
     max-width: 450px;
     margin: auto;
     padding-top: 5px;
-} */
+}
 
 .searchContainer .search-input{
     position: relative;
-    background-color: #fff;
+    /* background-color: #fff; */
     width: 100%;
     border-radius: var(--radius-3);
     box-shadow: var(--shadow-2);
 }
 
 .search-input input{
-    width: 100%;
+    max-width: 450px;
     height: 40px;
     outline: none;
     border: none;
@@ -37,8 +37,7 @@
 }
 
 .searchResult{
-    width: auto;
-    /* height: auto; */
+    max-width: 450px;
     background-color: var(--surface4);
     border-radius: 5px;
     padding: var(--size-2);
@@ -48,13 +47,14 @@
     transition: all 0.3s ease-in-out;
     list-style: none;
     text-decoration: none;
-    /* align text center */
     justify-content: center;
 }
 
 .searchResult a{
+    /* inline-padding: var(--size-2); */
     color: var(--text3);
     font-shadow: var(--shadow-1);
+    font-weight: var(--font-weight-7);
     text-decoration: none;
     transition: all 0.3s ease-in-out;
 }

diff --git a/src/styles/theme.postcss b/src/styles/theme.postcss
@@ -11,17 +11,16 @@
 
 html {
 
-  --lh: 1.4rem;
   /* light */
   --brand-light: var(--teal-6);
   --text1-light: var(--gray-8);
   --text2-light: var(--gray-7);
   --text1-brand-light: var(--teal-6);
   --text2-brand-light: var(--teal-5);
-  --surface1-light: var(--gray-1);
-  --surface2-light: var(--gray-2);
-  --surface3-light: var(--gray-3);
-  --surface4-light: var(--gray-4);
+  --surface1-light: var(--gray-5);
+  --surface2-light: var(--gray-3);
+  --surface3-light: var(--gray-2);
+  --surface4-light: var(--gray-1);
   --surface-shadow-light: 200 10% 20%;
   --shadow-strength-light: 20%;
   --selection-text-light: var(--gray-1);