Bump version to 2.2.0 and refactor styles for improved consistency an…

…d responsiveness across components
upayanmazumder · Nov 3, 2024 · a65c27b · a65c27b
1 parent 4ce63c2
commit a65c27b
Show file tree

Hide file tree

Showing 18 changed files with 104 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "upayan.space",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "My Portfolio Site",
   "main": "api/server.js",
   "dependencies": {

diff --git a/qwik/src/components/404/404.module.css b/qwik/src/components/404/404.module.css
@@ -1,8 +1,8 @@
 .card {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgb(43 43 43 / 42%);
     max-width: 80%;
     width: fit-content;
-    border-radius: 20px;
+    border-radius: var(--border-radius-large);
     margin: 50px auto;
     color: #ffffff;
     padding: 20px;

diff --git a/qwik/src/components/404/404.tsx b/qwik/src/components/404/404.tsx
@@ -3,13 +3,14 @@ import { BsEmojiFrownFill } from "@qwikest/icons/bootstrap"
 import styles404 from "./404.module.css"
 export default component$(() => {
     return (
-        <div class={`container container-center ${styles404.card}`}>
-            <h1>404 - Page Not Found</h1>
-            <div class={styles404.icon}><BsEmojiFrownFill/></div>
-            <div class="container">
-                <p>Sorry, the page you are looking for does not exist.</p>
-                <br />
-                <p>Please check the URL or return to the homepage.</p>
+        <div class="container container-center">
+            <div class={styles404.card}>
+                <h1>404 - Page Not Found</h1>
+                <div class={styles404.icon}><BsEmojiFrownFill/></div>
+                <div class="container">
+                    <p>Sorry, the page you are looking for does not exist.</p>
+                    <p>Please check the URL or return to the homepage.</p>
+                </div>
             </div>
         </div>
   );

diff --git a/qwik/src/components/activity/activity.module.css b/qwik/src/components/activity/activity.module.css
@@ -17,10 +17,10 @@ body {
 
 .container {
   background-color: var(--secondary-bg);
-  padding: 20px 30px;
-  margin: 60px auto;
+  padding: var(--padding-medium);
+  margin: var(--margin-large) auto;
   width: fit-content;
-  border-radius: 10px;
+  border-radius: var(--border-radius-large);
   transition: all var(--transition-duration) ease-in-out;
   color: var(--text-color) !important;
   font-family: 'Red Hat Roboto', sans-serif;
@@ -33,9 +33,9 @@ body {
 }
 
 .status {
-  font-size: 1rem;
+  font-size: 12px;
   transition: color var(--transition-duration) ease-in-out;
-  margin-left: 20px;
+  margin-left: var(--margin-medium);
   text-align: left;
 }
 
@@ -85,18 +85,22 @@ p {
 .name {
   margin-left: 25px;
   transition: font-size var(--transition-duration) ease-in-out;
+  font-size: 20px;
 }
 
 .details {
   transition: font-size var(--transition-duration) ease-in-out;
+  font-size: 14px;
 }
 
 .state {
   transition: font-size var(--transition-duration) ease-in-out;
+  font-size: 14px;
 }
 
 .time {
   font-size: 0.7rem;
+  font-size: 12px;
 }
 
 @media screen and (max-width: 768px) {

diff --git a/qwik/src/components/auth/authenticate/authenticate-1.module.css b/qwik/src/components/auth/authenticate/authenticate-1.module.css
@@ -4,8 +4,8 @@
     justify-content: center;
     align-items: center;
     padding: 20px;
-    background-color: #2c2c2c;
-    border-radius: 8px;
+    background-color: #2a2a2aa3;
+    border-radius: var(--border-radius-large);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }
 
@@ -21,7 +21,6 @@ p {
     padding: 10px 20px;
     color: #f1f1f1;
     font-size: 1rem;
-    border-radius: 4px;
     transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 

diff --git a/qwik/src/components/auth/authenticate/authenticate-2.module.css b/qwik/src/components/auth/authenticate/authenticate-2.module.css
@@ -1,11 +1,13 @@
 .authenticateContainer {
     display: flex;
+    flex-direction: column;
     gap: 1rem;
     justify-content: center;
     align-items: center;
     padding: 2rem;
-    border-radius: 8px;
+    border-radius: var(--border-radius-large);
     animation: fadeIn 0.5s ease-in-out;
+    background-color: #2a2a2a;
 }
 
 @keyframes fadeIn {
@@ -17,12 +19,18 @@
     }
 }
 
+.authenticateContainerForm {
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
+}
+
 .form {
     display: inline-block;
 }
 
 .iconButton {
-    background-color: #b8b8b81d;
+    background-color: transparent;
     border-radius: 50%;
     border: none;
     cursor: pointer;

diff --git a/qwik/src/components/auth/authenticate/authenticate.tsx b/qwik/src/components/auth/authenticate/authenticate.tsx
@@ -22,31 +22,33 @@ export default component$(() => {
         </div>
       ) : (
         <div class={signInStyles.authenticateContainer}>
-          <h3>Sign in!</h3> <br/>
+          <h3>Sign in!</h3>
           <p style="color: white">Use any of the methods below to sign in!</p>
-          <Form action={signIn} class={signInStyles.form}>
-            <input type="hidden" name="providerId" value="google" />
-            <input type="hidden" name="options.redirectTo" value="/a/signedin" />
-            <button class={signInStyles.iconButton}>
-              <BsGoogle />
-            </button>
-          </Form>
+          <div class={signInStyles.authenticateContainerForm}>
+            <Form action={signIn} class={signInStyles.form}>
+              <input type="hidden" name="providerId" value="google" />
+              <input type="hidden" name="options.redirectTo" value="/a/signedin" />
+              <button class={signInStyles.iconButton}>
+                <BsGoogle />
+              </button>
+            </Form>
 
-          <Form action={signIn} class={signInStyles.form}>
-            <input type="hidden" name="providerId" value="discord" />
-            <input type="hidden" name="options.redirectTo" value="/a/signedin" />
-            <button class={signInStyles.iconButton}>
-              <BsDiscord />
-            </button>
-          </Form>
+            <Form action={signIn} class={signInStyles.form}>
+              <input type="hidden" name="providerId" value="discord" />
+              <input type="hidden" name="options.redirectTo" value="/a/signedin" />
+              <button class={signInStyles.iconButton}>
+                <BsDiscord />
+              </button>
+            </Form>
 
-          <Form action={signIn} class={signInStyles.form}>
-            <input type="hidden" name="providerId" value="github" />
-            <input type="hidden" name="options.redirectTo" value="/a/signedin" />
-            <button class={signInStyles.iconButton}>
-              <BsGithub />
-            </button>
-          </Form>
+            <Form action={signIn} class={signInStyles.form}>
+              <input type="hidden" name="providerId" value="github" />
+              <input type="hidden" name="options.redirectTo" value="/a/signedin" />
+              <button class={signInStyles.iconButton}>
+                <BsGithub />
+              </button>
+            </Form>
+          </div>
         </div>
       )}
     </div>

diff --git a/qwik/src/components/auth/session/session.module.css b/qwik/src/components/auth/session/session.module.css
@@ -4,7 +4,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  border-radius: 15px;
+  border-radius: var(--border-radius-medium);
   padding: 10px;
   backdrop-filter: blur(10px);
   box-shadow: #FFF8E1;
@@ -48,7 +48,6 @@
 
 .img:hover {
   border: #0a539b 3px solid;
-  box-shadow: 0 0 10px #0a539b, 0 0 20px #0a539b;
 }
 
 .userInfo {

diff --git a/qwik/src/components/carousel/carousel.module.css b/qwik/src/components/carousel/carousel.module.css
@@ -5,15 +5,15 @@
     padding: 20px;
     color: #e0e0e0;
     background-color: #1a1a1a6d;
-    border-radius: 10px;
+    border-radius: var(--border-radius-large);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
 }
 
 .card {
     display: flex;
     align-items: center;
     background-color: #2b2b2b;
-    border-radius: 10px;
+    border-radius: var(--border-radius-medium);
     padding: 20px;
     margin: 20px 0;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
@@ -67,7 +67,7 @@
     border: 1px solid #61dafb;
     padding: 10px 20px;
     margin: 0 10px;
-    border-radius: 5px;
+    border-radius: var(--border-radius-small);
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease;
 }
@@ -82,6 +82,12 @@
     color: #1a1a1a;
 }
 
+.button svg {
+    margin: auto;
+    padding: auto;
+    vertical-align: middle;
+}
+
 @keyframes slideIn {
     from {
         opacity: 0;

diff --git a/qwik/src/components/certificates/certificates.module.css b/qwik/src/components/certificates/certificates.module.css
@@ -12,7 +12,7 @@
 .certificateCard {
     background-color: #1a1a1a69;
     border: 2px solid #2a2a2a;
-    border-radius: 12px;
+    border-radius: var(--border-radius-medium);
     width: 300px;
     padding: 15px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
@@ -35,7 +35,7 @@
 .certificateCard img {
     width: 100%;
     height: auto;
-    border-radius: 8px;
+    border-radius: 4px;
     transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
@@ -57,7 +57,7 @@
     color: #f0f0f0;
     padding: 5px 10px;
     margin: 5px;
-    border-radius: 8px;
+    border-radius: var(--border-radius-small);
     font-size: 0.8rem;
 }
 

diff --git a/qwik/src/components/contact/contact.module.css b/qwik/src/components/contact/contact.module.css
@@ -1,7 +1,7 @@
 .container {
     background-color: #2d2d2d8e;
     color: #e0e0e0;
-    border-radius: 10px;
+    border-radius: var(--border-radius-medium);
     padding: 20px;
     margin: 20px auto;
     width: 90%;
@@ -39,7 +39,7 @@ textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #3a3a4d;
-    border-radius: 5px;
+    border-radius: var(--border-radius-small);
     background-color: #353535;
     color: #e0e0e0;
     font-size: 1em;
@@ -65,7 +65,7 @@ textarea:focus {
     background-color: #1f8ef1;
     color: #ffffff;
     border: none;
-    border-radius: 5px;
+    border-radius: var(--border-radius-small);
     padding: 10px 20px;
     font-size: 1em;
     cursor: pointer;

diff --git a/qwik/src/components/details/details.module.css b/qwik/src/components/details/details.module.css
@@ -15,7 +15,7 @@
     font-family: 'Roboto Mono', monospace;
     background-color: #0f0f0fdc;
     border: 1px solid #333;
-    border-radius: 10px;
+    border-radius: var(--border-radius-medium);
     padding: 20px;
     width: 100%;
     max-width: 600px;
@@ -45,6 +45,7 @@
 @media (max-width: 768px) {
     .hero {
         padding: 20px 10px;
+        font-size: smaller;
     }
 
     .card {

diff --git a/qwik/src/components/footer/footer.css b/qwik/src/components/footer/footer.css
@@ -9,6 +9,7 @@
     align-items: center;
     font-family: 'Red Hat Display', sans-serif;
     cursor: default;
+    background-color: var(--footer-background-color);
 }
 
 .footer-copy {

diff --git a/qwik/src/components/header/header.css b/qwik/src/components/header/header.css
@@ -5,13 +5,19 @@
     background-color: var(--header-background-color);
     backdrop-filter: blur(10px);
     cursor: default;
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    align-content: center;
 }
 
 .header img {
     border-radius: 50%;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
-    width: 100px;
-    height: 100px;
+    width: 80px;
+    height: 80px;
+    margin: auto;
+    margin-right: 15px;
 }
 
 .header img:hover {
@@ -21,8 +27,9 @@
 
 .title {
     font-size: 2.5em;
-    margin: 10px 0;
+    margin: auto;
     color: #3877b4;
+    margin-left: 15px;
 }
 
 nav ul {

diff --git a/qwik/src/components/navbar/navbar.module.css b/qwik/src/components/navbar/navbar.module.css
@@ -31,8 +31,8 @@
     color: #b0bec5;
     font-size: 1.1rem;
     font-weight: 500;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
+    padding: var(--padding-small) var(--padding-medium);
+    border-radius: var(--border-radius-small);
     transition: color 0.3s ease, background-color 0.2s ease-in-out;
     border: 1px solid transparent;
 }