Update links to images with webp extension;

main
Bruno Carrión 6 months ago
parent 71819c2b88
commit fff4c07c5b
  1. 2
      archive.html
  2. 7
      assets/css/components/footer.scss
  3. 4
      assets/css/components/header.scss
  4. 2
      assets/css/pages/home.scss
  5. 8
      index.html
  6. 4
      products.html
  7. 6
      workshops.html

@ -13,7 +13,7 @@ page: archive
{% for project in site.data.projects %}
<article name="{{project.name}}" class="projects__product">
<a href="{{ project.url }}" target="_blank">
<img src="{{ base.url | prepend: site.url }}/assets/images/projects/{{project.imagename}}.png">
<img src="{{ base.url | prepend: site.url }}/assets/images/projects/{{project.imagename}}.webp" alt="Poster del projecte {{ project.name }}">
</a>
<div class="projects__product-body">
<a href="{{project.url}}" target="_blank">

@ -2,6 +2,7 @@
---
@import "reset";
@import "colors";
@import "breakpoints";
#pageFooter,
@ -66,5 +67,11 @@
}
}
}
.contact__submit-field .button {
color: white;
background-color: $orange-peel;
border-color: $orange-peel;
}
}
}

@ -36,7 +36,7 @@ header {
font-weight: bold;
text-decoration: none !important;
width: 90px;
@include m-background-image("/assets/images/logo-codec.png");
@include m-background-image("/assets/images/logo-codec.webp");
}
.navbar-item.is-active,
@ -81,7 +81,7 @@ header {
$icons: email, mastodon, twitter, telegram, github;
@each $icon in $icons {
&[data-link="#{$icon}"] {
background-image: url("/assets/images/icons/#{$icon}.png");
background-image: url("/assets/images/icons/#{$icon}.webp");
}
}

@ -400,7 +400,7 @@
width: 100%;
border-radius: 5px;
transition: height 400ms ease-in-out;
@include m-background-image("/assets/images/nosaltres-r.jpg", cover);
@include m-background-image("/assets/images/nosaltres.webp", cover);
@include m-height-breakpoints();
}

@ -21,7 +21,7 @@ page: home
</div>
<div class="home__section-column img-column column is-4">
<figure>
<a href="{{ base.url | prepend: site.url }}/products.html"><img src="{{ base.url | prepend: site.url }}/assets/images/developer.png" /></a>
<a href="{{ base.url | prepend: site.url }}/products.html"><img src="{{ base.url | prepend: site.url }}/assets/images/developer.webp" alt="Il·lustració de la secció 'codifiquem la web'" /></a>
</figure>
</div>
</div>
@ -36,7 +36,7 @@ page: home
</div>
<div class="home__section-column img-column column is-4">
<figure>
<a href="{{ base.url | prepend: site.url }}/workshops.html"><img src="{{ base.url | prepend: site.url }}/assets/images/learning.png" /></a>
<a href="{{ base.url | prepend: site.url }}/workshops.html"><img src="{{ base.url | prepend: site.url }}/assets/images/learning.webp" alt="Il·lustració de la secció 'decodifiquem la tecnologia'" /></a>
</figure>
</div>
</div>
@ -67,7 +67,7 @@ page: home
</div>
<div class="home__section-column column is-6">
<div class="home__profiles-wrapper">
<div class="home__team-picture"></div>
<div class="home__team-picture" role="img" aria-label="Fotografia de l'equip"></div>
<div class="home__profiles">
<div class="home__profile lucas">
<h5 class="title is-5">Lucas García</h4>
@ -92,7 +92,7 @@ page: home
{% for project in home_projects %}
<article name="{{project.name}}" class="projects__product">
<a href="{{ project.url }}" target="_blank">
<img src="{{ base.url | prepend: site.url }}/assets/images/projects/{{project.imagename}}.png">
<img src="{{ base.url | prepend: site.url }}/assets/images/projects/{{project.imagename}}.webp" alt="Poster del projecte {{ project.name }}">
</a>
<div class="projects__product-body">
<a href="{{project.url}}" target="_blank">

@ -29,7 +29,7 @@ page: products
</p>
</div>
<div class="products__image column is-4">
<img src="{{ base.url | prepend: site.url }}/assets/images/products.png" />
<img src="{{ base.url | prepend: site.url }}/assets/images/products.webp" alt="Il·lustració de la secció de productes"/>
</div>
</div>
<hr />
@ -38,7 +38,7 @@ page: products
<figure class="products__product-badge media-left">
<a href="{{ product.url }}" target="__blank">
<p class="image is-128x128">
<img src="{{ base.url | prepend: site.url }}/assets/images/logos/{{product.name | downcase }}.png" />
<img src="{{ base.url | prepend: site.url }}/assets/images/logos/{{product.name | downcase }}.webp" alt="Logotip del producte {{product.name }}"/>
</p>
</a>
</figure>

@ -27,7 +27,7 @@ page: workshops
</p>
</div>
<div class="workshops__image column is-3">
<img src="{{ base.url | prepend: site.url }}/assets/images/workshops.png" />
<img src="{{ base.url | prepend: site.url }}/assets/images/workshops.webp" alt="Il·lustració de la pàgina de tallers"/>
</div>
</div>
<div id="workshops" class="workshops__items">
@ -38,7 +38,7 @@ page: workshops
<article id="{{ workshop.id }}" class="workshops__item media">
<figure class="workshops__sorkshop-badge media-left">
<p class="image is-128x128">
<img src="{{ base.url | prepend: site.url }}/assets/images/workshops/{{workshop.id | downcase }}.png" />
<img src="{{ base.url | prepend: site.url }}/assets/images/workshops/{{workshop.id | downcase }}.webp" alt="Logotip del taller {{ workshop.title}}"/>
</p>
</figure>
<div class="workshops__workshop-description media-content">
@ -51,7 +51,7 @@ page: workshops
{% else %}
<figure class="workshops__work-in-progress">
<figcaption>Estem treballant en el contingut d'aquesta secció.</figcaption>
<img src="{{ base.url | prepend: site.url }}/assets/images/wip.png" alt="work in progress" />
<img src="{{ base.url | prepend: site.url }}/assets/images/wip.webp" alt="work in progress" />
</figure>
{% endif %}
</div>

Loading…
Cancel
Save