Difference between revisions of "Template:TU Dresden/CSS"

 
(245 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
 +
 +
@font-face {
 +
    font-family: 'Orbitron';
 +
    src: url(https://static.igem.org/mediawiki/2017/0/06/T--TU_Dresden--Orbitron-Regular.ttf) format("truetype");
 +
}
 +
 +
@font-face {
 +
    font-family: 'Open Sans';
 +
    src: url(https://static.igem.org/mediawiki/2017/6/62/T--TU_Dresden--OpenSans-Regular.ttf) format("truetype");
 +
}
 +
 
:root {
 
:root {
 
     --logo-dark-blue: rgb(28, 20, 68);
 
     --logo-dark-blue: rgb(28, 20, 68);
Line 8: Line 19:
 
     --bright-bg-color: rgba(244, 249, 255, 1);
 
     --bright-bg-color: rgba(244, 249, 255, 1);
 
     --headfont: 'Orbitron', sans-serif;
 
     --headfont: 'Orbitron', sans-serif;
 +
    --bodyfont: 'Open Sans', sans-serif;
 
}
 
}
  
Line 58: Line 70:
 
}
 
}
  
−
/* Out styling */
+
/* Our styling */
 +
 
 +
body {
 +
    font-size: 13px;
 +
}
  
 
b {
 
b {
Line 69: Line 85:
  
 
main {
 
main {
−
     font-family: 'Open Sans', sans-serif;
+
     font-family: var(--bodyfont);
 
     line-height: 150%;
 
     line-height: 150%;
−
     margin-right: 30px;
+
     margin-right: 10px;
−
     margin-left: 30px;
+
     margin-left: 10px;
 +
}
 +
 
 +
table {
 +
    display: table;
 
}   
 
}   
  
 
#pagebanner {
 
#pagebanner {
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
−
     background-position: left top;
+
     background-position: center top;
 
     width: 100%;
 
     width: 100%;
 
     background-size: contain;
 
     background-size: contain;
Line 84: Line 104:
 
}
 
}
 
#bannerquote {
 
#bannerquote {
−
     padding-right: 15%;
+
     padding-right: 5%;
−
    padding-left: 15%;
+
 
     font-family: var(--headfont);
 
     font-family: var(--headfont);
−
     font-size: 50px;
+
     font-size: 46px;
 
     line-height: 170%;
 
     line-height: 170%;
 
     color: var(--bright-bg-color);
 
     color: var(--bright-bg-color);
 +
    text-shadow: 0 0 3px var(--logo-dark-blue);
 +
}
 +
 +
#projecttitle {
 +
    padding-right: 5%;
 +
    font-family: var(--headfont);
 +
    font-size: 36px;
 +
    line-height: 170%;
 +
    color: var(--bright-bg-color);
 +
    text-shadow: 0 0 3px var(--logo-dark-blue);
 
}
 
}
  
Line 99: Line 128:
 
}
 
}
  
 +
.at-a-glance {
 +
    margin-left: 10px;
 +
    margin-right: 10px;
 +
    font-family: var(--bodyfont);
 +
    line-height: 150%;
 +
}
 +
 +
.at-a-glance h1{
 +
    float: right;
 +
}
 +
 +
.sidebar {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
}
  
 
.contentbox {
 
.contentbox {
Line 107: Line 152:
 
     margin-bottom: 40px;
 
     margin-bottom: 40px;
 
     padding: 40px;
 
     padding: 40px;
 +
}
 +
 +
.contentbox h1, .contentbox h2, .contentbox h3, .contentbox h4, .contentbox h5 {
 +
    text-align: left;
 +
}
 +
 +
.bronze{
 +
background:#834433;
 +
}
 +
 +
.silver{
 +
background:#C0C0C0;
 +
}
 +
 +
.gold{
 +
background:#D4AF37;
 
}
 
}
  
Line 123: Line 184:
 
}
 
}
  
−
.contentbox figure, .contentbox p, .contentbox .pdf-resources, .contentbox ul {
+
.bronze{
 +
background:#B76F34;
 +
}
 +
 
 +
.silver{
 +
background:#A9A9A9;
 +
}
 +
 
 +
.gold{
 +
background:#CFB53B;
 +
}
 +
.indigo{
 +
        background:#4B0082;
 +
}
 +
.black{
 +
        background:#000000;
 +
}
 +
.bluepurple{
 +
        background:#8A2BE2;
 +
}
 +
 
 +
.table-scrollable {
 +
  width: 100%;
 +
  overflow-y: auto;
 +
  margin: 0 0 1em;
 +
}
 +
 
 +
.table-scrollable::-webkit-scrollbar {
 +
  -webkit-appearance: none;
 +
  width: 14px;
 +
  height: 14px;
 +
}
 +
 
 +
.table-scrollable::-webkit-scrollbar-thumb {
 +
  border-radius: 8px;
 +
  border: 3px solid #fff;
 +
  background-color: rgba(0, 0, 0, .3);
 +
}
 +
 
 +
.contentbox p, .contentbox .pdf-resources, .contentbox .excel-resources, .contentbox ul, .contentbox ol, .contentbox .read-more {
 +
    display: block;
 +
    padding: 20px;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
.contentbox table {
 +
    padding: 20px;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
.contentbox figure {
 
     display: inline-block;
 
     display: inline-block;
 
     padding: 20px;
 
     padding: 20px;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 
}
 
}
  
 +
.contentbox figure figure, .contentbox figure p, .contentbox figure table {
 +
    padding: 0px;
 +
}
 +
 +
.contentbox figure h1, .contentbox figure h2, .contentbox figure h3, .contentbox figure h4, .contentbox figure h5 {
 +
    padding-left: 0px;
 +
}
 +
 +
.contentbox figure p + p {
 +
    padding-top: 20px;
 +
}
 +
 +
.tablefigure {
 +
    padding-top: 0px !important;
 +
}
 
.survey-quote{
 
.survey-quote{
 
     font-weight: bold;
 
     font-weight: bold;
Line 142: Line 274:
 
}
 
}
  
−
.pdf-resources {
+
.excel-resources:before {
 +
    text-decoration: none;
 +
    color: grey;
 +
    font-weight: bold;
 +
    font-size: larger;
 +
    content: "EXCEL\00a0\00a0\00a0\00a0";
 +
}
 +
 
 +
.read-more:before {
 +
    text-decoration: none;
 +
    color: grey;
 +
    font-weight: bold;
 +
    font-size: larger;
 +
    content: ">> READ MORE";
 +
}
 +
 
 +
.pdf-resources, .excel-resources {
 
     margin-top: 2px;
 
     margin-top: 2px;
 
     margin-bottom: 2px;
 
     margin-bottom: 2px;
Line 152: Line 300:
 
}
 
}
  
−
.pdf-resources:hover {
+
.read-more {
 +
    margin-top: 4px;
 +
    margin-bottom: 4px;
 +
    text-decoration: none;
 +
    width: 100%;
 +
    border: 2px solid var(--logo-pink);
 +
    border-radius: 5px;
 +
    transition: .5s;
 +
    width: 200px;
 +
    margin-left: calc(100% - 220px);
 +
}
 +
 
 +
.read-more:hover {
 +
    border: 3px solid var(--logo-pink);
 +
    text-decoration: none;
 +
    margin-top: 3px;
 +
    margin-bottom: 3px;
 +
}
 +
 
 +
.pdf-resources:hover, .excel-resources:hover {
 
     border-color: grey;
 
     border-color: grey;
 
     text-decoration: none;
 
     text-decoration: none;
Line 169: Line 336:
 
.contentbox li {
 
.contentbox li {
 
     list-style-type: disc;
 
     list-style-type: disc;
 +
    padding-top: 10px;
 +
    padding-bottom: 10px;
 +
    padding-left: 5px;
 
}
 
}
  
 +
.contentbox .henristyle {
 +
    margin-left: 10%;
 +
    margin-top: 0px;
 +
    margin-bottom: 5px;
 +
}
 +
 +
 +
.contentbox .henristyle li {
 +
    list-style-type: disc;
 +
    padding-top: 5px;
 +
    padding-bottom: 5px;
 +
}
 +
 +
.contentbox ol {
 +
    margin-left: 10%;
 +
}
 +
 +
.contentbox ol li {
 +
    list-style-type: decimal;
 +
}
 +
 +
.contentbox .letters li {
 +
    list-style-type: lower-alpha;
 +
}
 +
 +
ul.leaf li {
 +
    list-style-type: none;
 +
}
 +
 +
ul.leaf li:before {
 +
    background-image: url(https://static.igem.org/mediawiki/2017/6/6c/T--TU_Dresden--tick-leaf.png);
 +
    background-repeat: no-repeat;
 +
    background-size: contain;
 +
    padding: 10px;
 +
    content: "\00a0";
 +
    bottom: -10px;
 +
    position: relative;
 +
    margin-right: 10px; 
 +
}
 +
 +
.contentbox .source {
 +
    margin-left: 0px;
 +
    line-height: 1em;
 +
}
 +
 +
.source td {
 +
    font-size: 75%;
 +
    color: black;
 +
    padding-top: 5px;
 +
    padding-bottom: 5px;
 +
}
 +
 +
.iGEMer {
 +
    display: flex;
 +
    flex-wrap: wrap;
 +
    align-items: center;
 +
}
 +
 +
.contentbox .floatright {
 +
  float: right;
 +
  padding-left: 20px;
 +
  padding-bottom: 5px;
 +
  padding-top: 10px;
 +
}
 +
 +
.contentbox .floatleft {
 +
  float: left;
 +
  padding-right: 20px;
 +
  padding-bottom: 5px;
 +
  padding-top: 10px;
 +
}
  
 
figcaption {
 
figcaption {
−
     font-size: 90%;
+
     font-size: 80%;
 +
    transition: .5s;
 +
}
 +
 
 +
.linkfigure {
 +
    margin-bottom: 5px;
 +
}
 +
 
 +
.linkpicture {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 
 +
.linkpicture *{
 +
    vertical-align: middle;
 +
}
 +
 
 +
.linkpicture figcaption {
 +
    text-decoration: none;
 +
    background: rgba(0,0,0,.7);
 +
    opacity: 0;
 +
    position: absolute;
 +
    bottom: 0;
 +
    transition: all 1s ease;
 +
    margin: 0;
 +
    padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    flex-direction: column;
 +
}
 +
 
 +
.linkpicture figcaption h2 {
 +
    font-size: 140%;
 +
    color: white;
 +
}
 +
 
 +
.linkpicture figcaption p {
 +
    color: white;
 +
}
 +
 
 +
.linkpicture:hover figcaption{
 +
    opacity: 1;
 +
    vertical-align: middle;
 
}
 
}
  
Line 188: Line 474:
  
 
h3 {
 
h3 {
−
     font-size: 120%;
+
     font-size: 140%;
−
     font-family: var(--headfont);
+
     font-family: var(--bodyfont);
−
     padding: 10px;
+
     padding: 20px;
 +
    padding-top: 10px;
 
     padding-bottom: 5px;
 
     padding-bottom: 5px;
 +
    font-weight: bold;
 
}
 
}
  
 
h4 {
 
h4 {
 +
    font-size: 120%;
 +
    font-family: var(--bodyfont);
 +
    padding: 20px;
 +
    padding-top: 5px;
 +
    padding-bottom: 5px;
 +
    font-weight: bold;
 +
}
 +
 +
h5 {
 
     font-size: 100%;
 
     font-size: 100%;
−
     font-family: var(--headfont);
+
     font-family: var(--bodyfont);
−
     padding: 5px;
+
     padding: 20px;
 +
    padding-top: 5px;
 +
    padding-bottom: 5px;
 +
    font-weight: bold;
 
}
 
}
  
Line 221: Line 521:
 
nav ul li a {
 
nav ul li a {
 
     display: block;
 
     display: block;
−
     font-size: .9em;
+
     font-size: .75em;
 
     text-align: center;
 
     text-align: center;
 
     height: 95px;
 
     height: 95px;
−
     line-height: 40px;
+
     line-height: 42px;
 
     padding-top: 40px;
 
     padding-top: 40px;
 
     padding-left: 15px;
 
     padding-left: 15px;
Line 231: Line 531:
 
}
 
}
  
−
nav ul a:hover, nav ul li:hover .dropbtn{
+
nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
 +
    background-color: var(--logo-pink);
 +
    box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
    height: 105px;
 +
}
 +
 
 +
a.active, nav ul li.active .dropbtn{
 
     background-color: var(--logo-pink);
 
     background-color: var(--logo-pink);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
Line 237: Line 543:
 
}
 
}
  
−
nav ul li:hover .nav-dropdown {
+
nav ul li:hover .nav-dropdown, .show .nav-dropdown {
 
     display: block;
 
     display: block;
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
Line 279: Line 585:
 
     text-decoration: none;
 
     text-decoration: none;
 
     font-weight: medium;
 
     font-weight: medium;
−
     font-size: .8em;
+
     font-size: .7em;
 
     transition: 0.25s;
 
     transition: 0.25s;
 
}
 
}
Line 288: Line 594:
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     height: 45px;
 
     height: 45px;
 +
}
 +
 +
@media (pointer: coarse) {
 +
    .dropbtn span {
 +
        padding-top: 26px;
 +
        padding-bottom: 26px;
 +
        margin-top: -26px;
 +
        margin-bottom: -26px;
 +
        padding-left: 10px;
 +
        padding-right: 10px;
 +
    }
 +
    .dropbtn span:after {
 +
        transform: rotate(-90deg);
 +
        display: inline-block;
 +
        font-weight: bold;
 +
        font-family: var(--headfont);
 +
        content: '\2039';
 +
    }
 
}
 
}
  
Line 344: Line 668:
  
 
#logo {
 
#logo {
−
     top: 20px;
+
     top: 10px;
−
     left: 0;
+
     left: 50%;
 
     position: absolute;
 
     position: absolute;
−
     margin: -10px;
+
     margin-left: -105px;
−
     width: 230px;
+
     width: 210px;
−
     height: 230px;
+
     height: 210px;
−
     border-radius: 115px;
+
     border-radius: 105px;
−
     background: var(--logo-dark-blue);
+
     background: rgb(28, 20, 68);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
    z-index: 3;
 
}
 
}
  
 
#logo img {
 
#logo img {
−
     width: 200px;
+
     width: 180px;
 
     margin: 15px;
 
     margin: 15px;
 
}
 
}
  
