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

Testing image bound widths.

Browse source
This commit is contained in:
Bradley Shellnut 2023-02-17 16:46:58 -08:00
parent c12966c893
commit 8f74589539
1 changed files with 15 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -47,15 +47,13 @@
<TabPanel>
<div class="portfolioStyles">
<div class="gridItemStyles">
<div>
<div class="portfolioPicture">
<h2>Personal Website</h2>
<div style="min-width: 200px; min-height: 500px;">
<Picture placeholder={personalSiteBlurred} src={personalSite} alt="Home Page of bradleyshellnut.com">
{#each personalSiteFormats as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
</div>
<Picture placeholder={personalSiteBlurred} src={personalSite} alt="Home Page of bradleyshellnut.com">
{#each personalSiteFormats as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture>
</div>
<div>
<p>
@ -149,7 +147,7 @@
<div class="gridItemStyles">
<div>
<h2>Wedding Website</h2>
<div>
<div class="portfolioPicture">
<Picture placeholder={weddingWebsiteBlurred} src="images/Wedding_Website.png" alt="Wedding Website">
{#each weddingWebsite as { src, format }}
<source data-srcset={src} type="image/{format}" />
@ -225,7 +223,7 @@
<div class="gridItemStyles">
<div>
<h2>Old Personal Website</h2>
<div>
<div class="portfolioPicture">
<Picture placeholder={oldSiteBlurred} src="images/Old_Website_Bradley_Shellnut.png" alt="Home Page of the old bradleyshellnut.com website">
{#each oldSite as { src, format }}
<source data-srcset={src} type="image/{format}" />
@ -262,7 +260,7 @@
<div class="gridItemStyles">
<div>
<h2>Mark Shellnut Architect </h2>
<div>
<div class="portfolio-picture">
<Picture placeholder={shellnutArchitectWebsiteBlurred} src="images/Mark_Shellnut_Architect.png" alt="Mark Shellnut Architect's Website">
{#each shellnutArchitectWebsite as { src, format }}
<source data-srcset={src} type="image/{format}" />
@ -334,9 +332,14 @@
}
}
:global(.portfolioPicture) {
border-radius: 3px;
width: minmax(200px, 500px);
}
:global(.gridItemStyles) {
display: grid;
grid-template-columns: minmax(200px, 0.5fr) 0.5fr;
grid-template-columns: minmax(200px, 0.7fr) 0.5fr;
width: 100%;
gap: 2rem;
margin: 0 auto;
@ -345,11 +348,6 @@
grid-template-columns: 1fr;
}
img {
border-radius: 3px;
max-width: 800px;
}
p {
margin: 1rem 0;
padding: 0;