diff --git a/src/assets/fonts/Inter-Black.ttf b/src/assets/fonts/Inter-Black.ttf new file mode 100644 index 0000000..b27822b Binary files /dev/null and b/src/assets/fonts/Inter-Black.ttf differ diff --git a/src/assets/fonts/Inter-Bold.ttf b/src/assets/fonts/Inter-Bold.ttf new file mode 100644 index 0000000..fe23eeb Binary files /dev/null and b/src/assets/fonts/Inter-Bold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraBold.ttf b/src/assets/fonts/Inter-ExtraBold.ttf new file mode 100644 index 0000000..874b1b0 Binary files /dev/null and b/src/assets/fonts/Inter-ExtraBold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraLight.ttf b/src/assets/fonts/Inter-ExtraLight.ttf new file mode 100644 index 0000000..c993e82 Binary files /dev/null and b/src/assets/fonts/Inter-ExtraLight.ttf differ diff --git a/src/assets/fonts/Inter-Light.ttf b/src/assets/fonts/Inter-Light.ttf new file mode 100644 index 0000000..71188f5 Binary files /dev/null and b/src/assets/fonts/Inter-Light.ttf differ diff --git a/src/assets/fonts/Inter-Medium.ttf b/src/assets/fonts/Inter-Medium.ttf new file mode 100644 index 0000000..a01f377 Binary files /dev/null and b/src/assets/fonts/Inter-Medium.ttf differ diff --git a/src/assets/fonts/Inter-Regular.ttf b/src/assets/fonts/Inter-Regular.ttf new file mode 100644 index 0000000..5e4851f Binary files /dev/null and b/src/assets/fonts/Inter-Regular.ttf differ diff --git a/src/assets/fonts/Inter-SemiBold.ttf b/src/assets/fonts/Inter-SemiBold.ttf new file mode 100644 index 0000000..ecc7041 Binary files /dev/null and b/src/assets/fonts/Inter-SemiBold.ttf differ diff --git a/src/assets/fonts/Inter-Thin.ttf b/src/assets/fonts/Inter-Thin.ttf new file mode 100644 index 0000000..fe77243 Binary files /dev/null and b/src/assets/fonts/Inter-Thin.ttf differ diff --git a/src/assets/fonts/Inter-VariableFont_slnt,wght.ttf b/src/assets/fonts/Inter-VariableFont_slnt,wght.ttf new file mode 100644 index 0000000..e724708 Binary files /dev/null and b/src/assets/fonts/Inter-VariableFont_slnt,wght.ttf differ diff --git a/src/components/Nav.astro b/src/components/Nav.astro new file mode 100644 index 0000000..536ab81 --- /dev/null +++ b/src/components/Nav.astro @@ -0,0 +1,84 @@ +--- + +--- + + + + + diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 856ac7a..810cd78 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -5,6 +5,11 @@ import MetaTags from '@layouts/MetaTags.astro'; // import Footer from '@components/scafold/Footer.astro'; // import config from '../site-config'; +import '@styles/typography.scss'; +import '@styles/global.scss'; +import '@styles/colors.scss'; +import '@styles/media-queries.scss'; + interface Props { title?: string; description?: string; @@ -37,7 +42,7 @@ interface Props { diff --git a/src/pages/index.astro b/src/pages/index.astro index ca029d4..9a6beb4 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,19 +1,72 @@ --- +import BaseLayout from '@layouts/Base.astro'; +import Nav from '@components/Nav.astro'; const isBossServer = import.meta.env.BOSS_SERVER === true; +console.log('IS BOSS?', isBossServer) + +const searchUrl = new URLSearchParams(new URL(Astro.request.url).search).get('url'); + +if (!isBossServer && searchUrl) { + Astro.redirect(`/check/${encodeURIComponent(searchUrl)}`); +} --- - - - Results - - {!isBossServer && ( - - - )} - - -

hi

