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",
|
"@types/node": "^18.11.9",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||||
"@typescript-eslint/parser": "^5.42.1",
|
"@typescript-eslint/parser": "^5.42.1",
|
||||||
|
"autoprefixer": "^10.4.13",
|
||||||
"eslint": "^8.27.0",
|
"eslint": "^8.27.0",
|
||||||
"eslint-config-prettier": "^8.1.0",
|
"eslint-config-prettier": "^8.1.0",
|
||||||
"eslint-plugin-svelte3": "^4.0.0",
|
"eslint-plugin-svelte3": "^4.0.0",
|
||||||
"just-debounce-it": "^3.1.1",
|
"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": "^2.7.1",
|
||||||
"prettier-plugin-svelte": "^2.8.0",
|
"prettier-plugin-svelte": "^2.8.0",
|
||||||
"sass": "^1.56.1",
|
"sass": "^1.56.1",
|
||||||
|
|
@ -46,8 +55,7 @@
|
||||||
"cookie": "^0.5.0",
|
"cookie": "^0.5.0",
|
||||||
"feather-icons": "^4.29.0",
|
"feather-icons": "^4.29.0",
|
||||||
"svelte-lazy-loader": "^1.0.0",
|
"svelte-lazy-loader": "^1.0.0",
|
||||||
"svelte-media-query-store": "^1.0.0",
|
|
||||||
"zod": "^3.19.1",
|
"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 PageData {}
|
||||||
|
|
||||||
// interface PageError {}
|
// interface Error {}
|
||||||
|
|
||||||
// interface Platform {}
|
// 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">
|
<script lang="ts">
|
||||||
import { fade } from 'svelte/transition';
|
import { browser } from '$app/environment';
|
||||||
import {
|
|
||||||
Dialog,
|
|
||||||
DialogDescription,
|
|
||||||
DialogOverlay,
|
|
||||||
DialogTitle
|
|
||||||
} from '@rgossiaux/svelte-headlessui';
|
|
||||||
import { boredState } from '$root/lib/stores/boredState';
|
import { boredState } from '$root/lib/stores/boredState';
|
||||||
import { wishlistStore } from '$root/lib/stores/wishlistStore';
|
import { wishlistStore } from '$root/lib/stores/wishlistStore';
|
||||||
import { browser } from '$app/environment';
|
import DefaultDialog from './DefaultDialog.svelte';
|
||||||
|
|
||||||
function clearWishlist() {
|
function clearWishlist() {
|
||||||
if (browser) {
|
if (browser) {
|
||||||
|
|
@ -18,35 +12,23 @@
|
||||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||||
}
|
}
|
||||||
|
|
||||||
$: isOpen = $boredState?.dialog?.isOpen;
|
function stopLoading() {
|
||||||
|
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Dialog
|
<DefaultDialog
|
||||||
open={isOpen}
|
title="Clear wishlist"
|
||||||
on:close={() => {
|
description="Are you sure you want to clear your wishlist?"
|
||||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
danger
|
||||||
}}
|
primaryButtonText="Clear"
|
||||||
static
|
secondaryButtonText="Cancel"
|
||||||
>
|
on:click:primary={clearWishlist}
|
||||||
<div transition:fade>
|
on:click:secondary={stopLoading}
|
||||||
<DialogOverlay class="dialog-overlay" />
|
on:close={stopLoading}
|
||||||
<div class="dialog">
|
/>
|
||||||
<DialogTitle>Clear wishlist</DialogTitle>
|
|
||||||
<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
|
|
||||||
|
|
||||||
<div class="dialog-footer">
|
<style lang="postcss">
|
||||||
<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">
|
|
||||||
.dialog {
|
.dialog {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { type SvelteComponent, createEventDispatcher } from 'svelte';
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
|
|
@ -8,23 +9,67 @@
|
||||||
} from '@rgossiaux/svelte-headlessui';
|
} from '@rgossiaux/svelte-headlessui';
|
||||||
import { boredState } from '$root/lib/stores/boredState';
|
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;
|
$: isOpen = $boredState?.dialog?.isOpen;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Dialog
|
<Dialog
|
||||||
open={isOpen}
|
open={isOpen}
|
||||||
on:close={() => {
|
on:close={() => {
|
||||||
boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
|
dispatch('close');
|
||||||
}}
|
}}
|
||||||
static
|
static
|
||||||
>
|
>
|
||||||
<div transition:fade>
|
<div transition:fade>
|
||||||
<DialogOverlay class="dialog-overlay" />
|
<DialogOverlay class="dialog-overlay" />
|
||||||
<div class="dialog">
|
<div class="dialog">
|
||||||
<DialogTitle>Default Dialog</DialogTitle>
|
<DialogTitle>{title}</DialogTitle>
|
||||||
<DialogDescription>Dialog Description</DialogDescription>
|
{#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>
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
@ -34,7 +79,7 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 35%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
|
|
@ -62,6 +107,14 @@
|
||||||
background-color: var(--color-btn-primary-active-hover);
|
background-color: var(--color-btn-primary-active-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.danger {
|
||||||
|
background-color: var(--warning);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--warning-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,7 @@
|
||||||
gameStore.removeAll();
|
gameStore.removeAll();
|
||||||
boredState.update((n) => ({ ...n, loading: true }));
|
boredState.update((n) => ({ ...n, loading: true }));
|
||||||
return async ({ result }) => {
|
return async ({ result }) => {
|
||||||
|
console.log('result', result);
|
||||||
boredState.update((n) => ({ ...n, loading: false }));
|
boredState.update((n) => ({ ...n, loading: false }));
|
||||||
// `result` is an `ActionResult` object
|
// `result` is an `ActionResult` object
|
||||||
if (result.type === 'success') {
|
if (result.type === 'success') {
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,6 @@
|
||||||
let disclosureOpen = false;
|
let disclosureOpen = false;
|
||||||
|
|
||||||
$: skip = (page - 1) * pageSize;
|
$: skip = (page - 1) * pageSize;
|
||||||
$: console.log('submit button', submitButton);
|
|
||||||
$: showPagination = $gameStore?.length > 1;
|
$: showPagination = $gameStore?.length > 1;
|
||||||
|
|
||||||
if ($xl) {
|
if ($xl) {
|
||||||
|
|
@ -223,7 +222,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="postcss">
|
||||||
.search {
|
.search {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
@ -267,15 +266,15 @@
|
||||||
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
|
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media screen and (800px < width <= 1200px) {
|
||||||
--listColumns: 3;
|
--listColumns: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media screen and (650px < width <= 800px) {
|
||||||
--listColumns: 2;
|
--listColumns: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media screen and (width <= 650px) {
|
||||||
--listColumns: 1;
|
--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');
|
export const xs = mediaQueryStore('(min-width: 480px');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,112 @@ export const BoardGameSearch = z.object({
|
||||||
maxPlayers: z.number()
|
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({
|
export const game_schema = z.object({
|
||||||
id: z.string(),
|
id: z.string(),
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
import { navigating } from '$app/stores';
|
import { navigating } from '$app/stores';
|
||||||
import debounce from 'just-debounce-it';
|
import debounce from 'just-debounce-it';
|
||||||
import { Toy } from '@leveluptuts/svelte-toy';
|
import { Toy } from '@leveluptuts/svelte-toy';
|
||||||
|
// import '../app.postcss';
|
||||||
import Analytics from '$lib/components/analytics.svelte';
|
import Analytics from '$lib/components/analytics.svelte';
|
||||||
import Header from '$lib/components/header/Header.svelte';
|
import Header from '$lib/components/header/Header.svelte';
|
||||||
import Loading from '$lib/components/loading.svelte';
|
import Loading from '$lib/components/loading.svelte';
|
||||||
|
|
@ -14,7 +15,7 @@
|
||||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||||
import { toast } from '$lib/components/toast/toast';
|
import { toast } from '$lib/components/toast/toast';
|
||||||
import Toast from '$lib/components/toast/Toast.svelte';
|
import Toast from '$lib/components/toast/Toast.svelte';
|
||||||
import '$root/styles/styles.scss';
|
import '$root/styles/styles.postcss';
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if ($navigating) {
|
if ($navigating) {
|
||||||
|
|
@ -103,7 +104,7 @@
|
||||||
<Toast />
|
<Toast />
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="postcss">
|
||||||
.loading {
|
.loading {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50%;
|
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 { error, invalid, type ServerLoadEvent } from '@sveltejs/kit';
|
||||||
import type { GameType, SearchQuery } from '$root/lib/types';
|
import type { GameType, SearchQuery } from '$root/lib/types';
|
||||||
import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
|
import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
|
||||||
|
import { search_schema } from '$root/lib/zodValidation';
|
||||||
|
import { ZodError } from 'zod';
|
||||||
|
|
||||||
export const load: PageServerLoad = () => {
|
export const load: PageServerLoad = () => {
|
||||||
return {
|
return {
|
||||||
|
|
@ -12,15 +14,16 @@ export const load: PageServerLoad = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const actions: Actions = {
|
export const actions: Actions = {
|
||||||
default: async ({ request, locals }: RequestEvent): Promise<any> => {
|
default: async ({ request }): Promise<any> => {
|
||||||
console.log("In search action specific")
|
console.log("In search action specific")
|
||||||
// Do things in here
|
// Do things in here
|
||||||
const form = await request.formData();
|
const formData = await request.formData();
|
||||||
console.log('passed in limit:', form.get('limit'))
|
const data = Object.fromEntries(formData);
|
||||||
console.log('passed in skip:', form.get('skip'))
|
console.log('passed in limit:', data?.limit)
|
||||||
const limit = form.get('limit') || 10;
|
console.log('passed in skip:', data?.skip)
|
||||||
const skip = form.get('skip') || 0;
|
const limit = data?.limit || 10;
|
||||||
console.log('action form', form);
|
const skip = data?.skip || 0;
|
||||||
|
console.log('action form', data);
|
||||||
const queryParams: SearchQuery = {
|
const queryParams: SearchQuery = {
|
||||||
order_by: 'rank',
|
order_by: 'rank',
|
||||||
ascending: false,
|
ascending: false,
|
||||||
|
|
@ -33,52 +36,60 @@ export const actions: Actions = {
|
||||||
|
|
||||||
// TODO: Check name length and not search if not advanced search
|
// 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) {
|
if (random) {
|
||||||
queryParams.random = random;
|
queryParams.random = random;
|
||||||
} else {
|
} else {
|
||||||
const minAge = form.get('minAge');
|
// const minAge = form.get('minAge');
|
||||||
const minPlayers = form.get('minPlayers');
|
// const minPlayers = form.get('minPlayers');
|
||||||
console.log('minPlayers', minPlayers);
|
// const maxPlayers = form.get('maxPlayers');
|
||||||
const maxPlayers = form.get('maxPlayers');
|
// const exactMinAge = form.get('exactMinAge') || false;
|
||||||
console.log('maxPlayers', maxPlayers);
|
// const exactMinPlayers = form.get('exactMinPlayers') || false;
|
||||||
const exactMinAge = form.get('exactMinAge') || false;
|
// const exactMaxPlayers = form.get('exactMaxPlayers') || false;
|
||||||
const exactMinPlayers = form.get('exactMinPlayers') || false;
|
|
||||||
const exactMaxPlayers = form.get('exactMaxPlayers') || false;
|
|
||||||
|
|
||||||
if (minAge) {
|
try {
|
||||||
if (exactMinAge) {
|
const {
|
||||||
queryParams.min_age = +minAge;
|
name,
|
||||||
} else {
|
minAge,
|
||||||
queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
|
minPlayers,
|
||||||
}
|
maxPlayers,
|
||||||
}
|
exactMinAge,
|
||||||
|
exactMinPlayers,
|
||||||
if (minPlayers && maxPlayers) {
|
exactMaxPlayers
|
||||||
if (+minPlayers > +maxPlayers) {
|
} = search_schema.parse(formData);
|
||||||
return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
|
|
||||||
}
|
if (minAge) {
|
||||||
// else if (+maxPlayers < +minPlayers) {
|
if (exactMinAge) {
|
||||||
// return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
|
queryParams.min_age = minAge;
|
||||||
// }
|
} else {
|
||||||
if (exactMinPlayers) {
|
queryParams.gt_min_age = minAge === 1 ? 0 : minAge - 1;
|
||||||
queryParams.min_players = +minPlayers;
|
}
|
||||||
} else {
|
|
||||||
queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (exactMaxPlayers) {
|
if (minPlayers) {
|
||||||
queryParams.max_players = +maxPlayers;
|
if (exactMinPlayers) {
|
||||||
} else {
|
queryParams.min_players = minPlayers;
|
||||||
queryParams.lt_max_players = +maxPlayers + 1;
|
} 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();
|
if (name) {
|
||||||
console.log('name', 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 = {
|
const config = {
|
||||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: preprocess(),
|
preprocess: [
|
||||||
|
preprocess({
|
||||||
|
postcss: true
|
||||||
|
})
|
||||||
|
],
|
||||||
kit: {
|
kit: {
|
||||||
adapter: adapter(),
|
adapter: adapter(),
|
||||||
alias: {
|
alias: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue