mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Adding postcss and fixing issues with that.
This commit is contained in:
parent
9dbaa927e3
commit
c34f4f9409
22 changed files with 1266 additions and 917 deletions
10
environmentVariables.js
Normal file
10
environmentVariables.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
module.exports = {
|
||||
environmentVariables: {
|
||||
'--xsmall-viewport': '480px',
|
||||
'--small-viewport': '640px',
|
||||
'--medium-viewport': '768px',
|
||||
'--large-viewport': '1024px',
|
||||
'--xlarge-viewport': '1280px',
|
||||
'--xxlarge-viewport': '1536px',
|
||||
}
|
||||
}
|
||||
12
package.json
12
package.json
|
|
@ -22,10 +22,19 @@
|
|||
"@types/node": "^18.11.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||
"@typescript-eslint/parser": "^5.42.1",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.27.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"just-debounce-it": "^3.1.1",
|
||||
"postcss": "^8.4.19",
|
||||
"postcss-color-functional-notation": "^4.2.4",
|
||||
"postcss-custom-media": "^9.0.1",
|
||||
"postcss-env-function": "^4.0.6",
|
||||
"postcss-import": "^15.0.0",
|
||||
"postcss-load-config": "^4.0.1",
|
||||
"postcss-media-minmax": "^5.0.0",
|
||||
"postcss-nested": "^6.0.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-svelte": "^2.8.0",
|
||||
"sass": "^1.56.1",
|
||||
|
|
@ -46,8 +55,7 @@
|
|||
"cookie": "^0.5.0",
|
||||
"feather-icons": "^4.29.0",
|
||||
"svelte-lazy-loader": "^1.0.0",
|
||||
"svelte-media-query-store": "^1.0.0",
|
||||
"zod": "^3.19.1",
|
||||
"zod-to-json-schema": "^3.18.1"
|
||||
"zod-to-json-schema": "^3.19.3"
|
||||
}
|
||||
}
|
||||
814
pnpm-lock.yaml
814
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
19
postcss.config.cjs
Normal file
19
postcss.config.cjs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
const autoprefixer = require('autoprefixer');
|
||||
const postcssMediaMinmax = require('postcss-media-minmax');
|
||||
const customMedia = require('postcss-custom-media');
|
||||
const atImport = require('postcss-import');
|
||||
const postcssNested = require('postcss-nested');
|
||||
const postcssEnvFunction = require('postcss-env-function');
|
||||
|
||||
const config = {
|
||||
plugins: [
|
||||
autoprefixer(),
|
||||
postcssMediaMinmax,
|
||||
customMedia,
|
||||
atImport(),
|
||||
postcssNested,
|
||||
postcssEnvFunction(),
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
2
src/app.d.ts
vendored
2
src/app.d.ts
vendored
|
|
@ -8,7 +8,7 @@ declare namespace App {
|
|||
|
||||
// interface PageData {}
|
||||
|
||||
// interface PageError {}
|
||||
// interface Error {}
|
||||
|
||||
// interface Platform {}
|
||||
}
|
||||
|
|
|
|||
111
src/app.postcss
111
src/app.postcss
|
|
@ -1,111 +0,0 @@
|
|||
/* Write your global styles here, in PostCSS syntax */
|
||||
|
||||
@import '@fontsource/fira-mono';
|
||||
|
||||
:root {
|
||||
font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
--font-mono: 'Fira Mono', monospace;
|
||||
--pure-white: #ffffff;
|
||||
--primary-color: #b9c6d2;
|
||||
--secondary-color: #d0dde9;
|
||||
--tertiary-color: #edf0f8;
|
||||
--accent-color: #ff3e00;
|
||||
--heading-color: rgba(0, 0, 0, 0.7);
|
||||
--text-color: #444444;
|
||||
--background-without-opacity: rgba(255, 255, 255, 0.7);
|
||||
--column-width: 42rem;
|
||||
--column-margin-top: 4rem;
|
||||
--z-highest: 100;
|
||||
--cardBorderRadius: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background-color: var(--primary-color);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--secondary-color) 10.45%,
|
||||
var(--tertiary-color) 41.35%
|
||||
);
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10vw;
|
||||
z-index: -1;
|
||||
background: radial-gradient(
|
||||
50% 50% at 50% 50%,
|
||||
var(--pure-white) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
#svelte {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
font-weight: 400;
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 16px;
|
||||
font-family: var(--font-mono);
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
border-radius: 3px;
|
||||
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
|
||||
padding: 0.5em;
|
||||
overflow-x: auto;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
DialogTitle
|
||||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { browser } from '$app/environment';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import { wishlistStore } from '$root/lib/stores/wishlistStore';
|
||||
import { browser } from '$app/environment';
|
||||
import DefaultDialog from './DefaultDialog.svelte';
|
||||
|
||||
function clearWishlist() {
|
||||
if (browser) {
|
||||
|
|
@ -18,35 +12,23 @@
|
|||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
function stopLoading() {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}
|
||||
static
|
||||
>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Clear wishlist</DialogTitle>
|
||||
<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
|
||||
<DefaultDialog
|
||||
title="Clear wishlist"
|
||||
description="Are you sure you want to clear your wishlist?"
|
||||
danger
|
||||
primaryButtonText="Clear"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:primary={clearWishlist}
|
||||
on:click:secondary={stopLoading}
|
||||
on:close={stopLoading}
|
||||
/>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<button class="remove" on:click={clearWishlist}>Clear</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}>Cancel</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="postcss">
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { type SvelteComponent, createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
|
|
@ -8,23 +9,67 @@
|
|||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
|
||||
export let title: string;
|
||||
export let description: string;
|
||||
export let danger = false;
|
||||
export let alert = false;
|
||||
export let passive = false;
|
||||
export let primaryButtonText = '';
|
||||
export let primaryButtonDisabled = false;
|
||||
export let primaryButtonIcon: typeof SvelteComponent = undefined;
|
||||
export let primaryButtonIconDescription = '';
|
||||
export let secondaryButtonText = '';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
|
||||
dispatch('close');
|
||||
}}
|
||||
static
|
||||
>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Default Dialog</DialogTitle>
|
||||
<DialogDescription>Dialog Description</DialogDescription>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
{#if description}
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
{/if}
|
||||
|
||||
<div class="dialog-footer" />
|
||||
<div class="dialog-footer">
|
||||
<button
|
||||
disabled={primaryButtonDisabled}
|
||||
class={danger ? 'danger' : 'primary'}
|
||||
on:click={() => {
|
||||
dispatch('click:secondary');
|
||||
}}
|
||||
>
|
||||
{#if primaryButtonIcon}
|
||||
<svelte:component
|
||||
this={primaryButtonIcon}
|
||||
aria-hidden="true"
|
||||
class="button-icon"
|
||||
aria-label={primaryButtonIconDescription}
|
||||
/>
|
||||
{/if}
|
||||
<span>
|
||||
{primaryButtonText}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={() => {
|
||||
dispatch('submit');
|
||||
dispatch('click:primary');
|
||||
}}
|
||||
>
|
||||
{secondaryButtonText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
|
@ -34,7 +79,7 @@
|
|||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: fixed;
|
||||
top: 35%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
|
|
@ -62,6 +107,14 @@
|
|||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.danger {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
gameStore.removeAll();
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
return async ({ result }) => {
|
||||
console.log('result', result);
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
// `result` is an `ActionResult` object
|
||||
if (result.type === 'success') {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
let disclosureOpen = false;
|
||||
|
||||
$: skip = (page - 1) * pageSize;
|
||||
$: console.log('submit button', submitButton);
|
||||
$: showPagination = $gameStore?.length > 1;
|
||||
|
||||
if ($xl) {
|
||||
|
|
@ -223,7 +222,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="postcss">
|
||||
.search {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
|
@ -267,15 +266,15 @@
|
|||
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@media screen and (800px < width <= 1200px) {
|
||||
--listColumns: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media screen and (650px < width <= 800px) {
|
||||
--listColumns: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
@media screen and (width <= 650px) {
|
||||
--listColumns: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
src/lib/stores/breakpointMatcher.ts
Normal file
32
src/lib/stores/breakpointMatcher.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { readable } from 'svelte/store';
|
||||
export const breakpointMatcher = (mediaQueries: Record<string, MediaQueryList | string>) => {
|
||||
if (typeof window === 'undefined') return readable(null); //return null if window doesn't exist
|
||||
|
||||
return readable<string | null>('', (set) => {
|
||||
// extract the breakpoints
|
||||
const breakpoints = Object.keys(mediaQueries);
|
||||
|
||||
// convert sizes to <string, MediaQueryList>
|
||||
// this is converted here because of window undefined issue
|
||||
Object.keys(mediaQueries).forEach(
|
||||
(mql) => (mediaQueries[mql] = window.matchMedia(mediaQueries[mql] as string))
|
||||
);
|
||||
|
||||
// function that set current breakpoint
|
||||
function setCurrentBreakPoint() {
|
||||
for (const size of breakpoints) {
|
||||
// i used forEach but break doesn't work
|
||||
const mql = mediaQueries[size] as MediaQueryList;
|
||||
if (mql?.matches) {
|
||||
set(size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentBreakPoint(); //set the current breakpoint for the first time
|
||||
window.addEventListener('resize', () => {
|
||||
// TODO: figure out a way to change the resize event
|
||||
setCurrentBreakPoint(); //set the current breakpoint when the size change
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
@ -1,4 +1,32 @@
|
|||
import { mediaQueryStore } from 'svelte-media-query-store';
|
||||
import { readable } from 'svelte/store';
|
||||
|
||||
export function mediaQueryStore(query: string) {
|
||||
if (typeof window === 'undefined') {
|
||||
// check if it's rendered in the dom so window is not undefined
|
||||
return readable('');
|
||||
}
|
||||
const mediaQueryList = window.matchMedia(query);
|
||||
|
||||
const mediaStore = readable(mediaQueryList.matches, (set) => {
|
||||
const handleChange = () => set(mediaQueryList.matches);
|
||||
|
||||
try {
|
||||
mediaQueryList.addEventListener('change', handleChange);
|
||||
} catch (_) {
|
||||
mediaQueryList.addListener(handleChange);
|
||||
}
|
||||
|
||||
return () => {
|
||||
try {
|
||||
mediaQueryList.removeEventListener('change', handleChange);
|
||||
} catch (_) {
|
||||
mediaQueryList.removeListener(handleChange);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return mediaStore;
|
||||
}
|
||||
|
||||
export const xs = mediaQueryStore('(min-width: 480px');
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,112 @@ export const BoardGameSearch = z.object({
|
|||
maxPlayers: z.number()
|
||||
});
|
||||
|
||||
export const Board
|
||||
export const saved_game_schema = z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
thumb_url: z.string(),
|
||||
players: z.string(),
|
||||
playtime: z.string()
|
||||
});
|
||||
|
||||
export const search_schema = z.object({
|
||||
name: z.string().trim().optional(),
|
||||
minAge: z.number().min(1).max(120).optional(),
|
||||
minPlayers: z.number().min(1).max(50).optional(),
|
||||
maxPlayers: z.number().min(1).max(50).optional(),
|
||||
exactMinAge: z.boolean().optional(),
|
||||
exactMinPlayers: z.boolean().optional(),
|
||||
exactMaxPlayers: z.boolean().optional(),
|
||||
})
|
||||
.superRefine(({ minPlayers, maxPlayers, minAge, exactMinAge, exactMinPlayers, exactMaxPlayers }, ctx) => {
|
||||
if (minPlayers && maxPlayers && minPlayers > maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['minPlayers'],
|
||||
});
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['maxPlayers'],
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMinAge && !minAge) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Age required when searching for exact min age',
|
||||
path: ['minAge'],
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMinPlayers && !minPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players required when searching for exact min players',
|
||||
path: ['minPlayers'],
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMaxPlayers && !maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Max Players required when searching for exact max players',
|
||||
path: ['maxPlayers'],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export const search_result_schema = z.object({
|
||||
client_id: z.string(),
|
||||
limit: z.number(),
|
||||
skip: z.number(),
|
||||
ids: z.string().array(),
|
||||
list_id: z.string(),
|
||||
kickstarter: z.boolean(),
|
||||
random: z.boolean(),
|
||||
name: z.string(),
|
||||
exact: z.boolean(),
|
||||
fuzzy_match: z.boolean(),
|
||||
designer: z.string(),
|
||||
publisher: z.string(),
|
||||
artist: z.string(),
|
||||
mechanics: z.string(),
|
||||
categories: z.string(),
|
||||
order_by: z.string(),
|
||||
ascending: z.boolean(),
|
||||
min_players: z.number(),
|
||||
max_players: z.number(),
|
||||
min_playtime: z.number(),
|
||||
max_playtime: z.number(),
|
||||
min_age: z.number(),
|
||||
year_published: z.number(),
|
||||
gt_min_players: z.number(),
|
||||
gt_max_players: z.number(),
|
||||
gt_min_playtime: z.number(),
|
||||
gt_max_playtime: z.number(),
|
||||
gt_min_age: z.number(),
|
||||
gt_year_published:z.number(),
|
||||
gt_price: z.bigint(),
|
||||
gt_msrp: z.bigint(),
|
||||
gt_discount: z.bigint(),
|
||||
gt_reddit_count: z.number(),
|
||||
gt_reddit_week_count: z.number(),
|
||||
gt_reddit_day_count: z.number(),
|
||||
lt_min_players: z.number(),
|
||||
lt_max_players: z.number(),
|
||||
lt_min_playtime: z.number(),
|
||||
lt_max_playtime: z.number(),
|
||||
lt_min_age: z.number(),
|
||||
lt_year_published: z.number(),
|
||||
lt_price: z.bigint(),
|
||||
lt_msrp: z.bigint(),
|
||||
lt_discount: z.bigint(),
|
||||
lt_reddit_count: z.number(),
|
||||
lt_reddit_week_count: z.number(),
|
||||
lt_reddit_day_count: z.number(),
|
||||
fields: z.string(),
|
||||
});
|
||||
|
||||
export const game_schema = z.object({
|
||||
id: z.string(),
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { navigating } from '$app/stores';
|
||||
import debounce from 'just-debounce-it';
|
||||
import { Toy } from '@leveluptuts/svelte-toy';
|
||||
// import '../app.postcss';
|
||||
import Analytics from '$lib/components/analytics.svelte';
|
||||
import Header from '$lib/components/header/Header.svelte';
|
||||
import Loading from '$lib/components/loading.svelte';
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { toast } from '$lib/components/toast/toast';
|
||||
import Toast from '$lib/components/toast/Toast.svelte';
|
||||
import '$root/styles/styles.scss';
|
||||
import '$root/styles/styles.postcss';
|
||||
|
||||
$: {
|
||||
if ($navigating) {
|
||||
|
|
@ -103,7 +104,7 @@
|
|||
<Toast />
|
||||
</Transition>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="postcss">
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
|
|||
import { error, invalid, type ServerLoadEvent } from '@sveltejs/kit';
|
||||
import type { GameType, SearchQuery } from '$root/lib/types';
|
||||
import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
|
||||
import { search_schema } from '$root/lib/zodValidation';
|
||||
import { ZodError } from 'zod';
|
||||
|
||||
export const load: PageServerLoad = () => {
|
||||
return {
|
||||
|
|
@ -12,15 +14,16 @@ export const load: PageServerLoad = () => {
|
|||
}
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request, locals }: RequestEvent): Promise<any> => {
|
||||
default: async ({ request }): Promise<any> => {
|
||||
console.log("In search action specific")
|
||||
// Do things in here
|
||||
const form = await request.formData();
|
||||
console.log('passed in limit:', form.get('limit'))
|
||||
console.log('passed in skip:', form.get('skip'))
|
||||
const limit = form.get('limit') || 10;
|
||||
const skip = form.get('skip') || 0;
|
||||
console.log('action form', form);
|
||||
const formData = await request.formData();
|
||||
const data = Object.fromEntries(formData);
|
||||
console.log('passed in limit:', data?.limit)
|
||||
console.log('passed in skip:', data?.skip)
|
||||
const limit = data?.limit || 10;
|
||||
const skip = data?.skip || 0;
|
||||
console.log('action form', data);
|
||||
const queryParams: SearchQuery = {
|
||||
order_by: 'rank',
|
||||
ascending: false,
|
||||
|
|
@ -33,52 +36,60 @@ export const actions: Actions = {
|
|||
|
||||
// TODO: Check name length and not search if not advanced search
|
||||
|
||||
const random = form.get('random') && form.get('random') === 'on';
|
||||
const random = data?.random === 'on';
|
||||
|
||||
if (random) {
|
||||
queryParams.random = random;
|
||||
} else {
|
||||
const minAge = form.get('minAge');
|
||||
const minPlayers = form.get('minPlayers');
|
||||
console.log('minPlayers', minPlayers);
|
||||
const maxPlayers = form.get('maxPlayers');
|
||||
console.log('maxPlayers', maxPlayers);
|
||||
const exactMinAge = form.get('exactMinAge') || false;
|
||||
const exactMinPlayers = form.get('exactMinPlayers') || false;
|
||||
const exactMaxPlayers = form.get('exactMaxPlayers') || false;
|
||||
// const minAge = form.get('minAge');
|
||||
// const minPlayers = form.get('minPlayers');
|
||||
// const maxPlayers = form.get('maxPlayers');
|
||||
// const exactMinAge = form.get('exactMinAge') || false;
|
||||
// const exactMinPlayers = form.get('exactMinPlayers') || false;
|
||||
// const exactMaxPlayers = form.get('exactMaxPlayers') || false;
|
||||
|
||||
if (minAge) {
|
||||
if (exactMinAge) {
|
||||
queryParams.min_age = +minAge;
|
||||
} else {
|
||||
queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (minPlayers && maxPlayers) {
|
||||
if (+minPlayers > +maxPlayers) {
|
||||
return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
|
||||
}
|
||||
// else if (+maxPlayers < +minPlayers) {
|
||||
// return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
|
||||
// }
|
||||
if (exactMinPlayers) {
|
||||
queryParams.min_players = +minPlayers;
|
||||
} else {
|
||||
queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
|
||||
try {
|
||||
const {
|
||||
name,
|
||||
minAge,
|
||||
minPlayers,
|
||||
maxPlayers,
|
||||
exactMinAge,
|
||||
exactMinPlayers,
|
||||
exactMaxPlayers
|
||||
} = search_schema.parse(formData);
|
||||
|
||||
if (minAge) {
|
||||
if (exactMinAge) {
|
||||
queryParams.min_age = minAge;
|
||||
} else {
|
||||
queryParams.gt_min_age = minAge === 1 ? 0 : minAge - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (exactMaxPlayers) {
|
||||
queryParams.max_players = +maxPlayers;
|
||||
} else {
|
||||
queryParams.lt_max_players = +maxPlayers + 1;
|
||||
if (minPlayers) {
|
||||
if (exactMinPlayers) {
|
||||
queryParams.min_players = minPlayers;
|
||||
} else {
|
||||
queryParams.gt_min_players = minPlayers === 1 ? 0 : minPlayers - 1;
|
||||
}
|
||||
}
|
||||
if (maxPlayers) {
|
||||
if (exactMaxPlayers) {
|
||||
queryParams.max_players = maxPlayers;
|
||||
} else {
|
||||
queryParams.lt_max_players = maxPlayers + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const name = form.has('name') ? form.get('name') : await request?.text();
|
||||
console.log('name', name);
|
||||
if (name) {
|
||||
queryParams.name = `${name}`;
|
||||
if (name) {
|
||||
queryParams.name = name;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof ZodError) {
|
||||
const { fieldErrors: errors } = error.flatten();
|
||||
return invalid(400, { formData, errors });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
400
src/styles/global.postcss
Normal file
400
src/styles/global.postcss
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
/* Setup */
|
||||
|
||||
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */
|
||||
|
||||
:root {
|
||||
--color-brand: hsl(204 88% 53%);
|
||||
--color-text-primary: hsl(0 0% 98%);
|
||||
--color-text-muted: hsl(210 34% 80%);
|
||||
--color-bg-primary: hsl(210 34% 13%);
|
||||
--color-bg-secondary: hsl(209, 35%, 15%);
|
||||
--color-btn-primary-active: var(--color-brand);
|
||||
--color-btn-primary-active-hover: hsl(204 88% 60%);
|
||||
--color-btn-primary-inactive: hsl(205 70% 33%);
|
||||
--color-btn-secondary: hsl(192 19% 95%);
|
||||
--color-border-primary: hsl(0, 0%, 34%);
|
||||
--color-link-hover: hsl(209 22% 19%);
|
||||
--color-placeholder: hsl(210 34% 80%);
|
||||
--clr-input-txt: hsl(177 100% 15%);
|
||||
|
||||
--red: #990000;
|
||||
--tomatoOrange: hsla(0, 75%, 60%, 1);
|
||||
--redBrown: #633539;
|
||||
--blue: #336699;
|
||||
--black: #1f273a;
|
||||
--white: #fff;
|
||||
--grey: #efefef;
|
||||
--greyBlue: hsla(222, 9%, 57%, 1);
|
||||
--lighterGreyBlue: #6a707e;
|
||||
--yellow: #ffc600;
|
||||
--light: #ffffff;
|
||||
--dark: #000000;
|
||||
--lightGrey: #c5c5c5;
|
||||
--lightGray: var(--lightGrey);
|
||||
--imGoingToFaint: #fbfbfb;
|
||||
--redBrown: #633539;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Define Colors intentions */
|
||||
--primary: var(--greyBlue);
|
||||
--secondary: var(--redBrown);
|
||||
--background: var(--white);
|
||||
--textColor: var(--lighterGreyBlue);
|
||||
--buttonTextColor: var(--white);
|
||||
--lineColor: var(--grey);
|
||||
--cardBg: var(--darkGrey);
|
||||
--headerBackground: var(--greyBlue);
|
||||
--footerBackground: var(--darkGrey);
|
||||
--linkHover: var(--white);
|
||||
--lightHairLine: #c5c5c5;
|
||||
|
||||
--radius-base: 1rem;
|
||||
|
||||
/* Type */
|
||||
--headingFont: 'Merriweather Sans', sans-serif;
|
||||
--bodyFont: 'Work Sans', sans-serif;
|
||||
--baseFontSize: 100%;
|
||||
--h1: 3.052rem;
|
||||
--h2: 2.441rem;
|
||||
--h3: 1.953rem;
|
||||
--h4: 1.563rem;
|
||||
--h5: 1.25rem;
|
||||
--h6: 1.8rem;
|
||||
--bodyTextSize: 1.8rem;
|
||||
--smallText: 1.44rem;
|
||||
--lineHeight: 2.25rem;
|
||||
--font-serif: 'Inter', sans-serif;
|
||||
--font-16: 1.6rem;
|
||||
--font-18: 1.8rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-80: 8rem;
|
||||
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.5rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-20: 2rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
|
||||
/* Elevation */
|
||||
--level-0: none;
|
||||
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Z Indexes */
|
||||
--zBase: 1;
|
||||
|
||||
/* Positioning */
|
||||
--containerPadding: 2.5%;
|
||||
--headerHeight: 8rem;
|
||||
--borderRadius: 4px;
|
||||
--borderRadiusLarge: 10px;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Font */
|
||||
--font-sans: 'Poppins', sans-serif;
|
||||
--font-serif: 'Arsenica', serif;
|
||||
--font-mono: Source Code Pro, monospace;
|
||||
--font-dyslexic: OpenDyslexic, sans-serif;
|
||||
--font-dyslexic-mono: OpenDyslexic Mono, monospace;
|
||||
|
||||
--font-16: 1.6rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-48: 4.8rem;
|
||||
--font-96: 9.6rem;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.8rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
--spacing-64: 6.4rem;
|
||||
--spacing-128: 12.8rem;
|
||||
|
||||
/* Scrollbar */
|
||||
--clr-scrollbar-thumb: hsl(173 10% 20%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0px 0px 4px 4px hsl(0 0% 0% / 4%);
|
||||
--shadow-md: 0px 0px 10px 4px hsl(0 0% 0% / 10%);
|
||||
--shadow-lg: 0px 0px 20px 8px hsl(0 0% 0% / 20%);
|
||||
|
||||
/* Border radius */
|
||||
--rounded-4: 4px;
|
||||
--rounded-20: 20px;
|
||||
|
||||
--toast-background: var(--color-brand);
|
||||
--toast-error-background: var(--tomatoOrange);
|
||||
|
||||
/* Media Queryies - Not yet supported in CSS */
|
||||
/*
|
||||
--xsmall: 340px;
|
||||
--small: 500px;
|
||||
--large: 960px;
|
||||
--wide: 1200px;
|
||||
*/
|
||||
|
||||
/* Light Theme Default */
|
||||
/* Global */
|
||||
--clr-primary: hsl(220 100% 50%);
|
||||
--clr-txt: hsl(220 10% 10%);
|
||||
--clr-bg: hsl(0 0% 98%);
|
||||
|
||||
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(220 10% 10%);
|
||||
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(0 0% 98%);
|
||||
--clr-menu-border: hsl(0 0% 80%);
|
||||
|
||||
--clr-theme-txt: hsl(0 0% 98%);
|
||||
--clr-theme-active: hsl(220 100% 60%);
|
||||
--clr-switch-on-bg: hsl(220 40% 90%);
|
||||
--clr-switch-off-bg: hsl(220 40% 80%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(220 10% 40%);
|
||||
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 80%);
|
||||
--clr-input-txt: hsl(220 10% 98%);
|
||||
--clr-input-bg: hsl(0 0% 98%);
|
||||
--clr-input-placeholder-txt: hsl(220 10% 60%);
|
||||
--clr-input-border: hsl(0 0% 80%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-card-txt: hsl(220 10% 40%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(220 10% 10%);
|
||||
--clr-link-background: hsl(0 0% 100%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(220 10% 10%);
|
||||
--clr-footer-bg: hsl(0 0% 98%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(0 0% 40%);
|
||||
--post-blockquote-bg: hsl(0 0% 98%);
|
||||
--post-blockquote-border: hsl(0 0% 84%);
|
||||
|
||||
--clr-code-bg: hsl(0 0% 98%);
|
||||
--clr-code-title: hsl(0 0% 40%);
|
||||
--clr-code-border: hsl(0 0% 84%);
|
||||
--clr-code-line-number: hsl(0 0% 60%);
|
||||
--clr-code-line-highlight: hsl(0 0% 94%);
|
||||
--clr-code-inline-txt: hsl(0 0% 98%);
|
||||
--clr-code-inline-bg: hsl(0 0% 20%);
|
||||
|
||||
--clr-token-1: hsl(220 100% 50%);
|
||||
--clr-token-2: hsl(220 60% 50%);
|
||||
--clr-token-3: hsl(220 100% 50%);
|
||||
--clr-token-4: hsl(0 0% 20%);
|
||||
--clr-token-5: hsl(0 0% 60%);
|
||||
|
||||
/* Input Fields */
|
||||
--input-bg: #181a1b;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--primary);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--bodyTextSize);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-brand);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--font-16);
|
||||
color: var(--clr-txt);
|
||||
background-color: var(--clr-bg);
|
||||
opacity: var(--bg-opacity);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: var(--spacing-8) 0;
|
||||
font-size: var(--font-24);
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: var(--spacing-8);
|
||||
font-size: var(--font-16);
|
||||
border-radius: var(--radius-base);
|
||||
background-color: var(--clr-input-bg);
|
||||
border: solid 2px var(--clr-theme-active);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: var(--clr-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
font-size: var(--font-18);
|
||||
font-weight: bold;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-btn-primary-active);
|
||||
border-radius: var(--radius-base);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
color: var(--color-text-muted);
|
||||
background-color: var(--color-btn-primary-inactive);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
|
||||
.responsive {
|
||||
resize: both;
|
||||
overflow: scroll;
|
||||
border: 1px solid hsl(0 0% 0%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
padding: var(--spacing-20) 0;
|
||||
background-color: var(--color-placeholder);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--borderRadius);
|
||||
background-color: var(--tomatoOrange);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Base Dialog Styles */
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,407 +0,0 @@
|
|||
/* Setup */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--color-brand: hsl(204 88% 53%);
|
||||
--color-text-primary: hsl(0 0% 98%);
|
||||
--color-text-muted: hsl(210 34% 80%);
|
||||
--color-bg-primary: hsl(210 34% 13%);
|
||||
--color-bg-secondary: hsl(209, 35%, 15%);
|
||||
--color-btn-primary-active: var(--color-brand);
|
||||
--color-btn-primary-active-hover: hsl(204 88% 60%);
|
||||
--color-btn-primary-inactive: hsl(205 70% 33%);
|
||||
--color-btn-secondary: hsl(192 19% 95%);
|
||||
--color-border-primary: hsl(0, 0%, 34%);
|
||||
--color-link-hover: hsl(209 22% 19%);
|
||||
--color-placeholder: hsl(210 34% 80%);
|
||||
--clr-input-txt: hsl(177 100% 15%);
|
||||
|
||||
--red: #990000;
|
||||
--tomatoOrange: hsla(0, 75%, 60%, 1);
|
||||
--redBrown: #633539;
|
||||
--blue: #336699;
|
||||
--black: #1f273a;
|
||||
--white: #fff;
|
||||
--grey: #efefef;
|
||||
--greyBlue: hsla(222, 9%, 57%, 1);
|
||||
--lighterGreyBlue: #6a707e;
|
||||
--yellow: #ffc600;
|
||||
--light: #ffffff;
|
||||
--dark: #000000;
|
||||
--lightGrey: #c5c5c5;
|
||||
--lightGray: var(--lightGrey);
|
||||
--imGoingToFaint: #fbfbfb;
|
||||
--redBrown: #633539;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Define Colors intentions */
|
||||
--primary: var(--greyBlue);
|
||||
--secondary: var(--redBrown);
|
||||
--background: var(--white);
|
||||
--textColor: var(--lighterGreyBlue);
|
||||
--buttonTextColor: var(--white);
|
||||
--lineColor: var(--grey);
|
||||
--cardBg: var(--darkGrey);
|
||||
--headerBackground: var(--greyBlue);
|
||||
--footerBackground: var(--darkGrey);
|
||||
--linkHover: var(--white);
|
||||
--lightHairLine: #c5c5c5;
|
||||
|
||||
--radius-base: 1rem;
|
||||
|
||||
/* Type */
|
||||
--headingFont: 'Merriweather Sans', sans-serif;
|
||||
--bodyFont: 'Work Sans', sans-serif;
|
||||
--baseFontSize: 100%;
|
||||
--h1: 3.052rem;
|
||||
--h2: 2.441rem;
|
||||
--h3: 1.953rem;
|
||||
--h4: 1.563rem;
|
||||
--h5: 1.25rem;
|
||||
--h6: 1.8rem;
|
||||
--bodyTextSize: 1.8rem;
|
||||
--smallText: 1.44rem;
|
||||
--lineHeight: 2.25rem;
|
||||
--font-serif: 'Inter', sans-serif;
|
||||
--font-16: 1.6rem;
|
||||
--font-18: 1.8rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-80: 8rem;
|
||||
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.5rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-20: 2rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
|
||||
/* Elevation */
|
||||
--level-0: none;
|
||||
--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
|
||||
/* Z Indexes */
|
||||
--zBase: 1;
|
||||
|
||||
/* Positioning */
|
||||
--containerPadding: 2.5%;
|
||||
--headerHeight: 8rem;
|
||||
--borderRadius: 4px;
|
||||
--borderRadiusLarge: 10px;
|
||||
--maxWidth: 1200px;
|
||||
|
||||
/* Font */
|
||||
--font-sans: 'Poppins', sans-serif;
|
||||
--font-serif: 'Arsenica', serif;
|
||||
--font-mono: Source Code Pro, monospace;
|
||||
--font-dyslexic: OpenDyslexic, sans-serif;
|
||||
--font-dyslexic-mono: OpenDyslexic Mono, monospace;
|
||||
|
||||
--font-16: 1.6rem;
|
||||
--font-24: 2.4rem;
|
||||
--font-32: 3.2rem;
|
||||
--font-48: 4.8rem;
|
||||
--font-96: 9.6rem;
|
||||
|
||||
/* Spacing */
|
||||
--spacing-4: 0.4rem;
|
||||
--spacing-8: 0.8rem;
|
||||
--spacing-16: 1.6rem;
|
||||
--spacing-24: 2.4rem;
|
||||
--spacing-32: 3.2rem;
|
||||
--spacing-64: 6.4rem;
|
||||
--spacing-128: 12.8rem;
|
||||
|
||||
/* Scrollbar */
|
||||
--clr-scrollbar-thumb: hsl(173 10% 20%);
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0px 0px 4px 4px hsl(0 0% 0% / 4%);
|
||||
--shadow-md: 0px 0px 10px 4px hsl(0 0% 0% / 10%);
|
||||
--shadow-lg: 0px 0px 20px 8px hsl(0 0% 0% / 20%);
|
||||
|
||||
/* Border radius */
|
||||
--rounded-4: 4px;
|
||||
--rounded-20: 20px;
|
||||
|
||||
--toast-background: var(--color-brand);
|
||||
--toast-error-background: var(--tomatoOrange);
|
||||
|
||||
/* Media Queryies - Not yet supported in CSS */
|
||||
/*
|
||||
--xsmall: 340px;
|
||||
--small: 500px;
|
||||
--large: 960px;
|
||||
--wide: 1200px;
|
||||
*/
|
||||
|
||||
/* Light Theme Default */
|
||||
/* Global */
|
||||
--clr-primary: hsl(220 100% 50%);
|
||||
--clr-txt: hsl(220 10% 10%);
|
||||
--clr-bg: hsl(0 0% 98%);
|
||||
|
||||
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
|
||||
--bg-opacity: 0.7;
|
||||
|
||||
/* Menu */
|
||||
--clr-menu-text: hsl(220 10% 10%);
|
||||
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-menu-arrow-bg: hsl(0 0% 98%);
|
||||
--clr-menu-border: hsl(0 0% 80%);
|
||||
|
||||
--clr-theme-txt: hsl(0 0% 98%);
|
||||
--clr-theme-active: hsl(220 100% 60%);
|
||||
--clr-switch-on-bg: hsl(220 40% 90%);
|
||||
--clr-switch-off-bg: hsl(220 40% 80%);
|
||||
|
||||
/* Hero */
|
||||
--clr-hero-txt: hsl(220 10% 40%);
|
||||
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
|
||||
--clr-hero-divider-bg: hsl(0 0% 80%);
|
||||
--clr-input-txt: hsl(220 10% 98%);
|
||||
--clr-input-bg: hsl(0 0% 98%);
|
||||
--clr-input-placeholder-txt: hsl(220 10% 60%);
|
||||
--clr-input-border: hsl(0 0% 80%);
|
||||
|
||||
/* Card */
|
||||
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
|
||||
--clr-card-txt: hsl(220 10% 40%);
|
||||
|
||||
/* Link */
|
||||
--clr-link-txt: hsl(220 10% 10%);
|
||||
--clr-link-background: hsl(0 0% 100%);
|
||||
|
||||
/* Footer */
|
||||
--clr-footer-txt: hsl(220 10% 10%);
|
||||
--clr-footer-bg: hsl(0 0% 98%);
|
||||
|
||||
/* Post */
|
||||
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
|
||||
--post-blockquote-txt: hsl(0 0% 40%);
|
||||
--post-blockquote-bg: hsl(0 0% 98%);
|
||||
--post-blockquote-border: hsl(0 0% 84%);
|
||||
|
||||
--clr-code-bg: hsl(0 0% 98%);
|
||||
--clr-code-title: hsl(0 0% 40%);
|
||||
--clr-code-border: hsl(0 0% 84%);
|
||||
--clr-code-line-number: hsl(0 0% 60%);
|
||||
--clr-code-line-highlight: hsl(0 0% 94%);
|
||||
--clr-code-inline-txt: hsl(0 0% 98%);
|
||||
--clr-code-inline-bg: hsl(0 0% 20%);
|
||||
|
||||
--clr-token-1: hsl(220 100% 50%);
|
||||
--clr-token-2: hsl(220 60% 50%);
|
||||
--clr-token-3: hsl(220 100% 50%);
|
||||
--clr-token-4: hsl(0 0% 20%);
|
||||
--clr-token-5: hsl(0 0% 60%);
|
||||
|
||||
/* Input Fields */
|
||||
--input-bg: #181a1b;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
// background-color: var(--seaFoamBlue);
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
// line-height: var(--lineHeight);
|
||||
color: var(--primary);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: var(--bodyTextSize);
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--color-brand);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--font-16);
|
||||
// color: var(--color-text-primary);
|
||||
// background-color: var(--color-bg-primary);
|
||||
color: var(--clr-txt);
|
||||
background-color: var(--clr-bg);
|
||||
opacity: var(--bg-opacity);
|
||||
// background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23555555' width='11' height='11'/%3E%3Crect fill='%23565656' x='10' width='11' height='11'/%3E%3Crect fill='%23575757' y='10' width='11' height='11'/%3E%3Crect fill='%23575757' x='20' width='11' height='11'/%3E%3Crect fill='%23585858' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23595959' y='20' width='11' height='11'/%3E%3Crect fill='%235a5a5a' x='30' width='11' height='11'/%3E%3Crect fill='%235b5b5b' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%235c5c5c' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%235c5c5c' y='30' width='11' height='11'/%3E%3Crect fill='%235d5d5d' x='40' width='11' height='11'/%3E%3Crect fill='%235e5e5e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%235f5f5f' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23606060' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23616161' y='40' width='11' height='11'/%3E%3Crect fill='%23626262' x='50' width='11' height='11'/%3E%3Crect fill='%23626262' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23636363' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23646464' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23656565' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23666666' y='50' width='11' height='11'/%3E%3Crect fill='%23676767' x='60' width='11' height='11'/%3E%3Crect fill='%23686868' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23686868' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23696969' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%236a6a6a' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%236b6b6b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%236c6c6c' x='70' width='11' height='11'/%3E%3Crect fill='%236d6d6d' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%236e6e6e' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%236f6f6f' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23707070' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23717171' x='80' width='11' height='11'/%3E%3Crect fill='%23727272' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23737373' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23747474' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23747474' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23757575' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23767676' x='90' width='11' height='11'/%3E%3Crect fill='%23777777' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23787878' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23797979' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%237a7a7a' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%237b7b7b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%237c7c7c' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%237d7d7d' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%237e7e7e' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%237f7f7f' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23808080' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23818181' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23828282' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23838383' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23848484' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23848484' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23858585' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23868686' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23878787' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23888888' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
|
||||
// background-attachment: fixed;
|
||||
// background-size: cover;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: var(--spacing-8) 0;
|
||||
font-size: var(--font-24);
|
||||
color: var(--clr-txt);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: var(--spacing-8);
|
||||
font-size: var(--font-16);
|
||||
border-radius: var(--radius-base);
|
||||
background-color: var(--clr-input-bg);
|
||||
border: solid 2px var(--clr-theme-active);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
border-color: var(--clr-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--spacing-4) var(--spacing-8);
|
||||
font-size: var(--font-18);
|
||||
font-weight: bold;
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-btn-primary-active);
|
||||
border-radius: var(--radius-base);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
color: var(--color-text-muted);
|
||||
background-color: var(--color-btn-primary-inactive);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Utils */
|
||||
|
||||
.responsive {
|
||||
resize: both;
|
||||
overflow: scroll;
|
||||
border: 1px solid hsl(0 0% 0%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
padding: var(--spacing-20) 0;
|
||||
background-color: var(--color-placeholder);
|
||||
border-radius: var(--radius-base);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--borderRadius);
|
||||
background-color: var(--tomatoOrange);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Base Dialog Styles */
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-color: var(--warning);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--warning-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
src/styles/styles.postcss
Normal file
3
src/styles/styles.postcss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'reset.postcss';
|
||||
@import 'global.postcss';
|
||||
@import 'theme.postcss';
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@use 'reset.scss';
|
||||
@use 'global.scss';
|
||||
@use 'theme.scss';
|
||||
|
|
@ -5,7 +5,11 @@ import preprocess from 'svelte-preprocess';
|
|||
const config = {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: preprocess(),
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue