From 55e984c40c72c4292c8bf41c6276221df962e919 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Sun, 24 Oct 2021 19:08:44 +0530 Subject: [PATCH 01/10] :sparkles: Update NavBar to a fixed element so that it floats on scroll --- src/components/Navbar/Navbar.tsx | 5 ++--- src/components/Navbar/Styles.tsx | 20 ++++++++++++++++++-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index caedc69..dd82be1 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -7,6 +7,7 @@ import { NavDropItems, NavItem, NavItems, + NavLogo, UserImage, UserImageContainer, } from "./Styles"; @@ -34,10 +35,8 @@ const Navbar = (): JSX.Element => {
- brand diff --git a/src/components/Navbar/Styles.tsx b/src/components/Navbar/Styles.tsx index 9cf9312..4f03b4f 100644 --- a/src/components/Navbar/Styles.tsx +++ b/src/components/Navbar/Styles.tsx @@ -1,5 +1,15 @@ import styled, { keyframes } from "styled-components"; +export const NavLogo = styled.img` + width: 70px; + height: 70px; + + @media screen and (max-width: 768px) { + width: 50px; + height: 50px; + } +`; + export const NavBrand = styled.img` width: 80px; height: 80px; @@ -233,18 +243,24 @@ export const Close = styled.div` `; export const Nav = styled.nav` - margin: 35px 50px; + padding: 15px 50px; display: flex; align-items: center; justify-content: space-between; z-index: 998; + box-shadow: 0 5px 10px rgba(0.1, 0.1, 0.1, 0.5); + position: fixed; + width: 100%; + top: 0; + background-color: #21232c; div:first-child { display: flex; align-items: center; } - @media screen and (max-width: 900px) { + @media screen and (max-width: 900px) { + padding: 10px 15px; .user { position: fixed; bottom: 25px; From 90a70533a325dd12d57e2f8d3869d2999548a7e8 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Sun, 24 Oct 2021 19:10:09 +0530 Subject: [PATCH 02/10] :lipstick: Add padding in all pages for small screen size --- src/components/PageContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx index c20b520..91ecbd9 100644 --- a/src/components/PageContainer.tsx +++ b/src/components/PageContainer.tsx @@ -2,7 +2,7 @@ import React from "react"; const PageContainer: React.FC = ({ children }) => { return ( -
+
{children}
); From bc9fa75dd41c1c7dc588ee461dc5f65c2fe77f47 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Sun, 24 Oct 2021 19:11:44 +0530 Subject: [PATCH 03/10] :recycle: Refractor style of intro to the brand to make it different from features --- src/pages/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5ef4510..a6ac049 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,8 +7,8 @@ import { DiscordIcon, YoutubeIcon } from "../icons"; export default function HomePage(): JSX.Element { return ( <> -
-
+
+

Welcome to

Tech With Tim

Programming & Tech Tutorials
From 108f43b35a970ce2e3d339d6508d556ad7754011 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Sun, 24 Oct 2021 20:23:47 +0530 Subject: [PATCH 04/10] :bug: Fix indentaion --- src/components/Navbar/Styles.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Navbar/Styles.tsx b/src/components/Navbar/Styles.tsx index 4f03b4f..d0b1478 100644 --- a/src/components/Navbar/Styles.tsx +++ b/src/components/Navbar/Styles.tsx @@ -249,17 +249,17 @@ export const Nav = styled.nav` justify-content: space-between; z-index: 998; box-shadow: 0 5px 10px rgba(0.1, 0.1, 0.1, 0.5); - position: fixed; - width: 100%; - top: 0; - background-color: #21232c; + position: fixed; + width: 100%; + top: 0; + background-color: #21232c; div:first-child { display: flex; align-items: center; } - @media screen and (max-width: 900px) { + @media screen and (max-width: 900px) { padding: 10px 15px; .user { position: fixed; From 757f5e4c4b7fed4e90f924c25dada7f539cfbbf2 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Sun, 24 Oct 2021 20:24:35 +0530 Subject: [PATCH 05/10] :lipstick: Update UI of social media links --- src/pages/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a6ac049..6701f6c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,15 +7,15 @@ import { DiscordIcon, YoutubeIcon } from "../icons"; export default function HomePage(): JSX.Element { return ( <> -
-
+
+

Welcome to

Tech With Tim

Programming & Tech Tutorials
- From 7c5a9a05f2a07ad742f757e8852f1d84415d0fdf Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Mon, 25 Oct 2021 14:35:50 +0530 Subject: [PATCH 06/10] :lipstick: Add hover effect to button --- src/components/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index c7ff387..bf30975 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -32,7 +32,7 @@ export const Button: React.FC = ({ className={cb( className, colorSchemas[color], - "cursor-pointer flex items-center relative justify-center font-semibold tracking-wide px-5 py-1 rounded-xl focus:outline-none" + "cursor-pointer flex items-center relative justify-center font-semibold tracking-wide px-5 py-1 rounded-full focus:outline-none hover:opacity-70" )} {...props} > From f549a553c0e28c15d436c20f128524b888d33013 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Mon, 25 Oct 2021 14:37:27 +0530 Subject: [PATCH 07/10] :lipstick: Add rounded borders for cards --- src/components/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index f934322..1adc49f 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -3,7 +3,7 @@ import cb from "classnames"; const Card: React.FC> = ({ children, className, ...props }) => { return ( -
+
{children}
); From dbdff10db0b592ede86a3ff3485a1815b407e9d1 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Mon, 25 Oct 2021 14:46:13 +0530 Subject: [PATCH 08/10] :recycle: Add Acme as secondary font --- tailwind.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 77738ab..839b327 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,8 @@ module.exports = { darkMode: false, theme: { fontFamily: { - body: ['"Poppins"', "sans-serif"], + body: ["Poppins", "sans-serif"], + secondary: ["Acme", "sans-serif"] }, container: { center: true, From 7d7319b27fe9e9fd6a29ae605ff1291949396e00 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Mon, 25 Oct 2021 14:47:31 +0530 Subject: [PATCH 09/10] :lipstick: Update typographical hierarchy --- src/pages/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6701f6c..b531812 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,12 +10,12 @@ export default function HomePage(): JSX.Element {

Welcome to

-

Tech With Tim

+

Tech With Tim

Programming & Tech Tutorials
- @@ -38,7 +38,7 @@ export default function HomePage(): JSX.Element {

Timathon

-

Code Jam

+

Code Jam

Hosted every 2 months, consisting of a different theme and allowing yourself to put your @@ -66,7 +66,7 @@ export default function HomePage(): JSX.Element {

Weekly

-

Challenges

+

Challenges

Submit your solutions and earn badges!

@@ -86,7 +86,7 @@ export default function HomePage(): JSX.Element {

Discord

-

Commmunity

+

Commmunity

Become a part of one of the most active programming communities. Check out all of our help channels! From 3576da469aa6c15a7ec0fcfe67b4102129d41d43 Mon Sep 17 00:00:00 2001 From: codingwith3dv Date: Mon, 25 Oct 2021 14:48:40 +0530 Subject: [PATCH 10/10] :lipstick: Add/Import Acme font globally --- src/styles/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/index.scss b/src/styles/index.scss index e1520ba..a1c052b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap'); * { margin: 0;