Fixed img css

This commit is contained in:
Maxi Ferreira 2022-08-12 11:07:53 -07:00
parent 7006f071a9
commit 2fc2eec9e1
3 changed files with 8 additions and 7 deletions

1
src/env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="astro/client" />

View File

@ -9,7 +9,7 @@ const permalink = `${Astro.site.href}about`;
<BaseLayout title={title} description={description} permalink={permalink} current="about"> <BaseLayout title={title} description={description} permalink={permalink} current="about">
<div class="container"> <div class="container">
<h1>About</h1> <h1>About</h1>
<figure> <figure class="about-image">
<img src="/assets/about-illustration.webp" alt="Illustration of a notebook"> <img src="/assets/about-illustration.webp" alt="Illustration of a notebook">
<figcaption> <figcaption>
Illustration by Illustration by
@ -28,19 +28,19 @@ const permalink = `${Astro.site.href}about`;
</BaseLayout> </BaseLayout>
<style> <style>
figure { .about-image {
float: right; float: right;
margin: -3em -7em 2em 2em; margin: -3em -7em 2em 2em;
max-width: 300px; max-width: 300px;
} }
figure img { .about-image img {
border-radius: 8px; border-radius: 8px;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
@media (max-width: 1020px) { @media (max-width: 1020px) {
figure { .about-image {
float: none; float: none;
margin: 0 auto 2em; margin: 0 auto 2em;
} }

View File

@ -14,7 +14,7 @@ const permalink = Astro.site.href;
</div> </div>
<figure> <figure>
<img alt='Illustration of person reading a book' src='/assets/home-illustration.webp'> <img class="hero-image" alt="Illustration of person reading a book" src="/assets/home-illustration.webp" width="550">
<figcaption> <figcaption>
Illustration by Illustration by
<a href="https://icons8.com/illustrations/author/5c07e68d82bcbc0092519bb6" target="_blank" rel="noopener">Icons 8</a> <a href="https://icons8.com/illustrations/author/5c07e68d82bcbc0092519bb6" target="_blank" rel="noopener">Icons 8</a>
@ -60,7 +60,7 @@ const permalink = Astro.site.href;
text-align: left; text-align: left;
} }
img { .hero-image {
width: 100%; width: 100%;
max-width: 550px; max-width: 550px;
margin-bottom: 1em; margin-bottom: 1em;
@ -71,7 +71,7 @@ const permalink = Astro.site.href;
font-size: 1.2em; font-size: 1.2em;
} }
img { .hero-image {
max-width: 400px; max-width: 400px;
} }
} }