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

Revision as of 05:13, 22 October 2020 (view source) 18desilvni (Talk | contribs) (Created page with " .single-content { position: relative; transition: .3s; cursor: pointer; } .single-content .text-content, .single-content:after{ position: absolute;...")		Latest revision as of 22:56, 26 October 2020 (view source) Jcacierto (Talk | contribs)
(12 intermediate revisions by 2 users not shown)
Line 1:		Line 1:
−	.single-content {	+	/* GENERAL PAGE CSS */
−	position: relative;	+
−	transition: .3s;	+
−	cursor: pointer;	+
−	}	+
−	.single-content .text-content,	+	/* FONT SET HERE - for jumbotron H1 */
−	.single-content:after{	+	@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&display=swap');
−	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{	+	/* TEXT STYLING */
−	opacity: .4;	+
−	}	+
−	.text-content{	+	h1, h2, h3, p {
−	top: 40%;	+
−	opacity: 0;	+
−	z-index: 1;	+
−	transition: .3s;	+
−	text-align: center;	+
−	color: #FFF;	+
−	}	+
−	.single-content:hover .text-content{	+	}
−	opacity: 1;	+
−	transition-delay: .3s;	+
−	}	+
		+	li {color:#444444;}
		+	/*header font size for tablet*/
		+	@media(max-width: 768px){
		+	.resp h1{
		+	font-size:55px!important;
		+	}}
		+	/*header font size for mobile*/
		+	@media (max-width:525px){
		+	.resp h1{
		+	font-size:50px!important;
		+	}}
−	/*Modal styling section*/
−	.modal-body {	+	.intro-body {
−	background-color: #FFA600;	+	vertical-align: center;
−	}	+	background: ;
		+	padding: 7vw 10vw;
		+	}
−	.info {	+	.intro-body p {
−	position: relative;	+	color: #444444;
−	background-color: #FFFFFF;	+	text-align: left;
−	margin-left: 2px;	+	}
−	margin-right: 2px;	+
−	margin-bottom: 5px;	+
−	}	+
−	.subproj {	+	.intro-body h2 {
−	position: relative;	+	color: black;
−	background-color: #FFFFFF;	+	font-weight: 200;
−	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 {	+	.intro-body h3 {
−	padding-top: 10px;	+	color: #882916;
−	padding-left: 30px;	+	}
−	height: 11%;	+
−	}	+
−	.md-row2 {	+	.intro-body h4 {
−	padding-left: 30px;	+	color: #882916;
−	margin-top: 5px;	+	font-weight: 100;
−	}	+	font-size: 21px;
		+	}
−	.md-row3 {	+	.intro-body img {
−	padding-left: 30px;	+
−	}	+
−	.md-row4 {	+	}
−	padding-top: 15px;	+
−	padding-left: 30px;	+
−	color: #969696;	+
−	}	+
−	.md-row5 {	+	/* HEADER/BANNER */
−	padding-left: 30px;	+	body,
−	color: #000000;	+	html {
−	font-size: 20px;	+	height: 100%;
−	}	+	}
−	.md-row6 {	+	/* The banner image */
−	position: absolute;	+	.banner-image {
−	padding-top: 10px;	+	/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
−	padding-left: 30px;	+	background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url("#");
−	padding-right: 10px;	+
−	width: 70%;	+
−	top: 60%;	+
−	}	+
−	.desc {	+	/* Set a specific height */
−	background-color: #606060;	+	height: 65vh;
−	margin-left: 2px;	+
−	margin-right: 2px;	+
−	color: #FFFFFF;	+
−	border-radius: 5px;	+
−	padding-left: 2px;	+
−	padding-right: 2px;	+
−	}	+
−	.title-row {	+	/* Position and center the image to scale nicely on all screens */
−	margin: 0 auto;	+	background-position: center;
−	padding-top: 20px;	+	background-repeat: no-repeat;
−	height: 18%;	+	background-size: cover;
−	}	+	position: relative;
		+	background-attachment: fixed;
		+	}
−	.proj-row {	+	/* Place text in the middle of the image */
−	padding-top: 20px;	+	.banner-text {
−	padding-bottom: 20px;	+	font-size: ;
−	}	+	font-weight: ;
		+	color: ;
		+	text-align: center;
		+	position: absolute;
		+	left: 50%;
		+	top: 50%;
		+	transform: translate(-50%, -50%);
−	.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 {	+	.banner-text h1 {
−	cursor: pointer;	+	color: #F1C23F;
−	position: absolute;	+	font-size: 5em;
−	top: 50%;	+	font-weight: 600;
−	width: auto;	+	font-family: 'Public Sans', sans-serif;
−	margin-top: -22px;	+	margin-top:25%;
−	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 {	+	/*Modal styling area*/
−	background-color: #423636;	+	.main-pics {
−	}	+	padding: 2px;
		+	}
−	.dot {	+	.single-content {
−	cursor: pointer;	+	position: relative;
−	height: 15px;	+	transition: .3s;
−	width: 15px;	+	cursor: pointer;
−	margin: 0 2px;	+	}
−	background-color: #bbb;	+
−	border-radius: 50%;	+
−	display: inline-block;	+
−	transition: background-color 0.6s ease;	+
−	}	+
−	.active, .dot:hover {	+	.single-content .text-content,
−	background-color: #423636;	+	.single-content:after{
−	}	+	position: absolute;
		+	left: 20px;
		+	right: 20px;
		+	}
−	.fade {	+	.single-content:after{
−	-webkit-animation-name: fade;	+	content: '';
−	-webkit-animation-duration: 1.5s;	+	display: block;
−	animation-name: fade;	+	background: #2E2E2E;
−	animation-duration: 1.5s;	+	top: 0px;
−	}	+	bottom: 0px;
		+	left: 0px;
		+	right: 0px;
		+	opacity: 0;
		+	transition: .4s;
		+	transition-timing-function: ease-out;
		+	}
−	@-webkit-keyframes fade {	+	.single-content:hover:after{
−	from {	+	opacity: .4;
−	opacity: 0.4;	+	}
−	}	+
−	to {	+
−	opacity: 1;	+
−	}	+
−	}	+
−	@keyframes fade {	+	.text-content{
−	from {	+	top: 35%;
−	opacity: 0.4;	+	opacity: 0;
−	}	+	z-index: 1;
−	to {	+	transition: .3s;
−	opacity: 1;	+	text-align: center;
−	}	+	color: #FFFFFF;
−	}	+	}
−	/*change modal properties when screen is less than 1000px*/	+	.text-content h4{
−	@media screen and (max-width: 992px){	+	color: #FFF;
−	.md-row6 {	+	}
−	padding-top: 10px;	+
−	padding-left: 30px;	+
−	padding-right: 10px;	+
−	width: 70%;	+
−	top: 60%;	+
−	position: static;	+
−	}	+
−	}	+
−	.dots-div {	+	.single-content:hover .text-content{
−	justify-content: center;	+	opacity: 1;
−	}	+	transition-delay: .3s;
		+	}
		+
		+	/*Modal styling sheet*/
		+	.modal-body {
		+	background-color: #F0EADF;
		+	}
		+
		+	.info {
		+	position: relative;
		+	background-color: #FFFFFF;
		+	margin-left: 2px;
		+	margin-right: 2px;
		+	margin-bottom: 5px;
		+	}
		+
		+	.new-row {
		+	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: 20px;
		+	}
		+
		+	.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: static;
		+	padding-top: 10px;
		+	padding-left: 30px;
		+	padding-right: 10px;
		+	padding-bottom: 20px;
		+	width: 100%;
		+	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;
		+	}

---

Latest revision as of 22:56, 26 October 2020

/* GENERAL PAGE CSS */

/* FONT SET HERE - for jumbotron H1 */ @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;600;700&display=swap');

/* TEXT STYLING */

h1, h2, h3, p {

}

li {color:#444444;}

/*header font size for tablet*/ @media(max-width: 768px){

 .resp h1{
   font-size:55px!important;
 }}

/*header font size for mobile*/ @media (max-width:525px){

  .resp h1{
   font-size:50px!important;
 }}

.intro-body {

 vertical-align: center;
 background: ;
 padding: 7vw 10vw;

}

.intro-body p {

 color: #444444;
 text-align: left;

}

.intro-body h2 {

 color: black;
 font-weight: 200;

}

.intro-body h3 {

 color: #882916;

}

.intro-body h4 {

 color: #882916;
 font-weight: 100;
 font-size: 21px;

}

.intro-body img {

}

/* 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: center;
 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 area*/ .main-pics {

 padding: 2px;

}

.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: 35%;
 opacity: 0;
 z-index: 1;
 transition: .3s;
 text-align: center;
 color: #FFFFFF;

}

.text-content h4{

 color: #FFF;

}

.single-content:hover .text-content{

 opacity: 1;
 transition-delay: .3s;

}

/*Modal styling sheet*/ .modal-body {

 background-color: #F0EADF;

}

.info {

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

}

.new-row {

 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: 20px;

}

.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: static;
 padding-top: 10px;
 padding-left: 30px;
 padding-right: 10px;
 padding-bottom: 20px;
 width: 100%;
 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;

}