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