Difference between revisions of "Team:IISER-Kolkata/common.css"

 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
#top_title, .logo_2018, #firstHeading{
 +
display: none !important;
 +
}
 +
#content{
 +
width: 100vw !important;
 +
padding: 0 !important;
 +
margin-left: 0 !important;
 +
margin-right: 0 !important;
 +
position: absolute !important;
 +
left: 0 !important;
 +
}
 +
 
/*fonts*/
 
/*fonts*/
 
@font-face {
 
@font-face {
Line 19: Line 31:
 
/*body*/
 
/*body*/
 
body, html {
 
body, html {
−
margin: 0;
+
    margin: 0;
−
padding: 0;
+
    padding: 0;
 
}
 
}
−
body {
+
body {
−
overflow-y: scroll;
+
    overflow-y: scroll;
−
overflow-x: hidden;
+
    overflow-x: hidden;
−
margin: auto;
+
    margin: auto;
 
}
 
}
 
body::-webkit-scrollbar-track
 
body::-webkit-scrollbar-track
 
{
 
{
−
background-color: black;
+
    background-color: black;
 
}
 
}
 
body::-webkit-scrollbar
 
body::-webkit-scrollbar
 
{
 
{
−
width: 1vw;
+
    width: 1vw;
 
}
 
}
 
body::-webkit-scrollbar-thumb
 
body::-webkit-scrollbar-thumb
 
{
 
{
−
background-color: #999999;
+
    background-color: #999999;
 
}
 
}
 
body::-webkit-scrollbar-thumb:hover
 
body::-webkit-scrollbar-thumb:hover
 
{
 
{
 
     background-color: #777777;
 
     background-color: #777777;
 +
}
 +
 +
/*mobile mode*/
 +
@media screen and (orientation: portrait) {
 +
    #menuicon {
 +
        display: flex !important;
 +
        margin-right: 3vw;
 +
        margin-left: auto;
 +
        height: 2vmax;
 +
        width: 2.2vmax;
 +
        cursor: pointer;       
 +
        flex-direction: column;
 +
        align-items: center;
 +
        justify-content: center;
 +
    }
 +
    #bar1, #bar2, #bar3 {
 +
        margin: 0.25vmax 0vh 0.25vmax 0vh;
 +
        width: 2.2vmax;
 +
        height: 0.15vmax;
 +
        background-color: white;
 +
        border-radius: 25%;
 +
        -webkit-transition: 0.2s linear;
 +
        -moz-transition: 0.2s linear;
 +
        -o-transition: 0.2s linear;
 +
        transition: 0.2s linear;
 +
    }
 +
    .change #bar1 {
 +
        margin: 0vw;
 +
        -webkit-transform: rotate(-45deg) translateY(0.25vmax);
 +
        -moz-transform: rotate(-45deg) translateY0.25vmax);
 +
        -o-transform: rotate(-45deg) translateY(0.25vmax);
 +
        transform: rotate(-45deg) translateY(0.25vmax);
 +
    }
 +
    .change #bar2 {
 +
        margin: 0vw;
 +
        opacity: 0;
 +
    }
 +
    .change #bar3 {
 +
        margin: 0vw;
 +
        -webkit-transform: rotate(45deg) translateY(-0.25vmax);
 +
        -moz-transform: rotate(45deg) translateY(-0.25vmax);
 +
        -o-transform: rotate(45deg) translateY(-0.25vmax);
 +
        transform: rotate(45deg) translateY(-0.25vmax);
 +
    } 
 +
 +
    .subcontainer {
 +
        width: 100vw !important;
 +
        left: 0vw !important;
 +
    }
 +
    #sidenav { 
 +
        width: 30vw !important;
 +
        height: 100vh !important;
 +
        position: fixed;
 +
        top: 18px;
 +
        left: 100vw  !important;
 +
        z-index: 5;
 +
        -webkit-transition: 0.2s linear;
 +
        -moz-transition: 0.2s linear;
 +
        -o-transition: 0.2s linear;
 +
        transition: 0.2s linear;
 +
    }
 +
    #sidenav.visible {
 +
        left: 70vw !important;
 +
    }
 
}
 
}
  
Line 96: Line 172:
 
.pagelink a:hover {
 
.pagelink a:hover {
 
     color: wheat !important;
 
     color: wheat !important;
 +
}
 +
#menuicon {
 +
    display: none;
 
}
 
}
  
Line 126: Line 205:
 
     transition: 0.2s linear;     
 
     transition: 0.2s linear;     
 
}
 
}
−
.subtab#problemTab,.subtab#assemblyTab,.subtab#resultsTab,.subtab#fieSurTab,.subtab#studentsTab {
+
 
−
    background-color: black;
+
.subtab p {  
−
}
+
−
.subtab#problemTab p,.subtab#assemblyTab p,.subtab#resultsTab p,.subtab#fieSurTab p,.subtab#studentsTab p {
+
−
    color: white;
+
−
}
+
−
.subtab p {
+
−
    text-decoration: none;
+
 
     font-family: rodina !important;
 
     font-family: rodina !important;
 
     font-size: 1.8vmax !important;  
 
     font-size: 1.8vmax !important;  
−
     color: black;  
+
     
 +
    -webkit-transition: 0.2s linear;
 +
    -moz-transition: 0.2s linear;
 +
    -o-transition: 0.2s linear;
 +
    transition: 0.2s linear;
 +
}
 +
.subtab a {
 +
    text-decoration: none !important;
 +
     color: black;  
 
}
 
}
 
.subtab:hover {
 
.subtab:hover {
Line 142: Line 223:
 
     border-radius: 0vw 2vw 0vw 2vw !important;
 
     border-radius: 0vw 2vw 0vw 2vw !important;
 
}
 
}
−
.subtab:hover > p {
+
.subtab a:hover {
 
     color: white !important;
 
     color: white !important;
 +
    text-decoration: none !important;
 
}
 
}
  
Line 149: Line 231:
 
.subcontainer {
 
.subcontainer {
 
     position: relative;
 
     position: relative;
−
     top: 3vmax;
+
     top: 2vmax;
 
     width: 85vw;
 
     width: 85vw;
 
     left: 15vw;
 
     left: 15vw;
Line 156: Line 238:
 
     flex-direction: column;
 
     flex-direction: column;
 
     background-color: #eeeeee;
 
     background-color: #eeeeee;
 +
}
 +
section.intropic {
 +
    height: 20vmax;
 +
    width: auto;
 
}
 
}
 
section.subpage {
 
section.subpage {
Line 164: Line 250:
 
     align-items: center;
 
     align-items: center;
 
     min-height: 100vh;
 
     min-height: 100vh;
−
     width: 70vw;
+
     width: auto;
 
}
 
}
 
.subpage h1.subheading {
 
.subpage h1.subheading {
−
     width: auto !important;
+
     width: auto;
 
     font-family: rodina !important;
 
     font-family: rodina !important;
 
     font-size: 3vmax !important;
 
     font-size: 3vmax !important;
Line 173: Line 259:
 
}
 
}
 
.subpage h3.subsubheading {
 
.subpage h3.subsubheading {
−
     width: auto !important;
+
     width: auto;
−
    align-self: flex-start !important;
+
 
     font-family: prime !important;
 
     font-family: prime !important;
 
     font-size: 1.8vmax !important;
 
     font-size: 1.8vmax !important;
Line 180: Line 265:
 
}
 
}
 
.subpage p,.subpage ul,.subpage ol {
 
.subpage p,.subpage ul,.subpage ol {
−
     width: 70vw;
+
     width: auto;
 +
    align-self: flex-start;
 
     font-family: blogger !important;
 
     font-family: blogger !important;
 
     font-size: 1.5vmax !important;
 
     font-size: 1.5vmax !important;
−
     text-align: justify !important;
+
     text-align: justify;
 
     margin: 0.8vw 0vw 1.2vw 0vw !important;
 
     margin: 0.8vw 0vw 1.2vw 0vw !important;
 
}
 
}
 
.subpage li {
 
.subpage li {
 
     margin: 0.7vw 0vw 0.7vw 0vw !important;
 
     margin: 0.7vw 0vw 0.7vw 0vw !important;
 +
}
 +
.subimage {
 +
    width: 40vw; 
 +
    height: auto; 
 +
    margin: 2vmax 15vmax 2vmax 10vmax;
 +
    border: 0.1vw solid black;
 +
}
 +
iframe {
 +
    width: 40vw;
 +
    height: 30vw;
 +
    margin: 2vmax 15vmax 2vmax 10vmax;
 +
}
 +
video {
 +
    width: 40vw;
 +
    height: 30vw;
 +
    margin: 2vmax 15vmax 2vmax 10vmax;
 
}
 
}
 
table.tabular {
 
table.tabular {
−
     font-size: 1.5vmax !important;  
+
     font-size: 1.5vmax;  
−
     font-family: blogger !important;
+
     font-family: blogger;
−
     border-collapse: collapse !important;
+
     border-collapse: collapse;
−
     caption-side: bottom !important;
+
     caption-side: bottom;
−
     margin: 2vw !important;
+
     margin: 2vw;
 
}  
 
}  
 
.tabular caption {
 
.tabular caption {
 
     margin: 0.5vw !important;
 
     margin: 0.5vw !important;
−
     font-size: 1.3vmax !important;  
+
     font-size: 1.3vmax;  
 
}
 
}
 
.tabular td {
 
.tabular td {
−
     min-width: 5vw !important;
+
     min-width: 5vw;
−
     padding: 1vw !important;
+
     padding: 1vw;
 
     background-color: #eeeeee !important;
 
     background-color: #eeeeee !important;
−
     text-align: center !important;
+
     text-align: center;
 
     border: 0.1vw solid black !important;  
 
     border: 0.1vw solid black !important;  
−
     margin: 0vw !important;
+
     margin: 0vw;
 
}
 
}
 
.tabular th {
 
.tabular th {
−
     min-width: 5vw !important;
+
     min-width: 5vw;
−
     padding: 1vw !important;
+
     padding: 1vw;
 
     background-color: #dddddd !important;
 
     background-color: #dddddd !important;
 
     border: 0.1vw solid black !important;  
 
     border: 0.1vw solid black !important;  
−
     margin: 0vw !important;
+
     margin: 0vw;
 
}
 
}

Latest revision as of 18:52, 17 October 2018

  1. top_title, .logo_2018, #firstHeading{

display: none !important; }

  1. content{

width: 100vw !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; position: absolute !important; left: 0 !important; }

/*fonts*/ @font-face { 

   src: url("https://static.igem.org/mediawiki/2018/1/14/T--IISER-Kolkata--blogger.ttf");
   font-family: blogger;

} @font-face { 

   src: url("https://static.igem.org/mediawiki/2018/7/7a/T--IISER-Kolkata--prime.otf");
   font-family: prime;

} @font-face { 

   src: url("https://static.igem.org/mediawiki/2018/5/5a/T--IISER-Kolkata--rodina.otf");
   font-family: rodina;

} @font-face { 

   src: url("https://static.igem.org/mediawiki/2018/f/f7/T--IISER-Kolkata--social.ttf");
   font-family: social;

}

/*body*/ body, html { 

   margin: 0;
   padding: 0;

} body { 

   overflow-y: scroll;
   overflow-x: hidden;
   margin: auto;

} body::-webkit-scrollbar-track { 

   background-color: black;

} body::-webkit-scrollbar { 

   width: 1vw;

} body::-webkit-scrollbar-thumb { 

   background-color: #999999;

} body::-webkit-scrollbar-thumb:hover { 

   background-color: #777777;

}

/*mobile mode*/ @media screen and (orientation: portrait) { 

   #menuicon {
       display: flex !important;
       margin-right: 3vw;
       margin-left: auto;
       height: 2vmax;
       width: 2.2vmax;
       cursor: pointer;        
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   #bar1, #bar2, #bar3 {
       margin: 0.25vmax 0vh 0.25vmax 0vh;
       width: 2.2vmax;
       height: 0.15vmax;
       background-color: white;
       border-radius: 25%;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   .change #bar1 {
       margin: 0vw;
       -webkit-transform: rotate(-45deg) translateY(0.25vmax);
       -moz-transform: rotate(-45deg) translateY0.25vmax);
       -o-transform: rotate(-45deg) translateY(0.25vmax);
       transform: rotate(-45deg) translateY(0.25vmax);
   }
   .change #bar2 {
       margin: 0vw;
       opacity: 0;
   }
   .change #bar3 {
       margin: 0vw;
       -webkit-transform: rotate(45deg) translateY(-0.25vmax);
       -moz-transform: rotate(45deg) translateY(-0.25vmax);
       -o-transform: rotate(45deg) translateY(-0.25vmax);
       transform: rotate(45deg) translateY(-0.25vmax);
   }  

   .subcontainer {
       width: 100vw !important;
       left: 0vw !important;
   }
   #sidenav {  
       width: 30vw !important;
       height: 100vh !important;
       position: fixed;
       top: 18px;
       left: 100vw  !important;
       z-index: 5;
       -webkit-transition: 0.2s linear;
       -moz-transition: 0.2s linear;
       -o-transition: 0.2s linear;
       transition: 0.2s linear;
   }
   #sidenav.visible {
       left: 70vw !important;
   }

}

