mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Change main max width to be a little larger and make portfolio max small to stop layout shift.
This commit is contained in:
parent
4070922c8a
commit
34b00a6223
2 changed files with 8 additions and 2 deletions
|
|
@ -80,7 +80,7 @@
|
|||
max-width: 85vw;
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
max-width: 50vw;
|
||||
max-width: 60vw;
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<SEO title="Portfolio" />
|
||||
|
||||
<h1>Portfolio!</h1>
|
||||
<TabGroup>
|
||||
<TabGroup class="tab-group">
|
||||
<TabList aria-label="tabs portfolios" class="tab-list">
|
||||
<Tab class={({selected}) => selected ? "tab-selected portfolio-tab" : "tab-unselected portfolio-tab"}>
|
||||
<h2>Personal Sites</h2>
|
||||
|
|
@ -84,6 +84,12 @@
|
|||
</TabGroup>
|
||||
|
||||
<style lang="postcss">
|
||||
:global(.tab-group) {
|
||||
@media(min-width: 1000px) {
|
||||
max-width: 50vw;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.tab-list) {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue