changed colors, added webfont

2019/Joca_van_der_Horst/begin.rive

@@ -25,3 +25,4 @@
 ! sub hi = hello
 ! sub publication = thesis
 ! sub book = thesis
+! sub smart speaker theatre = project

2019/Joca_van_der_Horst/brain.rive

@@ -4,9 +4,6 @@
 + hello
 - hello, what is your name?
 
-+ hi
-- hi, what is your name?
-
 + hello <bot name>
 - Hello my friend
 
@@ -20,6 +17,9 @@
 - no problem
 - no worries
 
++ what is your name [*]
+- My name is SAINT.
+
 + [*] thesis [*]
 - The publication is called <i>The Ghost in the Speaker</i>. It features essays reflecting on the virtual assistant, and what role personality could play for storytelling using smart speakers.
 

2019/Joca_van_der_Horst/style.css

@@ -1,6 +1,28 @@
+@font-face {
+    font-family: 'Space Grotesk Regular';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Space Grotesk Regular'), url('./font/SpaceGrotesk-Regular.woff') format('woff');
+    }  
+    
+    @font-face {
+    font-family: 'Space Grotesk Medium';
+    font-style: normal;
+    font-weight: normal;
+    src: local('Space Grotesk Medium'), url('./font/SpaceGrotesk-Medium.woff') format('woff');
+    }
+    
+
 * {
-    font-family: Karla;
+    font-family: 'Space Grotesk Regular', sans-serif;
     font-size: 1.2rem;
+    line-height: 1.3;
+    letter-spacing: 0.02em;
+    font-feature-settings: "ss01";
+  }
+
+  b {
+    font-family: 'Space Grotesk Medium';
   }
   
   .chat {
@@ -31,16 +53,17 @@
     width: 79.89%;
     outline: 0;
     border: 0;
-    background-color: #dfdfdf;
+    background-color: #EFEBE7;
     padding: 0 1%;
+    text-indent: 10px;
   }
 
   .actions button {
     height: 100%;
     float: right;
     width: 18%;
-    background-color:#44c767;
+    background-color:#032FC5;
-	border:1px solid #18ab29;
+	border:1px solid #0055b3;
 	display:inline-block;
 	cursor:pointer;
 	color:#ffffff;
@@ -49,7 +72,7 @@
   }
 
   .actions button:hover {
-    background-color:#5cbf2a;
+    background-color:#0055b3;
   }
 
   .messages {
@@ -69,8 +92,8 @@
   .messages .bot {
     text-align: left;
     margin-right: auto;
-    background: #0066cc;
+    background: #032FC5;
-    color: white;
+    color: #E5EDE2;
     width: max-content;
     min-width: 30%;
   }
@@ -79,10 +102,6 @@
       color: white;
   }
   
-  .messages .bot b {
-    color: yellow;
-}
-  
   .messages .self {
     margin-left: auto;
     background: #DDD;
@@ -90,13 +109,14 @@
     min-width: 30%;
   }
 
-  @media all and (max-width: 768px) { 
+  @media all and (max-width: 767px) { 
     * {
         font-size: 1.1rem;
     }
 
     .chat {
-        padding-top: 10%;
+        margin-top: 10%;
+        height: calc(90% - 60px);
     }
     
     .messages div {

2019/Joca_van_der_Horst/welcome.txt

@@ -1,3 +1,3 @@
-Hi Human! My name is SAINT, I am a smart speaker. But not quite like Google Home, or Amazon Echo.
+Hi Human! My name is SAINT, I am a smart speaker. (But not quite like Google Home, or Amazon Echo)
-<img width="50%" src="./img/selfie.jpg"> <br> (I mean, I look like this) #speakerselfie
+<img width="50%" src="./img/selfie.jpg"> <br> #speakerselfie
 I run the website of the <b>Smart Speaker Theatre</b>. Do you want to know more about the <b>project</b>, or the <b>publication</b>?