Optimize images with parcel
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
6d2c248f6e
commit
7b78e54571
8 changed files with 277 additions and 12 deletions
10
src/components/img.html
Normal file
10
src/components/img.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<script props>
|
||||
module.exports = {
|
||||
src: props.src
|
||||
}
|
||||
</script>
|
||||
<picture>
|
||||
<source srcset="{{src}}?as=avif" type="image/avif" />
|
||||
<source srcset="{{src}}?as=webp" type="image/webp" />
|
||||
<img src="{{src}}" attributes />
|
||||
</picture>
|
|
@ -10,7 +10,7 @@
|
|||
<a href="/src/who_we_are.html#{{person}}" hx-get="/partials/who_we_are.html" hx-push-url="/who_we_are.html#{{person}}"
|
||||
hx-swap="innerHtml show:#{{person}}:top">
|
||||
<div class="figure">
|
||||
<img src="/assets/{{person}}.jpg" class="person">
|
||||
<x-img src="/assets/{{person}}.jpg" class="person">
|
||||
</div>
|
||||
</a>
|
||||
<svg height="4rem" width="4rem" viewBox="0 0 4 4" style="min-width: 4rem;">
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
</x-interest>
|
||||
<x-interest class="project-alt" person="richard">
|
||||
<fill:img>
|
||||
<img src="/assets/dancerush.png">
|
||||
<x-img src="/assets/dancerush.png">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
@ -37,7 +37,7 @@
|
|||
</x-interest>
|
||||
<x-interest person="tyson">
|
||||
<fill:img>
|
||||
<img src="/assets/rimworld.jpg">
|
||||
<x-img src="/assets/rimworld.jpg">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
@ -69,7 +69,7 @@
|
|||
</x-interest>
|
||||
<x-interest person="tyson">
|
||||
<fill:img>
|
||||
<img src="/assets/h1000.webp">
|
||||
<x-img src="/assets/h1000.webp">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
@ -95,7 +95,7 @@
|
|||
</x-interest>
|
||||
<x-interest class="project-alt" person="isaac">
|
||||
<fill:person>
|
||||
<img src="/assets/isaac.jpg" class="person">
|
||||
<x-img src="/assets/isaac.jpg" class="person">
|
||||
</fill:person>
|
||||
<fill:description>
|
||||
<markdown>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
</x-section-head>
|
||||
<x-project id="richard">
|
||||
<fill:img>
|
||||
<img src="/assets/richard.jpg" class="person">
|
||||
<x-img src="/assets/richard.jpg" class="person">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
@ -38,7 +38,7 @@
|
|||
</x-project>
|
||||
<x-project class="project-alt" id="tyson">
|
||||
<fill:img>
|
||||
<img src="/assets/tyson.jpg" class="person">
|
||||
<x-img src="/assets/tyson.jpg" class="person">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
@ -70,7 +70,7 @@
|
|||
</x-project>
|
||||
<x-project id="gunnar">
|
||||
<fill:img>
|
||||
<img src="/assets/gunnar.jpg" class="person">
|
||||
<x-img src="/assets/gunnar.jpg" class="person">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
@ -108,7 +108,7 @@
|
|||
</x-project>
|
||||
<x-project class="project-alt" id="khayden">
|
||||
<fill:img>
|
||||
<img src="/assets/khayden.jpg" class="person">
|
||||
<x-img src="/assets/khayden.jpg" class="person">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
@ -138,7 +138,7 @@
|
|||
</x-project>
|
||||
<x-project id="isaac">
|
||||
<fill:img>
|
||||
<img src="/assets/isaac.jpg" class="person">
|
||||
<x-img src="/assets/isaac.jpg" class="person">
|
||||
</fill:img>
|
||||
<fill:title>
|
||||
<markdown>
|
||||
|
|
|
@ -236,7 +236,10 @@ blockquote {
|
|||
}
|
||||
|
||||
.figure {
|
||||
&>* {
|
||||
|
||||
img,
|
||||
p,
|
||||
svg {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue