Difference between revisions of "Template:UCSC-Styles"

 
(23 intermediate revisions by 2 users not shown)
Line 11: Line 11:
 
     overflow-x: hidden;
 
     overflow-x: hidden;
 
}
 
}
 +
 +
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*styles consistent across pages below:*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
 +
/*.pageflow {
 +
  margin-right: 0px;
 +
  margin-left: 0px;
 +
  margin-top:30px;
 +
  background: honeydew;
 +
}*/
 +
 +
/*h1 {
 +
  font-family: 'objektiv-mk1'!important;
 +
  font-size: 300%;
 +
  font-weight: 300 !important;
 +
    width: 80%;
 +
}
 +
 +
h2 {
 +
  font-family: 'objektiv-mk1' !important;
 +
  font-size: 200%;
 +
  font-weight: 300;
 +
}
 +
 +
#page {
 +
  background: honeydew;
 +
}
 +
 +
.proj-button {
 +
    position: relative;
 +
    width: 10%;
 +
}
 +
 +
.proj-button-image {
 +
  opacity: 1;
 +
  display: inline-block;
 +
  width: 14%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 +
}
 +
 +
.proj-button-desc {
 +
  transition: .5s ease;
 +
  opacity: 0;
 +
  position: absolute;
 +
  top: 100%;
 +
  left: 50%;
 +
  background: transparent;
 +
  transform: translate(-50%, -50%);
 +
  -ms-transform: translate(-50%, -50%)
 +
}
 +
 +
.proj-button:hover .proj-button-image {
 +
  opacity: 0.3;
 +
}
 +
 +
.proj-button:hover .proj-button-desc {
 +
  opacity: 0.6;
 +
}
 +
 +
.overlap-button-text {
 +
  background-color: transparent;
 +
  color: black;
 +
  font-size: 20px;
 +
  font-family: "Objektiv-mk1" !important;
 +
  font-weight: 600 !important;
 +
  padding: 16px 32px;
 +
}
 +
 +
.pagagraph {
 +
  font-family: 'objektiv-mk1' !important;
 +
 +
}
 +
 +
p {
 +
  font-family: 'objektiv-mk1' !important;
 +
  font-size: large !important;
 +
}
 +
 +
.firstword {
 +
  font-family: 'objektiv-mk1' !important;
 +
  font-size: 100px;
 +
}
 +
 +
.titleimg {
 +
  vertical-align: middle;
 +
  width: 100%;
 +
}
 +
 +
.titlebox {
 +
  margin-left: 200px !important;
 +
}*/
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
/*@media (min-width: 1144px) {
 +
  .container {
 +
    width: 70% !important;
 +
  }
 +
  .text-container {
 +
    width: 60%;
 +
    padding-left: 15px;
 +
    padding-right: 15px;
 +
  }
 +
  .titlebox {
 +
    width: 80%;
 +
  }
 +
  figcaption {
 +
    font-size: 16px;
 +
  }
 +
}*/
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
/*@media (max-width: 1144px) {
 +
 +
  .titlebox {
 +
    margin-left: auto !important;
 +
  }
 +
 +
  .text-container {
 +
    width: 80%;
 +
    padding-left: 15px;
 +
    padding-right: 15px;
 +
  }
 +
 +
  p {
 +
    font-family: 'objektiv-mk1' !important;
 +
    margin-left: 20px !important;
 +
    margin-right: 20px !important;
 +
    font-size: medium !important;
 +
  }
 +
}*/
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
/*@media (max-width: 768px) {
 +
 +
  .overlap-button-text {
 +
    background-color: rgba(94, 94, 94, 0.5);
 +
    border-radius: 60px;
 +
    color: white;
 +
  }
 +
 +
  .proj-button-image {
 +
      opacity: 1;
 +
      display: inline-block;
 +
      width: 30%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
  }
 +
 +
  .proj-button-desc {
 +
      transition: .5s ease;
 +
      opacity: 1;
 +
      position: absolute;
 +
      top: 100%;
 +
      left: 50%;
 +
      transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%)
 +
  }
 +
 +
  h1 {
 +
      font-family: 'objektiv-mk1';
 +
  }
 +
 +
  h2 {
 +
      font-family: 'objektiv-mk1';
 +
      font-size: 20px;
 +
  }
 +
 +
  .text-container {
 +
    width: 80%;
 +
  }*/
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
/*@media (max-width: 576px) {
 +
  .proj-button-image {
 +
      opacity: 1;
 +
      display: inline-block;
 +
      width: 60%;
 +
      height: auto;
 +
      transition: .5s ease;
 +
      backface-visibility: hidden;
 +
  }
 +
 +
  .proj-button-desc {
 +
      transition: .5s ease;
 +
      opacity: 1;
 +
      position: absolute;
 +
      top: 100%;
 +
      left: 50%;
 +
      transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%)
 +
  }
 +
 +
  .firstword {
 +
    font-family: 'objektiv-mk1' !important;
 +
    font-size: 70px;
 +
  }
 +
 +
  .titleimg {
 +
    vertical-align: middle;
 +
    width: 90%;
 +
  }
 +
 +
  .text-container {
 +
    width: 100%;
 +
    margin-left: -15px;
 +
    margin-right: -15px;
 +
  }
 +
 +
  p {
 +
    font-family: 'objektiv-mk1' !important;
 +
    margin-left: 10px !important;
 +
    margin-right: 10px !important;
 +
    font-size: small !important;
 +
  }
 +
}*/
 +
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*styles consistent across pages above:*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*styles consistent across header, and meet the team below:*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 +
 +
  
 
