Version Negativo

src/app/init/init.component.html

@@ -1,5 +1,5 @@
-<div class="slide">
+<div class="slide" routerLink="home" (click)="play()" style="background-image:url('https://git.audio-lab.org/lrullo/beire-hugo/raw/branch/master/content/items/noche/noche.gif');">
-  <div class="element">
+  <div class="element" *ngIf="false">
     <h1 routerLink="home" (click)="play()" style="cursor:pointer">Beire</h1>
     <h2>Un propuesta de Maite Redondo y Luca Rullo</h2>
     <!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->

src/app/slide/slide.component.html

@@ -6,8 +6,16 @@
 </div>
 
 <div class="controls" *ngIf="slide">
-  <div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
+  <div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><</div></div>
-  <div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
+  <div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)">></div></div>
-  <div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
+  <div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><div class="rotate-up"><</div></div></div>
-  <div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
+  <div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><div class="rotate-down"><</div></div></div>
+</div>
+
+<div class="header">
+  <h1>Beire</h1>
+</div>
+
+<div class="header menu">
+  <h1>+</h1>
 </div>

src/app/slide/slide.component.scss

@@ -6,7 +6,8 @@ div.slide {
   height:100vh;
   background-size:cover;
   background-color:$slide-background;
-  background-blend-mode: luminosity;
+  // background-blend-mode: luminosity;
+  filter:invert(1);
   background-position: center center;
   display:flex;
   justify-content: center;
@@ -22,11 +23,12 @@ div.element {
 }
 
 div.big-title {
-  text-transform:uppercase;
   font-weight: bold;
-  font-family:"Swiss Bold",sans-serif;
+  font-family:"Helvetica Bold",sans-serif;
-  font-size:10vw;
+  font-size:2vw;
-  opacity:0.6;
+  color:$primary;
+  opacity:1;
+  max-width: 30px;
 }
 
 div.second-title {
@@ -50,4 +52,17 @@ div.arrow {
   align-items: center;
   align-content: center;
   text-align: center;
+  font-size:2vw;
+  font-weight:bold;
+  div.rotate-up { transform:rotate(90deg);}
+  div.rotate-down { transform:rotate(-90deg);}
+}
+
+/* header */
+div.header {
+  position:absolute;z-index:10;top:0;left:0;height:10vh;width:100vw;text-align:left;margin-left:5vw;margin-top:3vw;
+}
+
+div.menu {
+  margin-left:95vw;z-index:200;cursor:pointer;
 }

src/styles.scss

@@ -13,25 +13,45 @@
   src:url('assets/font/swisslight.woff2');
 }
 
+@font-face{
+  font-family:"Helvetica";
+  src:url('assets/font/HelvLight Regular.ttf');
+}
+
+@font-face {
+  font-family:"Helvetica Bold";
+  src:url('assets/font/HelveticaWorld-Bold.ttf');
+}
+
+@font-face{
+  font-family:"Frutiger";
+  src:url('assets/font/FrutigerLTStd-Cn.otf');
+}
+
 body {
   margin:0;
   padding:0;
   background-color:$background-color;
   cursor:crosshair;
-  font-family:"Swiss Light";
+  font-family:"Frutiger";
 }
 
 h1 {
   // font-family:"Staatliches",sans-serif;
   text-transform:uppercase;
-  font-family:"Swiss Bold";
+  font-family:"Frutiger";
-  font-size:10vw;
+  font-weight:100;
-  opacity:0.6;
+  font-size:2vw;
+  // opacity:0.6;
 }
 
 h2 {
   font-size:3vw;
-  font-family:"Swiss Light",serif;
+  font-family:"Frutiger",serif;
+}
+
+h3 {
+  font-family:"Frutiger";
 }
 
 /* animations css */