diff --git a/src/lib/components/header/Header.svelte b/src/lib/components/header/Header.svelte index eeefea2..ac23bea 100644 --- a/src/lib/components/header/Header.svelte +++ b/src/lib/components/header/Header.svelte @@ -25,7 +25,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 0 var(--containerPadding); + padding: var(--containerPadding); font-size: 1.6rem; @media (max-width: 1000px) { diff --git a/src/lib/components/random/index.svelte b/src/lib/components/random/index.svelte index 233dde1..4877383 100644 --- a/src/lib/components/random/index.svelte +++ b/src/lib/components/random/index.svelte @@ -14,7 +14,7 @@ const randomGame: SavedGameType = $collectionStore.at(randomNumber)!; const response = await fetch(`/api/game/${randomGame?.id}`, { method: 'GET', - headers: { accept: 'application/json' }, + headers: { accept: 'application/json' } }); const responseData = await response.json(); console.log('responseData', responseData); @@ -37,3 +37,10 @@ + + diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte index 78af111..e0fc8a3 100644 --- a/src/lib/components/search/random/index.svelte +++ b/src/lib/components/search/random/index.svelte @@ -35,4 +35,9 @@ display: grid; grid-template-columns: repeat(3, 1fr); } + + button { + max-width: 450px; + padding: var(--spacing-8) var(--spacing-16); + } diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 26e0cef..d71da69 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -15,24 +15,21 @@ import '$root/styles/styles.scss'; $: { - if ($navigating) { - debounce(() => {boredState.set({ loading: true });}, 250); - } - if (!$navigating) { - boredState.set({ loading: false }); - } - } + if ($navigating) { + debounce(() => { + boredState.set({ loading: true }); + }, 250); + } + if (!$navigating) { + boredState.set({ loading: false }); + } + } if (browser) { let collectionEmpty = $collectionStore.length === 0 || false; console.log('collectionEmpty', collectionEmpty); console.log('localStorage.collection', localStorage.collection); - if ( - collectionEmpty && - localStorage && - localStorage.collection && - localStorage.collection.length !== 0 - ) { + if (collectionEmpty && localStorage?.collection && localStorage.collection.length !== 0) { const collection = JSON.parse(localStorage.collection); console.log('collection', collection); if (collection && collection.length !== 0) { @@ -120,9 +117,9 @@ padding: 2rem 0rem; max-width: 80%; - /* @media (max-width: 850px) { - max-width: 80%; - } */ + @media (min-width: 1500px) { + max-width: 60%; + } box-sizing: border-box; } diff --git a/src/routes/index.svelte b/src/routes/index.svelte index b33ef38..c39c6ea 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -123,7 +123,13 @@ } .random-buttons { - display: grid; - grid-template-columns: 1fr 1fr; + display: flex; + place-content: space-between; + place-items: center; + + @media (max-width: 650px) { + display: grid; + grid-template-columns: 1fr 1fr; + } }