From 34d6db382335dd71b153fee61cfa323c138b1a9f Mon Sep 17 00:00:00 2001 From: "arjxn.py" Date: Sat, 28 Oct 2023 13:45:55 +0530 Subject: [PATCH 1/6] Added social links --- src/components/Header/Header.tsx | 134 ++++++++++++++++++------------- 1 file changed, 78 insertions(+), 56 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 0dea88a..198bd89 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; // import { Header, Image } from 'semantic-ui-react' -import Curiologo from '../assets/images/Csmall.png' -import './header.css'; -import { Link ,BrowserRouter as Router } from 'react-router-dom'; -import { FaGithub, FaLinkedin, FaTwitter } from 'react-icons/fa'; +import Curiologo from "../assets/images/Csmall.png"; +import "./header.css"; +import { Link, BrowserRouter as Router } from "react-router-dom"; +import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa"; const HeaderCurio = () => { //Used to toggle the hamburger menu @@ -11,28 +11,45 @@ const HeaderCurio = () => { return ( <> -
- {/* Wrapping the Link components within the Router component */} - - {/* Logo linking to the homepage */} - -
-

- Curio - URIO -

-

- Your Video Translator :) -

-
- + {/* Wrapping the Link components within the Router component */} + + {/* Logo linking to the homepage */} + +
+

+ Curio + URIO +

+

+ Your Video Translator :) +

+
+ -
+
{/* Social icons */} - - - + + + + + + + + +
@@ -40,50 +57,55 @@ const HeaderCurio = () => { Screen width is < 768px above is disabled and below is triggered Added hamburger menu and generic options for the menu */} - { } + {}
- {/* Wrapping the Link components within the Router component */} - + {/* Wrapping the Link components within the Router component */} + {/* Logo linking to the homepage */} -
-

- Curio - URIO -

-

- Your Video Translator :) -

-
- +
+

+ Curio + URIO +

+

+ Your Video Translator :) +

+
+ - - - +
+
+ +
{/* - The menu of the hamburger - If trigger is true, display it, if not don't*/} + The menu of the hamburger + If trigger is true, display it, if not don't*/}
Date: Sat, 28 Oct 2023 14:45:20 +0530 Subject: [PATCH 2/6] Style social icons --- src/components/Header/Header.tsx | 12 +++++++++--- src/components/Header/header.css | 28 ++++++++++++++++++++++++++-- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 198bd89..1536253 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -34,21 +34,27 @@ const HeaderCurio = () => { target="_blank" rel="noopener noreferrer" > - +
+ +
- +
+ +
- +
+ +
diff --git a/src/components/Header/header.css b/src/components/Header/header.css index fa1d6fe..880320e 100644 --- a/src/components/Header/header.css +++ b/src/components/Header/header.css @@ -84,7 +84,7 @@ opacity: 0.2; } .hamburger-menu-context svg { - margin-right: 10px; + margin-right: 10px; font-size: 25px; } .gradient__text { @@ -121,7 +121,7 @@ } .curio__sign svg:hover { - color: #1da1f2; + color: #1da1f2; } .curio__sign p { @@ -152,6 +152,30 @@ border-radius: 5px; } +.github_icon svg { + transition: color 0.3s; +} + +.github_icon:hover svg { + color: #696363; +} + +.linkedin_icon svg { + transition: color 0.3s; +} + +.linkedin_icon:hover svg { + color: #0077b5; +} + +.twitter_icon svg { + transition: color 0.3s; +} + +.twitter_icon:hover svg { + color: #26a7de; +} + @media only screen and (min-width: 768px) { /* For mobile phones: */ [class="curio__header"] { From 87b8cf785d4d3e24f1129f978236eb98c09e12b3 Mon Sep 17 00:00:00 2001 From: "arjxn.py" Date: Sat, 28 Oct 2023 14:55:57 +0530 Subject: [PATCH 3/6] Fix searchbar style --- src/components/UnderHeader/SearchBar.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/UnderHeader/SearchBar.css b/src/components/UnderHeader/SearchBar.css index 1ba7a21..fca14c6 100644 --- a/src/components/UnderHeader/SearchBar.css +++ b/src/components/UnderHeader/SearchBar.css @@ -37,6 +37,12 @@ border-top-right-radius: 5px; border-bottom-right-radius: 5px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.curio__search :hover { + color: black; } .curio__search__input { From 3a2b18794786b9525b27df42c65940e2e08d8239 Mon Sep 17 00:00:00 2001 From: "arjxn.py" Date: Sat, 28 Oct 2023 17:21:02 +0530 Subject: [PATCH 4/6] Reset search button style --- src/components/UnderHeader/SearchBar.css | 4 ++-- src/components/UnderHeader/Searchbar.tsx | 9 +-------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/UnderHeader/SearchBar.css b/src/components/UnderHeader/SearchBar.css index fca14c6..2abe4fb 100644 --- a/src/components/UnderHeader/SearchBar.css +++ b/src/components/UnderHeader/SearchBar.css @@ -41,8 +41,8 @@ border-bottom-left-radius: 0px; } -.curio__search :hover { - color: black; +.search_button :hover { + background-color: black; } .curio__search__input { diff --git a/src/components/UnderHeader/Searchbar.tsx b/src/components/UnderHeader/Searchbar.tsx index d665bb2..936dbc7 100644 --- a/src/components/UnderHeader/Searchbar.tsx +++ b/src/components/UnderHeader/Searchbar.tsx @@ -29,16 +29,9 @@ const Searchbar: React.FC = ({ handleFormSubmit }) => { value={term} name="video-search" type="text" - id="searchBar" placeholder="Search Video..." /> - From cc5cab517d92d053423edbf4abdb9f8b517e43fe Mon Sep 17 00:00:00 2001 From: "arjxn.py" Date: Sat, 28 Oct 2023 18:53:42 +0530 Subject: [PATCH 5/6] Style social Icons in mobile view --- src/components/Header/Header.tsx | 34 ++++++++++++++++++++--- src/components/Header/header.css | 47 +++++++++++++++++++++++++++----- 2 files changed, 70 insertions(+), 11 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 1536253..5877c58 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -114,17 +114,43 @@ const HeaderCurio = () => { If trigger is true, display it, if not don't*/} diff --git a/src/components/Header/header.css b/src/components/Header/header.css index 880320e..700ca13 100644 --- a/src/components/Header/header.css +++ b/src/components/Header/header.css @@ -70,22 +70,55 @@ align-items: center; position: absolute; z-index: 100; - background-color: #040c18; height: 60vw; width: 96vw; - transition-duration: 1s; font-size: 1.1rem; font-family: Manrope; } .hamburger-menu-context:active { opacity: 0.2; } -.hamburger-menu-context:hover { - opacity: 0.2; -} +/* .hamburger-menu-context:hover { + opacity: 1; +} */ .hamburger-menu-context svg { - margin-right: 10px; - font-size: 25px; + font-size: 30px; + color: #dfdfdf; +} +.gradient_bg { + background: -moz-radial-gradient( + circle at 50% 50%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 50% + ); + + /* safari 5.1+,chrome 10+ */ + background: -webkit-radial-gradient( + circle at 50% 50%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 50% + ); + + /* opera 11.10+ */ + background: -o-radial-gradient( + circle at 50% 50%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 50% + ); + + /* ie 10+ */ + background: -ms-radial-gradient( + circle at 50% 50%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 50% + ); + + /* global 92%+ browsers support */ + background: radial-gradient( + circle at 50% 50%, + rgba(0, 40, 83, 1) 0%, + rgba(4, 12, 24, 1) 50% + ); } .gradient__text { background: var(--gradient-text); From bdb2f67fea0cc94e62c7c3a84b19b634feed90a5 Mon Sep 17 00:00:00 2001 From: "arjxn.py" Date: Sat, 28 Oct 2023 19:26:51 +0530 Subject: [PATCH 6/6] Style changes to hamburger menu --- src/components/Header/header.css | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/Header/header.css b/src/components/Header/header.css index 700ca13..8c50a3b 100644 --- a/src/components/Header/header.css +++ b/src/components/Header/header.css @@ -21,20 +21,23 @@ gap: 1vw; background-color: rgba(0, 0, 0, 0); transition-duration: 0.2s; + margin-top: 5px; } .lines-rotated-left-m { - height: 1.2vw; - width: 8vw; + height: 1vw; + width: 6vw; position: absolute; transform: rotate(50deg); - background-image: linear-gradient(to right, purple, pink); + background: var(--gradient-text); + border-radius: 20%; } .lines-rotated-right-m { - height: 1.2vw; - width: 8vw; + height: 1vw; + width: 6vw; position: absolute; transform: rotate(-50deg); - background-image: linear-gradient(to right, purple, pink); + background: var(--gradient-text); + border-radius: 20%; } .hamburger-m:active { opacity: 0.6; @@ -43,10 +46,11 @@ opacity: 0.6; } .hamburger-lines-m { - height: 2vw; - width: 8vw; + height: 1vw; + width: 6vw; + border-radius: 20%; - background-image: linear-gradient(to right, purple, pink); + background: var(--gradient-text); } .curio__header-m { font-family: Manrope; @@ -78,9 +82,6 @@ .hamburger-menu-context:active { opacity: 0.2; } -/* .hamburger-menu-context:hover { - opacity: 1; -} */ .hamburger-menu-context svg { font-size: 30px; color: #dfdfdf;