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

Adding border radius, extra image size, media query to uses image.

Browse source
This commit is contained in:
Bradley Shellnut 2023-04-10 17:38:17 -07:00
parent 126a66cc2b
commit 2bd5b49b9b
2 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/routes/uses/+page.svelte
View file

@ -40,9 +40,9 @@
</p> </p>
</div> </div>
<div class="uses-block-styles"> <div class="uses-block-styles">
<figure> <div class="uses-image">
<Img class="portfolio-image better-blur" style="max-height: 480px; max-width: 620px;" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" /> <Img class="portfolio-image better-blur" style="width: 100%; max-height: 480px;" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
</figure> </div>
<h2>Hardware & Accessories</h2> <h2>Hardware & Accessories</h2>
<ul> <ul>
<li>MacBook Pro 15-inch for work.</li> <li>MacBook Pro 15-inch for work.</li>
@ -541,7 +541,8 @@
<style lang="postcss"> <style lang="postcss">
figure { figure {
display: grid; display: grid;
grid-template-columns: minmax(400px, 0.65fr); grid-template-columns: minmax(500px, 0.65fr);
border-radius: 3px;
place-content: center; place-content: center;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -565,6 +566,18 @@
} }
} }
.uses-image {
display: grid;
grid-template-columns: minmax(620px, 0.65fr);
place-content: center;
@media (max-width: 800px) {
grid-template-columns: minmax(480px, 0.65fr);
}
/* margin-left: auto; */
/* margin-right: auto; */
}
.uses-block-styles { .uses-block-styles {
margin: 2.5rem 0; margin: 2.5rem 0;
@media (max-width: 800px) { @media (max-width: 800px) {
@ -601,4 +614,8 @@
} }
} }
} }
:global(img) {
border-radius: 3px;
}
</style> </style>

2
vite.config.ts
View file

@ -10,7 +10,7 @@ const config: UserConfig = {
// By default, directives are `?width=480;1024;1920&format=avif;webp;jpg` // By default, directives are `?width=480;1024;1920&format=avif;webp;jpg`
// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP // Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
defaultDirectives: () => defaultDirectives: () =>
new URLSearchParams('?width=480;640;1024;1920&format=avif;webp;jpg&lqip=64') new URLSearchParams('?width=320;480;640;1024;1920&format=avif;webp;jpg&lqip=64')
}) })
], ],
test: { test: {