/*navbar*/

  1. menubar { 
   width: 100vw;
   height: 3vmax;
   background-color: #222222;
   display: flex;
   align-items: center;  
   position: fixed;
   top: 18px;
   left: 0vw;
   z-index: 10;

}

  1. menubar #logo {
   margin: 0vw 1vw 0vw 0vw;
   align-self: flex-start;
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   width: 8vmax;
   height: 5vmax; 
   border-radius: 0% 0% 50% 0%;
   background-color: #222222;

}

  1. logo a {
   height: 90%;
   width: 70%;

}

  1. logo a img {
   height: 100%;
   width: auto;

}

  1. menubar .pagelink {
   display: flex;  
   align-items: center;
   justify-content: center;   
   height: 100%;
   width: auto; 
   padding: 0vw 2vw 0vw 2vw;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} .pagelink a { 

   text-decoration: none;
   font-family: prime;
   font-size: 1.5vmax; 
   color: white;  
   cursor: pointer;

} .pagelink a:hover { 

   color: wheat !important;

}

  1. menuicon {
   display: none;

}

/*side tabnav*/

  1. sidenav { 
   width: 15vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;  
   justify-content: center;
   position: fixed;
   top: 18px;
   left: 0vw;
   z-index: 5;

}

  1. sidenav .subtab {
   display: flex;  
   align-items: center;
   justify-content: center;   
   width: 90%;
   height: 3vmax; 
   padding: 0.5vw 0vw 0.5vw 0vw;
   margin: 0.5vw 0vw 0.5vw 0vw;
   border-radius: 0vw 2vw 0vw 2vw;
   cursor: pointer;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

}

.subtab p { 

   font-family: rodina !important;
   font-size: 1.8vmax !important; 
     
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} .subtab a { 

   text-decoration: none !important;
   color: black;

} .subtab:hover { 

   background-color: rgba(0,0,0,0.3) !important;
   border-radius: 0vw 2vw 0vw 2vw !important;

} .subtab a:hover { 

   color: white !important;
   text-decoration: none !important;

}

/*page layouts*/ .subcontainer { 

   position: relative;
   top: 2vmax;
   width: 85vw;
   left: 15vw;
   height: auto;
   display: flex;
   flex-direction: column;
   background-color: #eeeeee;

} section.intropic { 

   height: 20vmax;
   width: auto;

} section.subpage { 

   padding: 2.5vw 7.5vw 2.5vw 7.5vw;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   width: auto;

} .subpage h1.subheading { 

   width: auto;
   font-family: rodina !important;
   font-size: 3vmax !important;
   margin: 2.5vw 0vw 2.5vw 0vw !important;

} .subpage h3.subsubheading { 

   width: auto;
   font-family: prime !important;
   font-size: 1.8vmax !important;
   margin: 2vw 0vw 1.5vw 0vw !important;

} .subpage p,.subpage ul,.subpage ol { 

   width: auto;
   align-self: flex-start;
   font-family: blogger !important;
   font-size: 1.5vmax !important;
   text-align: justify;
   margin: 0.8vw 0vw 1.2vw 0vw !important;

} .subpage li { 

   margin: 0.7vw 0vw 0.7vw 0vw !important;

} .subimage { 

   width: 40vw;  
   height: auto;  
   margin: 2vmax 15vmax 2vmax 10vmax;
   border: 0.1vw solid black;

} iframe { 

   width: 40vw;
   height: 30vw;
   margin: 2vmax 15vmax 2vmax 10vmax;

} video { 

   width: 40vw;
   height: 30vw;
   margin: 2vmax 15vmax 2vmax 10vmax;

} table.tabular { 

   font-size: 1.5vmax; 
   font-family: blogger;
   border-collapse: collapse;
   caption-side: bottom;
   margin: 2vw;

} .tabular caption { 

   margin: 0.5vw !important;
   font-size: 1.3vmax;

} .tabular td { 

   min-width: 5vw;
   padding: 1vw;
   background-color: #eeeeee !important;
   text-align: center;
   border: 0.1vw solid black !important; 
   margin: 0vw;

} .tabular th { 

   min-width: 5vw;
   padding: 1vw;
   background-color: #dddddd !important;
   border: 0.1vw solid black !important; 
   margin: 0vw;

}