Difference between revisions of "Template:CCU Taiwan"

 
(91 intermediate revisions by 2 users not shown)
Line 53: Line 53:
 
}
 
}
  
 +
 +
#globalWrapper {
 +
      padding-bottom: 0px!important;
 +
}
  
 
#top {
 
#top {
Line 60: Line 64:
 
}
 
}
  
 +
body::-webkit-scrollbar {
 +
    display: none;
 +
}
 +
.background {
 +
width:100%;
 +
height: 100%;
 +
z-index:1;
 +
margin-bottom:-10%;
 +
padding-top:10%;
 +
padding-bottom:10%;
 +
  background-image: url('https://static.igem.org/mediawiki/2018/0/0a/T--CCU_Taiwan--BC.PNG');
 +
}
 
header{
 
header{
 
margin:0 auto;
 
margin:0 auto;
−
top:2vh;
+
top:1.7vh;
 
width:100%;
 
width:100%;
 
position: fixed;
 
position: fixed;
−
z-index:10;
+
z-index:10;
 
}
 
}
  
Line 77: Line 93:
 
height:7vh;
 
height:7vh;
 
width: 100%;
 
width: 100%;
−
background:#55c97e;
+
box-shadow:0px 4px 6px 0px #444444;
 
}
 
}
 
.front {
 
.front {
Line 87: Line 103:
 
position: relative;
 
position: relative;
 
padding-top:10px;
 
padding-top:10px;
−
left:3.5vw;
+
left:4vw;
 
width: 13.5vw;
 
width: 13.5vw;
−
height: 5.5vh;
+
height: 5.7vh;
 
text-align:center;
 
text-align:center;
 
margin-left:0vw;
 
margin-left:0vw;
Line 98: Line 114:
 
line-height:25px;
 
line-height:25px;
 
}
 
}
 +
.container #Home {
 +
        background:#55c97e;
 +
}
 +
.container #Project {
 +
        background:#74cf7e;
 +
}
 +
 +
.container #Parts {
 +
        background:#92cd7e;
 +
}
 +
 +
.container #Modeling {
 +
        background:#a6ca7e;
 +
}
 +
 +
.container #Drylab {
 +
        background:#bec37e;
 +
}
 +
 +
.container #Human_Practice {
 +
        background:#d1c17e;
 +
}
 +
 +
.container #Notebook {
 +
        background:#d1ad7e;
 +
}
 +
 
#home_button{
 
#home_button{
 
position:absolute;
 
position:absolute;
 
left:0vw;
 
left:0vw;
−
width:5vw;
+
width:5.5vw;
 
height:7vh;
 
height:7vh;
 
text-align:center;
 
text-align:center;
 
z-index:10;
 
z-index:10;
 
background:#9c957e;
 
background:#9c957e;
−
border-radius: 3px;
 
 
}
 
}
 
#home_button img {
 
#home_button img {
Line 119: Line 161:
 
}
 
}
  
−
#Project img {
 
−
 
−
}
 
  
 
.sub {
 
.sub {
Line 127: Line 166:
 
position:absolute;
 
position:absolute;
 
text-align: center;
 
text-align: center;
−
top:6.1vh;
+
right:0vw;
−
width:101vw!important;
+
top:6.2vh;
 +
width:13.5vw!important;
 
height:40vh;
 
height:40vh;
 
margin: 0 auto;
 
margin: 0 auto;
 
padding:0;
 
padding:0;
 
z-index:9!important;
 
z-index:9!important;
−
background:#CCFF99;
+
box-shadow:3px 3px 3px 0px #444444;
 
}
 
}
−
#sub_home {
+
 
−
left:-7.8vw;
+
#sub_home{
 +
height:40.5vh;
 +
        background:#55c97e;
 
}
 
}
−
#sub_project {
+
 
−
left:-21vw;
+
#sub_project{
 +
height:40.5vh;
 +
        background:#74cf7e;
 
}
 
}
  
−
#sub_parts {
+
#sub_parts{
−
left:-34.5vw;
+
height:24.5vh;
 +
        background:#92cd7e;
 
}
 
}
  
−
#sub_modeling {
+
#sub_modeling{
−
left:-48.2vw;
+
height:24.5vh;
 +
        background:#a6ca7e;
 
}
 
}
  
−
#sub_drylab {
+
#sub_drylab{
−
left:-61.8vw;
+
height:24.5vh;
 +
        background:#bec37e;  
 
}
 
}
  
−
#sub_human_practice {
+
#sub_human_practice{
−
left:-75.5vw;
+
height:40.5vh;
 +
        background:#d1c17e;
 
}
 
}
  
−
#sub_notebook {
+
#sub_notebook{
−
left:-89vw;
+
height:40.5vh;
 +
        background:#d1ad7e;
 +
}
 +
 
 +
.sub a {
 +
  color: #F5F5F5;
 
}
 
}
  
 
.sub li {
 
.sub li {
 
float:none;
 
float:none;
−
margin-left: 10vw;
+
margin: auto;
−
margin-top: 2.5vh;
+
/*margin-top: 1vh;*/
−
height: 5vh;
+
height: 8vh;
−
width: 8vw;
+
width: 13.5vw;
 
display:block!important;
 
display:block!important;
 +
border-top-style:solid;
 +
border-top-width:1px;
 +
border-top-color: #F8F8FF;
 
}
 
}
−
.list a {
+
.sub a {
 
font-size:15px;
 
font-size:15px;
 +
line-height:8vh;
 
}
 
}
 
nav a {
 
nav a {
Line 179: Line 236:
 
}
 
}
 
.title:hover {
 
.title:hover {
−
background-color: #009100;
+
background-color:#36BF36;
 
transition: 500ms;
 
transition: 500ms;
 
border-radius: 3px;
 
border-radius: 3px;
Line 188: Line 245:
 
}
 
}
 
.list:hover {
 
.list:hover {
−
background-color:#F5F5F5;
+
background-color:#567256;
 
transition: 500ms;
 
transition: 500ms;
−
border-radius: 4px;
 
 
}
 
}
−
 
+
nav hr {
−
#home_img {
+
−
position:absolute;
+
−
display:none;
+
−
top:8vh;
+
−
left:40vw;
+
−
height:25vh;
+
−
width:90vw;
+
−
}
+
−
 
+
−
#home_img img {
+
−
float:left;
+
−
height: 25vh!important;
+
−
}
+
−
 
+
−
#home_word {
+
−
position:absolute;
+
−
top:18vh;
+
−
left:42vw;
+
−
display:none;
+
−
}
+
−
 
+
−
#home_word a {
+
−
font-size:50px;
+
−
}
+
−
 
+
−
hr {
+
 
position:relative;
 
position:relative;
 
border: 0;
 
border: 0;
−
     height: 1.8px;
+
     height: 1.5px;
 
width: 20%;
 
width: 20%;
 
top: -2.7vh;
 
top: -2.7vh;
 
left: 12.18vw;
 
left: 12.18vw;
−
     background-image: linear-gradient(to right, rgba(54, 191, 54, 0), rgba(225, 255, 255, 1), rgba(54, 191, 54, 0));
+
     background-image: linear-gradient(to right, rgba(54, 191, 54, 0.5), rgba(225, 255, 255, 1), rgba(54, 191, 54, .5));
 
transform:rotate(90deg);
 
transform:rotate(90deg);
 
     -o-transform:rotate(90deg);
 
     -o-transform:rotate(90deg);
 
     -moz-transform:rotate(90deg);
 
     -moz-transform:rotate(90deg);
 
     -webkit-transform:rotate(90deg);
 
     -webkit-transform:rotate(90deg);
−
}
 
−
.sub hr {
 
−
position:absolute;
 
−
border: 0;
 
−
    height: 1px;
 
−
width: 15%;
 
−
top:20vh;
 
−
left:13.5vw;
 
−
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
 
−
transform:rotate(90deg);
 
−
    -o-transform:rotate(90deg);
 
−
    -moz-transform:rotate(90deg);
 
−
    -webkit-transform:rotate(90deg);
 
−
    -webkit-animation: fadein 2s;
 
−
}
 
−
@-webkit-keyframes fadein {
 
−
    from { opacity: 0; }
 
−
    to  { opacity: 1; }
 
 
}
 
}
 
/*!
 
/*!
Line 525: Line 537:
 
font-family: 'CCUfontsBold', Arial, sans-serif;
 
font-family: 'CCUfontsBold', Arial, sans-serif;
 
}
 
}
−
.wrap{
+
 
−
margin-left: auto;
+
−
margin-right: auto;
+
−
width: 960px;
+
−
position: relative;
+
−
}
+
  
  
Line 702: Line 709:
  
 
#slide1introh2 {
 
#slide1introh2 {
−
       font-size: 5vh!important;
+
       font-size: 4vh!important;
 
       position: absolute;
 
       position: absolute;
−
       margin-left: 8vw;
+
       margin-left: 45vw;
 
       text-align: center!important;
 
       text-align: center!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       width: 10%!important;
 
       width: 10%!important;
 
       color: white;
 
       color: white;
−
       top: 23%;
+
       top: 32%;
 
}
 
}
  
Line 732: Line 739:
  
 
#slide3intro {
 
#slide3intro {
−
       font-size: 5vh!important;
+
       font-size: 4vh!important;
 
       position: absolute;
 
       position: absolute;
−
       margin-left: 52vw;
+
       margin-left: 57vw;
 
       text-align: center!important;
 
       text-align: center!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
Line 749: Line 756:
  
 
#INback3 {
 
#INback3 {
−
         height: 100%;
+
         height: auto;
−
         width: auto;
+
        width: 100%;
 +
         align: bottom;
 
}
 
}
  
  
 
#slide4intro {
 
#slide4intro {
−
       font-size: 5vh!important;
+
       font-size: 4vh!important;
 
       position: absolute;
 
       position: absolute;
−
       margin-left: 57vw;
+
       margin-left: 54vw;
 
       text-align: center!important;
 
       text-align: center!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
−
       width: 8%!important;
+
       width: 10%!important;
−
       color: white;
+
       color: black;
−
       top: 23%;
+
       top: 20%;
 
}
 
}
  
Line 777: Line 785:
 
       font-size: 5vh!important;
 
       font-size: 5vh!important;
 
       position: absolute;
 
       position: absolute;
−
       margin-left: 50vw;
+
       margin-left: 12vw;
 
       text-align: center!important;
 
       text-align: center!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
−
       width: 8%!important;
+
       width: 15%!important;
 
       color: white;
 
       color: white;
−
       top: 30%;
+
       top: 15%;
 
}
 
}
  
Line 795: Line 803:
  
 
#slide6intro {
 
#slide6intro {
−
       font-size: 5vh!important;
+
       font-size: 4vh!important;
 
       position: absolute;
 
       position: absolute;
−
       margin-left: 12vw;
+
       margin-left: 13vw;
 
       text-align: center!important;
 
       text-align: center!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
−
       width: 15%!important;
+
       width: 20%!important;
 
       color: white;
 
       color: white;
−
       top: 15%;
+
       top: 18%;
 
}
 
}
  
Line 821: Line 829:
 
}
 
}
  
−
.intro #ab {
+
#section2container {
 +
      margin-top: 120px;
 
}
 
}
  
Line 882: Line 891:
  
 
#abp {
 
#abp {
−
       font-size: 4vh!important;
+
       font-size: 3.5vh!important;
 
       position: absolute;
 
       position: absolute;
 
       margin-left: 1vw;
 
       margin-left: 1vw;
Line 888: Line 897:
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       width: 40%!important;
 
       width: 40%!important;
−
       margin-top: 6vh;
+
       margin-top: 5.5vh;
  
 
}
 
}
Line 1,124: Line 1,133:
  
 
#abp2 {
 
#abp2 {
−
       font-size: 4vh!important;
+
       font-size: 3.5vh!important;
 
       position: absolute;
 
       position: absolute;
 
       margin-left: 60vw;
 
       margin-left: 60vw;
Line 1,141: Line 1,150:
 
     height: 30vh;
 
     height: 30vh;
 
     margin-left: 140px;
 
     margin-left: 140px;
−
     margin-top: -140px;
+
     margin-top: -120px;
 
     -webkit-user-select: none;
 
     -webkit-user-select: none;
 
     -moz-user-select: none;
 
     -moz-user-select: none;
Line 1,152: Line 1,161:
 
#wood {
 
#wood {
 
       width: auto;
 
       width: auto;
−
       height: 50%;
+
       height: 40%;
 
       position: absolute;
 
       position: absolute;
 
       z-index: 80;
 
       z-index: 80;
Line 1,171: Line 1,180:
 
         z-index: 80;
 
         z-index: 80;
 
         margin-left: -60px;
 
         margin-left: -60px;
−
         margin-top: -18vw;
+
         margin-top: -15vw;
 
}
 
}
  
Line 1,181: Line 1,190:
 
     position: absolute;
 
     position: absolute;
 
     z-index: 70;
 
     z-index: 70;
−
     bottom: 15px;
+
     bottom: 18px;
 
}
 
}
  
Line 1,238: Line 1,247:
  
 
#abp3 {
 
#abp3 {
−
       font-size: 4vh!important;
+
       font-size: 3vh!important;
 
       position: absolute;
 
       position: absolute;
 
       margin-left: 5vw;
 
       margin-left: 5vw;
Line 1,244: Line 1,253:
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       font-family: 'CCUfontsBold', Arial, sans-serif!important;
 
       width: 40%!important;
 
       width: 40%!important;
−
       top: 20%;
+
       top: 15%;
−
       z-index: 70;
+
       z-index: 80;
 
}
 
}
  
 
.footer {
 
.footer {
−
      background: #909F86;
+
    height: 110px;
−
        width: 100%;
+
    background-color: #333F50;
−
        height: 15vh;
+
  right: 0;
−
        position: absolute;
+
  bottom: 0;
 +
  left: 0;
 
}
 
}
 +
  
 
#BSlogo {
 
#BSlogo {
Line 1,259: Line 1,270:
 
         width: 6%;
 
         width: 6%;
 
         height: auto;
 
         height: auto;
−
         top: 81%;
+
         margin-left: 150px;
−
         margin-left: 10vw;
+
         margin-top: 4px;
 
}
 
}
  
 
#CCUlogo {
 
#CCUlogo {
 
         position: absolute;
 
         position: absolute;
−
         width: 8%;
+
         width: 6%;
 
         height: auto;
 
         height: auto;
−
         top: 84%;
+
         margin-left: 275px;
−
         margin-left: 20vw;
+
         margin-top: 10px;
 
}
 
}
  
 +
#CCUTEAMlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        margin-left: 430px;
 +
        margin-top: 10px;
 +
}
 +
 +
 +
#CCUFBlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        top: 82%;
 +
        margin-left: 26vw;
 +
        z-index: 90;
 +
}
 +
 +
#CCUPHlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        top: 83%;
 +
        margin-left: 26vw;
 +
        z-index: 90;
 +
}
 +
 +
#CCUMLlogo {
 +
        position: absolute;
 +
        width: 6%;
 +
        height: auto;
 +
        top: 83%;
 +
        margin-left: 26vw;
 +
        z-index: 90;
 +
}
 +
 +
#startvideo {
 +
        vertical-align: top;
 +
        width: 100vw;
 +
        height: auto;
 +
        margin: 0 auto;
 +
}
 +
 +
 +
#pagination {
 +
  position: fixed;
 +
  top: 300px;
 +
  transform: translateY(-50%);
 +
  right: 30px;
 +
  list-style: none;
 +
 +
}
 +
 +
#pagination  li {
 +
    position: relative;
 +
    margin: 20px 0;
 +
    background: #24221F;
 +
    border-radius: 100% ;
 +
    width: 8px;
 +
    height: 8px;
 +
    transition: all .2s ease;
 +
 +
    &:hover {
 +
      transform: scale(1.5);
 +
    }
 +
  }
 +
 +
#pagination  a {
 +
    position: absolute;
 +
    text-decoration: none; 
 +
    left: 0;
 +
    top: 0;
 +
    color: inherit;
 +
    width: 100%;
 +
    height: 100%;
 +
  }
 +
}
 +
 +
body {
 +
  @for $i from 0 to 6 {
 +
    &.section-#{$i} {
 +
      #pagination li:nth-of-type(#{$i}) {
 +
        @extend %active-dot;
 +
      }
 +
    }
 +
  }
 +
}
 +
 +
 +
#pagination ul li a span {
 +
    background: #24221F;
 +
    width: 8px;
 +
    height: 8px;
 +
    margin: -4px 0 0 -4px;
 +
}
 +
     
 +
#pagination ul li a.active span,
 +
#pagination li:hover a.active span {
 +
    width: 16px;
 +
    height: 16px;
 +
    margin: -8px 0 0 -8px;
 +
    background:#24221F;
 +
    box-sizing: border-box;
 +
    border: 1px solid #24221F;
 +
}
 +
 +
%active-dot {
 +
  transform: scale(2);
 +
}
 +
 +
.wrap {
 +
  width: 100vw;
 +
  height: auto;
 +
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 09:05, 1 December 2018