−
#ufo {
+
.footerbar {
−
     bottom: 10px;
+
    font: var(--bodyfont);
 +
    margin-top: 150px;
 +
    padding: 20px;
 +
    width: 100%;
 +
    min-height: 150px;
 +
    background: var(--logo-dark-blue);
 +
    box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 +
     bottom: 0;
 +
    left: 0;
 
     right: 0;
 
     right: 0;
−
     float: right;
+
    z-index: 1;
 +
    color: var(--bright-bg-color);
 +
    display: flex;
 +
    justify-content: space-around;
 +
    align-items: center;
 +
    flex-wrap: wrap;
 +
}
 +
 
 +
.footerbar a, .footerbar a:visited, footerbar a:hover, .footerbar a:focus, .footerbar a:active {
 +
    text-decoration: none;
 +
    color: white;
 +
}
 +
 
 +
.footerbar > * {
 +
    margin: 10px 15px 10px 15px;
 +
   
 +
}
 +
 
 +
.footerbar td {
 +
    padding: 5px;
 +
}
 +
 
 +
 
 +
 
 +
#ufo {
 +
    bottom: -253px;
 +
    left: 0;
 +
     float: left;
 
     position: fixed;
 
     position: fixed;
−
    width: 250px;
 
 
     height: 253px;
 
     height: 253px;
 
     background-image: url(https://static.igem.org/mediawiki/2017/e/e0/T--TU_Dresden--UFO.png);
 
     background-image: url(https://static.igem.org/mediawiki/2017/e/e0/T--TU_Dresden--UFO.png);
 
     background-size: contain;
 
     background-size: contain;
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 
}
 
}
  
Line 375: Line 736:
 
     text-align: center;
 
     text-align: center;
 
     width: 100%;
 
     width: 100%;
−
    bottom: 20px;
 
 
     position: absolute;
 
     position: absolute;
 +
}
 +
 +
.ufo-links a {
 +
    color: white;
 +
}
 +
 +
.back-to-top {
 +
    font-size: .85em;
 +
    text-align: center;
 +
    width: 100%;
 +
    bottom: 10px;
 +
    position: absolute;
 +
}
 +
 +
#modal {
 +
    width: 100%;
 +
    height: 100vh;
 +
    position: fixed;
 +
    top:0;
 +
    left:0;
 +
    display: none;
 +
    z-index: 10;
 +
    background-color: rgba(0,0,0,.85);
 +
    overflow: auto;
 +
}
 +
 +
#modal figure {
 +
    padding: 20px;
 +
    margin-top: 20px;
 +
    max-height: 100%;
 +
}
 +
 +
#modal img {
 +
    background: var(--bright-bg-color);
 +
}
 +
 +
#fullscreen {
 +
    cursor: pointer;
 +
}
 +
 +
/* DivTable.com */
 +
.divTable{
 +
display: table;
 +
width: 100%;
 +
}
 +
.divTableRow {
 +
display: table-row;
 +
}
 +
.divTableHeading {
 +
background-color: #EEE;
 +
display: table-header-group;
 +
}
 +
.divTableCell, .divTableHead {
 +
display: table-cell;
 +
padding: 3px 10px;
 +
        vertical-align:middle !important;
 +
        height:90px;
 +
 +
}
 +
