diff --git a/src/index.scss b/src/index.scss index 36aa82e..36e0c24 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,6 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Raleway: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&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); @tailwind base; @tailwind components; @@ -13,23 +13,25 @@ font-weight: 400; color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -} -body { - min-width: 100vw; - min-height: 100vh; - background-color: #242424; + @apply text-zinc-800 bg-zinc-400; +} + +body { + @apply min-w-[100vw] min-h-[100vh]; } .gradient { filter: contrast(150%) brightness(90%); background-blend-mode: overlay; } + +.focus-ring { + @apply ring-1 ring-zinc-50/50 focus:ring-offset-fuchsia-600; +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index c224b3c..a3539a2 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,10 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.scss' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./index.scss"; -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( -) +);