Line 30: | Line 30: | ||
/*body*/ | /*body*/ | ||
body, html { | body, html { | ||
− | + | margin: 0; | |
− | + | padding: 0; | |
} | } | ||
− | body { | + | body { |
− | + | overflow-y: scroll; | |
− | + | overflow-x: hidden; | |
− | + | margin: auto; | |
} | } | ||
body::-webkit-scrollbar-track | body::-webkit-scrollbar-track | ||
{ | { | ||
− | + | background-color: black; | |
} | } | ||
body::-webkit-scrollbar | body::-webkit-scrollbar | ||
{ | { | ||
− | + | width: 1vw; | |
} | } | ||
body::-webkit-scrollbar-thumb | body::-webkit-scrollbar-thumb | ||
{ | { | ||
− | + | background-color: #999999; | |
} | } | ||
body::-webkit-scrollbar-thumb:hover | body::-webkit-scrollbar-thumb:hover | ||
{ | { | ||
background-color: #777777; | background-color: #777777; | ||
+ | } | ||
+ | |||
+ | /*mobile mode*/ | ||
+ | @media screen and (max-width: 600px) { | ||
+ | #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 107: | Line 171: | ||
.pagelink a:hover { | .pagelink a:hover { | ||
color: wheat !important; | color: wheat !important; | ||
+ | } | ||
+ | #menuicon { | ||
+ | display: none; | ||
} | } | ||
Line 175: | Line 242: | ||
align-items: center; | align-items: center; | ||
min-height: 100vh; | min-height: 100vh; | ||
− | width: | + | width: auto; |
} | } | ||
.subpage h1.subheading { | .subpage h1.subheading { | ||
Line 191: | Line 258: | ||
} | } | ||
.subpage p,.subpage ul,.subpage ol { | .subpage p,.subpage ul,.subpage ol { | ||
− | width: | + | width: auto; |
font-family: blogger !important; | font-family: blogger !important; | ||
font-size: 1.5vmax !important; | font-size: 1.5vmax !important; |
Revision as of 05:55, 11 October 2018
- 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*/ @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 (max-width: 600px) {
#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*/
- menubar {
width: 100vw; height: 3vmax; background-color: #222222; display: flex; align-items: center; position: fixed; top: 18px; left: 0vw; z-index: 10;
}
- 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;
}
- logo a {
height: 90%; width: 70%;
}
- logo a img {
height: 100%; width: auto;
}
- 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;
}
- menuicon {
display: none;
}
/*side tabnav*/
- 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;
}
- 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#problemTab,.subtab#assemblyTab,.subtab#resultsTab,.subtab#fieSurTab,.subtab#studentsTab {
background-color: black;
} .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-size: 1.8vmax !important; color: black;
} .subtab:hover {
background-color: rgba(0,0,0,0.3) !important; border-radius: 0vw 2vw 0vw 2vw !important;
} .subtab:hover > p {
color: white !important;
}
/*page layouts*/ .subcontainer {
position: relative; top: 3vmax; width: 85vw; left: 15vw; height: auto; display: flex; flex-direction: column; background-color: #eeeeee;
} 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; align-self: flex-start; font-family: prime !important; font-size: 1.8vmax !important; margin: 2vw 0vw 1.5vw 0vw !important;
} .subpage p,.subpage ul,.subpage ol {
width: auto; font-family: blogger !important; font-size: 1.5vmax !important; text-align: justify !important; margin: 0.8vw 0vw 1.2vw 0vw !important;
} .subpage li {
margin: 0.7vw 0vw 0.7vw 0vw !important;
} 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;
}