Compare commits

...

44 Commits

Author SHA1 Message Date
Bruno Carrión 12a6180dac Update projects URLs to point to dadescomunals; Little respnsive fix on home.css 6 months ago
Bruno Carrión c88721f54f Millores al scroll; Mes responsive; 6 months ago
Bruno Carrión ef9e6375a9 Updates on SectionScroller and home.css; 6 months ago
Bruno Carrión abbb1d0554 Retalls de text responsive; 6 months ago
Pau 816e05ca67 canvis medias query team section 6 months ago
Bruno Carrión 96e6a75086 Add eslint as package; Add isTouchEnabled function; 6 months ago
Bruno Carrión 6d83c3ca71 Responsive de les ilustracions de les pagines de productes i tallers; 6 months ago
Bruno Carrión 3d9f3be436 More Safari hacks; 6 months ago
Bruno Carrión 35842ce42e Compatibiitat amb safari i retocs responsive; 6 months ago
Bruno Carrión 8b3c4b8dc1 Include projects.css in index.html as dependency 6 months ago
Bruno Carrión 91e1acbfa2 Add aria labels to links; Progressive loading of pages css; Font swap display; 6 months ago
Bruno Carrión 2923740b36 Add uglify plugin and bundle scripts into index.js; Add minify html layout; 6 months ago
Bruno Carrión fff4c07c5b Update links to images with webp extension; 6 months ago
Bruno Carrión 71819c2b88 Translate images to webp and remove unusded images; 6 months ago
Bruno Carrión 6f1d98c898 Add package.json file 6 months ago
Bruno Carrión fc255faf1f Add PostCSS processor; 6 months ago
Bruno Carrión 7b6bdb52c2 Merge branch 'dev-lucas' into develop 6 months ago
Bruno Carrión ff31cd5b45 Speed up landing animation; 6 months ago
Bruno Carrión b45266f16c Merge branch 'dev-lucas' into develop 6 months ago
Bruno Carrión 730f9df3cb Fix archive links 6 months ago
Bruno Carrión 29ea910b88 Merge branch 'dev-lucas' into develop 6 months ago
Bruno Carrión 1445058ce0 Rename projects to archive; Fix sctionScroll inline styles setup on mobile; 6 months ago
Bruno Carrión be392c65aa Merge branch 'dev-lucas' into develop 6 months ago
Bruno Carrión 6e6c6d18e3 Fix SectionScroller; 6 months ago
Bruno Carrión f907905a72 Animació i responsive; 6 months ago
Bruno Carrión 66fe9dc747 Add equinox 6 months ago
Bruno Carrión 73c7248fa8 Fix navigation links; Add loader; Fix product's call-to-action; 6 months ago
Bruno Carrión b4455be7a9 Fix html bugs 6 months ago
Bruno Carrión db7190d57e resolve conflict 6 months ago
Bruno Carrión bdee38ea82 cover updates; 6 months ago
Pau 5bbcbd3a3a canvis tamanys imatges projectes 6 months ago
Pau 4cafc92a2d canvis estils nosaltres 6 months ago
Bruno Carrión e7db43f083 Evolucio de la landing; 6 months ago
Bruno Carrión 2b02a6bf65 Add landing gif 6 months ago
Bruno Carrión d5a48ff004 portada 7 months ago
Bruno Carrión fe95c27c23 moltes coses 7 months ago
Pau adbb2f24d3 cavis backgrounds portada 7 months ago
Pau 2c23e813aa canvis media query seccio us 7 months ago
Bruno Carrión 0039404cb9 Merge branch 'dev-lucas' into develop 7 months ago
Pau cd180a4247 canvis portada Pau 7 months ago
Bruno Carrión 7bce238948 New us picture layout; Add link to products badge; 7 months ago
Bruno Carrión 81f2e4df4c Fix self url reference on products.yml; 7 months ago
Bruno Carrión 2b041f31f2 Setup contact form; 7 months ago
Bruno Carrión 7ec85ff2ef Exclude dist.zip from git; 7 months ago
  1. 7
      .browserslistrc
  2. 13
      .eslintrc.js
  3. 2
      .gitignore
  4. 14
      .prettierrc.json
  5. 2
      Gemfile
  6. 6
      Gemfile.lock
  7. 4
      _config.yml
  8. 15
      _data/navigation.yml
  9. 20
      _data/products.yml
  10. 22
      _data/projects.yml
  11. 65
      _includes/contact.html
  12. 6
      _includes/footer.html
  13. 14
      _includes/navigation.html
  14. 10
      _layouts/compress.html
  15. 46
      _layouts/default.html
  16. 4
      _layouts/post.html
  17. 2
      _layouts/workshop.html
  18. 9
      _plugins/uglify.rb
  19. 20
      _sass/_images.scss
  20. 1
      _sass/_reset.scss
  21. 1
      _sass/_typography.scss
  22. 39
      api/email_form.php
  23. 13
      archive.html
  24. 77
      assets/css/components/footer.scss
  25. 16
      assets/css/components/header.scss
  26. 697
      assets/css/pages/home.scss
  27. 67
      assets/css/pages/products.scss
  28. 111
      assets/css/pages/projects.scss
  29. 44
      assets/css/pages/workshops.scss
  30. 20
      assets/css/styles.scss
  31. BIN
      assets/images/992-704-max.jpg
  32. BIN
      assets/images/cdrom.webp
  33. 97
      assets/images/codec-bg-2.svg
  34. 2202
      assets/images/codec-bg.svg
  35. BIN
      assets/images/developer.webp
  36. 2233
      assets/images/generic-bg.svg
  37. BIN
      assets/images/icons/email.webp
  38. BIN
      assets/images/icons/github.png
  39. BIN
      assets/images/icons/github.webp
  40. BIN
      assets/images/icons/mastodon.webp
  41. BIN
      assets/images/icons/telegram.webp
  42. BIN
      assets/images/icons/twitter.webp
  43. BIN
      assets/images/icons/webpage.png
  44. BIN
      assets/images/icons/webpage.webp
  45. BIN
      assets/images/learning.webp
  46. BIN
      assets/images/logo-codec.png
  47. BIN
      assets/images/logo-codec.webp
  48. BIN
      assets/images/logos/custom.png
  49. BIN
      assets/images/logos/custom.webp
  50. BIN
      assets/images/logos/jekyll.webp
  51. BIN
      assets/images/logos/programari a mida.png
  52. BIN
      assets/images/logos/strapi.png
  53. BIN
      assets/images/logos/strapi.webp
  54. BIN
      assets/images/logos/wordpress.webp
  55. BIN
      assets/images/lucas-sticker.png
  56. BIN
      assets/images/lucas.jpg
  57. BIN
      assets/images/lucas.png
  58. 95
      assets/images/nosaltres-bg.svg
  59. BIN
      assets/images/nosaltres-r.jpg
  60. BIN
      assets/images/nosaltres.jpg
  61. BIN
      assets/images/nosaltres.png
  62. BIN
      assets/images/nosaltres.webp
  63. BIN
      assets/images/nosaltres2.jpg
  64. BIN
      assets/images/path1241.png
  65. BIN
      assets/images/pau-sticker.jpg
  66. BIN
      assets/images/pau-sticker.png
  67. BIN
      assets/images/pau.jpg
  68. BIN
      assets/images/products.webp
  69. BIN
      assets/images/projects/equinox.png
  70. BIN
      assets/images/projects/equinox.webp
  71. BIN
      assets/images/projects/hemeroteca-oberta.png
  72. BIN
      assets/images/projects/hemeroteca-oberta.webp
  73. BIN
      assets/images/projects/kilometrezero.png
  74. BIN
      assets/images/projects/kilometrezero.webp
  75. BIN
      assets/images/projects/silviagenoves.png
  76. BIN
      assets/images/projects/silviagenoves.webp
  77. BIN
      assets/images/projects/toetsav.png
  78. BIN
      assets/images/projects/toetsav.webp
  79. BIN
      assets/images/projects/vh3d.png
  80. BIN
      assets/images/projects/vh3d.webp
  81. BIN
      assets/images/wip.webp
  82. BIN
      assets/images/workshops.webp
  83. BIN
      assets/images/yunohost-logo.webp
  84. 250
      assets/js/components/contact.js
  85. 6
      assets/js/components/footer.js
  86. 182
      assets/js/components/header.js
  87. 21
      assets/js/index.js
  88. 10
      assets/js/main.js
  89. 336
      assets/js/pages/home.js
  90. 70
      assets/js/pages/products.js
  91. 11
      assets/js/pages/projects.js
  92. 11
      assets/js/pages/workshops.js
  93. 845
      assets/js/utils/SectionScroller.js
  94. 49
      assets/js/utils/background-patterns.js
  95. 8
      assets/js/utils/device-detect.js
  96. 6
      assets/js/utils/easees.js
  97. 4
      assets/js/utils/loader.js
  98. 5
      assets/js/utils/viewport.js
  99. 4
      blog/index.html
  100. 201
      index.html
  101. Some files were not shown because too many files have changed in this diff Show More

