credits typografie
This commit is contained in:
parent
54bb2787bc
commit
4990a87f33
2 changed files with 39 additions and 14 deletions
|
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue