Difference between revisions of "Team:Oxford/css"

Line 234: Line 234:
 
     font-family: 'Source Sans Pro';
 
     font-family: 'Source Sans Pro';
 
     font-weight: 200;
 
     font-weight: 200;
 +
}
 +
 +
.tiles-wrapper {
 +
 +
  padding-top: 100px;
 +
}
 +
 +
.tilesWrapper {
 +
 +
  margin-left: 10%;
 +
  margin-right: 10%;
 +
  width: auto;
 +
} .tile {
 +
 +
  position: relative;
 +
}
 +
 +
.tile:hover .tileTitle {
 +
 +
  color: rgb(0,0,0);
 +
}
 +
 +
.tile:hover .tileSubtitle {
 +
 +
  color: rgb(25,25,25);
 +
}
 +
 +
.tileTitleWrapper {
 +
 +
  position: absolute;
 +
  text-align: center;
 +
  left: 50%;
 +
  top: 50%;
 +
  -moz-transform: translateX(-50%) translateY(-50%);
 +
  -webkit-transform: translateX(-50%) translateY(-50%);
 +
  transform: translateX(-50%) translateY(-50%);
 +
  width: 85%;
 +
  z-index: 520; /*Set so title div is in front of overlay (z index of 512)*/
 +
  letter-spacing: 0.23em;
 +
}
 +
 +
.tileTitle {
 +
 +
  font-family: 'Source Sans Pro', sans-serif;
 +
  font-weight: 700;
 +
  font-size: 30px;
 +
  color: rgb(30,30,30);
 +
}
 +
 +
.tileSubtitle {
 +
 +
  font-family: 'Source Sans Pro', sans-serif;
 +
  font-weight: 400;
 +
  font-size: 20px;
 +
  color: rgb(50,50,50);
 +
}
 +
 +
.tileTitleWrapper.pAndP {
 +
 +
  width: 80%;
 +
}
 +
 +
.pAndP .tileTitle {
 +
 +
  line-height: 1.3;
 +
}
 +
 +
.bgc-white .row {
 +
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 +
}
 +
 +
.bgc-gray .row {
 +
 +
padding-top: 0px;
 +
padding-bottom: 0px;
 
}
 
}
  

Revision as of 00:16, 16 October 2018

  • !
* Start Bootstrap - Heroic Features (https://startbootstrap.com/template-overviews/heroic-features)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-heroic-features/blob/master/LICENSE)
*/
  • {
   border-radius: 0 !important;

}

html { 

 scroll-behavior: smooth;

}

body {padding-top: 90px !important;}

  1. n1 {
   padding-top: 100px !important;
   margin-top: -100px !important;

}

h2 { 

  font-weight: 400;
  text-align: left;

}

h3 { 

  font-weight: bold;
  text-align: left;
  font-style: normal;

}

.dropdown-menu { 

   opacity: 1;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -ms-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #f2f2f2;

}

body { 

 padding-top: 54px;
 overflow-x: hidden;

}

  • {box-sizing:border-box}

@media (min-width: 992px) { 

 body {
   padding-top: 56px;
 }

}

.parent { 

 box-sizing:border-box;

}

.child { 

 width: 100%;
 height: 100%;
 max-height: inherit;
 background-color:white; /* fallback color */
 background-position: center;
 background-size: cover;
 transition: all .25s;

}

.parent:hover .child, .parent:focus .child { 

 transform: scale(1.03);

}

.card { 

 height: 100%;

}

  1. bg_img {
   background: url('http://rndimg.com/ImageStore/OilPaintingBlue/999x400_OilPaintingBlue_19aa91c1b6e142f288fe69eb2a160a2b.jpg') no-repeat;

max-width:100%; max-height:100%; }

.translucent-back { background: rgba(255,255,255,0.5); text-align: center; line-height: 400px; }

.header-text { line-height: 600px; }

.header-text a:hover{ 

   text-decoration: none !important;

}

section { 

 padding: 70px 0;

}

  1. n2, #n4, #n6, #n8, #n10{
 background-color: #f2f2f2;
 height: 100%;

}

  1. wrapper {
 padding-left: 0;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;

}

  1. wrapper.toggled {
 padding-left: 250px;

}

  1. sidebar-wrapper {
 z-index: 1000;
 position: fixed;
 left: 250px;
 width: 0;
 height: 100%;
 margin-left: -250px;
 margin-top: 30px;
 overflow-y: auto;
 background: #f2f2f2;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;

}

  1. wrapper.toggled #sidebar-wrapper {
 width: 250px;

}

  1. page-content-wrapper {
 width: 100%;
 position: absolute;
 padding: 15px;

}

  1. wrapper.toggled #page-content-wrapper {
 position: absolute;
 margin-right: -250px;

}


