Difference between revisions of "Template:British Columbia 2"

m
m
 
(43 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
   <title>Main CSS</title>
 
   <title>Main CSS</title>
−
  <meta charset="utf-8">
 
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
 
   <!--Important to only include bootstrap in ONE of the templates, things will break if you include it twice.-->
 
   <!--Important to only include bootstrap in ONE of the templates, things will break if you include it twice.-->
 
<style>
 
<style>
Line 10: Line 8:
 
   width: 100vw; max-width: 100%;
 
   width: 100vw; max-width: 100%;
 
   top: 18px;
 
   top: 18px;
−
  font-family: Arial; font-size: 1.15em;
 
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
}
 
}
  
 
/********************************* Overriding the default wiki settings, rest in peace #sideMenu.*****************/
 
/********************************* Overriding the default wiki settings, rest in peace #sideMenu.*****************/
−
#sideMenu, #top_title {display:none;}
+
#sideMenu, #top_title {display:none;}
 +
#sideMenu { z-index: 10 !important; background-color: white; position: fixed;}
 
#content {  
 
#content {  
−
   all: initial; margin-left: 0 !important;
+
   margin-left: 0 !important; all: initial;
−
   height: 100%; width: 100%; padding:0px; margin-top:-7px;
+
   height: 100%; width: 100%; padding:0px;  
 
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 
}
 
}
−
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; }
 
   #globalWrapper{ padding-bottom: 0 !important; }
 
   #globalWrapper{ padding-bottom: 0 !important; }
Line 32: Line 30:
 
/*cover image (the trees and mountains) styling*/
 
/*cover image (the trees and mountains) styling*/
 
.cover{
 
.cover{
 +
  background: #0F9347; /*backup in case the header image does not load*/
 
   position: relative;
 
   position: relative;
 
   top: -14px !important; left: 0 !important;  
 
   top: -14px !important; left: 0 !important;  
Line 52: Line 51:
 
#breadcrumbs{
 
#breadcrumbs{
 
   background-color: #8CC63F;  
 
   background-color: #8CC63F;  
−
   height: 50px; color: #FFF9CC; line-height: 50px; font-size: 1em;
+
   height: 50px; color: #ffffff; line-height: 50px; font-size: 1em;
 
   padding-left: 30px; margin-top: -14px;
 
   padding-left: 30px; margin-top: -14px;
 
   z-index: 2;
 
   z-index: 2;
Line 58: Line 57:
  
 
#breadcrumbs a{
 
#breadcrumbs a{
−
   color: #FFF9CC;
+
   color: #ffffff;
 
}
 
}
  
Line 65: Line 64:
 
   position: relative;
 
   position: relative;
 
   height: 100%;  
 
   height: 100%;  
−
   background: white;
+
   background-color: white;
 
   padding: 25px;  
 
   padding: 25px;  
 
   width: 100vw; max-width: 100%;
 
   width: 100vw; max-width: 100%;
Line 71: Line 70:
  
 
.content-wrap p{
 
.content-wrap p{
−
   font-size: 1.15em !important;
+
   font-size: 16px !important;
 
   text-indent: 50px;
 
   text-indent: 50px;
 
}
 
}
Line 77: Line 76:
 
/*styling for the links below each page encouraging readers to visit other sections of the website*/
 
/*styling for the links below each page encouraging readers to visit other sections of the website*/
 
#read-more{
 
#read-more{
−
   background-color: #40514E;  
+
   background-color: #8CC63F;  
−
   height: 50px; color: #E4F9F5; line-height: 50px;
+
   height: 50px; color: #ffffff; line-height: 50px;
 
   margin-bottom: 0;  
 
   margin-bottom: 0;  
−
   text-align: center !important;
+
   text-align: center !important; font-size: 1em !important;  
 
}
 
}
  
Line 92: Line 91:
 
}
 
}
  
−
#previous img:hover, #next img:hover{
+
#previous:hover img, #next:hover img{
 
   transform: scale(1.15);
 
   transform: scale(1.15);
 
}
 
}
  
 
#previous figcaption, #next figcaption{
 
#previous figcaption, #next figcaption{
−
   position: absolute;
+
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.40) 50%, rgba(0, 0, 0, 0.55) 100%);
 +
   position: absolute; width: 100%; height: 100px;
 
   bottom: 0; left: 0; padding: 25px;
 
   bottom: 0; left: 0; padding: 25px;
−
   color: #E4F9F5; font-size: 2em;
+
   color: #ffffff; font-size: 2em;
 
}
 
}
−
 
 
</style>
 
</style>
  
 
</head>
 
</head>
 
</html>
 
</html>

Latest revision as of 14:14, 18 October 2016

Main CSS