added vitra copy texts

src/events.ts

@@ -0,0 +1,36 @@
+export default () => {
+  const sectionList: NodeListOf<HTMLElement> = document.querySelectorAll('section');
+
+  sectionList.forEach(section => {
+    section.addEventListener('click', (e) => {
+      console.log('click', e.target);
+
+      e.srcElement
+
+    });
+    section.addEventListener('touchstart', (e) => {
+      console.log('touchstart', e.target);
+    });
+  });
+}
+
+
+// export class Events {
+
+//   private sectionList: NodeListOf<HTMLElement>;
+
+//   constructor () {
+//     this.sectionList = document.querySelectorAll('section');
+//   }
+
+//   public listen() {
+//     this.sectionList.forEach(section => {
+//       section.addEventListener('click', (e) => {
+//         console.log('click', e.target);
+//       });
+//       section.addEventListener('touchstart', (e) => {
+//         console.log('touchstart', e.target);
+//       });
+//     });
+//   }
+// }

src/index.ts

@@ -1,3 +1,6 @@
-import main from './main';
+import events from './events';
+import './styles/index.scss';
 
-main();
+
+events();
+// console.log(events);

src/main.scss

@@ -1,3 +0,0 @@
-.main {
-  color: red;
-}

src/main.ts

@@ -1,5 +0,0 @@
-import * as classes from './main.scss';
-
-export default () => {
-  console.log(classes);
-};

src/styles/_base.scss

@@ -0,0 +1,34 @@
+@import "variables";
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+svg {
+  fill: $nls-color-white;
+}
+
+h1 {
+  font-size: 300%;
+}
+
+p {
+  line-height: 125%;
+}
+
+a {
+  color: $nls-color-white;
+}
+
+img {
+  mix-blend-mode: color-burn;  
+  max-width: 100%; height: auto;
+}

src/styles/_cards.scss

@@ -0,0 +1,15 @@
+@import "variables";
+
+.cards {
+  $this-horizontal-margin: 2rem;
+
+  display: flex; flex-wrap: wrap;
+  margin: 0 ($this-horizontal-margin * .5); padding: 0;
+
+  &__item {
+    flex: 1 1 30%;
+    list-style-type: none;
+    border: 1px solid $nls-color-white; border-radius: 0.2rem;
+    padding: 2rem 3rem; margin: 1rem $this-horizontal-margin * .5;
+  }
+}

src/styles/_columns.scss

@@ -0,0 +1,14 @@
+@import "./variables";
+
+.columns { 
+  display: flex; flex-flow: column; flex-wrap: nowrap;
+
+  @media (min-width: $breakpoint) {
+    flex-flow: row;
+  }
+
+  &__item {
+    flex-grow: 1;
+    flex-basis: 0;
+  }
+}

src/styles/_helpers.scss

@@ -0,0 +1,28 @@
+@import "variables";
+
+.--large {
+  font-size: 150%;
+}
+
+.--center {
+  text-align: center;
+}
+
+.--secondary {
+  opacity: 0.6;
+}
+
+.--paragraph {
+  $this-padding: 30vw;
+
+  @media (min-width: $breakpoint) {
+    padding-right: $this-padding  ;
+  }
+
+  &.--center {
+    @media (min-width: $breakpoint) {
+      padding-right: $this-padding * 0.5;
+      padding-left: $this-padding * 0.5;
+    }
+  }
+}

src/styles/_variables.scss

@@ -0,0 +1,19 @@
+// COLORS
+//
+// $nls-color-green: #6CBC82;
+// $nls-color-blue: #1D73AD;
+// $nls-color-violet: #4E59B7;
+// $nls-color-purple: #AA66A5;
+// $nls-color-pink: #E54975;
+$nls-color-green: #79C28D;
+$nls-color-blue: #5A99C3;
+$nls-color-violet: #7E86CA;
+$nls-color-purple: #C18FBD;
+$nls-color-pink: #EC7A9A;
+$nls-color-white: #fff;
+$nls-color-black: #0f0f11;
+
+// 
+// RESPONSIVE
+//
+$breakpoint: 980px;

src/styles/index.scss

@@ -0,0 +1,123 @@
+@import "variables";
+@import "base";
+@import "helpers";
+
+section {
+  top: 0;
+  position: sticky;
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: -ms-sticky;
+  position: -o-sticky;
+  display: flex; flex-direction: column; justify-content: start; 
+  height: 100vh;
+  overflow: hidden;
+
+  @media (min-width: $breakpoint) {
+    height: 50vh;
+  }
+
+  // color: $nls-color-white;
+
+  &.--selected {
+
+  }
+
+  &.--selected,
+  &.--full-height {
+    height: 100vh;
+  }
+
+  &.--black {
+    background: $nls-color-black;
+    color: $nls-color-white;
+    
+    .teaser {
+
+      &:after {
+        content: '';
+        position: absolute; top: 0; left: 0;
+        height: 100%; width: 100%;
+        background: linear-gradient(to top, $nls-color-black 0%, rgba($nls-color-black, 0) 50%);
+      }
+    }
+  }
+  
+  &.--green {
+    background: $nls-color-green;
+    
+    .teaser {
+
+      &:after {
+        content: '';
+        position: absolute; top: 0; left: 0;
+        height: 100%; width: 100%;
+        background: linear-gradient(to top, $nls-color-green 0%, rgba($nls-color-green, 0) 50%);
+      }
+    }
+  }
+    
+  &.--blue {
+    background: $nls-color-blue;
+    
+    .teaser {
+
+      &:after {
+        content: '';
+        position: absolute; top: 0; left: 0;
+        height: 100%; width: 100%;
+        background: linear-gradient(to top,  $nls-color-blue 0%, rgba( $nls-color-blue, 0) 50%);
+      }
+    }
+  }
+    
+  &.--violet {
+    background: $nls-color-violet;
+
+    .teaser {
+
+      &:after {
+        content: '';
+        position: absolute; top: 0; left: 0;
+        height: 100%; width: 100%;
+        background: linear-gradient(to top, $nls-color-violet 0%, rgba($nls-color-violet, 0) 50%);
+      }
+    }
+  }
+    
+  &.--purple {
+    background: $nls-color-purple;
+
+    .teaser {
+
+      &:after {
+        content: '';
+        position: absolute; top: 0; left: 0;
+        height: 100%; width: 100%;
+        background: linear-gradient(to top, $nls-color-purple 0%, rgba($nls-color-purple, 0) 50%);
+      }
+    }
+  }  
+
+  &.--pink {
+    background: $nls-color-pink;
+    
+    .teaser {
+
+      &:after {
+        content: '';
+        position: absolute; top: 0; left: 0;
+        height: 100%; width: 100%;
+        background: linear-gradient(to top, $nls-color-pink 0%, rgba( $nls-color-pink, 0) 50%);
+      }
+    }
+  }
+
+  .teaser {
+    overflow: hidden;
+    padding: 5rem 3rem;
+  }
+}
+
+@import "cards";
+@import "columns";