Difference between revisions of "Template:Rotterdam HR/css/team"

 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
/* ------ TEAMLEDEN CSS ------ */
 
/* ------ TEAMLEDEN CSS ------ */
−
 
−
/* .team-members {
 
−
 
−
} */
 
−
 
 
h1 {
 
h1 {
−
background: rgba(255,255,255, 0.2);
+
background: var(--color-primary);
 +
color: white;
 
text-align: center;
 
text-align: center;
 
padding: 20px 0;
 
padding: 20px 0;
Line 36: Line 32:
 
}
 
}
 
.item {
 
.item {
−
transition: 0.2s;
+
transition: 200ms;
 
margin: 10px;
 
margin: 10px;
 
padding: 10px;
 
padding: 10px;
Line 51: Line 47:
 
height: 320px;
 
height: 320px;
 
border-radius: 50%;
 
border-radius: 50%;
−
transition: 0.2s;
+
transition: all 200ms,
 +
background-image 200ms 500ms;
 
}
 
}
 
.item .title {
 
.item .title {
 
margin: 10px 0;
 
margin: 10px 0;
 
padding: 5px 0;
 
padding: 5px 0;
−
background: rgba(255,255,255, 0.2);
+
background: rgba(255,255,255,0.7) !important;
 
display: flex;
 
display: flex;
 
color: black;
 
color: black;
Line 84: Line 81:
 
width: 280px;
 
width: 280px;
 
height: 280px;
 
height: 280px;
−
}
 
−
.item .summary strong {
 
−
font-size: small;
 
−
}
 
−
.item .summary i {
 
−
font-size: x-small;
 
 
}
 
}
 
}
 
}
Line 148: Line 139:
 
.item #esra {
 
.item #esra {
 
background: url('https://static.igem.org/mediawiki/2018/d/d4/T--Rotterdam_HR--esra.jpeg');
 
background: url('https://static.igem.org/mediawiki/2018/d/d4/T--Rotterdam_HR--esra.jpeg');
 +
background-size: 100%;
 +
}
 +
 +
.item:hover #mei-ju {
 +
background: url('https://static.igem.org/mediawiki/2018/a/a5/T--Rotterdam_HR--mei-ju-extra.jpg');
 +
background-size: 100%;
 +
}
 +
.item:hover #mike {
 +
