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

Aspect ratio on uses image and media query sizes.

Browse source
This commit is contained in:
Bradley Shellnut 2023-04-11 12:04:42 -07:00
parent 602d31d8ce
commit 49ba7ecd2d
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,7 +41,7 @@
</div> </div>
<div class="uses-block-styles"> <div class="uses-block-styles">
<div class="uses-image"> <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" /> <Img class="uses-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
</div> </div>
<h2>Hardware & Accessories</h2> <h2>Hardware & Accessories</h2>
<ul> <ul>
@ -494,16 +494,6 @@
Bitwarden Bitwarden
</a> </a>
</li> </li>
<li>
<a
target="_blank"
aria-label="Element Messaging App"
href="https://element.io/"
rel="noreferrer"
>
Element (Riot.im)
</a>
</li>
<li> <li>
<a <a
target="_blank" target="_blank"
@ -594,4 +584,15 @@
} }
} }
} }
:global(.uses-image) {
margin-left: auto;
margin-right: auto;
aspect-ratio: 4 / 3;
max-height: 480px;
@media(max-width: 800px) {
max-height: 350px;
}
}
</style> </style>