- - + + + {!isBossServer && ()} + +
+
+ + + diff --git a/src/styles/colors.scss b/src/styles/colors.scss new file mode 100644 index 0000000..3ce4583 --- /dev/null +++ b/src/styles/colors.scss @@ -0,0 +1,33 @@ +:root { + --primary: #9fef00; + --primary-lighter: #cff97a; + --text-color: #ffffff; + --text-color-secondary: #a4b1cd; + --background: #141d2b; + --background-darker: #111927; + --background-lighter: #1a2332; + --bg-shadow-color: #0f1620; + --fg-shadow-color: #456602; + --primary-transparent: #9fef0030; + + // Action Colors + --info: #04e4f4; + --success: #20e253; + --warning: #f6f000; + --error: #fca016; + --danger: #f80363; + --neutral: #272f4d; +} + +html[data-theme="light"] { + --primary: #4a7700; + --primary-lighter: #a4cf50; + --text-color: #333333; + --text-color-secondary: #57667e; + --background: #ffffff; + --background-darker: #f0f0f0; + --background-lighter: #fafafa; + --bg-shadow-color: #e0e0e0; + --fg-shadow-color: #678800; + --primary-transparent: #4a770033; +} diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 0000000..59979b6 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,123 @@ +/* Global Stylesheet */ + +@import './media-queries.scss'; + +/* CSS Reset - Normalize dimensions and spacing across browsers */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +/* HTML and body basic setup */ +html { + font-size: 16px; // Default text size; consider accessibility and user preferences + scroll-behavior: smooth; // Smooth scrolling on click to hash links +} + +body { + font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; + line-height: 1; + color: var(--text-color); + background: var(--background); + overflow-x: hidden; + font-weight: 400; +} + +/* Links */ +a { + color: inherit; + text-decoration: none; + &:hover, + &:focus { + text-decoration: underline; + } +} + +/* Images */ +img { + max-width: 100%; + height: auto; +} + +/* Typography */ +h1, h2, h3, h4, h5, h6 { + color: inherit; + margin-top: 0; + margin-bottom: 0.5em; + font-weight: normal; +} + +p { + margin-top: 0; + margin-bottom: 1em; +} + +ul, ol { + margin-top: 0; + margin-bottom: 1em; + padding-left: 20px; +} + +/* Forms */ +input, button, textarea, select { + font: inherit; + &:focus { + outline: 1px solid var(--primary); + } +} + +/* Utility Classes */ +.text-center { + text-align: center; +} +.hidden { + display: none; +} + +/* Responsive Design - Example of a simple breakpoint */ +@media (max-width: 768px) { + html { + font-size: 14px; // Smaller font size on smaller screens + } +} + + + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0.5em; + font-weight: 600; + color: var(--text-color); +} + +h1 { font-size: 2.25rem; } +h2 { font-size: 1.8rem; } +h3 { font-size: 1.5rem; } +h4 { font-size: 1.2rem; } +h5 { font-size: 1rem; } +h6 { font-size: 0.85rem; } + +p { + margin-top: 0; + margin-bottom: 1em; +} + +a { + color: var(--primary); + text-decoration: none; + &:hover { + text-decoration: underline; + } +} + +// Responsive font sizes +@media (max-width: 768px) { + h1 { font-size: 2rem; } + h2 { font-size: 1.6rem; } + h3 { font-size: 1.4rem; } + // Adjust more as necessary +} + diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss new file mode 100644 index 0000000..c928421 --- /dev/null +++ b/src/styles/media-queries.scss @@ -0,0 +1,79 @@ +// Breakpoints +$breakpoint-xs: 599px; // Max width for mobile only +$breakpoint-sm: 600px; // Min width for tablet portrait +$breakpoint-md: 768px; // Min width for tablet landscape +$breakpoint-lg: 1024px; // Min width for desktop +$breakpoint-xl: 1440px; // Min width for large desktop + +// Mixins for specific breakpoints +@mixin for-mobile-only { + @media (max-width: $breakpoint-xs) { + @content; + } +} + +@mixin mobile-up { + @media (min-width: calc($breakpoint-xs + 1px)) { + @content; + } +} + +@mixin for-tablet-portrait { + @media (min-width: $breakpoint-sm) and (max-width: calc($breakpoint-md - 1px)) { + @content; + } +} + +@mixin tablet-portrait-down { + @media (max-width: calc($breakpoint-md - 1px)) { + @content; + } +} + +@mixin tablet-up { + @media (min-width: $breakpoint-sm) { + @content; + } +} + +@mixin for-tablet-landscape { + @media (min-width: $breakpoint-md) and (max-width: calc($breakpoint-lg - 1px)) { + @content; + } +} + +@mixin tablet-landscape-down { + @media (max-width: calc($breakpoint-lg - 1px)) { + @content; + } +} + +@mixin for-desktop { + @media (min-width: $breakpoint-lg) and (max-width: calc($breakpoint-xl - 1px)) { + @content; + } +} + +@mixin desktop-down { + @media (max-width: calc($breakpoint-xl - 1px)) { + @content; + } +} + +@mixin for-large-desktop { + @media (min-width: $breakpoint-xl) { + @content; + } +} + +@mixin large-desktop-up { + @media (min-width: $breakpoint-xl) { + @content; + } +} + +@mixin mobile-down { + @media (max-width: $breakpoint-xs) { + @content; + } +} diff --git a/src/styles/typography.scss b/src/styles/typography.scss new file mode 100644 index 0000000..e65f93f --- /dev/null +++ b/src/styles/typography.scss @@ -0,0 +1,62 @@ +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-Thin.ttf') format('truetype'); + font-weight: 100; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-ExtraLight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-Regular.ttf') format('truetype'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype'); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-Bold.ttf') format('truetype'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-ExtraBold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; +} + +@font-face { + font-family: 'Inter'; + src: url('../assets/fonts/Inter-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} diff --git a/src/web-check-live/App.tsx b/src/web-check-live/App.tsx index a4d58f2..c6e8c72 100644 --- a/src/web-check-live/App.tsx +++ b/src/web-check-live/App.tsx @@ -1,24 +1,34 @@ -import { Routes, Route, Outlet } from "react-router-dom"; +import { Routes, Route, Outlet } from 'react-router-dom'; import Home from 'web-check-live/views/Home.tsx'; import Results from 'web-check-live/views/Results.tsx'; import About from 'web-check-live/views/About.tsx'; import NotFound from 'web-check-live/views/NotFound.tsx'; +import ErrorBoundary from 'web-check-live/components/boundaries/PageError.tsx'; +import GlobalStyles from './styles/globals.tsx'; + export default function App() { return ( - - }> - } /> - } /> - } /> - } /> - } /> - - + + + }> + } /> + } /> + } /> + } /> + } /> + + + ); } function Layout() { - return (); + return ( + <> + + + + ); } diff --git a/src/web-check-live/main.tsx b/src/web-check-live/main.tsx index 520a1d3..29281b5 100644 --- a/src/web-check-live/main.tsx +++ b/src/web-check-live/main.tsx @@ -1,7 +1,6 @@ import { BrowserRouter } from "react-router-dom"; import { StaticRouter } from "react-router-dom/server"; import App from "./App.tsx"; -// import "./App.css"; export default ({ pathname }: { pathname: string }) => ( import.meta.env.SSR diff --git a/src/web-check-live/styles/globals.tsx b/src/web-check-live/styles/globals.tsx index 579022c..4eea6cd 100644 --- a/src/web-check-live/styles/globals.tsx +++ b/src/web-check-live/styles/globals.tsx @@ -9,7 +9,10 @@ const GlobalStyles = () => ( font-weight: 400; src: url('/fonts/PTMono.ttf') format('ttf'); } - body { font-family: PTMono; } + body, div, a, p, span, ul, li, small, h1, h2, h3, h4, button, section { + font-family: PTMono; + color: #fff; + } `} /> );