credits typografie

www/backend/backend.html

@@ -12,10 +12,10 @@
 <div id="wrapper">
 <div v-if="hit && hit.assignment" :class="[{'invisible': !hit.visible}, 'hit']">
 		<img :src="hit.scan_image">
-		
+
 		<div class='credits'>
-		<span class='worker_id'>{{hit.assignment.worker_id}}</span>
-		<span class='country'>{{hit.assignment.turk_country}}</span>
+		<span class='worker_id'>test{{hit.assignment.worker_id}}</span>
+		<span class='country'>test{{hit.assignment.turk_country}}</span>
 		<template v-if="hit.preceding_assignments.length">
 			<div id='collaborators'>
 				<div id='collab_items'>
@@ -27,9 +27,9 @@
 			</div>
 		</template>
 		</div>
-	
+
 </div>
-	
+
 
 
 

www/backend/style.css

@@ -3,9 +3,19 @@
     src: url('/font/BebasNeue-Regular.ttf');
 }
 
+@font-face {
+  font-family: 'freesans';
+  src: url('/font/FreeSans.ttf')
+}
+
+@font-face {
+  font-family: 'bt';
+  src: url('/font/steelfish_rg.ttf')
+}
+
 :root{
 
-  --base-font-size: 30px;
+  --base-font-size: 60px;
   --spec_name-font-size: 120%;
   --spec_value-font-size: 250%;
 
@@ -29,8 +39,9 @@ body{
 	background: black;
 	margin:0;
 	color:white;
-	font-family: bebas;
+	font-family: 'bt';
 	font-size: var(--base-font-size);
+  line-height: var(--base-font-size)*1.5;
 }
 
 .hit{
@@ -66,21 +77,33 @@ body{
 	width: 1000px;
 	height: 500px;
 	border: solid 1px white;
-	
+
 }
 
 .credits{
-	font-size: 60px;
+	font-size: var(--base-font-size);
+
+  text-transform: uppercase;
 }
 
 .credits::before{
 	content:'created by';
+  font-family: 'freesans';
+  text-transform: lowercase;
 	display:block;
-	font-size: 60%;
-	
+	font-size: calc(var(--base-font-size)/3);
+
 }
 
-.country{color: gray;}
+.country{
+  /* color: #fff; */
+  /* font-family: 'freesans';
+  text-transform: lowercase; */
+  font-size: calc(var(--base-font-size)/2);
+  vertical-align: 67%;
+  margin-left: -5px;
+  margin-right: 15px;
+}
 .country::before{content:'(';}
 .country::after{content:')';}
 
@@ -96,8 +119,10 @@ body{
 	margin-top: 7vh;
 	content:'in collaboration with';
 	display:block;
-	font-size: 60%;
+  font-family: 'freesans';
+	font-size: calc(var(--base-font-size)/3);
+  text-transform: lowercase;
 }
 #collaborators .credit{
 	margin-right:10px;
-}
+}