guest_worker/www/backend/style.css

130 lines
2.2 KiB
CSS
Raw Normal View History

2020-01-22 13:36:52 +00:00
@font-face {
font-family: 'bebas';
src: url('/font/BebasNeue-Regular.ttf');
}
2020-01-22 15:00:21 +00:00
@font-face {
font-family: 'freesans';
src: url('/font/FreeSans.ttf')
}
@font-face {
font-family: 'bt';
src: url('/font/steelfish_rg.ttf')
}
2020-01-22 13:36:52 +00:00
:root{
2020-01-22 15:00:21 +00:00
--base-font-size: 60px;
2020-01-22 13:36:52 +00:00
--spec_name-font-size: 120%;
--spec_value-font-size: 250%;
--base-color: #271601; /* tekst */
--alt-color: #FFF5DF; /* achtergrond */
--amazon-color: #F0C14C;
/* ////// GAT ACHTERKANT PLEK & POSITIE /////// */
/* */ /* */
/* */ --pos-x: 0px; /* */
/* */ --pos-y: 50px; /* */
/* */ --width: 100%; /* 285mm */
/* */ --height: 100%; /* 500mm */
/* */ /* */
/* //////////////////////////////////////////// */
}
body{
background: black;
margin:0;
2020-01-22 16:05:38 +00:00
color:#f5f5f5;
2020-01-22 15:00:21 +00:00
font-family: 'bt';
2020-01-22 13:36:52 +00:00
font-size: var(--base-font-size);
2020-01-22 15:00:21 +00:00
line-height: var(--base-font-size)*1.5;
2020-01-22 13:36:52 +00:00
}
.hit{
position:absolute;
top:var(--pos-y);
2020-01-22 16:05:38 +00:00
left:24px;
right:21px;
2020-01-22 13:36:52 +00:00
bottom:0;
text-align: center;
transition: opacity 1s;
opacity: 1;
/*animation: fadeIn 1s, fadeOut 1s 2s;*/
}
.hit.invisible{
opacity: 0;
}
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
@keyframes fadeOut{
from{opacity:1;}
to{opacity:0;}
}
.hit img{
display: block;
2020-01-22 16:05:38 +00:00
margin: 6vh auto 7vh;
width: 875px;
2020-01-22 15:00:21 +00:00
2020-01-22 13:36:52 +00:00
}
.credits{
2020-01-22 15:00:21 +00:00
font-size: var(--base-font-size);
2020-01-22 16:05:38 +00:00
text-transform: uppercase;
2020-01-22 13:36:52 +00:00
}
.credits::before{
content:'created by';
2020-01-22 15:00:21 +00:00
font-family: 'freesans';
text-transform: lowercase;
2020-01-22 13:36:52 +00:00
display:block;
2020-01-22 15:00:21 +00:00
font-size: calc(var(--base-font-size)/3);
2020-01-22 13:36:52 +00:00
}
2020-01-22 15:00:21 +00:00
.country{
/* color: #fff; */
/* font-family: 'freesans';
text-transform: lowercase; */
2020-01-23 12:24:53 +00:00
font-size: 50%;
2020-01-22 15:00:21 +00:00
vertical-align: 67%;
margin-left: -5px;
2020-01-23 12:24:53 +00:00
margin-right: .4em;
2020-01-22 15:00:21 +00:00
}
2020-01-22 13:36:52 +00:00
.country::before{content:'(';}
.country::after{content:')';}
#collaborators{
2020-01-23 12:24:53 +00:00
height: 27vh;
2020-01-22 16:05:38 +00:00
width: 800px;
2020-01-22 13:36:52 +00:00
margin: 0 auto;
}
#collab_items{
2020-01-22 16:05:38 +00:00
text-align: justify-center;
2020-01-22 13:36:52 +00:00
}
#collaborators::before{
margin-top: 7vh;
content:'in collaboration with';
display:block;
2020-01-22 15:00:21 +00:00
font-family: 'freesans';
font-size: calc(var(--base-font-size)/3);
text-transform: lowercase;
2020-01-22 13:36:52 +00:00
}
#collaborators .credit{
2020-01-23 12:24:53 +00:00
margin-right:.1em;
white-space: nowrap;
display: inline-block;
2020-01-22 15:00:21 +00:00
}