Fixed img css
This commit is contained in:
parent
7006f071a9
commit
2fc2eec9e1
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="astro/client" />
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user