Astro app
This commit is contained in:
Alicia Sykes committed
1 parent
34ca09fc20
commit
b090dcadb1
23 files changed
+503
-38
No files matched your search
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,84 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<nav class="navbar">
|
||||
<div class="nav-left">
|
||||
<a href="/" class="logo-link" aria-label="Home">
|
||||
<img width="64" src="/web-check.png" alt="Site Logo" />
|
||||
<span class="site-title">Web Check</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="/check" class="nav-link">Try Live</a>
|
||||
<a href="/check/about" class="nav-link">About</a>
|
||||
<a href="/account" class="nav-link">Join</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
flex-wrap: wrap;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color);
|
||||
width: 80vw;
|
||||
margin: 0 auto;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid var(--primary-transparent);
|
||||
|
||||
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
.nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
|
||||
img {
|
||||
width: 2rem;
|
||||
max-width: 64px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-weight: bold;
|
||||
color: var(--primary);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
margin-left: 1rem;
|
||||
padding: 0.5rem;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--primary-light);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: var(--primary-dark);
|
||||
box-shadow: 0 0 0 3px var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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 {
|
||||
|
||||
|
||||
<style is:global>
|
||||
|
||||
@import '@styles/global.scss';
|
||||
html {
|
||||
::selection {
|
||||
background: var(--accent);
|
||||
|
||||
@@ -14,7 +14,8 @@ interface Props {
|
||||
// Default meta tag values
|
||||
const siteInfo = {
|
||||
title: 'Web Check',
|
||||
description: '',
|
||||
titleLong: 'Web Check - X-Ray Vision for any Website',
|
||||
description: 'Web Check is the all-in-one OSINT and security tool, for revealing the inner workings of any website',
|
||||
keywords: '',
|
||||
author: 'Alicia Sykes',
|
||||
twitter: '@Lissy_Sykes',
|
||||
@@ -36,7 +37,7 @@ const {
|
||||
} = Astro.props;
|
||||
|
||||
// Set non-customizable values for meta tags, from the siteInfo
|
||||
const { site, author, twitter, analytics } = siteInfo;
|
||||
const { site, author, twitter, analytics, titleLong } = siteInfo;
|
||||
|
||||
// Given a map of breadcrumbs, return the JSON-LD for the BreadcrumbList schema
|
||||
const makeBreadcrumbs = () => {
|
||||
@@ -68,20 +69,21 @@ const makeBreadcrumbs = () => {
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<!-- Icons and colors -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" sizes="64x64" href="/favicon.png">
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
|
||||
<link rel="icon" type="image/png" sizes="512x512" href="/web-check.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
|
||||
<!-- Social media meta tags (Open Graphh + Twitter) -->
|
||||
<meta property="og:site_name" content={title}>
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content={site}>
|
||||
<meta property="og:title" content={title}>
|
||||
<meta property="og:title" content={titleLong}>
|
||||
<meta property="og:description" content={description}>
|
||||
<meta property="og:image" content={`${site}/banner.png`}>
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:url" content={site}>
|
||||
<meta name="twitter:title" content={title}>
|
||||
<meta name="twitter:title" content={titleLong}>
|
||||
<meta name="twitter:description" content={description}>
|
||||
<meta name="twitter:image" content=`${site}/banner.png`}>
|
||||
<link rel="twitter:image" sizes="180x180" href={`${site}/apple-touch-icon.png`}>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
import BaseLayout from '@layouts/Base.astro';
|
||||
import Main from '../../web-check-live/main.tsx';
|
||||
import '../../web-check-live/styles/index.css';
|
||||
|
||||
@@ -14,21 +15,28 @@ if (searchUrl) {
|
||||
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Results</title>
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<body>
|
||||
<BaseLayout>
|
||||
<Main {pathname} client:load />
|
||||
</body>
|
||||
</html>
|
||||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
// Fallback, if Astro hasn't initialized the RC comp yet, use JS to redirect
|
||||
// Fallback, if Astro hasn't initialized the RC comp yet, then check the url
|
||||
// And if form has been submitted with ?url=, redirect to the results page
|
||||
const searchParams = new URL(window.location.href).searchParams;
|
||||
if (searchParams.has('url')) {
|
||||
window.location.href = `/check/${searchParams.get('url')}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
// And add a manual no-react form submit handler
|
||||
const form = document.querySelector<HTMLFormElement>('form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(event: Event) {
|
||||
event.preventDefault();
|
||||
const input = (this as HTMLFormElement).querySelector<HTMLInputElement>('input[name="url"]');
|
||||
if (input && input.value) {
|
||||
window.location.href = `/check/${encodeURIComponent(input.value)}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -2,7 +2,10 @@
|
||||
import BaseLayout from '@layouts/Base.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="API Docs | Web Check">
|
||||
<BaseLayout
|
||||
title="API Docs | Web Check"
|
||||
description="API documentation for the Web Check backend REST endpoints"
|
||||
>
|
||||
<Fragment slot="head">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui.css">
|
||||
<link rel="stylesheet" href="https://rawcdn.githack.com/Amoenus/SwaggerDark/2064ccd45b571865a64c731fa6bfddfbf2a01fe1/SwaggerDark.css">
|
||||
@@ -23,20 +26,21 @@ import BaseLayout from '@layouts/Base.astro';
|
||||
SwaggerUIBundle.presets.apis,
|
||||
SwaggerUIBundle.SwaggerUIStandalonePreset
|
||||
],
|
||||
plugins: [
|
||||
SwaggerUIBundle.plugins.DownloadUrl
|
||||
]
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@styles/global.scss';
|
||||
main {
|
||||
padding: 0 2rem;
|
||||
margin: 0 auto;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
max-width: 1600px;
|
||||
@include mobile-down {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
+66
-13
@@ -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)}`);
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Results</title>
|
||||
<meta charset="UTF-8">
|
||||
{!isBossServer && (
|
||||
<meta http-equiv="refresh" content="0; url=/check" />
|
||||
<script type="text/javascript">window.location.href = '/check';</script>
|
||||
)}
|
||||
</head>
|
||||
<body>
|
||||
<h1>hi</h1>
|
||||
</body>
|
||||
</html>
|
||||
<BaseLayout>
|
||||
<Fragment slot="head">
|
||||
{!isBossServer && (<meta http-equiv="refresh" content="0; url=/check" />)}
|
||||
</Fragment>
|
||||
<main class="fancy-background">
|
||||
<Nav />
|
||||
<!-- <div class="left"></div>
|
||||
<div class="right"></div>
|
||||
<h1>Web Check</h1>
|
||||
<h2>X-Ray vision for your website's security</h2>
|
||||
<img width="600" class="screenshot" src="https://i.ibb.co/r0jXN6s/web-check.png" alt="Web Check Screenshot" /> -->
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
height: 100vh;
|
||||
padding: 1rem 0;
|
||||
background: rgb(20,29,43);
|
||||
background: radial-gradient(circle,#141d2b 0%,#0d1521 75%,#141d2b 100%);
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
transform:
|
||||
rotate3d(.5,-.866,0,15deg)
|
||||
rotate(1deg);
|
||||
box-shadow:
|
||||
2em 4em 6em -2em rgba(0,0,0,.5),
|
||||
1em 2em 3.5em -2.5em rgba(0,0,0,.5);
|
||||
transition:
|
||||
transform .4s ease,
|
||||
box-shadow .4s ease;
|
||||
border-radius: .5em;
|
||||
|
||||
&:hover {
|
||||
transform:
|
||||
rotate3d(0,0,0,0deg)
|
||||
rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fancy-background {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: repeat;
|
||||
background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask id=%22b%22 x=%220%22 y=%220%22 width=%222000%22 height=%221000%22%3E%3Cpath fill=%22url(%23a)%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3C%2Fmask%3E%3Cpath fill=%22%23141d2b%22 d=%22M0 0h2000v1000H0z%22%2F%3E%3Cg style=%22transform-origin:center center%22 stroke=%22%23243044%22 stroke-width=%222%22 mask=%22url(%23b)%22%3E%3Cpath fill=%22none%22 d=%22M0 0h77v77H0zM77 0h77v77H77zM154 0h77v77h-77zM231 0h77v77h-77zM308 0h77v77h-77zM385 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304412%22 d=%22M462 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M539 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ef%22 d=%22M616 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M693 0h77v77h-77zM770 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044df%22 d=%22M847 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M924 0h77v77h-77zM1001 0h77v77h-77zM1078 0h77v77h-77zM1155 0h77v77h-77zM1232 0h77v77h-77zM1309 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304484%22 d=%22M1386 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1463 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044db%22 d=%22M1540 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1617 0h77v77h-77zM1694 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044c6%22 d=%22M1771 0h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430442d%22 d=%22M1848 0h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1925 0h77v77h-77zM0 77h77v77H0zM77 77h77v77H77zM154 77h77v77h-77zM231 77h77v77h-77zM308 77h77v77h-77zM385 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304406%22 d=%22M462 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M539 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304430%22 d=%22M616 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M693 77h77v77h-77zM770 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ed%22 d=%22M847 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M924 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304485%22 d=%22M1001 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304450%22 d=%22M1078 77h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d7%22 d=%22M1155 77h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1232 77h77v77h-77zM1309 77h77v77h-77zM1386 77h77v77h-77zM1463 77h77v77h-77zM1540 77h77v77h-77zM1617 77h77v77h-77zM1694 77h77v77h-77zM1771 77h77v77h-77zM1848 77h77v77h-77zM1925 77h77v77h-77zM0 154h77v77H0zM77 154h77v77H77zM154 154h77v77h-77zM231 154h77v77h-77zM308 154h77v77h-77zM385 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304448%22 d=%22M462 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d4%22 d=%22M539 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M616 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044e1%22 d=%22M693 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M770 154h77v77h-77zM847 154h77v77h-77zM924 154h77v77h-77zM1001 154h77v77h-77zM1078 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304479%22 d=%22M1155 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1232 154h77v77h-77zM1309 154h77v77h-77zM1386 154h77v77h-77zM1463 154h77v77h-77zM1540 154h77v77h-77zM1617 154h77v77h-77zM1694 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304461%22 d=%22M1771 154h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044a5%22 d=%22M1848 154h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1925 154h77v77h-77zM0 231h77v77H0zM77 231h77v77H77zM154 231h77v77h-77zM231 231h77v77h-77zM308 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044be%22 d=%22M385 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044f0%22 d=%22M462 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304464%22 d=%22M539 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M616 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304476%22 d=%22M693 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M770 231h77v77h-77zM847 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d9%22 d=%22M924 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430448f%22 d=%22M1001 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1078 231h77v77h-77zM1155 231h77v77h-77zM1232 231h77v77h-77zM1309 231h77v77h-77zM1386 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430446a%22 d=%22M1463 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M1540 231h77v77h-77zM1617 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304420%22 d=%22M1694 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%232430447a%22 d=%22M1771 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044cb%22 d=%22M1848 231h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044ad%22 d=%22M1925 231h77v77h-77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M0 308h77v77H0z%22%2F%3E%3Cpath fill=%22%2324304469%22 d=%22M77 308h77v77H77z%22%2F%3E%3Cpath fill=%22none%22 d=%22M154 308h77v77h-77zM231 308h77v77h-77zM308 308h77v77h-77zM385 308h77v77h-77zM462 308h77v77h-77zM539 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044d0%22 d=%22M616 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%2324304437%22 d=%22M693 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044e3%22 d=%22M770 308h77v77h-77z%22%2F%3E%3Cpath fill=%22%23243044cb%22 d=%22M847 308h77v77h-77z%22%2F%3E%3Cpath fill=%22none%Line truncated
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,12 +1,16 @@
|
||||
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 (
|
||||
<ErrorBoundary>
|
||||
<Routes>
|
||||
<Route path="/check" element={<Layout />}>
|
||||
<Route index element={<Home />} />
|
||||
@@ -16,9 +20,15 @@ export default function App() {
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
function Layout() {
|
||||
return (<Outlet />);
|
||||
return (
|
||||
<>
|
||||
<GlobalStyles />
|
||||
<Outlet />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user