Compare commits

...

2 Commits

Author SHA1 Message Date
Bruno Carrión 3d9f3be436 More Safari hacks; 6 months ago
Bruno Carrión 35842ce42e Compatibiitat amb safari i retocs responsive; 6 months ago
  1. 12
      _data/products.yml
  2. 7
      _data/projects.yml
  3. 7
      _includes/navigation.html
  4. 14
      _layouts/default.html
  5. 4
      _layouts/post.html
  6. 2
      _layouts/workshop.html
  7. 20
      _sass/_images.scss
  8. 9
      archive.html
  9. 9
      assets/css/components/header.scss
  10. 150
      assets/css/pages/home.scss
  11. 42
      assets/css/pages/products.scss
  12. 57
      assets/css/pages/projects.scss
  13. 27
      assets/css/pages/workshops.scss
  14. BIN
      assets/images/992-704-max.jpg
  15. BIN
      assets/images/992-704-max.webp
  16. 0
      assets/images/logos/custom.png
  17. 0
      assets/images/logos/custom.webp
  18. BIN
      assets/images/logos/strapi.png
  19. BIN
      assets/images/logos/strapi.webp
  20. BIN
      assets/images/nosaltres.jpg
  21. BIN
      assets/images/nosaltres.png
  22. 24
      assets/js/utils/SectionScroller.js
  23. 4
      blog/index.html
  24. 38
      index.html
  25. 16
      products.html
  26. 19
      workshops.html

@ -1,22 +1,26 @@
- name: WordPress
- id: wordpress
name: WordPress
subtitle: La solució per als casos d'ús més comuns
description: "L'arxiconegut WordPress, el gran democratitzador de la web. WordPress és un sistema de gestió de contingut (CMS per les inicials en anglès) que permet una gestió intuïtiva de webs per les usuàries que vulguin publicar i actualitzar contingut de forma quotidiana. Un programari madur amb un ecosistema ric en plantilles d'aparença i extensions funcionals que permet personalitzar la nostra pàgina de mil maneres diferents, des d'una botiga online a un portal de notícies. Des de Còdec l'estimem per la seva gran versatilitat i l'autonomia que dona a les usuàries sense necessitat de coneixement tècnic, per la facilitat amb què permet tenir una pàgina web funcionant, per l'amplissima comunitat que té al darrere i per ser un dels casos d'èxit més sonats del món del programari lliure."
url: https://wordpress.org/
github: https://github.com/WordPress/WordPress
price: 450
- name: Jekyll
- id: jekyll
name: Jekyll
subtitle: Un generador minimalista de blogs i pàgines web
description: "Dissenyat com un generador de pàgines web estàtiques, és perfecte per pàgines amb poca necessitat d'actualització de continguts. El minimalisme de Jekyll no implica limitacions —disposa del seu propi sistema de plantilles i d'extensions funcionals— sinó que ofereix solucions simples a problemes per als què un CMS tradicional resultaria una opció sobredimensionada. El punt fort de Jekyll és que permet solucions senzilles i lleugeres sense necessitat de preocupar-se de bases de dades, d'actualitzacions periòdiques de programari, de llicències de plantilles ni de velocitats de càrrega, alhora que ofereix una major llibertat creativa, tant tècnica com gràfica."
url: https://jekyllrb.com/
github: https://github.com/jekyll/jekyll
price: 800
- name: Strapi
- id: strapi
name: Strapi
subtitle: Un CMS orientat a la gestió de dades
description: "Strapi és el que s'anomena un Headless CMS, o sistema de gestió de continguts escapçat. A diferència dels CMS clàssics (WordPress, Joomla, Drupal), Strapi no disposa d'un sistema de plantilles, o dit d'una altra manera, Strapi s'encarrega exclusivament de la gestió del contingut, però no de la seva presentació. En definitiva, si estàs buscant una eina de gestió digital distribuïda —eines de backoffice, de gestió corporativa, d'analytics— Strapi permet centrar-te més en què vols solucionar i menys en com ho vols solucionar."
url: https://strapi.io/
github: https://github.com/strapi/strapi
price: 1.500
- name: Programari a mida
- id: custom
name: Programari a mida
subtitle: Aprofita al màxim la plasticitat del medi digital i les seves infinites possibilitats
description: "Si tens una necessitat molt específica —un videojoc corporatiu, un visualitzador de dades, un sistema d'explotació d'un motor de càlcul, un editor de dades cartogràfiques, un sistema de transmissió de dades en temps real— proposa'ns-la i mirem com resoldre-ho. La web ens serveix com a interfície plàstica amb què interactuar, a través de la xarxa, amb la potència i versatilitat dels ordinadors convertits en servidors, ja que gairebé tots els dispositius digitals són capaços de comunicar-se via internet i disposen de visors de contingut web, independentment de sistemes operatius, models o marques. Tot el que puguis imaginar digitalitzat es pot convertir en aplicatiu web."
url: https://codeccoop.org

