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

Line 61: Line 61:
 
}
 
}
  
−
#slideshow{
 
−
    display: block;
 
−
}
 
  
 
#top_menu_under {
 
#top_menu_under {
Line 119: Line 116:
 
     right: 0;
 
     right: 0;
 
}
 
}
 +
  
 
@media screen and (max-width: 1020px) {
 
@media screen and (max-width: 1020px) {
Line 148: Line 146:
 
         height: 100vh;
 
         height: 100vh;
 
         background: yellow;
 
         background: yellow;
−
         position: absolute;
+
         position: fixed;
 
         top: 0;
 
         top: 0;
 
         left: -80vw;
 
         left: -80vw;
 
         transition: all .3s ease;
 
         transition: all .3s ease;
 
         z-index: 4;
 
         z-index: 4;
 +
        cursor:pointer
 
     }
 
     }
 
     .blue {
 
     .blue {
Line 161: Line 160:
 
         top: 0;
 
         top: 0;
 
         left: 0px;
 
         left: 0px;
 +
        cursor:pointer
 
     }
 
     }
 
     .right {
 
     .right {
Line 168: Line 168:
 
     main {
 
     main {
 
         width: 100%;
 
         width: 100%;
−
         position: absolute;
+
         position: fixed;
 
         margin-left: 200px;
 
         margin-left: 200px;
 
         padding-left: 15px;
 
         padding-left: 15px;
 
         padding-top: 5px;
 
         padding-top: 5px;
−
         background: rgba(250, 250, 250, 1);
+
         background-color: #FAFAFA;
 
         height: 100vh;
 
         height: 100vh;
 
         top: 0;
 
         top: 0;
Line 178: Line 178:
 
     }
 
     }
 
     #abstract1 {
 
     #abstract1 {
−
         font-family: 'Roboto', sans-serif !important;
+
         font-family: 'Product Sans', sans-serif !important;
 +
        color: black;
 +
        line-height: 3vh !important;
 +
        margin-top: 0;
 +
        margin-right: 20px;
 +
        padding-top: 1vh;
 +
        padding-bottom: 10px;
 +
        width: 65vw;
 +
        font-size: 3vh !important;
 +
        font-weight: 500;
 +
        text-align: justify !important;
 +
    }
 +
    #abstract2 {
 +
        font-family: 'Arial', sans-serif !important;
 
         color: black;
 
         color: black;
 
         line-height: 2vh !important;
 
         line-height: 2vh !important;
Line 185: Line 198:
 
         padding-top: 1vh;
 
         padding-top: 1vh;
 
         padding-bottom: 10px;
 
         padding-bottom: 10px;
−
        border-bottom: 1px solid black;
 
 
         width: 65vw;
 
         width: 65vw;
 
         font-size: 2vh !important;
 
         font-size: 2vh !important;
Line 212: Line 224:
 
         transition: all .3s ease;
 
         transition: all .3s ease;
 
         z-index: 4;
 
         z-index: 4;
 +
        cursor:pointer
 +
    }
 +
    .yellow.active {
 +
        left: 10px;
 
     }
 
     }
 
     .blue {
 
     .blue {
Line 220: Line 236:
 
         top: 0;
 
         top: 0;
 
         left: 0px;
 
         left: 0px;
 +
        cursor:pointer
 
     }
 
     }
 
     main {
 
     main {
−
         width: 30vw;
+
         width: 25vw;
 
         position: absolute;
 
         position: absolute;
 
         margin-left: 100px;
 
         margin-left: 100px;
 
         padding-left: 15px;
 
         padding-left: 15px;
 
         padding-top: 5px;
 
         padding-top: 5px;
−
         background: rgba(250, 250, 250, 0.8);
+
         background: #FAFAFA;
 
         height: 100vh;
 
         height: 100vh;
 
         top: 0;
 
         top: 0;
 
         z-index: 3;
 
         z-index: 3;
 +
    }
 +
    main.active{
 +
        margin-top: 16px;
 +
    }
 +
    .slider-image.active{
 +
        margin-top: 16px;
 +
    }
 +
    .yellow.marginFix{
 +
        margin-top: 16px;
 
     }
 
     }
 
     #abstract1 {
 
     #abstract1 {
 +
        font-family: 'Product Sans', sans-serif !important;
 +
        color: black;
 +
        line-height: 3.5vh;
 +
        margin-right: 20px;
 +
        font-size: 3vh;
 +
        text-align: justify !important;
 +
    }
 +
    #abstract2 {
 
         font-family: 'Roboto', sans-serif !important;
 
         font-family: 'Roboto', sans-serif !important;
 
         color: black;
 
         color: black;
−
         line-height: 2.5vh;
+
         line-height: 3vh;
 
         margin-right: 20px;
 
         margin-right: 20px;
 
         padding-bottom: 10px;
 
         padding-bottom: 10px;
−
        border-bottom: 1px solid black;
 
 
         font-size: 2vh;
 
         font-size: 2vh;
 
         text-align: justify !important;
 
         text-align: justify !important;
Line 262: Line 295:
 
         padding-left: 20px;
 
         padding-left: 20px;
 
         margin: 0 !important;
 
         margin: 0 !important;
−
         padding-bottom: 0;
+
         padding-bottom: 15px;
 
     }
 
     }
 
     .banner>.guide>h1 {
 
     .banner>.guide>h1 {
Line 288: Line 321:
 
     }
 
     }
 
     .exp-banner {
 
     .exp-banner {
−
         background-image: url('https://static.igem.org/mediawiki/2017/e/ec/T--TAS_Taipei--Exp_banner.jpg');
+
         background-image: url('https://static.igem.org/mediawiki/2017/e/e2/T--TAS_Taipei--26Stack.jpg');
 
         background-size: cover;
 
         background-size: cover;
 
         z-index: 1;
 
         z-index: 1;
Line 335: Line 368:
 
     }
 
     }
 
     .hp-banner {
 
     .hp-banner {
−
         background-image: url('https://static.igem.org/mediawiki/2017/c/cb/T--TAS_Taipei--HP_banner.jpg');
+
         background-image: url('https://static.igem.org/mediawiki/2017/3/3c/T--TAS_Taipei--HP-Banner-new.jpg');
 
         background-size: cover;
 
         background-size: cover;
 
         background-repeat: none;
 
         background-repeat: none;
 
         z-index: 1;
 
         z-index: 1;
 
         display: none;
 
         display: none;
 +
        position: absolute;
 +
        right: 0;
 +
        width: Calc(100vw - 400px);
 
     }
 
     }
 
     .hp-banner.active {
 
     .hp-banner.active {
Line 382: Line 418:
 
     }
 
     }
 
     .attr-banner {
 
     .attr-banner {
−
         background-image: url('https://static.igem.org/mediawiki/2017/e/eb/T--TAS_Taipei--Attributions-Banner.jpg');
+
         background-image: url('https://static.igem.org/mediawiki/2017/a/a5/T--TAS_Taipei--Attr_banner.jpg');
 
         background-size: cover;
 
         background-size: cover;
 
         background-repeat: none;
 
         background-repeat: none;
 
         z-index: 1;
 
         z-index: 1;
 
         display: none;
 
         display: none;
 +
        position: absolute;
 +
        right: 0;
 +
        width: Calc(100vw - 400px);
 
     }
 
     }
 
     .attr-banner.active {
 
     .attr-banner.active {
Line 395: Line 434:
 
         box-shadow: -5px 0 0 0 #83af9b;
 
         box-shadow: -5px 0 0 0 #83af9b;
 
     }
 
     }
 +
    .slider-holder
 +
        {
 +
            width: Calc(100vw - 25vw - 115px);
 +
            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: Calc(3*(100vw - 25vw - 115px));
 +
            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 {
 +
            height: 100vh;
 +
        }
 +
 +
        .slider-image
 +
        {
 +
            float: left;
 +
            margin: 0px;
 +
            padding: 0px;
 +
            position: relative;
 +
            width: Calc(100vw - 25vw - 115px);
 +
        }
 +
 +
        #video_resize {
 +
            height: 100vh;
 +
        }
 +
 +
        #gif_resize{
 +
            height: 90vh;
 +
        }
 +
 +
        .slider_1, .slider_2, .slider_3{
 +
            background-color: black;
 +
        }
 +
 +
        .slider_1.active{
 +
            background-color: white;
 +
        }
 +
 +
        .slider_2.active{
 +
            background-color: white;
 +
        }
 +
 +
        .slider_3.active{
 +
            background-color: white;
 +
        }
 +
       
 +
        #slider-image-1:target ~ .image-holder
 +
        {
 +
            right: 1px;
 +
        }
 +
       
 +
        #slider-image-2:target ~ .image-holder
 +
        {
 +
            right: Calc(100vw - 25vw - 115px);
 +
        }
 +
       
 +
        #slider-image-3:target ~ .image-holder
 +
        {
 +
            right: Calc(2*(100vw - 25vw - 115px));
 +
        }
 +
       
 +
        .button-holder
 +
        {
 +
            position: absolute;
 +
            bottom: 0px;
 +
            right: 45vw;
 +
        }
 +
       
 +
        .slider-change
 +
        {
 +
            display: inline-block;
 +
            height: 10px;
 +
            width: 10px;
 +
            border-radius: 5px;
 +
            background-color: grey;
 +
        }
 
}
 
}
  
Line 475: Line 613:
 
}
 
}
  
−
#project {
+
.project {
 
     background-color: #fe4365;
 
     background-color: #fe4365;
 
}
 
}
  
−
#project.active {
+
.experiment {
−
    background-color: #424242;
+
−
}
+
−
 
+
−
#experiment {
+
 
     background-color: #FD7080;
 
     background-color: #FD7080;
 
}
 
}
  
−
#experiment.active {
+
.modeling {
−
    background-color: #424242;
+
−
}
+
−
 
+
−
#modeling {
+
 
     background-color: #fc9d9a;
 
     background-color: #fc9d9a;
 
}
 
}
  
−
#modeling.active {
+
.prototype {
−
    background-color: #424242;
+
−
}
+
−
 
+
−
#prototype {
+
 
     background-color: #FBB5A4;
 
     background-color: #FBB5A4;
 
}
 
}
  
−
#policy {
+
.policy {
 
     background-color: #f9cdad;
 
     background-color: #f9cdad;
 
}
 
}
  
−
#biosafety {
+
.biosafety {
 
     background-color: #c8c8a9;
 
     background-color: #c8c8a9;
 
}
 
}
  
−
#about {
+
.about {
 
     background-color: #A6BCA2;
 
     background-color: #A6BCA2;
 
}
 
}
  
−
#acknowledgments {
+
.acknowledgments {
 
     background-color: #83af9b;
 
     background-color: #83af9b;
 
}
 
}
  
−
#project:hover,
+
.project.active{
−
#experiment:hover,
+
    background-color: #424242;
−
#modeling:hover,
+
}
−
#prototype:hover,
+
 
−
#biosafety:hover,
+
.experiment.active{
−
#about:hover,
+
    background-color: #424242;
−
#policy:hover,
+
}
−
#acknowledgments:hover {
+
 
 +
.modeling.active{
 +
    background-color: #424242;
 +
}
 +
 
 +
.prototype.active{
 +
    background-color: #424242;
 +
}
 +
 
 +
.biosafety.active{
 +
    background-color: #424242;
 +
}
 +
 
 +
.about.active{
 +
    background-color: #424242;
 +
}
 +
 
 +
.policy.active{
 +
    background-color: #424242;
 +
}
 +
 
 +
.acknowledgments.active{
 
     background-color: #424242;
 
     background-color: #424242;
 
}
 
}

Revision as of 12:04, 28 September 2017