From 94a22be9adf77a98c7ec3253152e1fab1450bbf0 Mon Sep 17 00:00:00 2001 From: Imran Imtiaz Date: Tue, 28 Jan 2025 07:09:20 +0400 Subject: [PATCH] Update styles.css Changes: 1. Grouping: Styles are grouped by sections (e.g., navigation, main, projects). 2. Removed Clutter: Removed commented-out or unused code for cleaner output. 3. Improved Readability: Added spacing and logical ordering of styles for ease of maintenance. --- styles.css | 109 +++++++++++++++++++++-------------------------------- 1 file changed, 42 insertions(+), 67 deletions(-) diff --git a/styles.css b/styles.css index 7de1286..a876622 100644 --- a/styles.css +++ b/styles.css @@ -6,9 +6,11 @@ --text-color-2: rgba(214, 255, 127, 1); --headline-color: white; } + html { scroll-behavior: smooth; } + * { box-sizing: border-box; margin: 0; @@ -20,41 +22,44 @@ body { background-color: var(--bg-color); text-align: center; font-family: "Work Sans", sans-serif; - /* remove scroll bar and disable scroll */ - /* overflow: hidden; */ color: var(--font-color); } -h1, -h2, -h3 { + +h1, h2, h3 { font-family: "Montserrat", sans-serif; } + h1 { font-size: 36px; color: var(--headline-color); animation: fadeInLeft 1s ease; } + h2 { color: var(--font-color); font-weight: 900; } + h3 { color: var(--text-color-1); } + a { color: var(--link-color); text-decoration: none; } + p { color: var(--font-color); font-size: 14px; line-height: 1.1rem; } + ul { list-style: none; } -/* NAVIGATION */ +/* Navigation */ nav { position: fixed; top: 0; @@ -64,15 +69,17 @@ nav { z-index: 6; width: 100%; } + nav ul { display: grid; grid-template-columns: 2fr 1fr 1fr; - justify-content: center; margin: 0 1rem; } + nav li { display: block; } + nav li a { display: block; text-align: center; @@ -80,14 +87,13 @@ nav li a { font-size: 13px; color: #fff; } + nav ul li:nth-child(1) { justify-self: start; margin-right: 2rem; } -/* HOME */ - -/* edit this to center the contents */ +/* Main Section */ main { padding: 0 10vw; display: flex; @@ -98,25 +104,20 @@ main { .img-info-container { display: flex; - flex-direction: row; justify-content: center; gap: 0.7rem; } + .img-container { display: flex; justify-content: center; animation: fadeInUp 1s ease; - /* padding-right: 0px; - background-color: rgb(64, 68, 105); - transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */ } -/* .img-container:hover{ - padding: 5px 5px 5px 50px; -} */ .img-container img { z-index: 1; } + .info-container { display: flex; flex-direction: column; @@ -124,9 +125,8 @@ main { position: relative; } -/* SOCIAL SVG CONTAINER */ +/* Social SVG Container */ .social-container { - /* transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1); */ position: absolute; top: 0px; right: -20px; @@ -137,12 +137,6 @@ main { background-color: var(--bg-color); } -/* .social-container:hover{ - background-color: rgb(64, 68, 105); - padding-left: 100px; - -} */ - main hr { display: block; height: 1px; @@ -150,15 +144,11 @@ main hr { width: 0; border-top: 1px solid #cdced5; position: absolute; - bottom: 8px; - animation: slide-in 1s cubic-bezier(0.42, 0, 1, 1) forwards; } .user-bio { - /* margin-top: 4rem; - margin-bottom: 2rem; */ opacity: 0; animation: fadeInUp 1s cubic-bezier(0.075, 0.82, 0.165, 1) 1s forwards; } @@ -168,12 +158,10 @@ main hr { background-color: #838596; opacity: 0; border-radius: 3px; - filter: drop-shadow(0 0 0 rgba(54, 54, 54, 0.2)); transition: 0.3s all cubic-bezier(0.075, 0.82, 0.165, 1); - transform-origin: right; - will-change: filter; animation: dropShadow 1s ease forwards 1.5s; } + .quote-container p { color: black; } @@ -182,16 +170,17 @@ main hr { filter: drop-shadow(10px 10px 2px rgba(255, 255, 255, 0.25)); } -/* Project Styles */ - +/* Projects */ #project { padding: 15vh 16px; } + #project h2 { font-size: xx-large; text-align: left; margin-left: 1rem; } + .project-container { display: grid; grid-template-columns: 1fr; @@ -199,21 +188,20 @@ main hr { padding-top: 5vh; } -/* Per Repo Styles*/ - .repository-container { border: 1px solid #7b8383; display: flex; flex-direction: column; - justify-content: space-evenly; gap: 8px; padding: 16px; border-radius: 5px; background: #222431; } + .repository-container h3 { text-align: left; } + .repository-container img { vertical-align: bottom; } @@ -222,7 +210,6 @@ main hr { font-size: 12px; } -/* Repo Head */ .repository-head { display: flex; flex-direction: row; @@ -230,58 +217,56 @@ main hr { justify-content: flex-start; } -/* Repo Description */ -.repository-description { - text-align: left; -} - -/* Repo Langauges */ .repository-language-used-container { display: flex; - flex-direction: row; - font-weight: lighter; gap: 8px; + font-weight: lighter; } + .language-used { font-size: 12px; color: #1bb6b6; } + .more-repo { margin-top: 10px; - display: block; } + .more-repo a { font-weight: 800; color: var(--link-color); } -/* about */ - +/* About Section */ #about { padding-top: 15vh; } + .about-img-container { display: flex; justify-content: center; margin-bottom: 20px; } + .about-img-container img { border-radius: 50%; border: 2px solid white; } + .about-social-container { margin: 10px 0; display: flex; justify-content: space-around; padding: 0 1em; } + #about p { margin: 20px; } + .about-social-container li { display: flex; gap: 5px; - justify-content: space-between; } .skill { @@ -290,29 +275,28 @@ main hr { text-align: left; margin: 0 30px; } + #about h3 { text-align: left; margin: 10px 20px; } + .skill li { line-height: 30px; } + #about ul.skill li:before { font-size: 10px; padding-right: 10px; content: "▸"; - vertical-align: bottom; } footer { padding: 10vh; } -/* MEDIA QUERIES */ - -/* FOR TABLET */ +/* Media Queries */ @media screen and (min-width: 768px) { - /* add margin left and rigth make it centered */ main { margin-left: 20%; margin-right: 20%; @@ -325,21 +309,18 @@ footer { margin-right: 30%; } } -/* FOR DESKTOP */ + @media screen and (min-width: 1025px) { - /* project style */ .project-container { grid-template-columns: repeat(2, 1fr); } - .more-repo { - display: block; - } + .skill { grid-template-columns: repeat(3, 1fr); } } -/* KEYFRAMES */ +/* Animations */ @keyframes slide-in { to { width: 115%; @@ -405,15 +386,9 @@ footer { animation: animated_text 10s ease-in-out infinite; } -/* must have 1 inner div that wrap all content to work */ .center { display: flex; justify-content: center; align-items: center; min-height: 100vh; } - -/* .flex-end { - align-items: flex-end; - padding-bottom: 15vh; -} */