mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Fixing images and tabs.
This commit is contained in:
parent
e2815feea5
commit
17f668cd6a
2 changed files with 29 additions and 18 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue