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>
</div>
<div class="uses-block-styles">
<figure>
<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" />
</figure>
<div class="uses-image">
<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" />
</div>
<h2>Hardware & Accessories</h2>
<ul>
<li>MacBook Pro 15-inch for work.</li>
@ -541,7 +541,8 @@
<style lang="postcss">
figure {
display: grid;
grid-template-columns: minmax(400px, 0.65fr);
grid-template-columns: minmax(500px, 0.65fr);
border-radius: 3px;
place-content: center;
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 {
margin: 2.5rem 0;
@media (max-width: 800px) {
@ -601,4 +614,8 @@
}
}
}
:global(img) {
border-radius: 3px;
}
</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`
// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
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: {