.divTableHeading {
 +
background-color: #EEE;
 +
display: table-header-group;
 +
font-weight: bold;
 +
}
 +
.divTableFoot {
 +
background-color: #EEE;
 +
display: table-footer-group;
 +
font-weight: bold;
 +
}
 +
.divTableBody {
 +
display: table-row-group;
 +
}
 +
 +
 +
 +
#fullscreen-caption {
 +
    color: white;
 +
    padding-left: 2%;
 +
    padding-right: 2%;
 +
    padding-top:3%;
 +
    font-family: OpenSans, sans-serif;
 +
    font-size: 120%;
 +
    line-height: 170%;
 +
    min-width: 0;
 +
}
 +
 +
 +
#close-fullscreen {
 +
    position: absolute;
 +
    cursor: pointer;
 +
    right: 20px;
 +
    top: 20px;
 +
    width: 50px;
 +
    height: 50px;
 +
    padding: 5px;
 +
}
 +
 +
#close-fullscreen span:after {
 +
    position: absolute;
 +
    cursor: pointer;
 +
    border-radius: 1px;
 +
    height: 4px;
 +
    width: 30px;
 +
    background: rgba(244, 249, 255, 1);
 +
    transform: rotate(45deg);
 +
    display: block;
 +
    content: '';
 +
    transition: .5s;
 +
    top: 20px;
 +
    right: 10px;
 +
}
 +
 +
#close-fullscreen span:before {
 +
    position: absolute;
 +
    cursor: pointer;
 +
    border-radius: 1px;
 +
    height: 4px;
 +
    width: 30px;
 +
    background: rgba(244, 249, 255, 1);
 +
    transform: rotate(-45deg);
 +
    display: block;
 +
    content: '';
 +
    transition: .5s;
 +
    top: 20px;
 +
    right: 10px;
 +
}
 +
 +
#close-fullscreen:hover span:before, #close-fullscreen:hover span:after {
 +
    width: 35px;
 +
    height: 5px;
 +
    transition: .5s;
 +
}
 +
 +
.zoom {
 +
    transition: .5s;
 +
    cursor: pointer;
 +
}
 +
.zoom:hover {
 +
    padding-bottom: 5px;
 +
    transition: .5s;
 +
    margin-top: -5px;
 +
}
 +
 +
.zoom:hover ~ figcaption {
 +
    padding-bottom: 5px;
 +
    transition: .5s;
 +
    margin-top: -5px;
 
}
 
}
  
 
@media only screen and (min-width: 1200px) {
 
@media only screen and (min-width: 1200px) {
 
     main, .wrapper {
 
     main, .wrapper {
−
         margin-right: 20%;
+
         margin-right: 5%;
−
         margin-left: 5%;
+
         margin-left: 20%;
 +
    }
 +
    .at-a-glance {
 +
        margin-right:5%;
 +
        margin-left:45%;
 +
    }
 +
    .sidebar, #ufo {
 +
        width: 20%;
 +
    }
 +
    #bannerquote, #projecttitle {
 +
        margin-left: 20%;
 
     }
 
     }
 
     .navbar {
 
     .navbar {
Line 391: Line 908:
 
@media screen and (min-width: 992px) and (max-width: 1199px){
 
@media screen and (min-width: 992px) and (max-width: 1199px){
 
     main {
 
     main {
−
         margin-right: 250px;
+
         margin-right: 30px;
 +
        margin-left: 250px;
 
     }
 
     }
−
     #bannerquote {
+
    .at-a-glance {
 +
        margin-right: 30px;
 +
        margin-left: 350px;       
 +
    }
 +
    .sidebar, #ufo {
 +
        width: 250px;
 +
    }
 +
 
 +
     #bannerquote, #projecttitle {
 +
        margin-left: 250px;
 
         font-size: 40px;
 
         font-size: 40px;
 
     }
 
     }
 +
 +
    #fullscreen-caption {
 +
        font-size: 110%;
 +
    }
 +
 
     .navbar {
 
     .navbar {
 
         display: block !important;
 
         display: block !important;
Line 408: Line 940:
  
 
@media only screen and (max-width: 991px) {
 
@media only screen and (max-width: 991px) {
−
     #bannerquote {
+
    .contentbox figure, .contentbox p, .contentbox .pdf-resources, .contentbox ul {
 +
        padding: 10px !important;
 +
    }
 +
    .contentbox {
 +
        text-align: left;
 +
        padding: 10px;
 +
        padding-top: 20px;
 +
    }
 +
 
 +
    .box-heading {
 +
        top: -30px;
 +
    }
 +
 
 +
     #bannerquote, #projecttitle {
 
         font-size: 30px;
 
         font-size: 30px;
 +
        padding-left: 5%;
 
     }
 
     }
  
 
     .makeresponsive {
 
     .makeresponsive {
 
         width: 100% !important;
 
         width: 100% !important;
 +
        display: inline-block !important;
 
     }
 
     }
 
     #ufo {
 
     #ufo {
Line 471: Line 1,018:
 
         width: 100%;
 
         width: 100%;
 
         box-shadow: none;
 
         box-shadow: none;
−
        height: 70px;
 
 
     }
 
     }
  