@ -1,15 +1,13 @@
- id: silviagenoves
url: https://www.silviagenoves.art/
name: Silvia Genovés Art
imagename: silviagenoves
description: Portafoli i plataforma e-commerce desenvolupada amb wordpress per l'artista multidisciplinar Silvia Genovés.
tags:
- Wordpress
- e-commerce
- id: to
- id: toetsav
url: https://www.to.upc.edu
name: TO ETSAV
imagename: toetsav
description: '<em>&#8220;El projecte TO vol qüestionar-se la idea de sostenibilitat: Què cal sostenir?&#8221;</em>. Pàgina web del projecte arquitectònic.'
tags:
- Programari a mida
@ -17,7 +15,6 @@
- id: kilometrezero
url: https://kilometrezero.org/
name: KilometreZero
imagename: kilometrezero
description: Plataforma de gestió d'inscripcions a esdeveniments esportius i publicació en viu de resultats.
tags:
- Programari a mida
@ -25,7 +22,6 @@
- id: vh3d
url: https://fem.vallhebron.com/#/?pieceId=2534
name: Vall d'Hebron 3D
imagename: vh3d
description: Videojoc col·laboratiu per a la presentació del nou Pla Estratègic 2021-2025 de la Vall d'Hebron
tags:
- Programari a mida
@ -33,7 +29,6 @@
- id: equinox
url: https://equinoxtrail.com
name: Equinox Trail
imagename: equinox
description: Pàgina web de la Equinox Trail, una lliga de dues curses de trail celebrada als dos equinoccis que atravessarem al llarg de l'any 2022
tags:
- Jekyll

@ -4,7 +4,12 @@
aria-label="main navigation"
>
<div class="navbar-brand">
<a aria-label="Inici" class="navbar-item" data-id="home" href="/#home"></a>
<a aria-label="Inici" class="navbar-item" data-id="home" href="/#home">
<picture>
<source srcset="{{ base.url }}/assets/images/logo-codec.png" type="image/png" />
<img src="{{ base.url }}/assets/images/logo-codec.webp" type="image/webp" alt="Logotip" />
</picture>
</a>
<a
role="button"

@ -14,23 +14,23 @@ layout: compress
<title>{{ page.title }}</title>
{% endif %}
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/styles.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/styles.css" />
<!-- favicons -->
<link rel="icon" type="image/png" href="{{ base.url | prepend: site.url }}/assets/images/favicons/32x32.png" />
<link rel="icon" type="image/png" href="{{ base.url }}/assets/images/favicons/32x32.png" />
<!-- For iPad -->
<link rel="icon" type="image/png" sizes="167x167" href="{{ base.url | prepend: site.url }}/assets/images/favicons/167x167.png" />
<link rel="icon" type="image/png" sizes="167x167" href="{{ base.url }}/assets/images/favicons/167x167.png" />
<!-- For iPhone -->
<link rel="icon" type="image/png" sizes="180x180" href="{{ base.url | prepend: site.url }}/assets/images/favicons/180x180.png" />
<link rel="icon" type="image/png" sizes="180x180" href="{{ base.url }}/assets/images/favicons/180x180.png" />
<!-- For Android -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ base.url | prepend: site.url }}/assets/images/favicons/192x192.png" />
<link rel="icon" type="image/png" sizes="48x48" href="{{ base.url | prepend: site.url }}/assets/images/favicons/48x48.png" />
<link rel="icon" type="image/png" sizes="192x192" href="{{ base.url }}/assets/images/favicons/192x192.png" />
<link rel="icon" type="image/png" sizes="48x48" href="{{ base.url }}/assets/images/favicons/48x48.png" />
{% feed_meta %} {% seo %} {% if jekyll.environment == "production" %}
<!-- <script src="my-analytics-script.js"></script> -->
{% endif %}
<script src="{{ base.url | prepend: site.url }}/assets/js/index.js"></script>
<script src="{{ base.url }}/assets/js/index.js"></script>
<style>
#loader {

