From 2ae5d677e375f01b4f19a6951b1c47d08e74dd46 Mon Sep 17 00:00:00 2001 From: Dhaval rathod Date: Tue, 14 May 2024 02:00:13 +0530 Subject: [PATCH] Changed fontstyle --- frontend/src/App.css | 87 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 86 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index fcc7256..3405ebc 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,8 +1,89 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Anonymous+Pro"); * { margin: 0; padding: 0; box-sizing: border-box; - font-family: "Roboto", sans-serif; + /* font-family: "Roboto", sans-serif; */ + font-family: "Poppins", sans-serif; +} + +:root { + --color-primary: #6f6af8; + + --color-white: #fff; + + --color-red: rgb(255, 63, 63); + + --color-gray-100: hsl(220, 20%, 10%, 5%); + --color-gray-200: hsl(220, 20%, 10%, 10%); + + --color-gray-300: hsl(220, 20%, 10%, 25%); + --color-gray-500: hsl(220, 20%, 10%, 50%); + + --color-gray-700: #252542; + --color-gray-900: #0c0c22; + + /* --color-bg: rgba(230, 230, 235, 0.648); */ + /* --color-bg: rgb(255 255 255 / 89%); */ + + + --color-bg: rgb(249 249 249 / 93%); + + --transition: all 300ms ease; + + --container-width-1g: 84%; + + --container-width-md: 92%; + + --form-width: 50%; + + --radius-1: 0.3rem; + + --radius-2: 0.6rem; + + --radius-3: 1rem; +} + + + +html { + scroll-behavior: smooth; +} + + + +a { + color: var(--color-gray-700); + text-decoration: none; +} +ul { + list-style: none; +} +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--color-gray-900); + line-height: 1.1; +} +h1 { + font-size: 2.2rem; +} +h2 { + font-size: 1.9rem; +} +h3 { + font-size: 1.3rem; + line-height: 1.25; +} +h4 { + font-size: 1.1rem; +} +h5 { + line-height: 1.4; } @@ -50,6 +131,10 @@ body { align-items: center; min-height: 100vh; background-color: #d9dbe6; + + font-family: "Poppins", sans-serif; + font-size: 1.6; + color: var(--color-gray-700); } .player {