#globalWrapper {
 
#globalWrapper {
−
padding:0;
+
  padding:0;
 +
  /*margin-bottom: -40px;*/
 
}
 
}
 +
 
.pad-top {
 
.pad-top {
 
     padding-top: 60px
 
     padding-top: 60px
Line 37: Line 293:
 
}
 
}
  
 +
.page{
 +
          background: honeydew;
 +
}
  
−
p {
+
/*p {
−
     font-weight: 300;
+
    margin: 0px !important;
 +
     font-weight: 300 !important;
 
     line-height: 30px;
 
     line-height: 30px;
 
     font-size: 120%;
 
     font-size: 120%;
−
     family-font: "Quicksand", sans serif !important;
+
     font-family: "Objektiv-mk1" !important;
−
}
+
}*/
 
.persondesc {
 
.persondesc {
 
     font-weight: 300;
 
     font-weight: 300;
Line 178: Line 438:
  
 
#content {
 
#content {
−
padding:0;
+
  padding:0;
 +
  /*margin-bottom: -50px;*/
 
}
 
}
  
Line 267: Line 528:
 
     -webkit-filter: blur(10px)
 
     -webkit-filter: blur(10px)
 
}
 
}
 +
 +
.person-name {
 +
  font-family: 'Objektiv-mk1';
 +
  font-weight: 300;
 +
  opacity: 0;
 +
  position: absolute;
 +
  background-color: rgba(0, 0, 0, 0.65);
 +
}
 +
 +
@media (max-width: 768px) {
 +
  .person-name {
 +
    opacity: 1;
 +
    position: absolute;
 +
    top: -42px;
 +
    width: inherit;
 +
    height: auto;
 +
    background-color: rgba(0, 0, 0, 0);
 +
  }
 +
  .face:hover .profile, .profilehovered {
 +
    opacity: 0;
 +
    background-color: rgba(0, 0, 0, 0.65);
 +
    cursor: pointer;
 +
  }
 +
 +
@media (max-width: 420px) {
 +
  .person-name {
 +
    opacity: 1;
 +
    position: absolute;
 +
    top: -42px;
 +
    width: inherit;
 +
    height: auto;
 +
    background-color: rgba(0, 0, 0, 0);
 +
  }
 +
}
 +
 +
}
 +
 
.facen {
 
.facen {
 
width: 250px;
 
width: 250px;
Line 396: Line 694:
 
   margin: 0;
 
   margin: 0;
 
   padding:0;
 
   padding:0;
−
   font-family: 'Quicksand', sans-serif;
+
   font-family: 'Objektiv-mk1', sans-serif;
 +
  font-weight: 300;
  
 
   overflow-x: hidden;
 
   overflow-x: hidden;
Line 594: Line 893:
  
 
   body {
 
   body {
−
   font-family: 'Quicksand', sans-serif;
+
   font-family: 'Objektiv-mk1', sans-serif;
 +
  font-weight: 300 !important;
 
   top: 60px !important;
 
   top: 60px !important;
 
   background: honeydew !important;
 
   background: honeydew !important;
Line 612: Line 912:
 
   h2 {
 
   h2 {
 
   color:green;
 
   color:green;
−
   font-family: 'Quicksand', sans-serif;
+
   font-family: 'Objektiv-mk1', sans-serif;
 +
  font-weight: 300;
 
   }
 
   }
 
   h4 {
 
   h4 {
−
  font-weight: bold;
+
   font-family: 'Objektiv-mk1', sans-serif;
−
   font-family: 'Quicksand', sans-serif;
+
  font-weight: 300;
 
   }
 
   }
 
   .menu-item{
 
   .menu-item{
Line 624: Line 925:
 
   background: transparent !important;
 
   background: transparent !important;
 
   padding-top: 18px;
 
   padding-top: 18px;
−
  }
 
−
  .green-effect{
 
−
  display: none;
 
−
  background-color: #4AAF51;
 
−
  opacity: 0.35;
 
−
  color: #FFF;
 
−
  transition-property: all;
 
−
  transition-duration: 0.3s;
 
−
  transition-timing-function: ease-out;
 
−
  transition-delay: 0s;
 
−
  border-color: #288D30;
 
−
  position: absolute;
 
−
  bottom: 0px;
 
−
  width: 100%;
 
−
  height: 80px;
 
−
  right: 0px;
 
 
   }
 
   }
 
   .logo {
 
   .logo {
−
     margin-top: 14px;
+
     margin-top: 0px;
 
     margin-left: 0px;
 
     margin-left: 0px;
 
   }
 
   }
Line 663: Line 948:
 
   </style>
 
   </style>
  
−
  <script type="text/javascript">
+
<!--  <script type="text/javascript">
 
      
 
      
 
     $('li.menu-item').on('click', function() {
 
     $('li.menu-item').on('click', function() {
−
     $('.multi-level').toggle();
+
     $('ul.dropdown-menu').toggle();
 
});
 
});
−
   </script>
+
   </script> -->
  
 
   </html>
 
   </html>

Latest revision as of 17:46, 19 October 2017