Difference between revisions of "Template:Calgary/Team-Style"

Revision as of 06:09, 25 October 2020 (view source) Jcacierto (Talk | contribs) ← Older edit		Latest revision as of 23:54, 27 October 2020 (view source) Alexacalkhoven (Talk | contribs)
Line 260:		Line 260:
	.fade {		.fade {
−	-webkit-animation-name: fade;	+	transition: opacity .15s linear;
−	-webkit-animation-duration: 1.5s;	+	}
−	animation-name: fade;	+
−	animation-duration: 1.5s;	+
	}		}

---

Latest revision as of 23:54, 27 October 2020

 body {
   overflow-x: hidden;
   background-color: white;
 }

 h2 {
   color: #000000;
 }
 #main-view {
   justify-content: center;
   margin-left: 250px;
padding: 0px 0px;
position: relative;
top: -100px; /* To override the odd
tag bug */
 }

 .main-teampage {
   padding: 0px;
 }

 .main-pics {
   padding: 5px;
         }

 .single-content {
   position: relative;
   transition: .3s;
   cursor: pointer;
 }

 .single-content .text-content,
 .single-content:after{
   position: absolute;
   left: 20px;
   right: 20px;
 }

 .single-content:after{
   content: ;
   display: block;
   background: #2E2E2E;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   opacity: 0;
   transition: .4s;
   transition-timing-function: ease-out;
 }

 .single-content:hover:after{
   opacity: .4;
 }

 .text-content{
   top: 40%;
   opacity: 0;
   z-index: 1;
   transition: .3s;
   text-align: center;
   color: #FFF;
 }

 .single-content:hover .text-content{
   opacity: 1;
   transition-delay: .3s;
 }

 .headers {
   padding-top: 50px;
 }

/*Banner styling section*/

 /* HEADER/BANNER */ body, html {
   height: 100%;
 }

/* The banner image */

 .banner-image {
   /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
   background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url("");
   /* Set a specific height */
   height: 65vh;
   /* Position and center the image to scale nicely on all screens */
   background-position: 115px -225px;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   background-attachment: fixed;
 }

/* Place text in the middle of the image */

 .banner-text {
   font-size: ;
   font-weight: ;
   color: ;
   text-align: center;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

.banner-text h1 {

color: #F1C23F;
font-size: 5em;
font-weight: 600;
font-family: 'Public Sans', sans-serif;
margin-top:25%;

}

/*Modal styling section*/

 .modal-body {
   background-color: #F0EADF;
 }

 .info {
   position: relative;
   background-color: #FFFFFF;
   margin-left: 2px;
   margin-right: 2px;
   margin-bottom: 5px;
 }

 .subproj {
   position: relative;
   background-color: #FFFFFF;
   margin-left: 2px;
   margin-right: 2px;
   margin-top: 0px;
   margin-bottom: 5px;
   justify-content: center;
 }

 .modal-pic {
   padding: 10px;
   padding-bottom: 20px;
   left: 50px;
 }

 .md-row1 {
   padding-top: 10px;
   padding-left: 30px;
   height: 11%;
 }

 .md-row2 {
   padding-left: 30px;
   margin-top: 5px;
 }

 .md-row3 {
   padding-left: 30px;
 }

 .md-row4 {
   padding-top: 15px;
   padding-left: 30px;
   color: #969696;
 }

 .md-row5 {
   padding-left: 30px;
   color: #000000;
   font-size: 20px;
 }

 .md-row6 {
   position: absolute;
   padding-top: 10px;
   padding-left: 30px;
   padding-right: 10px;
   width: 70%;
   top: 60%;
 }

 .desc {
   background-color: #606060;
   margin-left: 2px;
   margin-right: 2px;
   color: #FFFFFF;
   border-radius: 5px;
   padding-left: 2px;
   padding-right: 2px;
 }

 .title-row {
   margin: 0 auto;
   padding-top: 20px;
   height: 18%;
 }

 .proj-row {
   padding-top: 20px;
   padding-bottom: 20px;
 }

 .subproj-box {
   margin: 0px;
   margin-bottom: -40px;
   padding:0px;
   height: auto;
 }

 /*Gallery styling section*/
 .slideshow-container {
   max-width: 600px;
   position: relative;
   margin: auto;
 }

 .mySlides {
   display: none;
   width: 600px;
 }

 .prev, .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -22px;
   padding: 16px;
   color: #fbf6f3;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
 }

 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }

 .prev:hover, .next:hover {
    background-color: #423636;
 }

 .dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }

 .active, .dot:hover {
   background-color: #423636;
 }

 .fade {
   transition: opacity .15s linear;
 }

 }

 @-webkit-keyframes fade {
   from {
  opacity: 0.4;
   }
   to {
  opacity: 1;
   }
 }

 @keyframes fade {
   from {
  opacity: 0.4;
   }
   to {
  opacity: 1;
   }
 }

 /*change modal properties when screen is less than 1000px*/
 @media screen and (max-width: 992px){
   .md-row6 {
     padding-top: 10px;
     padding-left: 30px;
     padding-right: 10px;
     width: 70%;
     top: 60%;
     position: static;
   }
 }

 .dots-div {
   justify-content: center;
 }