Difference between revisions of "Template:Bordeaux/CSS"

 
(379 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<!-- Custom Fonts -->
 +
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
 +
<link href='https://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
 +
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
 +
 
<style>
 
<style>
−
/********************************* CONTENT OF THE PAGE ********************************/
 
  
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
 +
    #sideMenu, #top_title {display:none;}
 +
 +
    #content {padding : 0; width:auto; margin-top:-7px;margin-left:0}
 +
 +
    #body {width: auto ; height: auto ; font-family:'Georgia', sans-serif; color: #000;  background-color: white}
 +
   
 +
    #bodyContent h1 { margin: 10 px; font-family: 'Playball', cursive; font-size: 3em; text-align:center; letter-spacing: 1px; line-height:1; font-weight : bold; padding-bottom:25px}
 +
 +
    #bodyContent h2 { margin: 10 px ; text-transform: uppercase; font-family: 'Playball', cursive; font-weight: 700; font-size: 2.5em ; letter-spacing: 1px; line-height:2; color:#1A7799 ; text-align:center ; padding-bottom:25px}
 +
 +
    #bodyContent h3 { margin: 10 px ; font-family: 'Playball', cursive; font-weight: 700; font-size: 2em ;letter-spacing: 1px; color:#1A7799 ; padding-top:20px ; padding-bottom:10px}
 +
   
 +
    #bodyContent h4 { margin: 10 px ; font-family: 'Playball', cursive; font-weight: 700; font-size: 1.5em ;
 +
    letter-spacing: 1px ; padding-top:15px }
 +
 +
    #bodyContent h5 { margin: 10 px ; font-family: 'Roboto', sans-serif; font-weight: 700; font-size:1.5em;
 +
    text-align:center; color:#3c9a5a; padding-top:15px }
 +
 +
/* font and text */
 +
 +
    #bodyContent p {
 +
        padding:0px 15px;
 +
        font-size: 18px;
 +
        font-family:'Roboto', sans-serif;
 +
    }
 +
 +
 +
/********************************* CONTENT OF THE PAGE ********************************/
 
/* Wrapper for the content */
 
/* Wrapper for the content */
  
−
.content_wrapper {
+
    .content_wrapper {
−
width: 85%;
+
        width: 80%;
−
margin-left:150px;
+
        margin-left:150px;
−
padding:10px 0px;  
+
        margin-right:150px;
−
float:left;  
+
        padding:10px 0px;  
−
background-color:white;  
+
        float:left;  
−
}
+
        background-color: white;  
 +
    }
  
−
/*LAYOUT */
+
    /*LAYOUT */
−
.column  {  
+
    .column  {  
−
padding: 10px 0px;
+
        padding: 10px 0px;
−
float:left;  
+
        float:left;  
−
background-color:white;  
+
        background-color: white;  
−
}
+
    }
  
−
.full_size {
+
    .full_size {
−
width:100%;  
+
        width:100%;
−
}
+
    }
  
−
.full_size img {  
+
    .full_size img {  
−
padding: 10px 15px;
+
        width:100%;  
−
width:96.5%;  
+
    }
−
}
+
  
−
.half_size {
+
    .half_size {
−
width: 50%;  
+
        width: 50%;  
−
}
+
    }
−
.half_size img {  
+
    .half_size img {  
−
padding: 10px 15px;
+
        padding: 10px 15px;
−
width: 93%;  
+
        width: 93%;  
−
}
+
    }
  
 +
    .clear {
 +
        clear:both;
 +
    }
  
−
.clear {
+
    .highlight {  
−
clear:both;
+
        width: 90%;  
−
}
+
        margin: auto;
 +
        padding: 15px 5px;
 +
        background-color: #f2f2f2;
 +
    }
  
−
.highlight {  
+
    .judges-will-not-evaluate {
−
width: 90%;  
+
        border: 4px solid #72c9b6;
−
margin: auto;  
+
        display: block;
−
padding: 15px 5px;
+
        margin: 5px 15px;
−
background-color: #f2f2f2;  
+
        width: 95%;
−
}
+
        font-weight:bold
 +
    }
  
−
.judges-will-not-evaluate {
+
/************************** TOP BUTTON ********************************/
−
border: 4px solid #72c9b6;
+
−
display: block;
+
−
margin: 5px 15px;
+
−
width: 95%;
+
−
font-weight:bold;
+
−
}
+
  
 +
    .logo {
 +
        position: absolute;
 +
        top: 20px;
 +
        left: 20px;
 +
        width: 200px;
 +
        background-color: transparent;
 +
        z-index: 9999;
 +
}
  
−
/*STYLING */
+
    .top-button {
 +
        position: fixed;
 +
        bottom: 10px;
 +
        right: -50px;
 +
        width: 150px;
 +
        background-color: transparent;
 +
        z-index: 9999;
 +
}
 +
 
 +
/********************************* BANNER ********************************/
 +
 
 +
    .banner {         
 +
        background: url(https://static.igem.org/mediawiki/2016/5/5c/T--Bordeaux--SleepyBanner.jpg) no-repeat center center scroll;
 +
        margin:0 auto;
 +
        padding-top:42%;
 +
        -webkit-background-size: cover;
 +
        -moz-background-size: cover;
 +
        -o-background-size: cover;
 +
        background-size: cover   
 +
    }
 +
 
 +
/******************************* ICONS *********************************/
 +
 
 +
    #icones {
 +
        padding-bottom:50px;
 +
    }
 +
 
 +
    .icon {
 +
    display: inline;
 +
    }
 +
 
 +
    .icon a {   
 +
        display: inline-block; 
 +
        width:150px;
 +
        height:125px;
 +
        text-align: center;
 +
        font-weight:700; 
 +
        background:transparent;
 +
        border: 4px solid #FFF;
 +
        border-radius:50%;
 +
        padding-top: 25px; 
 +
        margin: 0 20px;  ;
 +
        line-height: 22px;
 +
        overflow: hidden;
 +
        -moz-transition: all 0.3s ease-out; 
 +
        -webkit-transition: all 0.3s ease-out; 
 +
        transition: all 0.3s ease-out;
 +
    } 
 +
 
 +
    .icon a:hover, 
 +
    .icon a:focus { 
 +
        box-shadow: 0 0 65px #10109C;
 +
        -moz-box-shadow: 0 0 65px #10109C;
 +
        -webkit-box-shadow: 0 0 65px #10109C; 
 +
    }
 +
 
 +
/************************** BORDER ********************************/
 +
 
 +
    .square {
 +
          margin-left: auto;
 +
          margin-right: auto;
 +
          padding:5px;
 +
          border-width:5px;
 +
          border-style:ridge;
 +
          border-color:#87CEFA     
 +
    }
 +
 
 +
/************************** STYLING ******************************/
  
 
/* styling for the titles */
 
/* styling for the titles */
  
−
.content_wrapper h1, .content_wrapper h2 {
+
    .content_wrapper h1, .content_wrapper h2 {
−
padding:5px 15px;  
+
        padding:5px 15px;  
−
border-bottom:0px;  
+
        border-bottom:0px;
−
color:#72c9b6;
+
        padding:50px 15px;  
 +
    }
  
−
}
+
    .content_wrapper h3, .content_wrapper h4, .content_wrapper h5 {  
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
        padding:5px 15px;  
−
padding:5px 15px;  
+
        border-bottom:0px;  
−
border-bottom:0px;  
+
−
color: #000000; 
+
−
}
+
  
 +
    }
  
−
/* font and text */
 
−
.content_wrapper p {
 
−
padding:0px 15px;
 
−
font-size: 13px;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
  
−
/* Links */
+
/* Links */
−
.content_wrapper a {
+
−
font-weight: bold;
+
−
text-decoration: underline;
+
−
text-decoration-color:#72c9b6;
+
−
color: #72c9b6;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
  
−
/* hover for the links */
+
    .content_wrapper a {  
−
.content_wrapper a:hover {  
+
        font-weight: bold;
−
text-decoration:none;
+
        text-decoration: none;
−
color:#000000;
+
        text-decoration-color:#41a05e;
−
}
+
        color: #72c98b;
 +
        -webkit-transition: all 0.4s ease;
 +
        -moz-transition: all 0.4s ease;
 +
        -ms-transition: all 0.4s ease;
 +
        -o-transition: all 0.4s ease;
 +
        transition: all 0.4s ease;
 +
    }
  
−
/* non numbered lists */
+
/* hover for the links */
−
.content_wrapper ul {
+
−
padding:0px 20px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;
+
−
}
+
  
−
/* numbered lists */
+
    .content_wrapper a:hover {  
−
.content_wrapper ol {
+
        text-decoration:none;
−
padding:0px;
+
        color:#000000;
−
font-size: 13px;
+
    }
−
font-family:Tahoma, Geneva, sans-serif;  
+
−
}
+
  
−
/* Table */
+
/* non numbered lists */
−
.content_wrapper table {
+
−
width: 97%;
+
−
margin:15px 10px;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
}
+
  
−
/* table cells */
+
    .content_wrapper ul {
−
.content_wrapper td {  
+
        padding:0px 20px;
−
padding: 10px;
+
        list-style-type:disc;
−
vertical-align: text-top;  
+
        font-family: 'Roboto', sans-serif;
−
border: 1px solid #d3d3d3;  
+
        font-size:18px;
−
border-collapse: collapse;  
+
    }
−
}
+
  
−
/* table headers */
+
/* numbered lists */
−
.content_wrapper th {  
+
    .content_wrapper ol {
−
padding: 10px;  
+
        padding:0px;  
−
vertical-align: text-top;
+
        list-style-type:decimal;
−
border: 1px solid #d3d3d3;  
+
        font-family: 'Roboto', sans-serif;
−
border-collapse: collapse;  
+
        font-size:18px;
−
background-color:#f2f2f2;  
+
    }
−
}
+
  
−
/* Button class */
+
/* Table */
−
.button_click {
+
−
margin: 10px auto;
+
−
padding: 15px; width:12%; 
+
−
text-align:center;
+
−
font-weight:bold;
+
−
background-color: #72c9b6;
+
−
cursor:pointer; 
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
transition: all 0.4s ease;
+
−
}
+
  
−
/* button class on hover */
+
    .content_wrapper table {
−
.button_click:hover {   
+
        width: 100%;
−
background-color:#000000;  
+
        font-size:18px;
−
color:#72c9b6;
+
        margin:15px 10px;
−
}
+
        border: 1px solid #ffffff;
 +
        border-collapse: separate;
 +
    }
 +
 
 +
/* table cells */
 +
 
 +
    .content_wrapper  td {
 +
        padding: 10px;
 +
        width:33%
 +
        vertical-align: text-top;
 +
        border: 1px solid #ffffff;
 +
        border-collapse: separate;
 +
    }
 +
 
 +
/* table headers */
 +
 
 +
    .content_wrapper th {
 +
        padding: 10px;
 +
        vertical-align: text-top;
 +
        border: 1px solid #ffffff;
 +
        border-collapse: separate;
 +
        background-color:white;
 +
    }
 +
 
 +
/* Button class */
 +
 
 +
    .button_click {
 +
        margin: 10px auto;
 +
        padding: 15px; width:12%; 
 +
        text-align:center;
 +
        font-weight:bold;
 +
        background-color: #72c9b6;
 +
        cursor:pointer; 
 +
        -webkit-transition: all 0.4s ease;
 +
        -moz-transition: all 0.4s ease;
 +
        -ms-transition: all 0.4s ease;
 +
        -o-transition: all 0.4s ease;
 +
        transition: all 0.4s ease;
 +
    }
 +
 
 +
/* button class on hover */
 +
 
 +
    .button_click:hover {   
 +
        background-color:#000000;  
 +
        color:#72c9b6;
 +
    }
 +
 
 +
/********************************* CAROUSEL ********************************/
 +
 
 +
.container{
 +
    margin: 4% auto;
 +
    width: 210px;
 +
    height: 140px;
 +
    position: relative;
 +
    perspective: 1000px;
 +
    }
 +
    #carousel{
 +
    width: 100%;
 +
    height: 100%;
 +
    position: absolute;
 +
    transform-style: preserve-3d;
 +
    animation: rotation 20s infinite linear;
 +
    }
 +
 
 +
    #carousel:hover{
 +
    animation-play-state: paused;
 +
    }
 +
 
 +
    #carousel figure{
 +
    display: block;
 +
    position: absolute;
 +
    width: 186px;
 +
    height: 116px;
 +
    left: 10px;
 +
    top: 10px;
 +
    background: black;
 +
    overflow: hidden;
 +
    border: solid 5px black;
 +
    }
 +
 
 +
    #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(500px);}
 +
    #carousel figure:nth-child(2) { transform: rotateY(20deg) translateZ(500px);}
 +
    #carousel figure:nth-child(3) { transform: rotateY(40deg) translateZ(500px);}
 +
    #carousel figure:nth-child(4) { transform: rotateY(60deg) translateZ(500px);}
 +
    #carousel figure:nth-child(5) { transform: rotateY(80deg) translateZ(500px);}
 +
    #carousel figure:nth-child(6) { transform: rotateY(100deg) translateZ(500px);}
 +
    #carousel figure:nth-child(7) { transform: rotateY(120deg) translateZ(500px);}
 +
    #carousel figure:nth-child(8) { transform: rotateY(140deg) translateZ(500px);}
 +
    #carousel figure:nth-child(9) { transform: rotateY(160deg) translateZ(500px);}
 +
    #carousel figure:nth-child(10) { transform: rotateY(180deg) translateZ(500px);}
 +
    #carousel figure:nth-child(11) { transform: rotateY(200deg) translateZ(500px);}
 +
    #carousel figure:nth-child(12) { transform: rotateY(220deg) translateZ(500px);}
 +
    #carousel figure:nth-child(13) { transform: rotateY(240deg) translateZ(500px);}
 +
    #carousel figure:nth-child(15) { transform: rotateY(260deg) translateZ(500px);}
 +
    #carousel figure:nth-child(16) { transform: rotateY(280deg) translateZ(500px);}
 +
    #carousel figure:nth-child(17) { transform: rotateY(300deg) translateZ(500px);}
 +
    #carousel figure:nth-child(18) { transform: rotateY(320deg) translateZ(500px);}
 +
    #carousel figure:nth-child(19) { transform: rotateY(340deg) translateZ(500px);}
 +
    #carousel figure:nth-child(20) { transform: rotateY(360deg) translateZ(500px);}
 +
 
 +
    img{
 +
   
 +
    cursor: pointer;
 +
    transition: all .5s ease;
 +
    }
 +
 
 +
    @keyframes rotation{
 +
        from{
 +
            transform: rotateY(0deg);
 +
        }
 +
        to{
 +
            transform: rotateY(360deg);
 +
        }
 +
    }
  
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
Line 165: Line 350:
 
