mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Adding configs for Skeleton UI.
This commit is contained in:
parent
af0dc070a5
commit
20d7a4f7eb
6 changed files with 164 additions and 135 deletions
|
|
@ -1,3 +1,4 @@
|
|||
const tailwindcss = require('tailwindcss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const postcssMediaMinmax = require('postcss-media-minmax');
|
||||
const customMedia = require('postcss-custom-media');
|
||||
|
|
@ -7,6 +8,9 @@ const postcssEnvFunction = require('postcss-env-function');
|
|||
|
||||
const config = {
|
||||
plugins: [
|
||||
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
|
||||
tailwindcss(),
|
||||
//But others, like autoprefixer, need to run after
|
||||
autoprefixer(),
|
||||
postcssMediaMinmax,
|
||||
customMedia,
|
||||
|
|
@ -14,7 +18,7 @@ const config = {
|
|||
postcssNested,
|
||||
postcssEnvFunction({
|
||||
importFrom: './src/lib/util/environmentVariables.json'
|
||||
})
|
||||
}),
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
109
src/app.css
109
src/app.css
|
|
@ -1,109 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
}
|
||||
111
src/app.postcss
Normal file
111
src/app.postcss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/* 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,11 @@
|
|||
import { navigating } from '$app/stores';
|
||||
import debounce from 'just-debounce-it';
|
||||
import { Toy } from '@leveluptuts/svelte-toy';
|
||||
// import '@skeletonlabs/skeleton/themes/theme-crimson.css';
|
||||
// import '@skeletonlabs/skeleton/styles/skeleton.css';
|
||||
// import "../app.postcss";
|
||||
import Analytics from '$lib/components/analytics.svelte';
|
||||
import Header from '$root/lib/components/header/index.svelte';
|
||||
import Header from '$lib/components/header/index.svelte';
|
||||
import Footer from '$lib/components/footer.svelte';
|
||||
import Loading from '$lib/components/loading.svelte';
|
||||
import Transition from '$lib/components/transition/index.svelte';
|
||||
|
|
@ -15,11 +18,9 @@
|
|||
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.pcss';
|
||||
import '$styles/styles.pcss';
|
||||
import 'iconify-icon';
|
||||
|
||||
import type { SavedGameType } from '$root/lib/types';
|
||||
|
||||
import type { SavedGameType } from '$lib/types';
|
||||
|
||||
$: {
|
||||
if ($navigating) {
|
||||
|
|
@ -91,7 +92,7 @@
|
|||
|
||||
<!-- <Transition transition={{ type: 'fade', duration: 250 }}> -->
|
||||
<div class="wrapper">
|
||||
<Header />
|
||||
<Header user={data.user} />
|
||||
<main>
|
||||
<Transition url={data.url} transition={{ type: 'page' }}>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -1,28 +1,33 @@
|
|||
import preprocess from 'svelte-preprocess';
|
||||
import adapter from '@sveltejs/adapter-vercel';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
vitePreprocess({
|
||||
postcss: true,
|
||||
}),
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
$root: './src'
|
||||
},
|
||||
},
|
||||
vitePlugin: {
|
||||
experimental: {
|
||||
inspector: {
|
||||
toggleKeyCombo: 'control-alt-shift',
|
||||
},
|
||||
},
|
||||
},
|
||||
preprocess: [
|
||||
vitePreprocess({
|
||||
postcss: true
|
||||
}),
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
$root: './src',
|
||||
$styles: './src/styles',
|
||||
}
|
||||
},
|
||||
vitePlugin: {
|
||||
experimental: {
|
||||
inspector: {
|
||||
toggleKeyCombo: 'control-alt-shift'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
17
tailwind.config.cjs
Normal file
17
tailwind.config.cjs
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// 1. Apply the dark mode class setting:
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
'./src/**/*.{html,js,svelte,ts}',
|
||||
// 2. Append the path for the Skeleton NPM package and files:
|
||||
require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
|
||||
],
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: [
|
||||
// 3. Append the Skeleton plugin to the end of this list
|
||||
...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
|
||||
]
|
||||
};
|
||||
Loading…
Reference in a new issue