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

View File

@ -14,7 +14,7 @@ const permalink = Astro.site.href;
</div>
<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>
Illustration by
<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;
}
img {
.hero-image {
width: 100%;
max-width: 550px;
margin-bottom: 1em;
@ -71,7 +71,7 @@ const permalink = Astro.site.href;
font-size: 1.2em;
}
img {
.hero-image {
max-width: 400px;
}
}