background: url('https://static.igem.org/mediawiki/2018/8/8b/T--Rotterdam_HR--Mike-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item #rens:hover {
 +
background: url('https://static.igem.org/mediawiki/2018/c/cc/T--Rotterdam_HR--rens-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item:hover #dustin {
 +
background: url('https://static.igem.org/mediawiki/2018/1/12/T--Rotterdam_HR--dustin-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item:hover #suzanne {
 +
background: url('https://static.igem.org/mediawiki/2018/8/82/T--Rotterdam_HR--suzanne-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item:hover #randall {
 +
background: url('https://static.igem.org/mediawiki/2018/1/10/T--Rotterdam_HR--randall-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item:hover #loraine {
 +
background: url('https://static.igem.org/mediawiki/2018/c/cb/T--Rotterdam_HR--loraine-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item:hover #tom {
 +
background: url('https://static.igem.org/mediawiki/2018/9/92/T--Rotterdam_HR--tom-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item:hover #elise {
 +
background: url('https://static.igem.org/mediawiki/2018/8/87/T--Rotterdam_HR--elise-extra.jpeg');
 +
background-size: 100%;
 +
}
 +
.item:hover #paul {
 +
background: url('https://static.igem.org/mediawiki/2018/8/8a/T--Rotterdam_HR--paul-extra.jpeg');
 
background-size: 100%;
 
background-size: 100%;
 
}
 
}

Latest revision as of 19:45, 7 December 2018

/* ------ TEAMLEDEN CSS ------ */ h1 { background: var(--color-primary); color: white; text-align: center; padding: 20px 0; margin: 20px 0; }

.item p { margin: 0; padding: 10px; } .item h3 { margin: 0; } .item ul { margin: 0; padding: 3px 0 3px 10px; list-style-type: none; border-left: black solid 2px; } .team-banner { margin: 20px; } .multiple-items { display: flex; flex-wrap: wrap; width: 90%; justify-content: space-evenly; margin: 0 auto; } .item { transition: 200ms; margin: 10px; padding: 10px; } .item .summary { background: rgba(255, 255, 255, 0.8); display: none; width: 100%; height: 100%; overflow: hidden; } .item .profile-picture { width: 320px; height: 320px; border-radius: 50%; transition: all 200ms, background-image 200ms 500ms; } .item .title { margin: 10px 0; padding: 5px 0; background: rgba(255,255,255,0.7) !important; display: flex; color: black; text-decoration: none; } .item .title .linked-in:hover{ filter: grayscale(50%); } .item .title:hover { text-decoration: underline; } .item .title .linked-in { margin: 5px; } .item:hover { margin: 0; } .item:hover .summary{ display: block; } .item:hover .profile-picture { border-radius: 0%; padding: 10px; } @media (max-width: 860px) { .item .profile-picture { width: 280px; height: 280px; } } @media (max-width: 480px) { .team-banner { display: none; } } /* ------ PROFILE PICTURES ------ */ .item #mei-ju { background: url('https://static.igem.org/mediawiki/2018/4/42/T--Rotterdam_HR--mei-ju.jpeg'); background-size: 100%; } .item #dustin { background: url('https://static.igem.org/mediawiki/2018/3/39/T--Rotterdam_HR--dustin.jpeg'); background-size: 100%; } .item #suzanne { background: url('https://static.igem.org/mediawiki/2018/f/f3/T--Rotterdam_HR--suzanne.jpeg'); background-size: 100%; } .item #randall { background: url('https://static.igem.org/mediawiki/2018/8/80/T--Rotterdam_HR--randall.jpeg'); background-size: 100%; } .item #elise { background: url('https://static.igem.org/mediawiki/2018/e/e0/T--Rotterdam_HR--elise.jpeg'); background-size: 100%; } .item #paul { background: url('https://static.igem.org/mediawiki/2018/c/c0/T--Rotterdam_HR--paul.jpeg'); background-size: 100%; } .item #mike { background: url('https://static.igem.org/mediawiki/2018/f/f6/T--Rotterdam_HR--mike.jpeg'); background-size: 100%; } .item #loraine { background: url('https://static.igem.org/mediawiki/2018/9/99/T--Rotterdam_HR--loraine.jpeg'); background-size: 100%; } .item #tom { background: url('https://static.igem.org/mediawiki/2018/a/a4/T--Rotterdam_HR--tom.jpeg'); background-size: 100%; } .item #rens { background: url('https://static.igem.org/mediawiki/2018/9/98/T--Rotterdam_HR--rens.jpeg'); background-size: 100%; } .item #jos { background: url('https://static.igem.org/mediawiki/2018/5/51/T--Rotterdam_HR--jos.jpeg'); background-size: 100%; } .item #eric { background: url('https://static.igem.org/mediawiki/2018/a/a5/T--Rotterdam_HR--eric.jpeg'); background-size: 100%; } .item #esra { background: url('https://static.igem.org/mediawiki/2018/d/d4/T--Rotterdam_HR--esra.jpeg'); background-size: 100%; }

.item:hover #mei-ju { background: url('https://static.igem.org/mediawiki/2018/a/a5/T--Rotterdam_HR--mei-ju-extra.jpg'); background-size: 100%; } .item:hover #mike { background: url('https://static.igem.org/mediawiki/2018/8/8b/T--Rotterdam_HR--Mike-extra.jpeg'); background-size: 100%; } .item #rens:hover { background: url('https://static.igem.org/mediawiki/2018/c/cc/T--Rotterdam_HR--rens-extra.jpeg'); background-size: 100%; } .item:hover #dustin { background: url('https://static.igem.org/mediawiki/2018/1/12/T--Rotterdam_HR--dustin-extra.jpeg'); background-size: 100%; } .item:hover #suzanne { background: url('https://static.igem.org/mediawiki/2018/8/82/T--Rotterdam_HR--suzanne-extra.jpeg'); background-size: 100%; } .item:hover #randall { background: url('https://static.igem.org/mediawiki/2018/1/10/T--Rotterdam_HR--randall-extra.jpeg'); background-size: 100%; } .item:hover #loraine { background: url('https://static.igem.org/mediawiki/2018/c/cb/T--Rotterdam_HR--loraine-extra.jpeg'); background-size: 100%; } .item:hover #tom { background: url('https://static.igem.org/mediawiki/2018/9/92/T--Rotterdam_HR--tom-extra.jpeg'); background-size: 100%; } .item:hover #elise { background: url('https://static.igem.org/mediawiki/2018/8/87/T--Rotterdam_HR--elise-extra.jpeg'); background-size: 100%; } .item:hover #paul { background: url('https://static.igem.org/mediawiki/2018/8/8a/T--Rotterdam_HR--paul-extra.jpeg'); background-size: 100%; }