From e3bf7840a740973dee4e31075bb247a3e2738f6c Mon Sep 17 00:00:00 2001 From: David Date: Tue, 27 Oct 2020 17:11:04 -0500 Subject: [PATCH 1/3] fix: mejora de estilos y animaciones para navbar - Uso de css modules y resaltado del navlink activo - Animaciones para navbar --- src/components/header/Logo.js | 42 ------------ src/components/header/Logo/logo.js | 16 +++++ src/components/header/Logo/logo.module.css | 26 +++++++ src/components/header/{Nav.css => header.css} | 68 +++++++++++++------ src/components/header/header.js | 40 +++++------ src/components/hero-section/hero-section.css | 14 ++-- src/components/layout/layout.module.css | 6 ++ 7 files changed, 124 insertions(+), 88 deletions(-) delete mode 100644 src/components/header/Logo.js create mode 100644 src/components/header/Logo/logo.js create mode 100644 src/components/header/Logo/logo.module.css rename src/components/header/{Nav.css => header.css} (80%) diff --git a/src/components/header/Logo.js b/src/components/header/Logo.js deleted file mode 100644 index 48df80d..0000000 --- a/src/components/header/Logo.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import escudo from "../../images/logo-escudo-ec.svg"; - -const LogoStyles = styled.div` - @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap"); - - height: 80px; - margin: 0; - padding: 0; - flex-basis: 20%; - background-size: 150em; - h1 { - margin: 0; - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - .shield { - transform: scale(0.9); - } - .legend { - font-family: "Roboto", sans-serif; - font-weight: bold; - font-size: 1.5em; - font-size: clamp(18px, 1vw, 28px); - } -`; - -export default function Logo() { - return ( - -

- - Logo de Javascript Ecuador - - Ecuador.js -

- - ); -} diff --git a/src/components/header/Logo/logo.js b/src/components/header/Logo/logo.js new file mode 100644 index 0000000..654d347 --- /dev/null +++ b/src/components/header/Logo/logo.js @@ -0,0 +1,16 @@ +import React from "react"; +import escudo from "../../../images/logo-escudo-ec.svg"; +import styles from './logo.module.css'; + +const Logo = () => ( +
+

+ + Logo de Javascript Ecuador + + Ecuador.js +

+
+); + +export default Logo; \ No newline at end of file diff --git a/src/components/header/Logo/logo.module.css b/src/components/header/Logo/logo.module.css new file mode 100644 index 0000000..0cff5f7 --- /dev/null +++ b/src/components/header/Logo/logo.module.css @@ -0,0 +1,26 @@ +.logo { + height: 80px; + margin: 0; + padding: 0; + flex-basis: 20%; + background-size: 150em; +} + +.logo h1 { + margin: 0; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.shield { + transform: scale(0.9); +} + +.legend { + font-family: "Roboto", sans-serif; + font-weight: bold; + font-size: 1.5em; + font-size: clamp(18px, 1vw, 28px); +} \ No newline at end of file diff --git a/src/components/header/Nav.css b/src/components/header/header.css similarity index 80% rename from src/components/header/Nav.css rename to src/components/header/header.css index 8dd6adc..f4223a8 100644 --- a/src/components/header/Nav.css +++ b/src/components/header/header.css @@ -1,5 +1,3 @@ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap"); - header { background-color: transparent; } @@ -9,7 +7,7 @@ header { flex-wrap: wrap; align-items: center; justify-content: space-between; - + overflow: hidden; max-width: 76rem; padding: 1rem; margin-left: auto; @@ -69,35 +67,55 @@ header { .navbar { justify-content: center; width: 100%; + height: 0; font-size: 0.75rem; font-weight: 700; font-family: "Open Sans", sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + transition: height 300ms ease-in-out; +} + +.navbar.expanded { + height: 275px; } .nav__item { display: block; - margin-top: 1rem; + padding-top: 1rem; --text-opacity: 1; color: #000; color: rgba(0, 0, 0, var(--text-opacity)); text-decoration: none; + position: relative; + box-sizing: border-box; +} + +.nav__item::after { + content: ''; + position: absolute; + display: block; + height: 5px; + background-color: #f7e018; + width: 0; + bottom: -5px; + transition: all 250ms ease-in-out; } -.nav__item:hover { - border-bottom: 3px solid #f7e018; +.nav__item:hover::after { + width: 100%; } -.nav__item a.active { - border-bottom: 3px solid #f7e018; +.nav__item.active::after { + width: 100%; } /*MD*/ -@media (min-width: 768px) { +@media (min-width: 992px) { .nav-wrap { justify-content: center; + overflow: visible; } .nav__logo-image--sm { @@ -124,6 +142,7 @@ header { display: inline-flex; flex-wrap: wrap; min-height: 100px; + height: 180px; width: 100vh; display: flex; align-items: center; @@ -131,9 +150,14 @@ header { justify-content: center; } + .navbar.expanded { + height: 180px; + } + .nav__item { display: inline-flex; margin-top: 0; + padding-top: 0; align-items: center; justify-content: center; height: 80px; @@ -142,12 +166,19 @@ header { text-align: center; order: 1; } - .nav__item:hover { - border-bottom: 5px solid #f7e018; + + .nav__item::after { + bottom: 0; + width: 100%; + transform: scaleX(0); } - .nav__item a.active { - border-bottom: px solid #f7e018; + .nav__item:hover::after{ + transform: scaleX(1); + } + + .nav__item.active::after { + transform: scale(1); } } @@ -186,6 +217,10 @@ header { width: auto; } + .navbar.expanded { + height: 100px; + } + .nav__item { display: inline-flex; margin-top: 0; @@ -196,11 +231,4 @@ header { align-items: center; text-align: center; } - .nav__item:hover { - border-bottom: 5px solid #f7e018; - } - - .nav__item a.active { - border-bottom: px solid #f7e018; - } } diff --git a/src/components/header/header.js b/src/components/header/header.js index 3ec13cb..edad93e 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -1,25 +1,20 @@ -import { graphql, useStaticQuery, Link } from "gatsby"; +import { Link } from "gatsby"; import React, { useState } from "react"; -import "./Nav.css"; +import "./header.css"; import escudo from "../../images/logo-escudo-ec.svg"; -import Logo from "./Logo"; +import Logo from "./Logo/logo"; const Header = () => { const [isExpanded, toggleExpansion] = useState(false); - const { site } = useStaticQuery(graphql` - query SiteTitleQuery { - site { - siteMetadata { - title - } - } - } - `); + let expanededClass = '' + if (isExpanded) { + expanededClass = 'expanded' + } return (
- + Logo

Ecuador.js

@@ -37,36 +32,37 @@ const Header = () => { -