Difference between revisions of "Template:Aalto-Helsinki"
| Line 1: | Line 1: | ||
| − | + | ||
<style> | <style> | ||
/*Changes to the top menu*/ | /*Changes to the top menu*/ | ||
| Line 426: | Line 426: | ||
} | } | ||
} | } | ||
| − | |||
| − | |||
Revision as of 10:58, 16 August 2016
<style> /*Changes to the top menu*/
- top_menu_14 {
position:absolute; background-color: white; border-bottom: 0px; height:0px;
}
- content {
width:auto; margin-left:0px; }
- sideMenu {
display:none; }
- top_title {
display:none; }
html, body, section, .container { height: 100%; }
a img { width: 80%; }
- svg {
margin-left: 6%; }
@font-face { font-family: BebasLight; src: url(BebasNeueLight.ttf); }
span h1 { padding-top: 10%; }
h1 span { color: white; padding: 10px; font-size: larger; text-shadow: 4px 2px gray; text-shadow: 4px 2px rgba(0,0,0,0.5); }
.centerrow { text-align: center; }
.centercol { display: inline-table; float: none; text-align: left; margin-right: 60px; margin-left: 30px; }
.black-bar { padding-top: 15px; padding-bottom: 15px; background-color: #2D2D2A; margin-bottom: 0; border: none; }
.nomargin-right { margin-right: 0; }
.black-bar-bottom { margin-top: 80px; }
/* The black navigation bar, top and bottom */ .black-bar a, .black-bar p{
color: #fff; text-decoration: none;
text-align: center; }
- currentLink {
text-decoration: underline; }
.black-bar a:hover {
color: #BBCDE5;
}
.center { text-align: center; }
.inner, .footer { padding: 20px 0; position: relative; }
.block-container { width: 940px !important; }
.block-wrapper-inner { /*padding-left: 100px;*/ padding-top: 10%; }
.block, .lead { font-size: 20px; }
.justified { text-align: justify; }
.spacing { margin-top: 40px; margin-bottom: 40px; margin-right: 20px; }
body {
height: 100%;
/*background: url('/2016/img/final_cropped_background.png') no-repeat;*/
background-color: white;
background-size: cover;
-webkit-font-smoothing: antialiased; /* font smoothing */
-moz-osx-font-smoothing: grayscale;
font-family: 'Source Sans Pro', sans-serif;
}
.teambackground { /*background: whitesmoke;*/ }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
.rowborder { margin-bottom: 60px; }
/* Photos */
/* Navigation arrows */
section { text-align: center; position: relative; /*margin: 40px;*/ height: calc(100% - 80px); overflow: hidden; }
section h1 { margin-top: 160px; }
.circle { background-color: rgb(255, 255, 255); /*border-radius: 200px;*/ height: 200px; width: 200px; font-weight: bold; }
/*.lakephoto {
/*background: url('/2016/img/lake2.jpg') no-repeat;*/
/*background: url('/Users/Misan/Desktop/iGEM/Wiki/Aalto-Helsinki-2016-Wiki/img/lake2.jpg') no-repeat;
background-size: 100%;
background-size: cover;
background-position: 0% 30%;
height: 110%;
width: 100%;
}*/
/* Emphasis Title KOKEILU
*/
.emphasis-title { margin: 0 0 10px; }
.emphasis-title h1, .emphasis-title h2 { font-size: 64px; letter-spacing: -2px; }
.emphasis-title h1 strong, .emphasis-title h2 strong { font-weight: 700; }
video#bgvid {
position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(/Users/Misan/Desktop/iGEM/Wiki/Aalto-Helsinki-2016-Wiki/img/lake2.jpg) no-repeat; background-size: cover;
}
.sciencephoto { background: url('/2016/img/colorful2.jpg') no-repeat; background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%; }
.handshakephoto { background: url('/2016/img/handshake3.jpg') no-repeat; /*background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/2016/img/handshake.jpg') no-repeat;*/ background-size: 100%; background-position: 0% 0%; height: 110%; width: 100%; }
section nav a { position: absolute; display: block; top: 50%; }
nav a.prevArrow { left: 0; }
nav a.nextArrow { right: 0; }
.nav-circlepop a { margin: 0 30px; width: 50px; height: 50px; }
.nav-circlepop a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: black; content: ; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: scale(0.9); transform: scale(0.9); }
.nav-circlepop .icon-wrap { position: relative; display: block; margin: 10% 0 0 10%; width: 80%; height: 80%; }
.nav-circlepop a.nextArrow .icon-wrap { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.nav-circlepop a.downArrow .icon-wrap { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
.nav-circlepop .icon-wrap::before, .nav-circlepop .icon-wrap::after { position: absolute; left: 25%; width: 3px; height: 50%; background: black; content: ; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.nav-circlepop .icon-wrap::before { -webkit-transform: translateX(-50%) rotate(30deg); transform: translateX(-50%) rotate(30deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }
.nav-circlepop .icon-wrap::after { top: 50%; -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.nav-circlepop a:hover::before { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.nav-circlepop a:hover .icon-wrap::before, .nav-circlepop a:hover .icon-wrap::after { /*background: #cc6055;*/ background: white; }
.nav-circlepop a:hover .icon-wrap::before { -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); }
.nav-circlepop a:hover .icon-wrap::after { -webkit-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); }
.shrink{ background-color: #FFFFFF; }
.shrink a{ color: black; }
ul {
list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: transparent;
position: fixed; top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
/* CSS Parallax
.parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; }
.parallax__layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.parallax__layer--base { transform: translateZ(0); }
.parallax__layer--back { transform: translateZ(-1px) scale(2); }*/
/* Mobile style */
@media screen and (max-width: 600px) { #svg { padding-left: 0; margin-top: 20%; width: 100%; }
.lead { font-size: 16px; }
.block-wrapper-inner { padding-left: 0; }
.centercol { margin-right: 0; margin-left: 0; }
.container .col-md-3 { margin-bottom: 60px; }
.handshakephoto { background-position: 0% 25%; } }
