Compare commits

...

5 Commits

  1. 6
      .eslintrc.js
  2. 10
      _data/projects.yml
  3. 4
      _includes/contact.html
  4. 472
      assets/css/pages/home.scss
  5. 46
      assets/css/pages/projects.scss
  6. BIN
      assets/images/projects/hemeroteca-oberta.png
  7. BIN
      assets/images/projects/hemeroteca-oberta.webp
  8. 390
      assets/js/pages/home.js
  9. 124
      assets/js/utils/SectionScroller.js
  10. 5
      assets/js/utils/viewport.js
  11. 6
      index.html
  12. 4
      jekyll-cli

@ -3,11 +3,11 @@ module.exports = {
browser: true,
es2021: true,
},
extends: ['airbnb-base'],
extends: ["airbnb-base"],
parserOptions: {
ecmaVersion: 'latest',
ecmaVersion: "latest",
},
rules: {
arrowParens: false,
arrowParens: "as-needed",
},
};

@ -20,7 +20,7 @@
- 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
description: Videojoc col·laboratiu per a la presentació del nou Pla Estratègic 2021-2025 de la Vall d'Hebron
tags:
@ -33,4 +33,10 @@
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

@ -42,7 +42,7 @@
</div>
<p class="help"></p>
</div>
<div id="contactSubscription" class="contact__field field is-grouped">
<!-- <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">
@ -55,7 +55,7 @@
</label>
</div>
<p class="help"></p>
</div>
</div> -->
<div id="contactSubmit" class="contact__submit-field field">
<div class="control">
<button class="button">Enviar</button>

