added back contact section

nitinsooni · Sep 16, 2024 · 1cedafd · 1cedafd
1 parent 9ca4e5a
commit 1cedafd
Show file tree

Hide file tree

Showing 11 changed files with 15 additions and 280 deletions.
diff --git a/assets/images/anilist-icon.svg b/assets/images/anilist-icon.svg
diff --git a/assets/images/email-icon.svg b/assets/images/email-icon.svg
diff --git a/assets/images/github-icon.svg b/assets/images/github-icon.svg
diff --git a/assets/images/instagram-icon.svg b/assets/images/instagram-icon.svg
diff --git a/assets/images/linkedin-icon.svg b/assets/images/linkedin-icon.svg
diff --git a/assets/images/spotify-icon.svg b/assets/images/spotify-icon.svg
diff --git a/assets/images/whatsapp-icon.svg b/assets/images/whatsapp-icon.svg
diff --git a/css/media.css b/css/media.css
@@ -39,25 +39,17 @@
 
     /*----------------------------------------------------*/
 
+    #contact .t-container {
+        padding: 0;
+    }
+
     #contact .table {
         width: 100%;
         align-items: center;
         flex-direction: column;
         row-gap: 2rem;
     }
 
-    #contact .scroll-container .fade-overlay {
-        display: block;
-    }
-
-    #contact .scroll-container .pill-container {
-        justify-content: flex-start;
-    }
-
-    #contact .scroll-container .pill-container .pill {
-        animation: bounce 2s infinite;
-    }
-
     #contact .table .table-l {
         width: 90%;
         padding: 2rem 0;
@@ -208,20 +200,6 @@
         font-size: 3rem;
     }
 
-    #contact .scroll-container .pill-container .pill {
-        border-radius: 10px;
-    }
-
-    #contact .scroll-container .pill-container .pill a {
-        font-size: 1rem;
-        padding: 8px 12px;
-    }
-
-    #contact .scroll-container .pill-container .pill a img {
-        width: 24px;
-        height: 24px;
-    }
-
     #contact .table .table-l i {
         font-size: 2.5rem;
         padding-bottom: 1.2rem;
@@ -244,7 +222,8 @@
     }
 
     #contact .table .table-r .container {
-        padding: 2rem 0;
+        padding-top: 1.5rem;
+        padding-bottom: 2.5rem;
     }
 }
 
@@ -315,12 +294,12 @@
     }
 
     #contact .table .table-r .container .card {
-        width: 20rem;
+        width: 19rem;
         height: 30rem;
     }
 
     #contact .table .table-r .container .card > img {
-        left: 31.8px;
+        left: 15.8px; /*31.8 for 20rem width*/
     }
 
     #contact .table .table-r .container .card .content .block-top {
@@ -359,6 +338,7 @@
 
     #contact .table .table-r .container .card .content .block-bottom p {
         font-size: 0.8rem;
+        padding-top: 1.5rem;
     }
 
     #contact .table .table-r .container .card .content .block-bottom .social-block {
@@ -367,7 +347,7 @@
 
     #contact .table .table-r .container .card .content .block-bottom .social-block a {
         font-size: 1.1rem;
-        padding: .5rem;
+        padding: .25rem .5rem;
     }
 }
 

diff --git a/css/style.css b/css/style.css
@@ -363,7 +363,6 @@ nav .nav-r a {
 #portfolio .t-container {
     display: flex;
     justify-content: center;
-    margin-bottom: 2.5rem;
 }
 
 #portfolio .table {