Line 487: Line 1,033:
 
     .navbar {
 
     .navbar {
 
         display: none;
 
         display: none;
 +
    }
 +
 +
    nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
 +
        height: 70px;
 +
    }
 +
 +
    a.active, nav ul li.active .dropbtn{
 +
        height: 70px;
 
     }
 
     }
  
Line 492: Line 1,046:
 
     .nav-mobile {
 
     .nav-mobile {
 
         display: block;
 
         display: block;
 +
    }
 +
 +
    #modal figure {
 +
        padding: 0;
 +
        padding-top: 20px;
 +
        padding-bottom: 10px;
 +
    }
 +
 +
    #fullscreen-caption {
 +
        font-size: 100%;
 
     }
 
     }
 
}
 
}
 +
.view {
 +
    width: 400px;
 +
    height: 450px;
 +
    float: left;
 +
    overflow: hidden;
 +
    position: relative;
 +
    text-align: center;
 +
    cursor: default;
 +
   
 +
}
 +
.view .mask, .view .content {
 +
    width: 400px;
 +
    height: 400px;
 +
    position: absolute;
 +
    overflow: hidden;
 +
    top: 0;
 +
    left: 0
 +
}
 +
.view img {
 +
    display: block;
 +
    position: relative
 +
}
 +
.view h2 {
 +
    color: #fff;
 +
    text-align: center;
 +
    position: relative;
 +
    font-size: 17px;
 +
    padding: 10px;
 +
    background: rgba(0, 0, 0, 0.8);
 +
    margin: 20px 0 0 0
 +
}
 +
.view p {
 +
    font-family: Arial, serif;
 +
    font-size: 15px;
 +
    position: relative;
 +
    color: #fff;
 +
    padding: 10px 20px 20px;
 +
    text-align: center
 +
}
 +
 +
.view a.info {
 +
    display: inline-block;
 +
    text-decoration: none;
 +
    padding: 7px 14px;
 +
    background: #000;
 +
    color: #fff;
 +
}
 +
.view a.info:hover {
 +
    box-shadow: 0 0 5px #000
 +
}
 +
.view-eighth .mask {
 +
        background-color: rgba(0,0,0,0.6);
 +
top: -200px;
 +
opacity: 0;
 +
transition: all 0.3s ease-out 0.5s;
 +
}
 +
.view-eighth h2{
 +
    transform: translateY(-200px);
 +
transition: all 0.2s ease-in-out 0.1s;
 +
}
 +
.view-eighth p {
 +
    transform: translateY(-200px);
 +
transition: all 0.2s ease-in-out 0.2s;
 +
}
 +
.view-eighth a.info {
 +
    transform: translateY(-200px);
 +
transition:  all 0.2s ease-in-out 0.3s;
 +
}
 +
.view-eighth:hover .mask {
 +
opacity: 1;
 +
top: 0px;
 +
transition-delay: 0s;
 +
    animation: bounceY 0.9s linear;
 +
}
 +
.view-eighth:hover h2 {
 +
    transform: translateY(0px);
 +
transition-delay: 0.4s;
 +
}
 +
.view-eighth:hover p {
 +
transform: translateY(0px);
 +
transition-delay: 0.2s;
 +
}
 +
.view-eighth:hover a.info {
 +
    transform: translateY(0px);
 +
transition-delay: 0s;
 +
}
 +
@keyframes bounceY {
 +
    0% { transform: translateY(-205px);}
 +
    40% { transform: translateY(-100px);}
 +
    65% { transform: translateY(-52px);}
 +
    82% { transform: translateY(-25px);}
 +
    92% { transform: translateY(-12px);}
 +
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
 +
}
 +
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 23:25, 15 December 2017