Difference between revisions of "Team:Sydney Australia/Hexagon"

Line 6: Line 6:
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
@font-face {
 +
    font-family: 'banaue';
 +
    src: url('https://static.igem.org/mediawiki/2017/b/b0/T--Sydney_Australia--Wiki_Font_Banaue-Regular.Media-File.ogg');
 +
    font-weight: normal;
 +
    font-style: normal;
 +
}
 
/* Hexagons */
 
/* Hexagons */
 
#hexGrid {
 
#hexGrid {
Line 12: Line 18:
 
   margin: 0 auto;
 
   margin: 0 auto;
 
   padding: 0.866% 0;
 
   padding: 0.866% 0;
−
   font-family: 'Banaue', sans-serif;
+
   font-family: 'banaue', sans-serif;
−
   font-size: 20px;
+
   font-size: 16px;
 +
 
 
}
 
}
  
Line 28: Line 35:
 
   overflow: hidden;
 
   overflow: hidden;
 
   visibility: hidden;
 
   visibility: hidden;
−
   outline: 3px solid transparent;  /* fix for jagged edges in FF on hover transition */
+
   outline: 1px solid transparent;  /* fix for jagged edges in FF on hover transition */
 
   transform: rotate(-60deg) skewY(30deg) translatez(-1px);
 
   transform: rotate(-60deg) skewY(30deg) translatez(-1px);
 
}
 
}
Line 35: Line 42:
 
   position: absolute;
 
   position: absolute;
 
   visibility: visible;
 
   visibility: visible;
−
   outline: 3px solid transparent;  /* fix for jagged edges in FF on hover transition */
+
   outline: 1px solid transparent;  /* fix for jagged edges in FF on hover transition */
 
}
 
}
  
Line 43: Line 50:
 
   height: 100%;
 
   height: 100%;
 
   text-align: center;
 
   text-align: center;
−
   color: black;
+
   color: #fff;
 
   overflow: hidden;
 
   overflow: hidden;
 
   transform: skewY(-30deg) rotate(60deg);
 
   transform: skewY(-30deg) rotate(60deg);
 
}
 
}
 +
 +
 +
/*** HEX CONTENT **********************************************************************/
 +
 +
.hex img {
 +
  left: -100%;
 +
  right: -100%;
 +
  width: auto;
 +
  height: 100%;
 +
  margin: 0 auto;
 +
}
 +
 +
.hex h1,
 +
.hex p {
 +
  margin: 0;
 +
  width: 102%;
 +
  left: -1%;  /* prevent line on the right where background doesn't cover image */
 +
  padding: 5%;
 +
  box-sizing: border-box;
 +
  color: #3f3f3f!important
 +
  font-weight: 300;
 +
  transition: transform .2s ease-out, opacity .3s ease-out;
 +
}
 +
 +
/* setting colour of hexagons when you hover*/
 +
.hex:nth-child(3n+1) h1,
 +
.hex:nth-child(3n+1) p {
 +
  background-color: rgba(247, 196, 66, 0.8);}
 +
.hex:nth-child(3n+2) h1,
 +
.hex:nth-child(3n+2) p {
 +
  background-color: rgba(94, 172, 195, 0.8);}
 +
  .hex:nth-child(3n+3) h1,
 +
.hex:nth-child(3n+3) p {
 +
  background-color: rgba(220, 77, 80, 0.8);}
 +
 
 +
.hex h1 {
 +
  bottom: 50%;
 +
  padding-top: 50%;
 +
  font-size: 1.5em;
 +
  z-index: 1;
 +
  transform: translateY(-100%) translatez(-1px);
 +
  color: white;
 +
}
 +
 +
.hex h1:after {
 +
  content: '';
 +
  position: absolute;
 +
  bottom: 0;
 +
  left: 45%;
 +
  width: 10%;
 +
  text-align: center;
 +
  border-bottom: 1px solid #fff;
 +
}
 +
 +
.hex p {
 +
  top: 50%;
 +
  padding-bottom: 50%;
 +
  transform: translateY(100%) translatez(-1px);
 +
  color: white;
 +
}
 +
 +
.box .box-content .tag-title h1 { font-family: 'banaue', sans-serif;}
 +
 +
/*** HOVER EFFECT  **********************************************************************/
 +
 +
.hexIn:hover h1, .hexIn:focus h1, .hexIn:hover p, .hexIn:focus p {
 +
  transform: translateY(0%) translatez(-1px);
 +
}
 +
 +
 
/*** SPACING AND SIZING *****************************************************************/
 
/*** SPACING AND SIZING *****************************************************************/
  
Line 102: Line 179:
 
   }
 
   }
 
}
 
}
 +
 +
@media (max-width: 400px) {
 +
  #hexGrid {
 +
    font-size: 13px;
 +
  }
 +
}
 +
 +
 +
/*sets grey background colour*/
 +
* {background-color: e2e2e2;}
 +
 +
 +
/* Making 'Team' image nice and crispy*/
 +
.banner {
 +
image-rendering: -moz-crisp-edges;
 +
image-rendering: -o-crisp-edges;
 +
image-rendering: -webkit-optimize-contrast;
 +
-ms-interpolation-mode: nearest-neighbor;
 +
    }
 +
 +
/*putting 'team' image in the center- NEED TO FIX*/
 +
.col-xs-12 {align:center;}
 +
 +
/*PROFILES DESIGN*/
 +
.box {
 +
  background:#fff;
 +
  transition:all 0.2s ease;
 +
  border:2px dashed #dadada;
 +
  margin-top: 10px;
 +
  box-sizing: border-box;
 +
  border-radius: 5px;
 +
  background-clip: padding-box;
 +
  padding:0 20px 20px 20px;
 +
  min-height:340px;
 +
}
 +
 +
.box:hover {
 +
  border:2px solid #525C7A;
 +
}
 +
 +
.box span.box-title {
 +
    color: #fff;
 +
    font-size: 20px;
 +
    font-weight: 300;
 +
    text-transform: uppercase;
 +
}
 +
 +
 +
.box .box-content {
 +
  padding: 16px;
 +
  border-radius: 0 0 2px 2px;
 +
  background-clip: padding-box;
 +
  box-sizing: border-box;
 +
  background:#fff!important
 +
}
 +
.box .box-content p {
 +
  color:#515c66;
 +
  text-transform:none;
 +
  background:#fff!important
 +
}
 +
.tag-title p {  background:#fff;}
 +
 +
/*keeps profiles hidden when no hover*/
 +
#alex, #courtney, #emaleen, #erica, #grace {display:none;}
 +
#jamie, #ruby, #stephanie, #nicholas, #idk {display:none;}
  
  

Revision as of 11:50, 27 August 2017