diff --git a/README.md b/README.md index 82510ca..6f7ddb5 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,14 @@ -# create-svelte +# Bored Game -Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte); +Feeling bored? -## Creating a project +How about a board game? -If you're seeing this, you've probably already done this step. Congrats! - -```bash -# create a new project in the current directory -npm init svelte@next - -# create a new project in my-app -npm init svelte@next my-app -``` - -> Note: the `@next` is temporary +Use this app to search for a board game to play because you are bored apparently. ## Developing -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: +Once you've checked out the project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: ```bash npm run dev @@ -29,10 +19,12 @@ npm run dev -- --open ## Building -Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then: +Building for production? + +Great! Run: ```bash npm run build ``` -> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production. +> You can preview the built app with `npm run preview`. This should _not_ be used to serve your app in production. diff --git a/src/routes/games/index.svelte b/src/routes/games/index.svelte index 2ab8700..2fe9983 100644 --- a/src/routes/games/index.svelte +++ b/src/routes/games/index.svelte @@ -117,7 +117,7 @@ import { Checkbox, NumberInput } from "carbon-components-svelte"; border-radius: 4px; margin: 0; padding: 0.2rem; - background-color: palegreen; + background-color: var(--color-btn-primary-active); } .games { diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 2114f83..8780a36 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -133,10 +133,11 @@ } button { - border-radius: 4px; - margin: 0; - padding: 0.2rem; - background-color: palegreen; + border-radius: 10px; + margin: 0.5rem; + padding: 1rem; + color: var(--clr-input-txt); + background-color: var(--color-btn-primary-active); } .games { diff --git a/src/styles/global.scss b/src/styles/global.scss index a7dd3cf..757b382 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -15,6 +15,7 @@ --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; --redBrown: #633539; @@ -38,7 +39,7 @@ --secondary: var(--redBrown); --background: var(--white); --textColor: var(--lighterGreyBlue); - --buttonTextColor: var(--black); + --buttonTextColor: var(--white); --lineColor: var(--grey); --cardBg: var(--darkGrey); --headerBackground: var(--greyBlue); @@ -139,10 +140,6 @@ } html { - /* background-image: url(${floatingCogs}); */ - /* background-color: var(--background); */ - /* background-size: 450px; */ - /* background-attachment: fixed; */ font-size: 62.5%; box-sizing: border-box; scrollbar-width: thin; @@ -178,8 +175,8 @@ body { font-size: var(--font-18); color: var(--color-text-primary); // background-color: var(--color-bg-primary); - background-color: #555555; - 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-color: #2D3A3A; + // 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; }