@ -2,11 +2,11 @@
layout: default
---
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/pages/post.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/pages/post.css" />
<nav class="post__breadcrumb breadcrumb is-small has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li><a href="{{ base.url | prepend: site.url }}/blog/">Blog</a></li>
<li><a href="{{ base.url }}/blog/">Blog</a></li>
<li class="is-active"><a aria-current="page">{{ page.title }}</a></li>
</ul>
</nav>

@ -4,7 +4,7 @@ layout: default
<nav class="workshop__breadcrumb breadcrumb is-small has-arrow-separator" aria-label="breadcrumbs">
<ul>
<li><a href="{{ base.url | prepend: site.url }}/workshops.html#workshops">Tallers</a></li>
<li><a href="{{ base.url }}/workshops.html#workshops">Tallers</a></li>
<li class="is-active"><a aria-current="page">{{ page.title }}</a></li>
</ul>
</nav>

@ -1,3 +1,5 @@
@use "sass:string";
@mixin m-icon ($icon, $ext: png) {
$url: "/assets/images/icons/" + quote($icon) + "." + quote($ext);
@include m-background-image($url);
@ -9,3 +11,21 @@
background-position: $position;
background-size: $size;
}
@mixin m-background-image-set ($url, $exts...) {
$dotidx: str-index($url, ".");
$filename: str-slice($url, 0, $dotidx - 1);
@include m-background-image($url);
background-image: image-set(#{f-image-set($filename, $exts...)});
background-image: -webkit-image-set(#{f-image-set($filename, $exts...)});
}
@function f-image-set($url, $exts...) {
$set: '';
@each $ext in $exts {
$set: $set + "url(\"#{$url}.#{$ext}\") type(\"image/#{$ext}\"), "
}
$set: str-slice($set, 1, -3);
@return $set;
}

@ -4,10 +4,10 @@ title: Còdec | Projectes
page: archive
---
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/pages/projects.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/pages/projects.css" />
<div class="projects__content content">
<h1 class="projects__title title is-4">
<h1 class="projects__title title is-3">
Coneix els nostres projectes
<span class="subtitle">Arxiu</span>
</h1>
@ -15,7 +15,10 @@ 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}}.webp" alt="Poster del projecte {{ project.name }}">
<picture>
<source srcset="{{ base.url }}/assets/images/projects/{{ project.id }}.png" type="image/png" />
<img src="{{ base.url }}/assets/images/projects/{{ project.id }}.webp" type="image/webp" alt="Poster del projecte {{ project.name }}">
</picture>
</a>
<div class="projects__product-body">
<a href="{{project.url}}" target="_blank">

@ -36,7 +36,14 @@ header {
font-weight: bold;
text-decoration: none !important;
width: 90px;
@include m-background-image("/assets/images/logo-codec.webp");
picture {
display: flex;
img {
margin-top: 2px;
}
}
}
.navbar-item.is-active,

