Difference between revisions of "Template:Aalto-Helsinki"

Line 19: Line 19:
 
}
 
}
  
 +
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%;
 +
}
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 10:05, 16 August 2016