Fixing images and tabs.

This commit is contained in:
Bradley Shellnut 2023-01-31 16:06:41 -08:00
parent e2815feea5
commit 17f668cd6a
2 changed files with 29 additions and 18 deletions

View file

@ -43,10 +43,12 @@
<div class="gridItemStyles"> <div class="gridItemStyles">
<div> <div>
<h2>Personal Website</h2> <h2>Personal Website</h2>
<Image <div>
src={personalSite} <Image
alt="Home Page bradleyshellnut.com" src={personalSite}
/> alt="Home Page bradleyshellnut.com"
/>
</div>
</div> </div>
<div> <div>
<p> <p>
@ -140,7 +142,9 @@
<div class="gridItemStyles"> <div class="gridItemStyles">
<div> <div>
<h2>Wedding Website</h2> <h2>Wedding Website</h2>
<Image src={weddingWebsite} alt="Wedding Website" /> <div>
<Image src={weddingWebsite} alt="Wedding Website" />
</div>
<p> <p>
<a <a
href="https://weddingsite-six.vercel.app/" href="https://weddingsite-six.vercel.app/"
@ -210,10 +214,12 @@
<div class="gridItemStyles"> <div class="gridItemStyles">
<div> <div>
<h2>Old Personal Website</h2> <h2>Old Personal Website</h2>
<Image <div>
src={oldSite} <Image
alt="Home Page of old bradleyshellnut.com" src={oldSite}
/> alt="Home Page of old bradleyshellnut.com"
/>
</div>
<p> <p>
<a <a
href="https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about" href="https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about"
@ -244,10 +250,12 @@
<div class="gridItemStyles"> <div class="gridItemStyles">
<div> <div>
<h2>Mark Shellnut Architect </h2> <h2>Mark Shellnut Architect </h2>
<Image <div>
src={shellnutArchitectWebsite} <Image
alt="Mark Shellnut Architect" src={shellnutArchitectWebsite}
/> alt="Mark Shellnut Architect"
/>
</div>
<p> <p>
<a <a
href="https://markshellnutarchitect.com/" href="https://markshellnutarchitect.com/"
@ -302,7 +310,7 @@
gap: 3rem; gap: 3rem;
margin: 0.5rem auto; margin: 0.5rem auto;
@media (max-width: 580px) { @media (max-width: 767px) {
grid-template-columns: repeat(1, minmax(150px, 400px)); grid-template-columns: repeat(1, minmax(150px, 400px));
grid-gap: 1.2rem; grid-gap: 1.2rem;
margin: 0.2rem 0; margin: 0.2rem 0;
@ -311,12 +319,12 @@
:global(.gridItemStyles) { :global(.gridItemStyles) {
display: grid; display: grid;
grid-template-columns: 0.5fr 0.5fr; grid-template-columns: minmax(200px, 0.5fr) 0.5fr;
width: 100%; width: 100%;
gap: 2rem; gap: 2rem;
margin: 0 auto; margin: 0 auto;
@media (max-width: 580px) { @media (max-width: 767px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }

View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import SEO from "$root/lib/components/SEO.svelte"; import SEO from "$root/lib/components/SEO.svelte";
import DesktopImage from '$lib/assets/images/Desktop_so_clean.jpg'; import DesktopImage from '$lib/assets/images/Desktop_so_clean.jpg';
import { Image } from "svelte-lazy-loader";
</script> </script>
<SEO title="Uses" /> <SEO title="Uses" />
@ -39,9 +40,11 @@
</p> </p>
</div> </div>
<div class="uses-block-styles"> <div class="uses-block-styles">
<div style="display: grid; justify-content: center; margin-bottom: 2rem;"> <div style="display: grid; grid-template-columns: minmax(400px, 0.65fr); justify-content: center; margin-bottom: 2rem;">
<figure> <figure>
<img src={DesktopImage} alt="Clean desktop" width="400px"/> <div>
<Image src={DesktopImage} alt="Clean desktop" />
</div>
</figure> </figure>
</div> </div>
<h2>Hardware & Accessories</h2> <h2>Hardware & Accessories</h2>