Difference between revisions of "Template:TAS Taipei/CSS4"

 
(26 intermediate revisions by the same user not shown)
Line 57: Line 57:
 
     left: 45vw;
 
     left: 45vw;
 
     cursor: pointer;
 
     cursor: pointer;
 +
}
 +
 +
.chevron.active{
 +
    display: none;
 
}
 
}
  
Line 65: Line 69:
 
     position: absolute;
 
     position: absolute;
 
     width: 100%;
 
     width: 100%;
−
     bottom: -2px;
+
     bottom: -6px;
 
     text-align: center;
 
     text-align: center;
 +
}
 +
 +
 +
.navCap.deactive{
 +
    display: none;
 
}
 
}
  
Line 136: Line 145:
 
}
 
}
  
 +
.medal{
 +
    z-index: 3;
 +
    width: 30vh;
 +
    position: absolute;
 +
    top:0;
 +
    right:0;
 +
}
  
 
@media screen and (max-width: 1020px) {
 
@media screen and (max-width: 1020px) {
Line 274: Line 290:
 
         top: 0;
 
         top: 0;
 
         width: 98vw;
 
         width: 98vw;
−
         margin-top: 110px;
+
         margin-top: 120px;
 
         margin-left: 1vw;
 
         margin-left: 1vw;
 
         margin-right: 1vw;
 
         margin-right: 1vw;
Line 286: Line 302:
 
         background-repeat: no-repeat;
 
         background-repeat: no-repeat;
 
         display: none;
 
         display: none;
 +
    }
 +
    .banner.marginFix{
 +
        height: 105vh;
 
     }
 
     }
 
     .banner>.guide {
 
     .banner>.guide {
Line 293: Line 312:
 
         background: #FAFAFA;
 
         background: #FAFAFA;
 
         color: black;
 
         color: black;
−
         position: absolute;
+
         position: fixed;
 
         font-family: 'Product Sans', sans-serif;
 
         font-family: 'Product Sans', sans-serif;
 
         z-index: 3;
 
         z-index: 3;
Line 421: Line 440:
 
     }
 
     }
 
     .attr-banner {
 
     .attr-banner {
−
         background-image: url('https://static.igem.org/mediawiki/2017/a/a5/T--TAS_Taipei--Attr_banner.jpg');
+
         background-image: url('https://static.igem.org/mediawiki/2017/1/14/T--TAS_Taipei--Attr_banner_Face.jpg');
 
         background-size: cover;
 
         background-size: cover;
 
         background-repeat: none;
 
         background-repeat: none;
Line 437: Line 456:
 
         box-shadow: -5px 0 0 0 #83af9b;
 
         box-shadow: -5px 0 0 0 #83af9b;
 
     }
 
     }
−
    .slider-holder
 
−
        {
 
−
            width: 100vw;
 
−
            height: 98vh;
 
−
            background-color: ;
 
−
            margin-left: auto;
 
−
            margin-right: auto;
 
−
            margin-top: 0px;
 
−
            text-align: center;
 
−
            overflow: hidden;
 
−
            position: absolute;
 
−
            right: 0;
 
−
        }
 
−
       
 
−
        .image-holder
 
−
        {
 
−
            width: 300vw;
 
−
            background-color: #3498db;
 
−
            height: 98vh;
 
−
            clear: both;
 
−
            position: relative;
 
−
           
 
−
            -webkit-transition: right 1s;
 
−
            -moz-transition: right 1s;
 
−
            -o-transition: right 1s;
 
−
            transition: right 1s;
 
−
        }
 
−
       
 
−
        .slider-holder.marginFix {
 
−
            height: 100vh;
 
−
        }
 
  
−
        .image-holder.marginFix {
+
    .mainVideo{
−
            height: 100vh;
+
        width: 100vw;
−
         }
+
         position: absolute;
−
 
+
         top: -80px;
−
         .slider-image
+
         left: 0;
−
         {
+
    }
−
            float: left;
+
}
−
            margin: 0px;
+
−
            padding: 0px;
+
−
            position: relative;
+
−
            width: 100vw;
+
−
        }
+
  
−
        #video_resize {
+
@media screen and (min-width: 1250px) {
−
            height: 100vh;
+
    #abstract1 {
−
         }
+
        font-family: 'Product Sans', sans-serif !important;
−
 
+
         color: white;
−
         #gif_resize{
+
         line-height: 3.5vh;
−
            height: 90vh;
+
         margin-right: 20px;
−
         }
+
        font-size: 3vh;
−
 
+
         text-align: center !important;
−
         .slider_1, .slider_2, .slider_3{
+
         position: fixed;
−
            background-color: black;
+
         top: 0;
−
         }
+
         width: 98vw;
−
 
+
         margin-top: 110px;
−
         .slider_1.active{
+
         margin-left: 1vw;
−
            background-color: white;
+
         margin-right: 1vw;
−
         }
+
    }
−
 
+
    #this_title {
−
         .slider_2.active{
+
         margin-top: 0;
−
            background-color: white;
+
         font-size: 4vh;
−
         }
+
         font-weight: 900px;
−
 
+
         line-height: 3vh;
−
         .slider_3.active{
+
         padding-top: 1vh;
−
            background-color: white;
+
         color: white !important;
−
        }
+
         text-shadow: 0 0 10px grey;
−
       
+
         position: fixed;
−
         #slider-image-1, #slider-image-2, #slider-image-3{
+
        top: 0;
−
            top:0;
+
         width: 98vw;
−
         }
+
         margin-top: 145px;
−
 
+
         margin-left: 1vw;
−
         #slider-image-1:target ~ .image-holder
+
         margin-right: 1vw;
−
         {
+
    }
−
            right: 1px;
+
    #this_title_2 {
−
         }
+
         margin-top: 0;
−
          
+
         font-size: 4vh;
−
         #slider-image-2:target ~ .image-holder
+
        font-weight: 900px;
−
         {
+
        line-height: 3vh;
−
            right: 100vw;
+
        padding-top: 1vh;
−
         }
+
         color: white !important;
−
          
+
         text-shadow: 0 0 10px grey;
−
         #slider-image-3:target ~ .image-holder
+
         position: fixed;
−
         {
+
         top: 0;
−
            right: 200vw;
+
        width: 98vw;
−
        }
+
        margin-top: 160px;
−
       
+
        margin-left: 1vw;
−
         #slider-image-3{
+
        margin-right: 1vw;
−
            top: 0;
+
    }
−
         }
+
−
 
+
−
        .button-holder
+
−
        {
+
−
            position: absolute;
+
−
            bottom: 20px;
+
−
            right: 10px;
+
−
            z-index: 4;
+
−
         }
+
−
          
+
−
        .button-holder.marginFix{
+
−
            bottom: 25px;
+
−
         }
+
−
        .button-holder.hover{
+
−
            display: none;
+
−
         }       
+
−
        .slider-change
+
−
        {
+
−
            display: inline-block;
+
−
            height: 10px;
+
−
            width: 10px;
+
−
            border-radius: 5px;
+
−
            background-color: grey;
+
−
        }
+
 
}
 
}
  
Line 580: Line 539:
 
     top: 0;
 
     top: 0;
 
     width: 98vw;
 
     width: 98vw;
−
     margin-top: 150px;
+
     margin-top: 155px;
 +
    margin-left: 1vw;
 +
    margin-right: 1vw;
 +
}
 +
 
 +
#this_title_2 {
 +
    margin-top: 0;
 +
    font-size: 4vh;
 +
    font-weight: 900px;
 +
    line-height: 3vh;
 +
    padding-top: 1vh;
 +
    color: white !important;
 +
    text-shadow: 0 0 10px grey;
 +
    position: fixed;
 +
    top: 0;
 +
    width: 98vw;
 +
    margin-top: 180px;
 
     margin-left: 1vw;
 
     margin-left: 1vw;
 
     margin-right: 1vw;
 
     margin-right: 1vw;
Line 720: Line 695:
 
     padding-right: 10%;
 
     padding-right: 10%;
 
     top: 100vh;
 
     top: 100vh;
−
    height: 50vh;
 
 
     text-align: justify;
 
     text-align: justify;
 +
}
 +
 +
.cv.active{
 +
    display: none;
 
}
 
}
  
Line 787: Line 765:
 
     padding-right: 15px;
 
     padding-right: 15px;
 
     padding-left: 15px;
 
     padding-left: 15px;
−
    float: left;
 
 
     background-color: none !important;
 
     background-color: none !important;
 
}
 
}

Latest revision as of 07:10, 30 November 2017