credits typografie

This commit is contained in:
merijn van moll 2020-01-22 16:00:21 +01:00
parent 54bb2787bc
commit 4990a87f33
2 changed files with 39 additions and 14 deletions

View file

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

View file

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