Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change main max width to be a little larger and make portfolio max small to stop layout shift.

Browse source
This commit is contained in:
Bradley Shellnut 2023-04-20 15:18:23 -07:00
parent 4070922c8a
commit 34b00a6223
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/+layout.svelte
View file

@ -80,7 +80,7 @@
max-width: 85vw; max-width: 85vw;
@media (min-width: 1600px) { @media (min-width: 1600px) {
max-width: 50vw; max-width: 60vw;
} }
box-sizing: border-box; box-sizing: border-box;

8
src/routes/portfolio/+page.svelte
View file

@ -23,7 +23,7 @@
<SEO title="Portfolio" /> <SEO title="Portfolio" />
<h1>Portfolio!</h1> <h1>Portfolio!</h1>
<TabGroup> <TabGroup class="tab-group">
<TabList aria-label="tabs portfolios" class="tab-list"> <TabList aria-label="tabs portfolios" class="tab-list">
<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}> <Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
<h2>Personal Sites</h2> <h2>Personal Sites</h2>
@ -84,6 +84,12 @@
</TabGroup> </TabGroup>
<style lang="postcss"> <style lang="postcss">
:global(.tab-group) {
@media(min-width: 1000px) {
max-width: 50vw;
}
}
:global(.tab-list) { :global(.tab-list) {
display: grid; display: grid;
gap: 1rem; gap: 1rem;