@ -0,0 +1,7 @@
defaults
maintained node versions
not ie < 11
last 2 versions
> 1%
iOS 7
last 3 iOS versions

@ -0,0 +1,13 @@
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ["airbnb-base"],
parserOptions: {
ecmaVersion: "latest",
},
rules: {
arrowParens: "as-needed",
},
};

2
.gitignore vendored

@ -3,4 +3,6 @@ _site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
dist.zip
node_modules/

@ -0,0 +1,14 @@
{
"parser": "babel",
"printWidth": 90,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
"rangeStart": 0,
"rangeEnd": null
}

@ -12,4 +12,6 @@ group :jekyll_plugins do
gem 'jekyll-feed'
gem 'jekyll-seo-tag'
gem 'jekyll-paginate'
gem 'jekyll-postcss'
gem "uglifier"
end

@ -9,6 +9,7 @@ GEM
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7)
execjs (2.8.1)
ffi (1.15.5)
forwardable-extended (2.6.0)
http_parser.rb (0.8.0)
@ -32,6 +33,7 @@ GEM
jekyll-feed (0.16.0)
jekyll (>= 3.7, < 5.0)
jekyll-paginate (1.1.0)
jekyll-postcss (0.5.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-seo-tag (2.7.1)
@ -62,6 +64,8 @@ GEM
ffi (~> 1.9)
terminal-table (2.0.0)
unicode-display_width (~> 1.1, >= 1.1.1)
uglifier (4.2.0)
execjs (>= 0.3.0, < 3)
unicode-display_width (1.8.0)
webrick (1.7.0)
@ -72,8 +76,10 @@ DEPENDENCIES
jekyll
jekyll-feed
jekyll-paginate
jekyll-postcss
jekyll-seo-tag
jekyll-sitemap
uglifier
webrick
BUNDLED WITH

@ -39,8 +39,10 @@ plugins:
- jekyll-sitemap
- jekyll-seo-tag
- jekyll-paginate
- jekyll-postcss
- uglifier
sass:
sourcemap: never
style: compressed

@ -1,6 +1,3 @@
- id: home
name: Còdec
link: '/#home'
- id: work
name: Què fem?
link: '/#work'
@ -14,10 +11,16 @@
- id: team
name: Nosaltres
link: '/#team'
- id: projects
name: Projectes
link: '/#projects'
dropdown:
- id: projects
name: Projectes
link: '/projects.html'
- id: archive
name: Arxiu de projectes
link: '/archive.html'
- id: contact
name: Contacte
link: '/#contact'
- id: blog
name: Blog
link: /blog

@ -1,24 +1,28 @@
- 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: 350
- name: Jekyll
price: 450
- 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 &#8212;disposa del seu propi sistema de plantilles i d'extensions funcionals&#8212; 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: 500
- name: Strapi
price: 800
- 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 &#8212;eines de backoffice, de gestió corporativa, d'analytics&#8212; 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.000
- name: Programari a mida
price: 1.500
- 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 &#8212;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&#8212; 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://codec.coop
url: https://codeccoop.org
github: https://github.com/codeccoop
price: A negociar

@ -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,16 +15,28 @@
- 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
- Single-page application (SPA)
- id: vh3d
url: https://fem.vallhebron.com/#/?pieceId=2534
url: https://dadescomunals.org/vh3d
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
- WebGL
- id: equinox
url: https://equinoxtrail.com
name: Equinox Trail
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
- Pàgina web estàtica
- id: hemeroteca-oberta
url: https://dadescomunals.org/hemeroteca-oberta
name: Hemeroteca Oberta
description: Eina web per fer scrapping de l'hemeroteca de la Vanguardia de cara a la seva explotació estadística
tags:
- Programari a mida
- Pàgina web estàtica

@ -0,0 +1,65 @@
<div class="contact">
<p class="contact__title title is-5 has-text-white">Contacta'ns</p>
<div class="contact__notification notification is-success is-hidden">
<button class="delete"></button>
Gràcies per posar-te en contacte. Ens comprometem a respondret en breus!
</div>
<form class="contact__form">
<div id="contactName" class="contact__field field" required>
<label class="label has-text-white">Nom i Cognom</label>
<div class="control">
<input class="input" type="text" placeholder="Tal i Pasqual">
</div>
<p class="help"></p>
</div>
<div id="contactEmail" class="contact__field field" required>
<label class="label has-text-white">Correu electrònic</label>
<div class="control">
<input class="input" type="email" placeholder="hola@">
</div>
<p class="help"></p>
</div>
<div id="contactSubject" class="contact__field field" required>
<label class="label has-text-white">Assumpte</label>
<div class="control">
<input id="subject" class="input" type="text" placeholder="Hola!">
</div>
<p class="help"></p>
</div>
<div id="contactMessage" class="contact__field field" required>
<label class="label has-text-white">Missatge</label>
<div class="control">
<textarea class="textarea" placeholder="Blablabla"></textarea>
</div>
<p class="help"></p>
</div>
<div id="contactTerms" class="contact__field field" required>
<div class="control">
<label class="checkbox">
<input type="checkbox">
Accepto <a href="#">els termes i condicions</a>
</label>
</div>
<p class="help"></p>
</div>
<!-- <div id="contactSubscription" class="contact__field field is-grouped">
<div class="field has-text-white">Vols rebre informació sobre la cooperativa?</div>
<div class="control">
<label class="radio">
<input type="radio" name="question" value="true">
</label>
<label class="radio">
<input type="radio" name="question" value="false" value="false" checked="true">
No
</label>
</div>
<p class="help"></p>
</div> -->
<div id="contactSubmit" class="contact__submit-field field">
<div class="control">
<button class="button">Enviar</button>
</div>
</div>
</form>
</div>

@ -0,0 +1,6 @@
<div class="footer__content">
<h1 class="title has-text-white is-4 is-centered">Cooperativa Còdec</h1>
<h2 class="subtitle has-text-white is-5">Codis comuns per una tecnologia més democràtica</h2>
<div class="footer__contact">
{% include contact.html %}
</div>

@ -4,7 +4,12 @@
aria-label="main navigation"
>
<div class="navbar-brand">
<a class="navbar-item" data-id="home" href="/#home">Còdec</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"
@ -21,8 +26,9 @@
<div id="pageNavbarMenu" class="navbar-menu">
<div class="navbar-start">
{% assign links = site.data.navigation | where_exp: "item", "item.id !=
'home'" %} {% for item in links %} {% if item.dropdown %}
{% assign links = site.data.navigation %}
{% for item in links %}
{% if item.dropdown %}
<div
data-id="{{ item.id }}"
class="navbar-item has-dropdown is-hoverable"
@ -51,7 +57,7 @@
<div class="navbar-item">
{% for link in site.data.links %}
<span data-link="{{ link.id }}" class="icon is-small">
<a href="{{ link.url }}" ><i></i></a>
<a aria-label="Enllaç al nostre perfil de {{ link.id }}" href="{{ link.url }}" ><i></i></a>
</span>
{% endfor %}
</div>

@ -0,0 +1,10 @@
---
# Jekyll layout that compresses HTML
# v3.1.0
# http://jch.penibelst.de/
# © 2014–2015 Anatol Broder
# MIT License
---
{% capture _LINE_FEED %}
{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}

@ -1,5 +1,9 @@
---
layout: compress
---
<!DOCTYPE html>
<html>
<html lang="ca">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -10,27 +14,37 @@
<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>
<!-- <script src="my-analytics-script.js"></script> -->
{% endif %}
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/device-detect.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/background-patterns.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/viewport.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/easees.js"></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/utils/SectionScroller.js"></script>
<script src="{{ base.url }}/assets/js/index.js"></script>
<style>
#loader {
position: fixed;
height: calc(var(--vh, 1vh) * 100);
width: calc(var(--vw, 1vw) * 100);
background-color: #eef5f0;
z-index: 1000;
top: 0px;
left: 0px;
transition: opacity 300ms ease-out;
opacity: 1;
}
</style>
</head>
<body>
{% if page.page == "blog" or page.collection == "posts" %}
@ -39,7 +53,9 @@
<header id="pageHeader">{% include navigation.html %}</header>
{% endif %}
<main class="{{ page.page }}">{{ content }}</main>
<script src="{{ base.url | prepend: site.url }}/assets/js/main.js" ></script>
<script src="{{ base.url | prepend: site.url }}/assets/js/components/header.js" ></script>
{% if page.page != "home" %}
<footer id="pageFooter">{% include footer.html %}</footer>
{% endif %}
<div id="loader"></div>
</body>
</html>

@ -2,9 +2,11 @@
layout: default
---
<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>

@ -0,0 +1,9 @@
module Jekyll
module Uglify
def uglify(input)
Uglifier.new(harmony: true).compile(input)
end
end
end
Liquid::Template.register_filter(Jekyll::Uglify)

@ -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;
}