/* Sidebar Styles */

.sidebar-nav { 

 position: absolute;
 top: 0;
 width: 250px;
 padding: 0;
 list-style: none;

}

.sidebar-nav li { 

 text-indent: 20px;
 line-height: 40px;

}

.sidebar-nav li a { 

 display: block;
 text-decoration: none;
 color: black;

}

.sidebar-nav li a:hover { 

 text-decoration: none;
 color: black;
 background: rgba(255, 255, 255, 0.2);

}

.sidebar-nav li a:active, .sidebar-nav li a:focus { 

 text-decoration: none;

}

@media(min-width:768px) { 

 #wrapper {
   padding-left: 250px;
 }
 #sidebar-wrapper {
   width: 250px;
 }
 #page-content-wrapper {
   position: relative;
   margin-right: 0;
 }

}

.rounded-circle { 

   border-radius: 50% !important;

}

.hover-button { 

   background-color: white;
 -webkit-transition: opacity 0.5s ease-in-out;
 -moz-transition: opacity 0.5s ease-in-out;
 -ms-transition: opacity 0.5s ease-in-out;
 -o-transition: opacity 0.5s ease-in-out;
 transition: opacity 0.5s ease-in-out;

}

.hover-button:hover { 

   opacity: 0.5;

}

.team-profile { 

   margin-top:60px;

}

.team-profile-header { 

   text-align: center;
   margin-top: 20px;
   font-size: 20px;
   font-family: 'Source Sans Pro';
   font-weight: 400;

}

.team-profile-job { 

   text-decoration: italic;
   text-align: center;
   font-size: 15px;
   font-family: 'Source Sans Pro';
   font-weight: 200;

}

.tiles-wrapper { 

  padding-top: 100px;

}

.tilesWrapper { 

  margin-left: 10%;
  margin-right: 10%;
  width: auto;

} .tile { 

  position: relative;

}

.tile:hover .tileTitle { 

  color: rgb(0,0,0);

}

.tile:hover .tileSubtitle { 

  color: rgb(25,25,25);

}

.tileTitleWrapper { 

  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 85%;
  z-index: 520; /*Set so title div is in front of overlay (z index of 512)*/
  letter-spacing: 0.23em;

}

.tileTitle { 

  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: rgb(30,30,30);

}

.tileSubtitle { 

  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: rgb(50,50,50);

}

.tileTitleWrapper.pAndP { 

  width: 80%;

}

.pAndP .tileTitle { 

  line-height: 1.3;

}

.bgc-white .row { 

padding-top: 0px;
padding-bottom: 0px;

}

.bgc-gray .row { 

padding-top: 0px;
padding-bottom: 0px;

}

.footer-social-icons { text-align:center; padding-top:30px; padding-bottom:30px; }

ul { 

   padding:0;
   list-style: none;

}

.social-icon { 

   color: #fff;

} ul.social-icons { 

   margin-top: 10px;

} .social-icons li { 

   vertical-align: top;
   display: inline;
   height: 100px;

} .social-icons a { 

   color: white;
   text-decoration: none;

} .fa-facebook { 

   padding:10px 14px;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   transition: .5s;
   background-color: #cccccc;

} .fa-facebook:hover { color: white; 

   background-color: #3d5b99;

} .fa-twitter { 

   padding:10px 12px;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   transition: .5s;
   background-color: #cccccc;

} .fa-twitter:hover { 

   color: white;
   background-color: #00aced;

}

.fa-instagram { 

   padding:10px 12px;
   -o-transition:.5s;
   -ms-transition:.5s;
   -moz-transition:.5s;
   -webkit-transition:.5s;
   transition: .5s;
   background-color: #cccccc;

} .fa-instagram:hover { 

   color: white;
   background-color: #bc2a8d;

}