@@ -549,7 +548,6 @@ nav .nav-r a {
 
 /*----------------------------------------------------*/
 
-/*
 #contact {
     width: 100%;
     text-align: center;
@@ -580,138 +578,10 @@ nav .nav-r a {
     letter-spacing: .025rem;
 }
 
-#contact .scroll-container {
-    position: relative;
-}
-
-#contact .scroll-container .fade-overlay {
-    display: none;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 5%;
-}
-
-#contact .scroll-container .left-fade {
-    left: 0;
-    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
-}
-
-#contact .scroll-container .right-fade {
-    right: 0;
-    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
-}
-
-#contact .scroll-container .pill-container {
-    display: grid;
-    padding: 0 1rem;
-    grid-auto-flow: column;
-    justify-content: center;
-    grid-auto-columns: max-content;
-    scroll-behavior: auto;
-    gap: 1rem;
-    overflow-y: auto;
-    overscroll-behavior-x: contain;
-    scroll-snap-type: x mandatory;
-    scrollbar-width: none;
-    justify-content: 5px;
-}
-
-#contact .scroll-container .pill-container::-webkit-scrollbar {
-    display: none;
-}
-
-#contact .scroll-container .pill-container .pill {
-    background-color: black;
-    border: 1px solid rgba(255, 255, 255, .24);
-    border-radius: 12px;
-}
-
-@keyframes bounce {
-    0%, 20%, 50%, 80%, 100% {
-        transform: translateX(0);
-    }
-    40% {
-        transform: translateX(-20px);
-    }
-    60% {
-        transform: translateX(-10px);
-    }
-}
-
-#contact .scroll-container .pill-container .pill a {
-    font-size: 1.25rem;
-    padding: 12px 16px;
-    text-decoration: none;
-    display: flex;
-    align-items: center;
-    gap: .75rem;
-}
-
-#contact .scroll-container .pill-container .pill a img {
-    width: 28px;
-    height: 28px;
-}
-
-#contact .scroll-container .pill-container .pill.email {
-    background-image: linear-gradient(to right, rgba(241, 232, 164, .24), rgba(177, 138, 82, .24));
-}
-
-#contact .scroll-container .pill-container .pill.email a {
-    color: #fae575;
-}
-
-#contact .scroll-container .pill-container .pill.linkedin {
-    background-image: linear-gradient(to right, rgba(52, 98, 158, .24), rgba(134, 169, 214, .24));
-}
-
-#contact .scroll-container .pill-container .pill.linkedin a {
-    color: #3fcbf8;
-}
-
-#contact .scroll-container .pill-container .pill.whatsapp {
-    background-image: linear-gradient(to right, rgba(164, 241, 199, .24), rgba(84, 177, 82, .24));
-}
-
-#contact .scroll-container .pill-container .pill.whatsapp a {
-    color: #87fa75;
-}
-
-#contact .scroll-container .pill-container .pill.instagram {
-    background-image: linear-gradient(to right, rgba(177, 82, 150, .24), rgba(207, 164, 241, .24));
-}
-
-#contact .scroll-container .pill-container .pill.instagram a {
-    color: #e775fa;
-}
-
-#contact .scroll-container .pill-container .pill.github {
-    background-image: linear-gradient(to right, rgba(128, 235, 235, .24), rgba(82, 131, 177, .24));
-}
-
-#contact .scroll-container .pill-container .pill.github a {
-    color: #75dafa;
-}
-
-#contact .scroll-container .pill-container .pill.spotify {
-    background-image: linear-gradient(to right, rgba(78, 169, 76, .24), rgba(146, 238, 188, .24));
-}
-
-#contact .scroll-container .pill-container .pill.spotify a {
-    color: #7eee6d;
-}
-
-#contact .scroll-container .pill-container .pill.anilist {
-    background-image: linear-gradient(to right, rgba(130, 168, 217, .24), rgba(0, 120, 203, .24));
-}
-
-#contact .scroll-container .pill-container .pill.anilist a {
-    color: #6fc4ff;
-}
-
 #contact .t-container {
     display: flex;
     justify-content: center;
+    padding: 2rem 0;
 }
 
 #contact .table {
@@ -724,6 +594,7 @@ nav .nav-r a {
     width: 45%;
     text-align: left;
     padding-top: 1.5rem;
+    padding-left: 2rem;
 }
 
 #contact .table .table-l i {
@@ -862,6 +733,7 @@ nav .nav-r a {
     font-weight: 300;
     line-height: 1.375;
     color: rgba(255, 255, 255, .8);
+    padding-top: 2rem;
 }
 
 #contact .table .table-r .container .card .content .block-bottom .social-block {
@@ -876,4 +748,3 @@ nav .nav-r a {
     color: rgba(255, 255, 255, .8);
     padding: .75rem;
 }
-*/