From 9445948eef290208bbca96a05932a1424e54d80d Mon Sep 17 00:00:00 2001 From: Imran Imtiaz Date: Sat, 15 Mar 2025 21:29:04 +0400 Subject: [PATCH] Update styles.css This CSS code enhances readability and maintainability through consistent formatting, proper spacing, indentation, and alignment. Structured section headers with clear comments improve navigation, making it easier to modify and extend the code. Unnecessary vendor prefixes, such as -webkit- and -ms-, have been removed unless specifically required, ensuring a cleaner and more modern approach. Additionally, media queries have been optimized for better scalability, creating a more maintainable and responsive design. The logical grouping of styles into distinct sections further enhances clarity, making the codebase more professional and efficient for future modifications. --- assets/css/styles.css | 180 ++++++++++++++++++++---------------------- 1 file changed, 86 insertions(+), 94 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index f1acb5e..184d1f7 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,23 +1,32 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); -/*----- VARIABLES CSS Y SASS -----*/ -/*Varibles sass*/ -/*Variables css*/ -/*Colores*/ + +/* ============================== + VARIABLES +================================= */ + +/* CSS Variables */ :root { + /* Colors */ --first-color: #4E1116; --black-color: #000; --white-color: #FFF; -} - -/*Fuente y tipografia*/ -:root { - --body-font: 'Poppins', sans-serif; + + /* Typography */ + --body-font: "Poppins", sans-serif; --h1-font-size: 2.5rem; --h2-font-size: 1rem; --normal-font-size: 0.93rem; --small-font-size: 0.81rem; + + /* z-index values */ + --z-back: -10; + --z-normal: 1; + --z-tooltip: 10; + --z-fixed: 100; + --z-modal: 1000; } +/* Responsive Typography */ @media screen and (min-width: 768px) { :root { --h1-font-size: 4.5rem; @@ -27,23 +36,16 @@ } } -/*z index*/ -:root { - --z-back: -10; - --z-normal: 1; - --z-tooltip: 10; - --z-fixed: 100; - --z-modal: 1000; -} +/* ============================== + BASE STYLES +================================= */ -/*----- BASE -----*/ *, ::before, ::after { - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; } body { - margin: 3rem 0 0 0; + margin: 3rem 0 0; font-family: var(--body-font); background-color: var(--black-color); color: var(--white-color); @@ -70,11 +72,13 @@ img { height: auto; } -/*----- LAYOUT -----*/ +/* ============================== + LAYOUT +================================= */ + .bd-grid { max-width: 1200px; - margin-left: 1rem; - margin-right: 1rem; + margin: 0 1rem; } .l-header { @@ -86,38 +90,44 @@ img { background-color: var(--black-color); } -/*----- PAGES -----*/ -/*Nav*/ +/* ============================== + NAVIGATION +================================= */ + .nav { height: 3rem; - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; + align-items: center; font-weight: 700; } +.nav__logo { + font-size: var(--normal-font-size); + color: var(--white-color); +} + +.nav__toggle { + font-size: 1.5rem; + cursor: pointer; +} + +/* Mobile Menu */ @media screen and (max-width: 768px) { .nav__menu { position: fixed; top: -100%; left: 0; - background-image: -webkit-gradient(linear, left top, left bottom, from(var(--black-color)), to(var(--first-color))); - background-image: linear-gradient(var(--black-color), var(--first-color)); width: 100%; height: 45%; padding: 1.5rem; + background-image: linear-gradient(var(--black-color), var(--first-color)); border-radius: 0 0 1rem 1rem; - -webkit-transition: .5s; - transition: .5s; + transition: 0.5s; } } +/* Navigation Links */ .nav__list { text-align: center; } @@ -127,16 +137,13 @@ img { } .nav__link { - color: var(--text-color); -} - -.nav__link:hover { + color: var(--white-color); position: relative; } .nav__link:hover::after { position: absolute; - content: ''; + content: ""; width: 1.5rem; height: 0.1875rem; left: 0.125rem; @@ -144,37 +151,24 @@ img { background-color: var(--first-color); } -.nav__logo { - font-size: var(--normal-font-size); - color: var(--white-color); -} - -.nav__toggle { - font-size: 1.5rem; - cursor: pointer; -} - -/*Aparecer menu*/ +/* Show Menu */ .show { top: 3rem; } -/*Home*/ +/* ============================== + HOME SECTION +================================= */ + .l-main { height: calc(100vh - 3rem); background-color: var(--black-color); } .home { - display: -ms-grid; display: grid; - -ms-grid-columns: 1fr; - grid-template-columns: 1fr; - -ms-grid-rows: max-content max-content; - grid-template-rows: -webkit-max-content -webkit-max-content; - grid-template-rows: max-content max-content; - -ms-flex-line-pack: distribute; - align-content: space-around; + grid-template-columns: 1fr; + align-content: space-around; row-gap: 2.3rem; height: 100%; font-weight: 700; @@ -201,11 +195,10 @@ img { .home__button { display: inline-block; margin-top: 1.5rem; - font-size: .75rem; + font-size: 0.75rem; color: var(--white-color); - padding: .625rem 1rem; - border-radius: .25rem; - background-image: -webkit-gradient(linear, left top, right top, from(var(--black-color)), to(var(--first-color))); + padding: 0.625rem 1rem; + border-radius: 0.25rem; background-image: linear-gradient(to right, var(--black-color), var(--first-color)); } @@ -217,14 +210,10 @@ img { z-index: var(--z-normal); } +/* Social Media Icons */ .home__social { - display: -webkit-box; - display: -ms-flexbox; display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + flex-direction: column; padding-bottom: 1rem; } @@ -238,55 +227,56 @@ img { color: var(--first-color); } -/*----- MEDIA QUERIES -----*/ +/* ============================== + RESPONSIVE DESIGN +================================= */ + @media screen and (min-width: 768px) { body { margin: 0; } + .l-main { height: 100vh; } + .nav { height: 4rem; } + .nav__list { - display: -webkit-box; - display: -ms-flexbox; display: flex; padding-top: 0; } + .nav__item { margin-left: 3rem; margin-bottom: 0; } + .nav__toggle, .nav__close { display: none; } - .nav__link { - text-transform: initial; - } + .home { - -ms-grid-rows: max-content 20px; - grid-template-rows: -webkit-max-content 20px; - grid-template-rows: max-content 20px; - -ms-flex-line-pack: center; - align-content: center; + align-content: center; } + .home__information { margin-top: 2rem; } + .home__social { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; + flex-direction: row; padding-top: 8rem; padding-bottom: 0; } + .home__social-icon { margin-right: 2rem; margin-bottom: 0; } + .home__img { width: 553px; right: 5%; @@ -295,12 +285,14 @@ img { @media screen and (min-width: 1200px) { .bd-grid { - margin-left: auto; - margin-right: auto; + margin: 0 auto; } } -/*ANIMATE*/ +/* ============================== + ANIMATIONS & EFFECTS +================================= */ + .overlay { position: absolute; top: 0; @@ -310,16 +302,16 @@ img { z-index: var(--z-modal); } -.first { +.first, +.second, +.third { background-color: var(--first-color); } .second { - background-color: var(--first-color); left: 33.3%; } .third { - background-color: var(--first-color); left: 66.6%; }