From 38063b71cd25928e9b08cb44610d415b521c2376 Mon Sep 17 00:00:00 2001 From: Cris Date: Mon, 4 Aug 2025 17:15:57 -0300 Subject: [PATCH 1/3] styles: fix and refactor --- src/pages/pagina2/galeria-flexbox.html | 8 +- src/pages/pagina3/galeria-grid.html | 8 +- src/pages/pagina4/galeria-hibrida.html | 8 +- src/{pages/pagina1/home.html => pagina1.html} | 12 +-- src/styles/galeria-flexbox.css | 54 +++---------- src/styles/galeria-grid.css | 47 ++---------- src/styles/galeria-hibrida.css | 76 ++++++------------- src/styles/home.css | 44 ----------- src/styles/main.css | 4 +- 9 files changed, 61 insertions(+), 200 deletions(-) rename src/{pages/pagina1/home.html => pagina1.html} (59%) diff --git a/src/pages/pagina2/galeria-flexbox.html b/src/pages/pagina2/galeria-flexbox.html index 8ba89bf..6022357 100644 --- a/src/pages/pagina2/galeria-flexbox.html +++ b/src/pages/pagina2/galeria-flexbox.html @@ -9,11 +9,11 @@
- +
diff --git a/src/pages/pagina3/galeria-grid.html b/src/pages/pagina3/galeria-grid.html index 4862216..8381dde 100644 --- a/src/pages/pagina3/galeria-grid.html +++ b/src/pages/pagina3/galeria-grid.html @@ -9,11 +9,11 @@
- +
diff --git a/src/pages/pagina4/galeria-hibrida.html b/src/pages/pagina4/galeria-hibrida.html index de36b8c..db2b2e3 100644 --- a/src/pages/pagina4/galeria-hibrida.html +++ b/src/pages/pagina4/galeria-hibrida.html @@ -9,11 +9,11 @@
- +
diff --git a/src/pages/pagina1/home.html b/src/pagina1.html similarity index 59% rename from src/pages/pagina1/home.html rename to src/pagina1.html index 45f0a8b..43dc0cd 100644 --- a/src/pages/pagina1/home.html +++ b/src/pagina1.html @@ -4,16 +4,16 @@ Página 1 - Flexbox Estrutura - - + +
- +
diff --git a/src/styles/galeria-flexbox.css b/src/styles/galeria-flexbox.css index 72f44a3..4894cfc 100644 --- a/src/styles/galeria-flexbox.css +++ b/src/styles/galeria-flexbox.css @@ -40,53 +40,21 @@ header { text-shadow: 0 0 2px var(--color-accent-2); } -.menu a:active { - color: var(--color-text-link-active); -} - -main { - align-items: flex-start; - display: flex; - flex: 1; - justify-content: center; - min-height: 60vh; - padding: 0 4vw; -} - -section.gallery-container { - align-items: flex-start; - display: flex; - flex-wrap: wrap; - gap: var(--space-md); - justify-content: center; - max-width: var(--max-width-gallery); - padding: var(--space-md) 0; - width: 100%; -} - -section.gallery-container > div { - aspect-ratio: 1/1; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - border: var(--border-width-card) solid var(--color-card-border); - border-radius: var(--border-radius-card); - box-shadow: 0 2px 8px var(--color-card-shadow); - flex: 0 1 calc(33.33% - var(--space-md)); - min-width: 200px; - width: 100%; -} - -.image1 { background-image: url('../assets/foto1.png'); } -.image2 { background-image: url('../assets/foto2.png'); } -.image3 { background-image: url('../assets/foto3.png'); } -.image4 { background-image: url('../assets/foto4.png'); } -.image5 { background-image: url('../assets/foto5.png'); } -.image6 { background-image: url('../assets/foto6.png'); } .image7 { background-image: url('../assets/foto7.png'); } .image8 { background-image: url('../assets/foto8.png'); } .image9 { background-image: url('../assets/foto9.png'); } +@media (max-width: 600px) { + section.gallery-container { + flex-direction: column !important; + flex-wrap: nowrap !important; + } + section.gallery-container > div { + min-width: 0; + width: 100%; + } +} + footer { align-items: center; background: var(--color-bg-footer); diff --git a/src/styles/galeria-grid.css b/src/styles/galeria-grid.css index 7bd5d65..933772a 100644 --- a/src/styles/galeria-grid.css +++ b/src/styles/galeria-grid.css @@ -45,50 +45,17 @@ header { color: var(--color-text-link-hover); } -.menu a:active { - color: var(--color-text-link-active); -} - -main { - display: grid; - grid-area: galeria; - min-height: 60vh; - padding: 0 4vw; - place-items: center; -} - -section.gallery-container { - align-items: center; - display: grid; - gap: var(--space-md); - grid-template-columns: repeat(3, 1fr); - justify-items: center; - max-width: var(--max-width-gallery); - padding: var(--space-md) 0; - width: 100%; -} -section.gallery-container > div { - aspect-ratio: 1/1; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - border: var(--border-width-card) solid var(--color-card-border); - border-radius: var(--border-radius-card); - box-shadow: 0 2px 8px var(--color-card-shadow); +@media (max-width: 600px) { + section.gallery-container { + grid-template-columns: 1fr !important; + } + section.gallery-container > div { + min-width: 0; width: 100%; + } } -.image1 { background-image: url('../assets/foto1.png'); } -.image2 { background-image: url('../assets/foto2.png'); } -.image3 { background-image: url('../assets/foto3.png'); } -.image4 { background-image: url('../assets/foto4.png'); } -.image5 { background-image: url('../assets/foto5.png'); } -.image6 { background-image: url('../assets/foto6.png'); } -.image7 { background-image: url('../assets/foto7.png'); } -.image8 { background-image: url('../assets/foto8.png'); } -.image9 { background-image: url('../assets/foto9.png'); } - footer { align-items: center; background: var(--color-bg-footer); diff --git a/src/styles/galeria-hibrida.css b/src/styles/galeria-hibrida.css index d26e6ea..74c29cb 100644 --- a/src/styles/galeria-hibrida.css +++ b/src/styles/galeria-hibrida.css @@ -10,65 +10,13 @@ body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; + font-size: 1rem; } /* Flexbox no header */ header { align-items: center; background: var(--color-bg-header); - color: var(--color-text-main); - display: flex; - grid-area: cabecalho; - justify-content: space-between; - padding: var(--space-lg) var(--space-page-side); -} - -.logo { - color: var(--color-text-main); - font-size: var(--font-size-lg); - font-weight: var(--font-weight-bold); - letter-spacing: var(--letter-spacing-logo); -} - -.menu { - display: flex; - gap: var(--space-xl); -} - -.menu a { - color: var(--color-text-link); - font-size: var(--font-size-base); - font-weight: var(--font-weight-normal); - text-decoration: none; - transition: color 0.2s; -} - -.menu a:hover { - color: var(--color-text-link-hover); - text-shadow: 0 0 2px var(--color-accent-2); -} - -.menu a:active { - color: var(--color-text-link-active); -} - -/* Grid no main para galeria de 9 imagens */ -main { - display: grid; - grid-area: galeria; - min-height: 60vh; - padding: 0 4vw; - place-items: center; -} - -section.gallery-container { - align-items: center; - display: grid; - gap: var(--space-md); - grid-template-columns: repeat(3, 1fr); - justify-items: center; - max-width: var(--max-width-gallery); - padding: var(--space-md) 0; width: 100%; } @@ -80,6 +28,7 @@ section.gallery-container { border-radius: var(--border-radius-card); box-shadow: 0 2px 8px var(--color-card-shadow); width: 100%; + min-width: 0; } .image1 { background-image: url('../assets/foto1.png'); } @@ -92,6 +41,27 @@ section.gallery-container { .image8 { background-image: url('../assets/foto8.png'); } .image9 { background-image: url('../assets/foto9.png'); } +@media (min-width: 600px) { + header { + padding: 2rem 8vw; + font-size: 1.25rem; + } + .logo { + font-size: 2rem; + } + .menu { + gap: 2rem; + } + .menu a { + font-size: 1.125rem; + } + section.gallery-container { + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + padding: 2rem 0; + } +} + /* Flexbox no footer para centralizar conteúdo */ footer { align-items: center; diff --git a/src/styles/home.css b/src/styles/home.css index a46759b..c064fcf 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -1,47 +1,3 @@ -body { - background: var(--color-bg-main); - display: flex; - flex-direction: column; - font-family: var(--font-family-main); - min-height: 100vh; -} - -header { - align-items: center; - background: var(--color-bg-header); - color: var(--color-text-main); - display: flex; - justify-content: space-between; - padding: var(--space-lg) var(--space-page-side); -} - -.logo { - color: var(--color-text-main); - font-size: var(--font-size-lg); - font-weight: var(--font-weight-bold); - letter-spacing: var(--letter-spacing-logo); -} - -.menu { - display: flex; - gap: var(--space-xl); -} - -.menu a { - color: var(--color-text-link); - font-size: var(--font-size-base); - font-weight: var(--font-weight-normal); - text-decoration: none; - transition: color 0.2s; -} - -.menu a:hover { - color: var(--color-text-link-hover); -} - -.menu a:active { - color: var(--color-text-link-active); -} main { align-items: center; diff --git a/src/styles/main.css b/src/styles/main.css index 66f455d..a5814fe 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -58,7 +58,7 @@ header { color: var(--color-text-main); display: flex; justify-content: space-between; - padding: 24px 5vw; + padding: 18px 3vw; width: 100vw; } @@ -90,7 +90,7 @@ main { display: grid; flex: 1; min-height: 60vh; - padding: 0 4vw; + padding: 0 4vw 72px 4vw; place-items: center; } From 2563f11738e2afbb64689323f61262f9ab63d6d2 Mon Sep 17 00:00:00 2001 From: Cris Date: Mon, 4 Aug 2025 18:27:20 -0300 Subject: [PATCH 2/3] refactor(styles): DRY --- .github/workflows/superlinter.yml | 19 ++++++ README.md | 62 +++++++++++++++++ src/pages/pagina1/home.html | 27 ++++++++ src/pages/pagina2/galeria-flexbox.html | 8 +-- src/pages/pagina3/galeria-grid.html | 8 +-- src/pages/pagina4/galeria-hibrida.html | 8 +-- src/pagina1.html | 6 +- src/styles/galeria-flexbox.css | 95 +++++++++++--------------- src/styles/galeria-grid.css | 79 +++++++++------------ src/styles/galeria-hibrida.css | 59 ++++++---------- src/styles/home.css | 28 ++------ src/styles/main.css | 35 +++++----- 12 files changed, 240 insertions(+), 194 deletions(-) create mode 100644 .github/workflows/superlinter.yml create mode 100644 README.md create mode 100644 src/pages/pagina1/home.html diff --git a/.github/workflows/superlinter.yml b/.github/workflows/superlinter.yml new file mode 100644 index 0000000..7caf6ed --- /dev/null +++ b/.github/workflows/superlinter.yml @@ -0,0 +1,19 @@ +name: Super-Linter + +on: push + +jobs: + super-lint: + name: Lint code base + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: Run Super-Linter + uses: super-linter/super-linter@v6 + env: + DEFAULT_BRANCH: first-version + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + VALIDATE_JS: true + VALIDATE_HTML: true diff --git a/README.md b/README.md new file mode 100644 index 0000000..55be696 --- /dev/null +++ b/README.md @@ -0,0 +1,62 @@ +# 🌐 web-project + +Welcome to **web-project**! +This repository is a simple web project, crafted with care using **HTML** and **CSS**. If you're looking for a clear example of a website, you've come to the right place! 😄 + +## 🚀 What is this project? + +This project serves as a foundation for static websites: whether it's a portfolio, personal page, landing page, or any other simple site you want to get online quickly. +Here, the focus is on learning, experimenting, and having fun with HTML and CSS—no complications! + +> **Fun fact:** Over the last few months, I've been playing FragPunk and it's been amazing and addictive! If you like fast-paced games, I highly recommend checking it out. + +## 🛠️ Technologies Used + +- **HTML** (66%): the structure of the site. +- **CSS** (34%): the visuals, colors, styles, and animations. + +No frameworks, no JavaScript. Just the basics, but done well! + +## 📁 Project Structure + +``` +web-project/ +│ +├── index.html +├── styles/ +│ └── style.css +└── README.md +``` + +> Note: Depending on your needs, the structure can grow, but the idea is to start simple. + +## 👀 How to use + +1. **Clone the repository**: + ```bash + git clone https://github.com/petrixia/web-project.git + ``` +2. **Open the `index.html` file** in your favorite browser. +3. **Edit as you wish!** + Customize, play with the CSS, change colors, fonts, images... + The project is yours to experiment with! + +## 🎯 Who is this project for? + +- Anyone starting to learn HTML and CSS +- Devs who want a basic template for a static site +- People looking for a starting point for personal projects + +## 🙋‍♂️ Contribute! + +Found something that could be improved? Want to add a tip or example? +Feel free to open an issue or a pull request. All help is welcome! + +## 📄 License + +This project is under the MIT license. +Use it, modify it, share it, and if you want, give credit! 😉 + +--- + +Made with 💚 by [petrixia](https://github.com/petrixia) diff --git a/src/pages/pagina1/home.html b/src/pages/pagina1/home.html new file mode 100644 index 0000000..3a7a81f --- /dev/null +++ b/src/pages/pagina1/home.html @@ -0,0 +1,27 @@ + + + + + + Página 1 - Flexbox Estrutura + + + + +
+ + +
+
+

Bem-vindo ao nosso site

+

Esta é uma galeria de imagens do jogo FragPunk.

+
+
+

© built by cris. all rights reserved.

+
+ + \ No newline at end of file diff --git a/src/pages/pagina2/galeria-flexbox.html b/src/pages/pagina2/galeria-flexbox.html index 6022357..5d8a067 100644 --- a/src/pages/pagina2/galeria-flexbox.html +++ b/src/pages/pagina2/galeria-flexbox.html @@ -9,11 +9,11 @@
- +
diff --git a/src/pages/pagina3/galeria-grid.html b/src/pages/pagina3/galeria-grid.html index 8381dde..c649ab4 100644 --- a/src/pages/pagina3/galeria-grid.html +++ b/src/pages/pagina3/galeria-grid.html @@ -9,11 +9,11 @@
- +
diff --git a/src/pages/pagina4/galeria-hibrida.html b/src/pages/pagina4/galeria-hibrida.html index db2b2e3..ccabd06 100644 --- a/src/pages/pagina4/galeria-hibrida.html +++ b/src/pages/pagina4/galeria-hibrida.html @@ -9,11 +9,11 @@
- +
diff --git a/src/pagina1.html b/src/pagina1.html index 43dc0cd..5e49a3a 100644 --- a/src/pagina1.html +++ b/src/pagina1.html @@ -11,9 +11,9 @@
diff --git a/src/styles/galeria-flexbox.css b/src/styles/galeria-flexbox.css index 4894cfc..0992c4a 100644 --- a/src/styles/galeria-flexbox.css +++ b/src/styles/galeria-flexbox.css @@ -1,70 +1,53 @@ body { - background: var(--color-bg-main); - display: flex; - flex-direction: column; - font-family: var(--font-family-main); - min-height: 100vh; + display: flex; + flex-direction: column; } -header { - align-items: center; - background: var(--color-bg-header); - color: var(--color-text-main); - display: flex; - justify-content: space-between; - padding: var(--space-lg) var(--space-page-side); +main { + align-items: flex-start; + display: flex; + flex: 1; + justify-content: center; } -.logo { - color: var(--color-text-main); - font-size: var(--font-size-lg); - font-weight: var(--font-weight-bold); - letter-spacing: var(--letter-spacing-logo); +section.gallery-container { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + gap: var(--space-md); + justify-content: center; + max-width: var(--max-width-gallery); + padding: var(--space-md) 0; + width: 100%; } -.menu { - display: flex; - gap: var(--space-xl); +section.gallery-container>div { + aspect-ratio: 1/1; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border: var(--border-width-card) solid var(--color-card-border); + border-radius: var(--border-radius-card); + box-shadow: 0 2px 8px var(--color-card-shadow); + flex: 0 1 calc(33.33% - var(--space-md)); + min-width: min(200px, 100vw); + width: 100%; } -.menu a { - color: var(--color-text-link); - font-size: var(--font-size-base); - font-weight: var(--font-weight-normal); - text-decoration: none; - transition: color 0.2s; -} - -.menu a:hover { - color: var(--color-text-link-hover); - text-shadow: 0 0 2px var(--color-accent-2); -} - -.image7 { background-image: url('../assets/foto7.png'); } -.image8 { background-image: url('../assets/foto8.png'); } -.image9 { background-image: url('../assets/foto9.png'); } - @media (max-width: 600px) { - section.gallery-container { - flex-direction: column !important; - flex-wrap: nowrap !important; - } - section.gallery-container > div { + section.gallery-container>div { + flex-basis: 100%; min-width: 0; - width: 100%; + padding-bottom: 20px; } } -footer { - align-items: center; - background: var(--color-bg-footer); - bottom: 0; - color: var(--color-text-main); - display: flex; - font-size: var(--font-size-base); - justify-content: center; - min-height: 56px; - padding: var(--space-sm) 0; - position: fixed; - width: 100vw; -} \ No newline at end of file +.image1 { background-image: url('../assets/foto1.png'); } +.image2 { background-image: url('../assets/foto2.png'); } +.image3 { background-image: url('../assets/foto3.png'); } +.image4 { background-image: url('../assets/foto4.png'); } +.image5 { background-image: url('../assets/foto5.png'); } +.image6 { background-image: url('../assets/foto6.png'); } +.image7 { background-image: url('../assets/foto7.png'); } +.image8 { background-image: url('../assets/foto8.png'); } +.image9 { background-image: url('../assets/foto9.png'); } diff --git a/src/styles/galeria-grid.css b/src/styles/galeria-grid.css index 933772a..c846613 100644 --- a/src/styles/galeria-grid.css +++ b/src/styles/galeria-grid.css @@ -1,72 +1,61 @@ body { - background: var(--color-bg-main); display: grid; - font-family: var(--font-family-main); grid-template-areas: "cabecalho" "galeria" "rodape"; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; - min-height: 100vh; } header { - align-items: center; - background: var(--color-bg-header); - color: var(--color-text-main); - display: flex; grid-area: cabecalho; - justify-content: space-between; - padding: var(--space-lg) var(--space-page-side); } -.logo { - color: var(--color-text-main); - font-size: var(--font-size-lg); - font-weight: var(--font-weight-bold); - letter-spacing: var(--letter-spacing-logo); +main { + grid-area: galeria; } -.menu { - display: flex; - gap: var(--space-xl); +section.gallery-container { + align-items: center; + display: grid; + gap: var(--space-md); + grid-template-columns: repeat(3, 1fr); + justify-items: center; + max-width: var(--max-width-gallery); + padding: var(--space-md) 0; + width: 100%; } -.menu a { - color: var(--color-text-link); - font-size: var(--font-size-base); - font-weight: var(--font-weight-normal); - text-decoration: none; - transition: color 0.2s; +@media (max-width: 600px) { + section.gallery-container { + grid-template-columns: 1fr; + padding-bottom: 40px; + } } -.menu a:hover { - color: var(--color-text-link-hover); +section.gallery-container>div { + aspect-ratio: 1/1; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border: var(--border-width-card) solid var(--color-card-border); + border-radius: var(--border-radius-card); + box-shadow: 0 2px 8px var(--color-card-shadow); + width: 100%; } +.image1 { background-image: url('../assets/foto1.png'); } +.image2 { background-image: url('../assets/foto2.png'); } +.image3 { background-image: url('../assets/foto3.png'); } +.image4 { background-image: url('../assets/foto4.png'); } +.image5 { background-image: url('../assets/foto5.png'); } +.image6 { background-image: url('../assets/foto6.png'); } +.image7 { background-image: url('../assets/foto7.png'); } +.image8 { background-image: url('../assets/foto8.png'); } +.image9 { background-image: url('../assets/foto9.png'); } -@media (max-width: 600px) { - section.gallery-container { - grid-template-columns: 1fr !important; - } - section.gallery-container > div { - min-width: 0; - width: 100%; - } -} footer { - align-items: center; - background: var(--color-bg-footer); - bottom: 0; - color: var(--color-text-main); - display: flex; - font-size: var(--font-size-base); grid-area: rodape; - justify-content: center; - min-height: 56px; - padding: var(--space-sm) 0; - position: fixed; - width: 100vw; } \ No newline at end of file diff --git a/src/styles/galeria-hibrida.css b/src/styles/galeria-hibrida.css index 74c29cb..a022d99 100644 --- a/src/styles/galeria-hibrida.css +++ b/src/styles/galeria-hibrida.css @@ -1,4 +1,3 @@ -/* Grid no body para estruturar as áreas principais */ body { background: var(--color-bg-main); display: grid; @@ -10,17 +9,35 @@ body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; - font-size: 1rem; } -/* Flexbox no header */ header { + grid-area: cabecalho; +} + +main { + grid-area: galeria; +} + +section.gallery-container { align-items: center; - background: var(--color-bg-header); + display: grid; + gap: var(--space-md); + grid-template-columns: repeat(3, 1fr); + justify-items: center; + max-width: var(--max-width-gallery); + padding: var(--space-md) 0; width: 100%; } -.gallery-container > div { +@media (max-width: 600px) { + section.gallery-container { + grid-template-columns: 1fr; + padding-bottom: 40px; + } +} + +.gallery-container>div { aspect-ratio: 1/1; background-position: center; background-size: cover; @@ -28,7 +45,6 @@ header { border-radius: var(--border-radius-card); box-shadow: 0 2px 8px var(--color-card-shadow); width: 100%; - min-width: 0; } .image1 { background-image: url('../assets/foto1.png'); } @@ -41,39 +57,8 @@ header { .image8 { background-image: url('../assets/foto8.png'); } .image9 { background-image: url('../assets/foto9.png'); } -@media (min-width: 600px) { - header { - padding: 2rem 8vw; - font-size: 1.25rem; - } - .logo { - font-size: 2rem; - } - .menu { - gap: 2rem; - } - .menu a { - font-size: 1.125rem; - } - section.gallery-container { - grid-template-columns: repeat(3, 1fr); - gap: 2rem; - padding: 2rem 0; - } -} - -/* Flexbox no footer para centralizar conteúdo */ footer { - align-items: center; - background: var(--color-bg-footer); - bottom: 0; - color: var(--color-text-main); display: flex; - font-size: var(--font-size-base); grid-area: rodape; justify-content: center; - min-height: 56px; - padding: var(--space-sm) 0; - position: fixed; - width: 100vw; } \ No newline at end of file diff --git a/src/styles/home.css b/src/styles/home.css index c064fcf..72a737c 100644 --- a/src/styles/home.css +++ b/src/styles/home.css @@ -1,3 +1,7 @@ +body { + display: flex; + flex-direction: column; +} main { align-items: center; @@ -5,8 +9,6 @@ main { flex: 1; flex-direction: column; justify-content: center; - min-height: 60vh; - padding: 0 4vw; } main h2 { @@ -21,25 +23,3 @@ main p { max-width: 600px; text-align: center; } - -.image1 { background-image: url('../assets/foto1.png'); } -.image2 { background-image: url('../assets/foto2.png'); } -.image3 { background-image: url('../assets/foto3.png'); } -.image4 { background-image: url('../assets/foto4.png'); } -.image5 { background-image: url('../assets/foto5.png'); } -.image6 { background-image: url('../assets/foto6.png'); } -.image7 { background-image: url('../assets/foto7.png'); } -.image8 { background-image: url('../assets/foto8.png'); } -.image9 { background-image: url('../assets/foto9.png'); } - -footer { - align-items: center; - background: var(--color-bg-footer); - color: var(--color-text-main); - display: flex; - font-size: var(--font-size-base); - justify-content: center; - min-height: 56px; - padding: var(--space-sm) 0; - width: 100vw; -} \ No newline at end of file diff --git a/src/styles/main.css b/src/styles/main.css index a5814fe..bb6e96d 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,5 +1,4 @@ :root { - /* Cores */ --color-bg-main: #18181b; --color-bg-header: #18181b; --color-bg-footer: #18181b; @@ -14,7 +13,6 @@ --color-card-shadow: #0003; --color-card-border: #fff; - /* Fontes */ --font-family-main: 'Segoe UI', Arial, sans-serif; --font-size-base: 1rem; --font-size-lg: 1.5rem; @@ -23,7 +21,7 @@ --font-weight-bold: 700; --letter-spacing-logo: 1px; - /* Espaçamentos */ + --space-xs: 8px; --space-sm: 16px; --space-md: 20px; @@ -32,12 +30,10 @@ --space-section: 40px; --space-page-side: 5vw; - /* Bordas e radius */ --border-radius-card: 12px; --border-radius-small: 8px; --border-width-card: 2px; - /* Larguras */ --max-width-gallery: 1000px; } @@ -55,10 +51,10 @@ header { align-items: center; background: var(--color-bg-header); box-sizing: border-box; - color: var(--color-text-main); + color: var(--color-accent-4); display: flex; justify-content: space-between; - padding: 18px 3vw; + padding: var(--space-lg) var(--space-page-side); width: 100vw; } @@ -73,6 +69,12 @@ header { gap: var(--space-xl); } +@media (max-width: 600px) { + .menu { + gap: var(--space-xs); + } +} + .menu a { color: var(--color-text-link); font-size: var(--font-size-base); @@ -89,36 +91,35 @@ main { box-sizing: border-box; display: grid; flex: 1; - min-height: 60vh; - padding: 0 4vw 72px 4vw; + min-block-size: 60vh; + padding: 0 clamp(1rem, 4vw, 3rem) clamp(3.5rem, 8vw, 4.5rem); place-items: center; } footer { align-items: center; background: var(--color-bg-footer); + bottom: 0; box-sizing: border-box; color: var(--color-text-main); display: flex; font-size: var(--font-size-base); justify-content: center; min-height: 56px; - padding: 16px 0; + padding: var(--space-sm) 0; + position: fixed; width: 100vw; } a { - color: inherit; + color: var(--color-text-link); text-decoration: none; + transition: color 0.3s ease; } a:hover { text-decoration: underline; transform: scale(0.95); -} - -footer > p > a:hover { - color: #c0b88c; - text-decoration: underline; - transform: scale(0.95); + transition: color 0.3s ease, transform 0.2s ease; + color: var(--color-text-link-hover); } \ No newline at end of file From a7d8bc27b1964cf5ba4f40ec5d95a1223923046d Mon Sep 17 00:00:00 2001 From: Cris Date: Mon, 4 Aug 2025 18:29:40 -0300 Subject: [PATCH 3/3] delete: useless html --- src/pagina1.html | 27 --------------------------- 1 file changed, 27 deletions(-) delete mode 100644 src/pagina1.html diff --git a/src/pagina1.html b/src/pagina1.html deleted file mode 100644 index 5e49a3a..0000000 --- a/src/pagina1.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - Página 1 - Flexbox Estrutura - - - - -
- - -
-
-

Bem-vindo ao nosso site

-

Esta é a página inicial usando Flexbox.

-
- - - \ No newline at end of file