@ -89,6 +89,12 @@
}
}
.is-mobile & {
@media (max-height: 500px) {
font-size: 1.6875rem;
}
}
&:not(:last-child) {
margin-bottom: 2rem;
}
@ -186,6 +192,12 @@
&:hover {
transform: translate(-50%, -5px) rotate(315deg)
}
.is-mobile & {
width: 25px;
height: 25px;
border-width: 2px;
}
}
@ -196,39 +208,42 @@
margin-bottom: .5em;
}
img {
filter: grayscale(.5) drop-shadow(2px 2px 2px #0003);
filter: drop-shadow(2px 2px 2px #0003);
transition: filter 200ms ease-in;
width: 200px;
picture {
display: block;
.is-mobile & {
@media (orientation: portrait) {
width: 50vw;
img {
filter: grayscale(.5) drop-shadow(2px 2px 2px #0003);
filter: drop-shadow(2px 2px 2px #0003);
transition: filter 200ms ease-in;
width: 200px;
@media (max-height: 500px) {
width: 40vw;
.is-mobile & {
@media (orientation: portrait) {
width: 50vw;
@media (max-height: 500px) {
width: 40vw;
}
}
}
}
&:active {
filter: drop-shadow(0px 0px 0px transparent);
}
&:active {
filter: drop-shadow(0px 0px 0px transparent);
}
@include m-media(xsm) {
width: 240px;
}
@include m-media(xsm) {
width: 240px;
}
@include m-media(sm) {
width: 300px;
}
@include m-media(sm) {
width: 300px;
}
@media screen and (max-height: 750px){
width: 200px;
@media screen and (max-height: 750px){
width: 200px;
}
}
}
}
.home__section-row {
&:not(:last-child) {
@ -238,10 +253,18 @@
@include m-media(zr, sm) {
padding-bottom: 1em;
@media (max-height: 500px) {
padding-bottom: .5em;
}
}
@media (orientation: portrait) {
padding-bottom: 1em;
@media (max-height: 500px) {
padding-bottom: .5em;
}
}
}
@ -250,10 +273,18 @@
@include m-media(zr, sm) {
padding-top: 1em;
@media (max-height: 500px) {
padding-top: .5em;
}
}
@media (orientation: portrait) {
padding-top: 1em;
@media (max-height: 500px) {
padding-top: .5em;
}
}
}
@ -285,6 +316,10 @@
.title {
font-size: ms(1);
margin-bottom: .5em;
@media (max-height: 500px) {
margin-bottom: .2em;
}
}
.subtitle {
@ -299,6 +334,11 @@
@media (orientation: portrait) {
.title {
font-size: ms(1);
margin-bottom: .5em;
@media (max-height: 500px) {
margin-bottom: .2em;
}
}
.subtitle {
@ -335,11 +375,19 @@
.home__section-row {
flex-flow: column-reverse;
}
.home__section-column:first-child {
padding-top: 0px;
}
}
.home__us {
.title {
margin-bottom: .5rem;
@media (orientation: portrait) and (max-height: 500px) {
margin-top: 1em;
}
}
.is-mobile & {
@ -358,22 +406,6 @@
border: 3px solid white;
border-radius: 5px;
@mixin m-height-breakpoints {
height: 150px;
@include m-media(xxsm) {
height: 250px;
}
@include m-media(xsm) {
height: 300px;
}
@include m-media(md) {
height: 400px;
}
}
&:hover {
.home__team-picture {
width: 100%;
@ -381,7 +413,11 @@
}
.home__profiles {
@include m-height-breakpoints();
height: 40vh;
@media (orientation: portrait) {
height: 25vh;
}
.home__profile {
h5, p {
@ -397,11 +433,23 @@
}
.home__team-picture {
display: block;
width: 100%;
border-radius: 5px;
transition: height 400ms ease-in-out;
@include m-background-image("/assets/images/nosaltres.webp", cover);
@include m-height-breakpoints();
height: 40vh;
@media (orientation: portrait) {
height: 25vh;
}
> img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 5px;
}
}
.home__profiles {
@ -493,7 +541,7 @@
padding-bottom: 2rem;
@media screen and (max-height: 520px) {
padding-bottom: 1rem;
padding-bottom: 1.5rem;
}
}
@ -541,11 +589,17 @@
margin-top: 2rem;
}
.projects__product-tags li{
display: inline;
.projects__product-tags {
@media (orientation: portrait) and (max-height: 500px) {
display: none;
}
li {
display: inline;
&:not(:first-child){
margin-left: 7px;
&:not(:first-child){
margin-left: 7px;
}
}
}
}

@ -9,39 +9,24 @@
main.products {
padding: $header-height $site-paddings 175px;
.products__title {
margin-top: 0px;
height: 110px;
.products__title {
margin-top: 25px;
font-weight: 500;
line-height: .9;
display: flex;
flex-direction: column;
justify-content: end;
padding-bottom: 10px;
.is-mobile & {
height: 75px;
}
@include m-media(zr, xxsm) {
margin-top: 6px;
}
@include m-media(xxsm) {
margin-top: 3px;
}
margin-top: 0px;
@include m-media(sm) {
font-size: 2.5rem;
margin-top: 5px;
@media (max-height: 500px) {
font-size: 1.6875rem;
}
}
.subtitle {
display: block;
@include m-media(zr, md) {
font-size: 1rem;
}
}
}
@ -81,10 +66,17 @@ main.products {
display: flex;
align-items: center;
> img {
max-height: 100%;
max-width: 40vw;
}
picture {
width: 100%;
height: 100%;
display: flex;
align-items: center;
> img {
max-height: 100%;
max-width: 40vw;
}
}
}
}
}

@ -9,45 +9,23 @@ main.archive {
min-height: 100vh;
.projects__title {
margin-top: 15px;
height: 110px;
margin-top: 25px;
font-weight: 500;
line-height: .9;
display: flex;
flex-direction: column;
justify-content: end;
padding-bottom: 10px;
.is-mobile & {
height: 75px;
}
@include m-media(zr, xsm) {
margin-top: 5px;
}
@media screen and (min-width: 0px) and (max-width: 340px) {
margin-top: 15px;
}
@include m-media(xsm) {
margin-top: 0px;
}
@include m-media(sm) {
margin-top: 5px;
}
@include m-media(md) {
font-size: 2.5rem;
@media (max-height: 500px) {
font-size: 1.6875rem;
}
}
.subtitle {
display: block;
@include m-media(zr, md) {
font-size: 1rem;
}
}
}
}
@ -94,16 +72,23 @@ main.archive {
display: block;
width: 100%;
> img {
object-fit: cover;
object-position: left top;
width: 100%;
height: 40vw;
box-shadow: 0px 0px 6px #0003;
border-radius: 2px;
@include m-media(md) {
height: 20vw;
picture {
display: flex;
align-items: center;
justify-content: center;
> img {
object-fit: cover;
object-position: left top;
width: 100%;
height: 40vw;
box-shadow: 0px 0px 6px #0003;
border-radius: 2px;
height: 30vw;
@include m-media(md) {
height: 20vw;
}
}
}
}

@ -13,42 +13,23 @@ main.workshops {
min-height: 100vh;
.workshops__title {
margin-top: 15px;
height: 110px;
margin-top: 25px;
font-weight: 500;
line-height: .9;
display: flex;
flex-direction: column;
justify-content: end;
padding-bottom: 10px;
.is-mobile & {
height: 75px;
}
@include m-media(zr, xxsm) {
margin-top: 15px;
}
@include m-media(xxsm) {
margin-top: 10px;
}
@include m-media(xsm) {
margin-top: 0px;
}
@include m-media(md) {
margin-top: 10px;
font-size: 2.5rem;
@media (max-height: 500px) {
font-size: 1.6875rem;
}
}
.subtitle {
display: block;
@include m-media(zr, md) {
font-size: 1rem;
}
}
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 212 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 130 KiB

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 335 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 451 KiB

@ -31,10 +31,26 @@ var SectionSnapScroller = (function () {
height = getContentHeight();
span.style.height = height + "px";
});
screen.orientation.addEventListener("change", function () {
height = getContentHeight();
span.style.height = height + "px";
});
if (screen.orientation) {
screen.orientation.addEventListener("change", function () {
height = getContentHeight();
span.style.height = height + "px";
});
} else {
(function () {
var orientation =
window.innerWidth > window.innerHeight ? "landscape" : "portrait";
window.addEventListener("resize", function () {
var _orientation =
window.innerWidth > window.innerHeight ? "landscape" : "portrait";
if (orientation !== _orientation) {
height = getContentHeight();
span.style.height = height + "px";
orientation = _orientation;
}
});
})();
}
span.style.height = height + "px";
viewport.appendChild(span);

@ -4,7 +4,7 @@ title: Còdec | Blog
page: blog
---
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/pages/blog.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/pages/blog.css" />
<div class="blog__banner"></div>
<h3 class="blog__title title is-3">El blog de Còdec</h3>
@ -59,4 +59,4 @@ page: blog
</div>
{% endif %}
<script src="{{ base.url | prepend: site.url }}/assets/js/pages/blog.js"></script>
<script src="{{ base.url }}/assets/js/pages/blog.js"></script>

@ -4,8 +4,8 @@ title: Còdec
page: home
---
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/pages/home.css" />
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/pages/projects.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/pages/home.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/pages/projects.css" />
<section id="home" class="home__section">
<div class="home__landing">
<div class="home__brand"></div>
@ -19,11 +19,16 @@ page: home
<div class="home__section-column column is-8">
<h3 class="title is-3">Codifiquem la web</h3>
<h4 class="subtitle is-5">Convertim el teu projecte en codi</h4>
<a class="button is-link" href="{{ base.url | prepend: site.url }}/products.html"><b>Fes la teva web amb nosaltres!</b></a>
<a class="button is-link" href="{{ base.url }}/products.html"><b>Fes la teva web amb nosaltres!</b></a>
</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.webp" alt="Il·lustració de la secció 'codifiquem la web'" /></a>
<a href="{{ base.url }}/products.html">
<picture>
<source srcset="{{ base.url }}/assets/images/developer.png" type="image/png" />
<img src="{{ base.url }}/assets/images/developer.webp" type="image/webp" alt="Il·lustració de la secció 'codifiquem la web'" />
</picture>
</a>
</figure>
</div>
</div>
@ -33,12 +38,17 @@ page: home
<h4 class="subtitle is-5">
Treballem per fer-la accessible i inclusiva
</h4>
<a class="button is-link" href="{{ base.url | prepend: site.url }}/workshops.html"><b>Descobreix els nostres tallers</b>
<a class="button is-link" href="{{ base.url }}/workshops.html"><b>Descobreix els nostres tallers</b>
</a>
</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.webp" alt="Il·lustració de la secció 'decodifiquem la tecnologia'" /></a>
<a href="{{ base.url }}/workshops.html">
<picture>
<source srcset="{{ base.url }}/assets/images/learning.png" type="image/png" />
<img src="{{ base.url }}/assets/images/learning.webp" type="image/webp" alt="Il·lustració de la secció 'decodifiquem la tecnologia'" />
</picture>
</a>
</figure>
</div>
</div>
@ -55,9 +65,7 @@ page: home
<p class="us__information-description">Treballem per una digitalització a escala humana i amb caràcter comunitari. <span class="hiddable">Naixem amb voluntat de desenvolupar productes i serveis digitals des de la cultura del programari lliure.</span></p>
<h3 class="title is-6 us__information-toggle-btn" role="button" aria-pressed="false" tabindex="0">Tecnologia i cultura lliure</h3>
<p class="us__information-description">Volem ser espai de reflexió i formació crítica al voltant de la informàtica. <span class="hiddable">Solucions simples a problemes simples, apropiables, accessibles i inclusives per garantir una tecnologia útil i
empoderadora a escala local i comunitària. A favor de la creació
entesa com a procés col·lectiu i comunitari basat en la còpia, la
reutilització i la reapropiació.</span></p>
empoderadora a escala local i comunitària.</span></p>
<h3 class="title is-6 us__information-toggle-btn" role="button" aria-pressed="false" tabindex="0">Autoocupació cooperativa</h3>
<p class="us__information-description">
Apostem per projectes d'ocupació a través de la cooperació per
@ -69,7 +77,10 @@ page: home
</div>
<div class="home__section-column column is-6">
<div class="home__profiles-wrapper">
<div class="home__team-picture" role="img" aria-label="Fotografia de l'equip"></div>
<picture class="home__team-picture">
<source srcset="{{ base.url }}/assets/images/nosaltres.png" type="image/png" />
<img src="{{ base.url }}/assets/images/nosaltres.webp" type="image/webp" alt="Fotografia de l'equip" />
</picture>
<div class="home__profiles">
<div class="home__profile lucas">
<h5 class="title is-5">Lucas García</h4>
@ -94,7 +105,10 @@ 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}}.webp" alt="Poster del projecte {{ project.name }}">
<picture>
<source srcset="{{ base.url }}/assets/images/projects/{{ project.id }}.png" type="image/png" />
<img src="{{ base.url }}/assets/images/projects/{{ project.id }}.webp" type="image/webp" alt="Poster del projecte {{ project.name }}">
</picture>
</a>
<div class="projects__product-body">
<a href="{{project.url}}" target="_blank">
@ -118,4 +132,4 @@ page: home
{% include footer.html %}
</section>
<script src="{{ base.url | prepend: site.url }}/assets/js/pages/home.js"></script>
<script src="{{ base.url }}/assets/js/pages/home.js"></script>

@ -4,9 +4,9 @@ title: Còdec | Productes
page: products
---
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/pages/products.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/pages/products.css" />
<div class="products__content content">
<h1 class="products__title title is-4">
<h1 class="products__title title is-3">
Codifiquem la web
<span class="subtitle">Solucions digitals</span>
</h1>
@ -30,7 +30,10 @@ page: products
</p>
</div>
<div class="products__image column is-4">
<img src="{{ base.url | prepend: site.url }}/assets/images/products.webp" alt="Il·lustració de la secció de productes"/>
<picture>
<source srcset="{{ base.url }}/assets/images/products.png" type="image/png" />
<img src="{{ base.url }}/assets/images/products.webp" type="image/webp" alt="Il·lustració de la secció de productes"/>
</picture>
</div>
</div>
<hr />
@ -39,7 +42,10 @@ 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 }}.webp" alt="Logotip del producte {{product.name }}"/>
<picture>
<source srcset="{{ base.url }}/assets/images/logos/{{ product.id }}.png" type="image/png" />
<img src="{{ base.url }}/assets/images/logos/{{product.id }}.webp" type="image/webp" alt="Logotip del producte {{product.name }}"/>
</picture>
</p>
</a>
</figure>
@ -67,4 +73,4 @@ page: products
</article>
{% endfor %}
</div>
<script src="{{ base.url | prepend: site.url }}/assets/js/pages/products.js"></script>
<script src="{{ base.url }}/assets/js/pages/products.js"></script>

@ -4,9 +4,9 @@ title: Còdec | Tallers
page: workshops
---
<link rel="stylesheet" href="{{ base.url | prepend: site.url }}/assets/css/pages/workshops.css" />
<link rel="stylesheet" href="{{ base.url }}/assets/css/pages/workshops.css" />
<div class="workshops__content content">
<h1 class="workshops__title title is-4">
<h1 class="workshops__title title is-3">
Descodifiquem la informàtica
<span class="subtitle">Tallers i formacions</span>
</h1>
@ -28,7 +28,10 @@ page: workshops
</p>
</div>
<div class="workshops__image column is-3">
<img src="{{ base.url | prepend: site.url }}/assets/images/workshops.webp" alt="Il·lustració de la pàgina de tallers"/>
<picture>
<source srcset="{{ base.url }}/assets/images/workshops.png" type="image/png" />
<img src="{{ base.url }}/assets/images/workshops.webp" type="image/webp" alt="Il·lustració de la pàgina de tallers"/>
</picture>
</div>
</div>
<div id="workshops" class="workshops__items">
@ -39,7 +42,10 @@ 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 }}.webp" alt="Logotip del taller {{ workshop.title}}"/>
<picture>
<source srcset="{{ base.url }}/assets/images/workshops/{{ workshop.id | downcase }}.png" type="image/png" />
<img src="{{ base.url }}/assets/images/workshops/{{workshop.id | downcase }}.webp" type="image/webp" alt="Logotip del taller {{ workshop.title}}"/>
</picture>
</p>
</figure>
<div class="workshops__workshop-description media-content">
@ -52,7 +58,10 @@ 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.webp" alt="work in progress" />
<picture>
<source srcset="{{ base.url }}/assets/images/wip.png" type="image/png" />
<img src="{{ base.url }}/assets/images/wip.webp" type="image/webp" alt="work in progress" />
</picture>
</figure>
{% endif %}
</div>

Loading…
Cancel
Save