@ -16,13 +16,15 @@
background-size: cover;
background-position: center;
min-height: calc(var(--vh, 1vh) * 100);
transition: height 100ms ease;
/* min-height: 100vh; */
.is-mobile & {
padding-top: $mobile-header-height;
}
&#home {
padding-bottom: 55px;
padding-bottom: calc(calc(100 * (var(--vh, 1vh) - var(--icbh, 1vh))) + 55px);
}
}
@ -38,19 +40,25 @@
@include m-media(zr, sm) {
flex-direction: column;
.is-mobile & {
@include m-media(landscape) {
flex-direction: row;
}
}
}
@media (orientation: portrait) {
flex-direction: column;
}
&.home__us{
#team & {
@media screen and (min-width: 769px) and (max-width: 1050px) {
flex-direction: column;
}
}
}
.home__section-column.column {
display: flex;
flex-direction: column;
@ -58,12 +66,19 @@
@include m-media(zr, sm) {
width: 100%;
.is-mobile & {
@include m-media(landscape) {
width: 50%;
}
}
}
@media (orientation: portrait) {
width: 100%;
}
&.home__us{
#team & {
@media screen and (min-width: 769px) and (max-width: 1050px) {
width: 100%;
}
@ -117,6 +132,12 @@
right: 0;
margin: auto;
padding: 0 10vw;
.is-mobile & {
@include m-media(landscape) {
top: calc(50% - 40px);
}
}
}
.title {
@ -172,6 +193,10 @@
.is-mobile & {
font-size: 1.5rem;
@include m-media(landscape) {
margin-top: 10px;
}
}
}
}
@ -204,47 +229,6 @@
.home__services {
padding-right: 5%;
.subtitle {
margin-bottom: .5em;
}
picture {
display: block;
img {
filter: grayscale(.5) drop-shadow(2px 2px 2px #0003);
filter: drop-shadow(2px 2px 2px #0003);
transition: filter 200ms ease-in;
width: 200px;
.is-mobile & {
@media (orientation: portrait) {
width: 50vw;
@media (max-height: 500px) {
width: 40vw;
}
}
}
&:active {
filter: drop-shadow(0px 0px 0px transparent);
}
@include m-media(xsm) {
width: 240px;
}
@include m-media(sm) {
width: 300px;
}
@media screen and (max-height: 750px){
width: 200px;
}
}
}
.home__section-row {
&:not(:last-child) {
padding-top: 1em;
@ -253,18 +237,10 @@
@include m-media(zr, sm) {
padding-bottom: 1em;
@media (max-height: 500px) {
padding-bottom: .5em;
}
}
@media (orientation: portrait) {
@include m-media(portrait) {
padding-bottom: 1em;
@media (max-height: 500px) {
padding-bottom: .5em;
}
}
}
@ -273,105 +249,151 @@
@include m-media(zr, sm) {
padding-top: 1em;
@media (max-height: 500px) {
padding-top: .5em;
}
}
@media (orientation: portrait) {
@include m-media(portrait) {
padding-top: 1em;
@media (max-height: 500px) {
padding-top: .5em;
}
}
}
.button {
width: fit-content;
padding: 0 1em;
margin-top: 1rem;
@include m-media(zr, sm) {
text-align: center;
.is-mobile & {
@include m-media(landscape) {
text-align: start;
}
}
}
@include m-media(zr, sm) {
@media (orientation: portrait) {
text-align: center;
.button {
margin: auto;
}
}
}
@media (orientation: portrait) {
text-align: center;
.title {
margin-bottom: 0px;
.button {
margin: auto;
}
}
@include m-media(zr, sm) {
font-size: ms(1);
@media (max-height: 750px) {
margin-bottom: .2em;
}
}
@include m-media(portrait) {
font-size: ms(1);
@media (max-height: 750px) {
margin-bottom: .2em;
}
}
+ .subtitle {
margin-top: 0rem;
}
}
.home__section-column {
@include m-media(zr, sm) {
.title {
font-size: ms(1);
margin-bottom: .5em;
.subtitle {
margin-bottom: .5em;
@media (max-height: 500px) {
margin-bottom: .2em;
}
}
@media (max-height: 750px) and (orientation: portrait) {
display: none;
}
.subtitle {
display: none;
}
.is-mobile & {
@media (min-height: 550px) {
display: block;
}
.button {
font-size: 0.85em;
}
}
@include m-media(landscape) {
@media (max-height: 450px) {
display: none;
}
}
}
}
@media (orientation: portrait) {
.title {
font-size: ms(1);
margin-bottom: .5em;
.button {
width: fit-content;
padding: 0 1em;
margin-top: 1rem;
@media (max-height: 500px) {
margin-bottom: .2em;
}
}
@include m-media(zr, sm) {
font-size: .85em;
margin: auto;
.subtitle {
display: none;
}
.is-mobile & {
@include m-media(landscape) {
margin: unset;
}
}
}
.button {
font-size: 0.85em;
}
}
@include m-media(portrait) {
font-size: .85em;
margin: auto;
}
}
&.img-column {
figure {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.img-column {
figure {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
@include m-media(portrait) {
align-items: center;
}
@include m-media(zr, sm) {
align-items: center;
}
figcaption {
text-align: center;
margin-top: .5em;
font-weight: bold;
font-size: 1.5em;
}
figcaption {
text-align: center;
margin-top: .5em;
font-weight: bold;
font-size: 1.5em;
}
}
}
picture {
display: block;
img {
filter: grayscale(.5) drop-shadow(2px 2px 2px #0003);
filter: drop-shadow(2px 2px 2px #0003);
transition: filter 200ms ease-in;
width: 200px;
@include m-media(landscape) {
width: 35vh;
}
@include m-media(portrait) {
width: 40vw;
@include m-media(xsm) {
width: 30vw;
}
}
&:active {
filter: drop-shadow(0px 0px 0px transparent);
}
}
}
}
}
#team {
@media (orientation: portrait) {
@include m-media(portrait) {
.home__section-row {
flex-flow: column-reverse;
}
@ -381,6 +403,30 @@
}
}
@media (max-width: 1050px) {
.home__section-row {
flex-flow: column-reverse;
.is-mobile & {
@include m-media(landscape) {
flex-flow: row;
}
}
}
.home__section-column:first-child {
padding-top: 0px;
}
}
.is-mobile & {
@include m-media(landscape) {
.home__section-column:last-child {
display: none;
}
}
}
.home__us {
.title {
margin-bottom: .5rem;
@ -397,6 +443,20 @@
}
}
.us__information-description {
@media (max-height: 750px){
.hiddable {
display: none;
}
}
@include m-media(zr, xsm, landscape) {
@media (max-height: 400px) {
display: none;
}
}
}
.home__profiles-wrapper {
display: flex;
flex-direction: row;
@ -424,14 +484,14 @@
opacity: 1;
font-size: .8rem;
@include m-media(xsm) {
@include m-media(md) {
font-size: 1rem;
}
}
}
}
}
.home__team-picture {
display: block;
width: 100%;
@ -490,24 +550,6 @@
}
}
.scroll-viewport {
position: absolute;
z-index: 90;
pointer-events: none;
top: 0px;
left: 0px;
width: 100vw;
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
overflow-y: auto;
}
.scroll-span {
width: 100%;
margin-top: calc(#{$header-height} * -1);
background: transparent;
}
#projects {
.projects__content {
flex: 1;
@ -516,82 +558,46 @@
justify-content: center;
}
.home__projects {
@include m-media(zr, sm) {
.button {
font-size: 0.85em;
}
}
@media (orientation: portrait) {
.button {
font-size: 0.85em;
}
}
}
.projects__data {
padding: 0px;
}
.projects__product {
width: 100%;
&:not(:last-child) {
padding-bottom: 2rem;
@media screen and (max-height: 520px) {
padding-bottom: 1.5rem;
}
}
&:last-child {
margin-top: unset;
}
@include m-media(md) {
width: 50%;
&:nth-child(odd) {
padding-right: 1rem;
}
.projects__data {
@include m-media(portrait) {
@media (max-height: 500px) {
padding-bottom: 2rem;
}
}
&:nth-child(even) {
padding-left: 1rem;
}
.is-mobile & {
@include m-media(landscape) {
padding-bottom: 0;
}
}
}
&:not(:last-child) {
padding-bottom: 0px;
}
}
.projects__product {
> a > img {
@media screen and (max-height: 520px) {
height: 30vw;
}
}
&:not(:last-child) {
@include m-media(portrait) {
@media (max-height: 500px) {
padding-bottom: 1rem;
}
}
}
.projects__product-body {
width: 100%;
}
picture > img {
height: 30vw;
max-height: 20vh;
.is-mobile & {
.projects__product-title {
margin-top: .5rem;
}
}
}
.container__home__projects {
display: flex;
align-items: center;
justify-content: center;
margin-top: 2rem;
}
@include m-media(md) {
height: 20vw;
max-height: unset;
}
}
}
.projects__product-tags {
@media (orientation: portrait) and (max-height: 500px) {
display: none;
@include m-media(portrait) {
@media (max-height: 500px) {
display: none;
}
}
li {
@ -602,4 +608,44 @@
}
}
}
.projects__link {
text-align: left;
@include m-media(md) {
text-align: center;
}
.is-mobile & {
@include m-media(landscape) {
text-align: center;
}
}
}
}
#contact {
height: auto;
min-height: unset;
overflow: visible;
scroll-snap-align: end;
scroll-snap-stop: unset;
}
.scroll-viewport {
position: absolute;
z-index: 90;
pointer-events: none;
top: 0px;
left: 0px;
width: 100vw;
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
overflow-y: auto;
}
.scroll-span {
width: 100%;
margin-top: calc(#{$header-height} * -1);
background: transparent;
}

@ -5,7 +5,7 @@
@import "breakpoints";
main.archive {
padding: $header-height $site-paddings 175px;
padding: $header-height $site-paddings 0;
min-height: 100vh;
.projects__title {
@ -35,11 +35,7 @@ main.archive {
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
padding: 50px 0;
@include m-media(zr, xsm) {
padding: 0px;
}
padding: 1rem 0 3rem;
}
.projects__product {
@ -52,22 +48,24 @@ main.archive {
padding-bottom: 3rem;
}
&:last-child {
margin-top: unset;
}
@include m-media(md) {
width: 50%;
&:nth-child(odd) {
padding-right: 1rem;
}
&:nth-child(even) {
padding-left: 1rem;
}
&:nth-child(odd) { padding-right: 1rem; }
&:nth-child(even) { padding-left: 1rem; }
&:not(:last-child) { padding-bottom: 3rem; }
}
.is-mobile & {
@include m-media(landscape) {
width: 50%;
&:nth-child(odd) { padding-right: 1rem; }
&:nth-child(even) { padding-left: 1rem; }
&:not(:last-child) { padding-bottom: 3rem; }
}
}
> a {
display: block;
width: 100%;
@ -83,16 +81,24 @@ main.archive {
width: 100%;
height: 40vw;
box-shadow: 0px 0px 6px #0003;
border-radius: 2px;
height: 30vw;
border-radius: 5px;
height: 40vw;
max-height: 30vh;
@include m-media(md) {
height: 20vw;
max-height: unset;
}
}
}
}
.projects__product-body {
padding-left: 2px;
width: 100%;
}
h2 {
margin-top: 1rem;
}
@ -103,7 +109,7 @@ main.archive {
margin-bottom: .5rem;
@include m-media(zr, xsm){
font-size:1em;
font-size: 1em;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

@ -1,112 +1,290 @@
document.addEventListener("DOMContentLoaded", function() {
var $el = document.getElementsByTagName("main")[0];
var sectionScroller = new SectionSnapScroller($el, {
sectionClass: "home__section",
debug: false,
behavior: "mandatory",
onSectionUpdate: function(sectionId) {
document.getElementById("pageHeader").setActiveLink(sectionId);
},
});
document.addEventListener("DOMContentLoaded", function () {
var $el = document.getElementsByTagName("main")[0];
var scrollChevron = $el.getElementsByClassName("home__landing-chevron")[0];
scrollChevron.addEventListener("click", function() {
if (!isMobile()) {
sectionScroller.scrollTo("work", 1, "smooth");
} else {
location.hash = "work";
}
});
var sectionScroller = new SectionSnapScroller($el, {
sectionClass: "home__section",
debug: false,
behavior: "mandatory",
onSectionUpdate: function (sectionId) {
document.getElementById("pageHeader").setActiveLink(sectionId);
},
});
var frames = [
['<h1 class="title is-1"><span class="cursor"></span></h1>', 0],
['<h1 class="title is-1"></h1>', 600],
['<h1 class="title is-1"><span class="cursor"></span></h1>', 600],
['<h1 class="title is-1">C<span class="cursor"></span></h1>', 300],
['<h1 class="title is-1">Cò<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còd<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còde<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còdec<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còdec</h1>', 300],
['<h1 class="title is-1">Còdec<span class="cursor highlight"></span></h1>', 600],
['<h1 class="title is-1">Còde<span class="cursor highlight"></span><span class="bytes">11</span></h1>', 300],
['<h1 class="title is-1">Còd<span class="cursor highlight"></span><span class="bytes">0111</span></h1>', 200],
['<h1 class="title is-1">Cò<span class="cursor highlight"></span><span class="bytes">100111</span></h1>', 200],
['<h1 class="title is-1">C<span class="cursor highlight"></span><span class="bytes">10100111</span></h1>', 200],
['<h1 class="title is-1"><span class="cursor highlight"></span><span class="bytes">1100100111</span></h1>', 200],
['<h1 class="title is-1"><span class="bytes">1100100111</span></h1>', 300],
['<h1 class="title is-1"><span class="cursor"></span><span class="bytes">1100100111</span></h1>', 600],
['<h1 class="title is-1">C<span class="cursor"></span><span class="bytes">00100111</span></h1>', 300],
['<h1 class="title is-1">Cò<span class="cursor"></span><span class="bytes">100111</span></h1>', 200],
['<h1 class="title is-1">Còd<span class="cursor"></span><span class="bytes">0111</span></h1>', 200],
['<h1 class="title is-1">Còde<span class="cursor"></span><span class="bytes">11</span></h1>', 200],
['<h1 class="title is-1">Còdec<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còdec</h1>', 200],
['<h1 class="title is-1">Còdec<span class="cursor"></span></h1>', 600],
['<h1 class="title is-1">Còde<span class="cursor"></span>c</h1>', 300],
['<h1 class="title is-1">Còd<span class="cursor"></span>ec</h1>', 200],
['<h1 class="title is-1">Cò<span class="cursor"></span>dec</h1>', 200],
['<h1 class="title is-1">Còdec</h1>', 200],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span></span>dec</h1>', 600],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1>', 300],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4"><span class="cursor"></span></h2>', 600],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">C<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Co<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Cod<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codi<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis <span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis c<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis co<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis com<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comu<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comun<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns p<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns pe<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per <span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per u<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per un<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una <span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una t<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una te<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tec<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecn<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecno<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnol<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnolo<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnolog<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologi<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia <span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia m<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia mé<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més d<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més de<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més dem<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més demo<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democ<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democr<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democrà<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràt<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràti<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràtic<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràtica<span class="cursor"></span></h2>', 75],
['<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràtica</h2>', 600],
];
var scrollChevron = $el.getElementsByClassName("home__landing-chevron")[0];
scrollChevron.addEventListener("click", function () {
if (!isMobile()) {
sectionScroller.scrollTo("work", 1, "smooth");
} else {
location.hash = "work";
}
});
var landing = document.getElementById("home").getElementsByClassName("home__brand")[0];
var frames = [
['<h1 class="title is-1"><span class="cursor"></span></h1>', 0],
['<h1 class="title is-1"></h1>', 600],
['<h1 class="title is-1"><span class="cursor"></span></h1>', 600],
['<h1 class="title is-1">C<span class="cursor"></span></h1>', 300],
['<h1 class="title is-1">Cò<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còd<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còde<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còdec<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còdec</h1>', 300],
['<h1 class="title is-1">Còdec<span class="cursor highlight"></span></h1>', 600],
[
'<h1 class="title is-1">Còde<span class="cursor highlight"></span><span class="bytes">11</span></h1>',
300,
],
[
'<h1 class="title is-1">Còd<span class="cursor highlight"></span><span class="bytes">0111</span></h1>',
200,
],
[
'<h1 class="title is-1">Cò<span class="cursor highlight"></span><span class="bytes">100111</span></h1>',
200,
],
[
'<h1 class="title is-1">C<span class="cursor highlight"></span><span class="bytes">10100111</span></h1>',
200,
],
[
'<h1 class="title is-1"><span class="cursor highlight"></span><span class="bytes">1100100111</span></h1>',
200,
],
['<h1 class="title is-1"><span class="bytes">1100100111</span></h1>', 300],
[
'<h1 class="title is-1"><span class="cursor"></span><span class="bytes">1100100111</span></h1>',
600,
],
[
'<h1 class="title is-1">C<span class="cursor"></span><span class="bytes">00100111</span></h1>',
300,
],
[
'<h1 class="title is-1">Cò<span class="cursor"></span><span class="bytes">100111</span></h1>',
200,
],
[
'<h1 class="title is-1">Còd<span class="cursor"></span><span class="bytes">0111</span></h1>',
200,
],
[
'<h1 class="title is-1">Còde<span class="cursor"></span><span class="bytes">11</span></h1>',
200,
],
['<h1 class="title is-1">Còdec<span class="cursor"></span></h1>', 200],
['<h1 class="title is-1">Còdec</h1>', 200],
['<h1 class="title is-1">Còdec<span class="cursor"></span></h1>', 600],
['<h1 class="title is-1">Còde<span class="cursor"></span>c</h1>', 300],
['<h1 class="title is-1">Còd<span class="cursor"></span>ec</h1>', 200],
['<h1 class="title is-1">Cò<span class="cursor"></span>dec</h1>', 200],
['<h1 class="title is-1">Còdec</h1>', 200],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span></span>dec</h1>',
600,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1>',
300,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4"><span class="cursor"></span></h2>',
600,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">C<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Co<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Cod<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codi<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis <span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis c<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis co<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis com<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comu<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comun<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns p<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns pe<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per <span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per u<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per un<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una <span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una t<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una te<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tec<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecn<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecno<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnol<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnolo<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnolog<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologi<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia <span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia m<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia mé<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més d<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més de<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més dem<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més demo<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democ<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democr<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democrà<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràt<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràti<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràtic<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràtica<span class="cursor"></span></h2>',
75,
],
[
'<h1 class="title is-1">Cò<span class="highlight"><span class="cursor"></span>o</span>dec</h1><h2 class="title is-4">Codis comuns per una tecnologia més democràtica</h2>',
600,
],
];
function frame (content, timeout) {
if (!content) return;
setTimeout(function () {
landing.innerHTML = content;
frame.apply(null, frames.shift());
}, timeout);
}
var landing = document.getElementById("home").getElementsByClassName("home__brand")[0];
frame(frames.shift());
function frame(content, timeout) {
if (!content) return;
setTimeout(function () {
landing.innerHTML = content;
frame.apply(null, frames.shift());
}, timeout);
}
frame(frames.shift());
});

@ -61,16 +61,14 @@ var SectionSnapScroller = (function () {
var styles = "html, body { overscroll-behavior-y: contain; }";
if (isMobile() || isTouchEnabled()) {
styles +=
".scroll-root { overflow-y: scroll; height: 100vh; scroll-behavior: smooth; }";
".scroll-root { display: flex; flex-direction: column; overflow-y: scroll; height: 100vh; height: calc(var(--vh, 1vh) * 100); }";
styles +=
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); scroll-snap-align: start; }";
styles +=
".scroll-root .scroll-section:last-child { height: 0px; min-height: 0px; scroll-snap-align: end; }";
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }";
} else {
styles +=
".scroll-root { overflow: hidden; height: 100vh; height: calc(var(--vh, 1vh) * 100); width: 100%; overscroll-behavior-y: contain; }";
styles +=
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); }";
".scroll-root .scroll-section { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); width: 100vw; width: calc(var(--vw, 1vw) * 100); overflow: hidden; }";
styles +=
".scroll-viewport { position: absolute; z-index: 90; pointer-events: none; top: 0px; left: 0px; width: 100vw; width: calc(var(--vw, 1vw) * 100); height: 100vh; height: calc(var(--vh, 1vh) * 100); overflow-x: hidden; overflow-y: auto; }";
styles += ".scroll-viewport .scroll-span { width: 100%; background: transparent; }";
@ -101,7 +99,7 @@ var SectionSnapScroller = (function () {
return logger;
}
var onScroll = (function () {
var _onScroll = (function () {
var self, direction, overflow, delayed;
var scrolling = false;
@ -128,6 +126,7 @@ var SectionSnapScroller = (function () {
var offset = ev.deltaY;
direction = ev.deltaY < 0 ? -1 : 1;
offset = Math.min(offset * direction, 60) * direction;
var nextSection =
this.sections[
@ -139,7 +138,7 @@ var SectionSnapScroller = (function () {
)
)
];
var nextSectionOverflow = getSectionOverflow(nextSection, direction);
var nextSectionOverflow = _getSectionOverflow(nextSection, direction);
if (this.behavior === "mandatory") {
offset =
@ -155,7 +154,7 @@ var SectionSnapScroller = (function () {
};
})();
function getSectionOverflow(id, direction) {
function _getSectionOverflow(id, direction) {
if (direction === void 0) {
console.warn(
"getSectionOverflow needs a direction to compute the sections overflow. Direction mus't be a positive integer like 1 to get descending overflow, and negative integer, like -1, to get ascending overflow. When no direction is informed, then it uses 1 as a fallback value."
@ -174,7 +173,7 @@ var SectionSnapScroller = (function () {
return Math.abs(overflow) <= 5 ? 0 : overflow;
}
var onTouchScroll = (function () {
var _onTouchScroll = (function () {
var self;
var debounced;
@ -192,6 +191,13 @@ var SectionSnapScroller = (function () {
};
})();
function _onResize(ev) {
if (isMobile() || isTouchEnabled()) return;
// console.log(this.getCurrentSectionOverflow());
var box = this.currentSectionEl.getBoundingClientRect();
this.$el.scrollBy(0, box.top);
}
/* PUBLIC INTERFACE */
function SectionSnapScroller(scrollEl, settings) {
var self = this;
@ -279,74 +285,64 @@ var SectionSnapScroller = (function () {
Object.defineProperty(this, "currentSectionEl", {
get: function () {
return Array.apply(
null,
self.$el.getElementsByClassName(self._sectionClass)
).filter(function (el) {
return el.id === self.currentSection;
});
return Array.apply(null, self.$el.getElementsByClassName(self._sectionClass))
.filter(function (el) {
return el.id === self.currentSection;
})
.pop();
},
});
if (isMobile() || isTouchEnabled()) {
var lastChild = document.createElement("div");
lastChild.classList.add(this._sectionClass);
this.$el.appendChild(lastChild);
onTouchScroll = onTouchScroll.bind(this);
var onTouchScroll = _onTouchScroll.bind(this);
this.$el.addEventListener("scroll", onTouchScroll);
function setupInlineStyles() {
self.$el.style.scrollBehavior = "smooth";
self.$el.style.scrollSnapType = "y mandatory";
Array.apply(null, self.$el.getElementsByClassName(self._sectionClass)).forEach(
function ($section) {
$section.style.scrollSnapStop = "always";
}
);
self.$el.style.scrollBehavior = "smooth";
}
var currentSection = location.hash.split("/").pop().replace(/#/, "");
if (currentSection && currentSection !== this.sections[0]) {
setTimeout(function () {
self.$el.scrollBy({
behavior: "smooth",
left: 0,
top: document.getElementById(currentSection).getBoundingClientRect().top,
});
var delayed;
function whileScroll() {
clearTimeout(delayed);
delayed = setTimeout(onScrollEnds, 50);
}
self.$el.scrollBy({
behavior: "auto",
left: 0,
top: document.getElementById(currentSection).getBoundingClientRect().top,
});
function onScrollEnds() {
self.$el.removeEventListener("scroll", whileScroll);
setupInlineStyles();
}
var delayed;
function whileScroll() {
clearTimeout(delayed);
delayed = setTimeout(onScrollEnds, 50);
}
self.$el.