/* IF THE SCREEN IS LESS THAN 1000PX */
 
/* IF THE SCREEN IS LESS THAN 1000PX */
  
−
@media only screen and (max-width: 1000px) {
+
    @media only screen and (max-width: 1000px) {
−
 
+
        #content {width:100%; }
−
#content {width:100%; }
+
        .content_wrapper {margin-left: 15%;}
−
.menu_wrapper {width:15%;}
+
        .icon {display:none;}
−
.content_wrapper {margin-left: 15%;}
+
        .highlight {padding:10px 0px;}
−
.menu_item {display:block;}
+
    }
−
.icon {display:none;}
+
−
.highlight {padding:10px 0px;}
+
−
}
+
  
  
 
/* IF THE SCREEN IS LESS THAN 680PX */
 
/* IF THE SCREEN IS LESS THAN 680PX */
  
−
@media only screen and (max-width: 680px) {
+
    @media only screen and (max-width: 700px) {
−
.collapsable_menu_control { display:block;}
+
        .collapsable_menu_control {display:block;}
−
.menu_item {display:none;}
+
        .content_wrapper {width:100%; margin-left:0px;}
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
        .column.half_size {width:100%; }
−
.content_wrapper {width:100%; margin-left:0px;}
+
        .column img { width: 100%; padding: 5px 0px;}
−
.column.half_size {width:100%; }
+
        .logo{display:none};
−
.column img { width: 100%; padding: 5px 0px;}
+
        .icon {display:block;}
−
.icon {display:block;}
+
        .highlight {padding:15px 5px;}
−
.highlight {padding:15px 5px;}
+
    }
−
}
+
 
−
</style>
+
    </style>
 
</html>
 
</html>

Latest revision as of 00:11, 20 October 2016