Difference between revisions of "Template:Linkoping Sweden/Style"

Line 26: Line 26:
  
 
.menu {
 
.menu {
−
     margin: 0 auto;
+
     margin: 30px auto 0;
−
     width: 1000px;
+
     width: 1100px;
−
 
+
−
 
+
−
    margin-top: 30px;
+
  
 
     background: #fff;
 
     background: #fff;
Line 38: Line 35:
 
     width: 200px;
 
     width: 200px;
 
     height: 141px;
 
     height: 141px;
−
     padding: 30px;
+
     padding: 10px 30px 30px;
−
    padding-top: 20px;
+
 
}
 
}
  
Line 48: Line 44:
 
     background: url('https://static.igem.org/mediawiki/2016/b/bf/T--Linkoping_Sweden--LiU_bike_bg.jpg');
 
     background: url('https://static.igem.org/mediawiki/2016/b/bf/T--Linkoping_Sweden--LiU_bike_bg.jpg');
 
     background-size: cover;
 
     background-size: cover;
 +
    padding-top: 10px;
 +
    padding-right: 13px;
 
}
 
}
  
Line 53: Line 51:
 
     align-items: stretch;
 
     align-items: stretch;
 
     text-align: center;
 
     text-align: center;
−
     width: 90px;
+
    vertical-align: top;
 +
     width: 38px;
 +
    height: 44px;
 +
    cursor: pointer;
 +
 
  
−
    background-size: cover;
 
−
    background-position: center;
 
 
     transition: all .2s;
 
     transition: all .2s;
 
}
 
}
Line 62: Line 62:
 
.menu .head div:hover {
 
.menu .head div:hover {
 
     transform: scale(1.2);
 
     transform: scale(1.2);
−
    cursor: pointer;
 
 
}
 
}
  
Line 70: Line 69:
  
 
.menu .head div img {
 
.menu .head div img {
−
     width: 40px;
+
     width: 24px;
−
}
+
     height: 24px;
−
 
+
     padding: 10px 7px;
−
#menu-facebook {
+
−
     background-image: url('https://static.igem.org/mediawiki/2016/0/01/T--Linkoping_Sweden--social_fb.jpg');
+
−
}
+
−
 
+
−
#menu-instagram {
+
−
     background-image: url('https://static.igem.org/mediawiki/2016/d/d0/T--Linkoping_Sweden--social_instagram.jpg');
+
−
}
+
−
 
+
−
#menu-twitter {
+
−
    background-image: url('https://static.igem.org/mediawiki/2016/2/22/T--Linkoping_Sweden--social_twitter.jpg');
+
 
}
 
}
  
 
.content-container {
 
.content-container {
−
     width: 1000px;
+
     width: 1100px;
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     background-color: #fff;
 
     background-color: #fff;
Line 143: Line 132:
 
}
 
}
  
−
.content h1, .content h2, .content h3, .content h4, .content h5 {
+
#HQ_page .content h1, .content h2, .content h3, .content h4, .content h5 {
 
     font-family: 'Playfair Display', serif;
 
     font-family: 'Playfair Display', serif;
 
     font-size: 187%;
 
     font-size: 187%;
Line 183: Line 172:
 
     margin-left: 60px;
 
     margin-left: 60px;
 
     float: right;
 
     float: right;
 +
}
 +
 +
.team-container {
 +
    position: relative;
 +
    margin-top: 30px;
 +
    display: flex;
 +
    width: 100%;
 +
 +
    justify-content: flex-start;
 +
}
 +
 +
.team-container div {
 +
    overflow: hidden;
 +
    position: relative;
 +
 +
 +
    transition: all 0.6s;
 +
}
 +
 +
.team-container.images-3 div {
 +
    max-width: 34%;
 +
}
 +
 +
.team-container.images-11 div {
 +
    max-width: 9%;
 +
}
 +
 +
.team-container img {
 +
    height: 600px;
 +
    margin: auto;
 +
    position: relative;
 +
    left: 50%;
 +
    transform: translateX(-50%);
 +
    display: block; /* optional */
 +
 +
    cursor: pointer;
 +
 +
    -webkit-filter: grayscale(100%);
 +
    filter: grayscale(100%);
 +
    filter: gray;
 +
    filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
 +
 +
    -webkit-transition: -webkit-filter 0.4s, transform 0.4s;
 +
    -moz-transition: filter 0.4s, transform 0.4s;
 +
    -ms-transition: filter 0.4s, transform 0.4s;
 +
    -o-transition: filter 0.4s, transform 0.4s;
 +
    transition: filter 0.4s, transform 0.4s;
 +
    transition: -webkit-filter 0.4s, transform 0.4s;
 +
}
 +
 +
.team-container img:hover, .team-container .active img {
 +
    -webkit-filter: none;
 +
    filter: none;
 +
}
 +
 +
.team-container.displaying div {
 +
    max-width: 0;
 +
}
 +
 +
.team-container.displaying div.active {
 +
    max-width: 400px;
 +
}
 +
 +
.team-container.displaying div.info, .team-container.displaying div.member-info {
 +
    max-width: 100%;
 +
}
 +
 +
.team-container div.info p {
 +
    margin-top: 30px;
 +
}
 +
 +
.team-container div.info {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 400px;
 +
    bottom: 0;
 +
    right: 0;
 +
    margin: 20px;
 +
    max-width: 100%;
 +
}
 +
 +
.team-container div.member-info {
 +
    max-width: 100%;
 +
}
 +
 +
.team-container div.info .info-close {
 +
    float: right;
 +
    margin-top: 17px;
 +
    background: #000;
 +
    padding: 5px 10px;
 +
    color: #fff;
 +
 +
    cursor: pointer;
 +
 +
    -webkit-transition: background 0.4s;
 +
    -moz-transition: background 0.4s;
 +
    -ms-transition: background 0.4s;
 +
    -o-transition: background 0.4s;
 +
    transition: background 0.4s;
 +
}
 +
 +
.team-container div.info .info-close:hover {
 +
    background: #666;
 +
}
 +
 +
#member-info {
 +
    display: none;
 
}
 
}
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 13:26, 3 August 2016