@ -1,4 +1,5 @@
$header-height: 60px;
$mobile-header-height: 39px;
$site-paddings: 12vw;
$post-width: 800px;

@ -9,6 +9,7 @@ $mobile-line-height: 1.4;
@font-face {
font-family: "Quicksand";
src: url("/assets/fonts/Quicksand/Quicksand-VariableFont_wght.ttf");
font-display: swap;
}
@function pow($number, $exponent) {

@ -0,0 +1,39 @@
<?php
header("Access-Control-Allow-Origin: https://codeccoop.org");
header("Content-Type: application/json");
header("Cache-Control: no-cache, must-revalidate");
$data = array(
"name" => filter_var($_POST["name"], FILTER_SANITIZE_STRING),
"email" => filter_var($_POST["email"], FILTER_SANITIZE_EMAIL),
"subject" => filter_var($_POST["subject"], FILTER_SANITIZE_STRING),
"message" => filter_var($_POST["message"], FILTER_SANITIZE_STRING),
"terms" => filter_var($_POST["terms"], FILTER_SANITIZE_NUMBER_INT),
"subscription" => filter_var($_POST["subscription"], FILTER_SANITIZE_NUMBER_INT),
);
$to = "hola@codeccoop.org";
$subject = $data["subject"];
$body = "De: " . $data["name"] . "\r\n";
# $body .= "Termes i condicions: <b>" . ($data["terms"] == 1 ? "D'acord" : "Desacord") . "</b><br/>\r\n";
# $body .= "Subscripció: " . ($data["subscription"] == 1 ? "D'acord" : "Desacord") . "\r\n";
$body .= "Missatge: \r\n\r\n" . $data["message"] . "\r\n";
$header = "From:" . $data["email"] . " \r\n";
# $header .= "Cc:@somedomain.com \r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/plain\r\n";
$retval = mail($to, $subject, $body, $header);
if ($retval == true) {
echo "{";
echo '"success": true';
echo "}";
} else {
echo "{";
echo '"success": false';
echo "}";
}
?>

@ -1,19 +1,24 @@
---
layout: default
title: Còdec | Projectes
page: projects
page: archive
---
<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>
<div class="projects__data">
{% for project in site.data.projects %}
<article name="{{project.name}}" class="projects__product">
<a href="{{ project.url }}">
<img src="{{ base.url | prepend: site.url }}/assets/images/projects/{{project.imagename}}.png">
<a href="{{ project.url }}" target="_blank">
<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">

@ -0,0 +1,77 @@
---
---
@import "reset";
@import "colors";
@import "breakpoints";
#pageFooter,
#contact {
background-color: #4e4e4e;
color: white;
}
#pageFooter {
padding: 0 $site-paddings 3rem;
min-height: calc(calc(var(--vh, 1vh) * 100) - #{$header_height});
.is-mobile & {
min-height: calc(calc(var(--vh, 1vh) * 100) - #{$mobile-header-height});
}
}
.footer__content {
padding: 2.5rem 0 2rem;
@include m-media(lg) {
padding: 2.5rem 4rem 2rem;
}
.is-mobile & {
@media (max-height: 500px) {
> .title,
> .subtitle {
display: none;
}
}
}
.contact {
.field.is-grouped {
.control {
padding-left: 1rem;
}
}
label.checkbox {
color: white;
> a {
color: white;
}
}
.is-mobile & {
.contact__title {
margin-bottom: 1rem;
}
.contact__field {
input:not([type="checkbox"]) {
height: 2rem;
border-radius: 3px;
}
textarea {
min-height: 5rem;
}
}
}
.contact__submit-field .button {
color: white;
background-color: $orange-peel;
border-color: $orange-peel;
}
}
}

@ -4,6 +4,7 @@
@import "colors";
@import "typography";
@import "breakpoints";
@import "images";
header {
position: fixed;
@ -16,11 +17,11 @@ header {
.navbar {
background-color: transparent;
padding: 0 #{$site-paddings};
padding: 0 $site-paddings;
@media screen and (max-width: 1024px) {
.navbar-menu {
width: calc(100% + 20vw);
width: calc(100% + 20vw);
margin-left: -10vw;
.navbar-item {
@ -34,9 +35,14 @@ header {
color: inherit !important;
font-weight: bold;
text-decoration: none !important;
width: 90px;
@include m-media(zr, md) {
font-size: 1.4rem;
picture {
display: flex;
img {
margin-top: 2px;
}
}
}
@ -82,7 +88,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");
}
}

@ -15,10 +15,17 @@
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: calc(var(--vh, 1vh) * 100);
transition: height 100ms ease;
/* min-height: 100vh; */
&#team {
padding-bottom: 175px;
}
.is-mobile & {
padding-top: $mobile-header-height;
}
&#home {
padding-bottom: calc(calc(100 * (var(--vh, 1vh) - var(--icbh, 1vh))) + 55px);
}
}
.home__section-content {
@ -33,11 +40,23 @@
@include m-media(zr, sm) {
flex-direction: column;
.is-mobile & {
@include m-media(landscape) {
flex-direction: row;
}
}
}
@media (orientation: portrait) {
flex-direction: column;
}
#team & {
@media screen and (min-width: 769px) and (max-width: 1050px) {
flex-direction: column;
}
}
}
.home__section-column.column {
@ -47,11 +66,23 @@
@include m-media(zr, sm) {
width: 100%;
.is-mobile & {
@include m-media(landscape) {
width: 50%;
}
}
}
@media (orientation: portrait) {
width: 100%;
}
#team & {
@media screen and (min-width: 769px) and (max-width: 1050px) {
width: 100%;
}
}
}
.home__title {
@ -62,7 +93,7 @@
#home & {
color: white;
margin-top: 70px;
margin-top: 40px;
.is-mobile & {
margin-top: 60px;
@ -73,91 +104,142 @@
}
}
.is-mobile & {
@media (max-height: 500px) {
font-size: 1.6875rem;
}
}
&:not(:last-child) {
margin-bottom: 1.75rem;
margin-bottom: 2rem;
}
}
.home__title + .subtitle {
line-height: 1;
}
.home__cite {
.home__landing {
flex: 1;
display: flex;
display: flex;
flex-direction: column;
justify-content: center;
padding-bottom: 10%;
margin: 0 auto;
.is-mobile & {
blockquote {
font-size: .9em;
}
figcaption {
font-size: .7em;
background-color: #43437a;
padding: 0 $site-paddings;
margin: 0 calc(#{$site-paddings} * -1);
border-bottom: 10px solid $orange-peel;
position: relative;
.home__brand {
position: absolute;
top: calc(50% - 95px);
left: 0;
right: 0;
margin: auto;
padding: 0 10vw;
.is-mobile & {
@include m-media(landscape) {
top: calc(50% - 40px);
}
}
}
blockquote {
font-size: ms(0);
}
}
figcaption {
padding-left: 15%;
text-align: right;
margin: 1em 0;
font-size: .8em;
}
}
.title {
text-shadow: 0px 0px 5px #fff3;
text-align: center;
color: white;
font-weight: 500;
.home__services {
padding-right: 5%;
.cursor {
height: 1em;
border: .5px solid;
width: 0px;
.subtitle {
margin-bottom: .5em;
}
&.highlight {
background-color: $orange-peel;
color: $orange-peel;
}
}
}
img {
filter: grayscale(.5) drop-shadow(2px 2px 2px #0003);
filter: drop-shadow(2px 2px 2px #0003);
transition: filter 200ms ease-in;
width: 300px;
.title.is-1 {
font-size: 6rem;
margin-bottom: 0px;
.is-mobile & {
@media (orientation: portrait) {
width: 50vw;
font-size: 4rem;
.highlight .cursor {
border-width: 1px;
}
}
&:active {
filter: drop-shadow(0px 0px 0px transparent);
}
.highlight {
color: $orange-peel;
@include m-media(zr, sm) {
width: 250px;
.cursor {
background-color: $orange-peel;
margin: .05em;
border-width: 2px;
}
}
@media (orientation: portrait) {
width: 250px;
.bytes {
vertical-align: middle;
color: $orange-peel;
font-size: 0.6em;
margin-bottom: .2em;
}
}
@include m-media(zr, xsm) {
width: 200px;
.title.is-4 {
margin-top: 40px;
.is-mobile & {
font-size: 1.5rem;
@include m-media(landscape) {
margin-top: 10px;
}
}
}
}
}
.home__landing-chevron {
position: absolute;
bottom: 20px;
left: 50%;
display: block;
width: 35px;
height: 35px;
border-bottom: 3px solid $font-color;
border-left: 3px solid $font-color;
transform: translateX(-50%) rotate(315deg);
cursor: pointer;
transition: transform 200ms;
&:hover {
transform: translate(-50%, -5px) rotate(315deg)
}
.is-mobile & {
width: 25px;
height: 25px;
border-width: 2px;
}
}
.home__services {
padding-right: 5%;
.home__section-row {
&:not(:last-child) {
padding-bottom: 2em;
padding-top: 1em;
padding-bottom: 1em;
border-bottom: 2px dashed #ccc;
@include m-media(zr, sm) {
padding-bottom: 1em;
}
@media (orientation: portrait) {
@include m-media(portrait) {
padding-bottom: 1em;
}
}
@ -169,159 +251,210 @@
padding-top: 1em;
}
@media (orientation: portrait) {
@include m-media(portrait) {
padding-top: 1em;
}
}
.button {
width: fit-content;
padding: 0 2em;
margin-top: 1.5rem;
}
@include m-media(zr, sm) {
text-align: center;
@include m-media(zr, sm) {
text-align: center;
.button {
margin: auto;
}
}
.is-mobile & {
@include m-media(landscape) {
text-align: start;
}
}
}
@media (orientation: portrait) {
text-align: center;
.button {
margin: auto;
}
}
}
.home__section-column {
@include m-media(zr, sm) {
.title {
font-size: ms(1);
margin-bottom: .5em;
}
.title {
margin-bottom: 0px;
.subtitle {
display: none;
}
@include m-media(zr, sm) {
font-size: ms(1);
.button {
font-size: 0.85em;
}
}
@media (max-height: 750px) {
margin-bottom: .2em;
}
}
@media (orientation: portrait) {
.title {
font-size: ms(1);
}
@include m-media(portrait) {
font-size: ms(1);
.subtitle {
display: none;
}
@media (max-height: 750px) {
margin-bottom: .2em;
}
}
.button {
font-size: 0.85em;
}
}
+ .subtitle {
margin-top: 0rem;
}
}
&.img-column {
figure {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
figcaption {
text-align: center;
margin-top: .5em;
font-weight: bold;
font-size: 1.5em;
}
}
}
.subtitle {
margin-bottom: .5em;
@media (max-height: 750px) and (orientation: portrait) {
display: none;
}
.is-mobile & {
@media (min-height: 550px) {
display: block;
}
@include m-media(landscape) {
@media (max-height: 450px) {
display: none;
}
}
}
}
}
.home__us {
flex: 1;
.button {
width: fit-content;
padding: 0 1em;
margin-top: 1rem;
.home__section-column {
display: flex;
justify-content: flex-start;
@include m-media(zr, sm) {
font-size: .85em;
margin: auto;
.title {
margin-bottom: .5rem;
.is-mobile & {
@include m-media(landscape) {
margin: unset;
}
}
}
.toggle-container {
margin: 3rem 0;
border-bottom: 2px solid lightgrey;
position: relative;
@include m-media(portrait) {
font-size: .85em;
margin: auto;
}
}
.us__information-toggle {
text-decoration: none;
color: $font-color;
display: block;
.img-column {
figure {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
&.open {
padding-bottom: .75rem;
}
.us__information-toggle-btn{
width: fit-content;
cursor: pointer;
&::after{
position: absolute;