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

 
(61 intermediate revisions by 3 users not shown)
Line 9: Line 9:
 
.fixed .navbar {
 
.fixed .navbar {
 
   transition: top 0.15s linear;
 
   transition: top 0.15s linear;
−
  background-color: #00C2FF;
 
 
}
 
}
  
Line 15: Line 14:
 
padding: 0;
 
padding: 0;
 
}
 
}
−
 
−
 
  
 
/* --- [ HEADER PANEL ] --- */
 
/* --- [ HEADER PANEL ] --- */
Line 231: Line 228:
  
 
.content-panel.pipeline {
 
.content-panel.pipeline {
−
background-color: #EEEEEE;
+
background-color: #f3f3f3;
 
}
 
}
  
Line 370: Line 367:
 
#proposed-diagram {
 
#proposed-diagram {
  
−
max-width: 80vw;
+
max-width: 70vw;
  
 
}
 
}
Line 405: Line 402:
  
 
.content-panel.main-message {
 
.content-panel.main-message {
−
background-color: #00C2FF;
+
background-color: #1E6273;
 
padding: 80px;
 
padding: 80px;
  
Line 481: Line 478:
 
display: flex;
 
display: flex;
 
flex-direction: row;
 
flex-direction: row;
−
margin-top: 80px;
+
margin-top: 20px;
 
}
 
}
  
Line 581: Line 578:
 
letter-spacing: 0.1em;
 
letter-spacing: 0.1em;
  
−
color: #00C2FF;
+
color: #1E6273;
  
 
}
 
}
Line 694: Line 691:
 
}
 
}
  
 +
/* --- [ PROJECT COMPONENTS STYLING ] --- */
 +
 +
.content-panel.project-icons {
 +
background-color: #f3f3f3;
 +
}
 +
 +
.content-panel.project-icons .component-holder {
 +
display: flex;
 +
flex-direction: column;
 +
margin-top: 120px;
 +
}
 +
 +
.content-panel.project-icons .component-holder .component-row {
 +
display: flex;
 +
flex-direction: row;
 +
margin-bottom: 40px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 +
.content-panel.project-icons .component-holder .component-row:last-child {
 +
margin-bottom: 0px;
 +
}
 +
 +
.content-panel.project-icons .component-holder .component-row > * {
 +
margin-right: 40px;
 +
}
 +
 +
.content-panel.project-icons .component-holder .component-row > *:last-child {
 +
margin-right: 0px;
 +
}
 +
 +
#HQ_page .content-panel.project-icons .component-holder .component-row .project-component {
 +
text-align: center;
 +
max-width: 260px;
 +
padding: 30px;
 +
transform: scale(1);
 +
-webkit-transition: transform 1000ms linear;
 +
    -ms-transition: transform 500ms linear;
 +
    transition: transform 500ms linear;
 +
cursor: pointer;
 +
background-color: white;
 +
}
 +
 +
#HQ_page .content-panel.project-icons .component-holder .component-row .project-component:hover {
 +
transform: scale(1.1);
 +
-webkit-transition: transform 500ms linear;
 +
    -ms-transition: transform 500ms linear;
 +
    transition: transform 500ms linear;
 +
cursor: pointer;
 +
}
 +
 +
#HQ_page .content-panel.project-icons .component-holder .component-row .project-component:hover .icon svg > * {
 +
stroke: #F8B200;
 +
    -webkit-transition: stroke 500ms linear;
 +
    -ms-transition: stroke 500ms linear;
 +
    transition: stroke 500ms linear;
 +
}
 +
 +
#HQ_page .content-panel.project-icons .component-holder .component-row .project-component:hover p {
 +
color: #444444;
 +
    -webkit-transition: color 500ms linear;
 +
    -ms-transition: color 500ms linear;
 +
    transition: color 500ms linear;
 +
}
 +
 +
#HQ_page .content-panel.project-icons .component-holder .component-row .project-component p {
 +
text-align: center;
 +
color: #AAAAAA;
 +
-webkit-transition: color 500ms linear;
 +
    -ms-transition: color 500ms linear;
 +
    transition: color 500ms linear;
 +
}
 +
 +
#HQ_page .content-panel.project-icons .component-holder .component-row .project-component h2 {
 +
 +
    font-weight: 600;
 +
    font-size: 16px;
 +
    line-height: 24px;
 +
    text-transform: uppercase;
 +
    font-variant: small-caps;
 +
margin-bottom: 5px;
 +
 +
}
 +
 +
.content-panel.project-icons .component-holder .component-row .project-component .icon {
 +
margin-bottom: 20px;
 +
}
 +
 +
.content-panel.project-icons .component-holder .component-row .project-component .icon svg > * {
 +
stroke: #00C2FF;
 +
    -webkit-transition: stroke 1000ms linear;
 +
    -ms-transition: stroke 1000ms linear;
 +
    transition: stroke 1000ms linear;
 +
}
 +
 +
@media only screen and (max-width: 750px) {
 +
 +
    .content-panel.project-icons .component-holder .component-row {
 +
        flex-direction: column;
 +
        margin-bottom: 40px;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
 +
    .content-panel.project-icons .component-holder .component-row > * {
 +
        margin-right: 0px;
 +
margin-bottom: 40px;
 +
    }
 +
 +
    .content-panel.project-icons .component-holder .component-row > *:last-child {
 +
        margin-right: 0px;
 +
margin-bottom: 0px;
 +
    }
 +
 +
}
  
  
Line 699: Line 812:
 
/* --- [ MISCELLANEOUS STYLING ] --- */
 
/* --- [ MISCELLANEOUS STYLING ] --- */
  
−
.content-panel.pipeline > h1, .content-panel.highlights > h1 {
+
.content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {
  
 
display: flex;
 
display: flex;
Line 718: Line 831:
 
}
 
}
  
−
.content-panel.pipeline > h2, .content-panel.highlights > h2 {
+
.content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 {
  
 
display: flex;
 
display: flex;
Line 752: Line 865:
 
@media only screen and (max-width: 600px) {
 
@media only screen and (max-width: 600px) {
  
−
.content-panel.pipeline > h1, .content-panel.highlights > h1 {
+
.content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {
  
 
         font-size: 36px;
 
         font-size: 36px;
Line 760: Line 873:
 
     }
 
     }
  
−
     .content-panel.pipeline > h2, .content-panel.highlights > h2 {
+
     .content-panel.pipeline > h2, .content-panel.highlights > h2. .content-panel.project-icons > h2 {
  
 
font-size: 30px;
 
font-size: 30px;
Line 772: Line 885:
 
@media only screen and (max-width: 400px) {
 
@media only screen and (max-width: 400px) {
  
−
.content-panel.pipeline > h1, .content-panel.highlights > h1 {
+
#bodyContent .content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {
  
 
         font-size: 30px;
 
         font-size: 30px;
Line 780: Line 893:
 
     }
 
     }
  
−
     .content-panel.pipeline > h2, .content-panel.highlights > h2 {
+
     #bodyContent .content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 {
  
 
font-size: 24px;
 
font-size: 24px;

Latest revision as of 01:22, 22 October 2019

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

/* --- [ GENERAL FORMATTING ] --- */

html, body { height: 100%; }

.fixed .navbar { 

 transition: top 0.15s linear;

}

.interface-group { padding: 0; }

/* --- [ HEADER PANEL ] --- */

.content-panel.header { width: 100%; position: relative; }

.content-panel.header > .header-photo { display: none; width: 100%; }

.intro-message { display: flex; flex-direction: row; position: absolute; top: 50%; transform: translateY(-50%); right: 20vh; margin-left: auto; margin-right: auto; justify-content: center; }

  1. HQ_page .intro-message .text-container {

flex-direction: column; background-color: white; padding: 4vw; max-width: 40vw; }

  1. HQ_page .intro-message .text-container h1 {

font-style: normal; font-weight: 500; font-size: 2vw; line-height: 2.3vw;

color: #444444;

margin-bottom: 1vw;

}

  1. HQ_page .intro-message .text-container h1 .emphasis {

color: #FEC605;

}

  1. HQ_page .intro-message .text-container p {

font-size: 1.4vw; line-height: 2vw;

color: #6E6E6E;

}

  1. HQ_page .intro-message .text-container p .emphasis {

font-weight: 600;

color: #2ADD3C;

}

@media only screen and (min-width: 1100px) {

#header-size-1 { display: inherit; }

}

@media only screen and (min-width: 800px) and (max-width: 1099px) {

#header-size-1 { display: none; }

#header-size-2 { display: inherit; }

#HQ_page .intro-message { right: 16vh; }

#HQ_page .intro-message .text-container { padding: 6vw; max-width: 55vw; }

#HQ_page .intro-message .text-container h1 {

font-size: 2.8vw; line-height: 3.5vw;

color: #444444;

margin-bottom: 2vw;

}

#HQ_page .intro-message .text-container p {

font-size: 1.8vw; line-height: 2.8vw;

}

}

@media only screen and (min-width: 600px) and (max-width: 799px) {

#header-size-1 { display: none; }

#header-size-2 { display: none; }

#header-size-3 { display: inherit; }

#HQ_page .intro-message { right: auto; left: 10vw; }

#HQ_page .intro-message .text-container { padding: 8vw; max-width: 80vw; }

#HQ_page .intro-message .text-container h1 {

font-size: 5vw; line-height: 6.5vw;

color: #444444;

margin-bottom: 3vw;

}

#HQ_page .intro-message .text-container p {

font-size: 3.3vw; line-height: 5vw;

}

}

@media only screen and (max-width: 599px) {

#header-size-1 { display: none; }

#header-size-2 { display: none; }

#header-size-3 { display: none; }

#header-size-4 { display: inherit; }

#HQ_page .intro-message { right: auto; left: 12vw; }

#HQ_page .intro-message .text-container { padding: 10vw; max-width: 76vw; }

#HQ_page .intro-message .text-container h1 {

font-size: 5.5vw; line-height: 7vw;

color: #444444;

margin-bottom: 4vw;

}

#HQ_page .intro-message .text-container p {

font-size: 4vw; line-height: 6.3vw;

}

}


/* ------ CHANGE THE MARGINS AND PADDINGS TO % UNITS TO MAKE THEM GOOD ACROSS DEVICES*/

/* --- [ PIPELINE PANELS ] --- */

.content-panel.pipeline { background-color: #f3f3f3; }

  1. bodyContent .content-panel.pipeline h1 {

font-weight: 600; font-size: 36px;

line-height: 50px; letter-spacing: 0.2em;

margin-bottom: 10px;

}

  1. bodyContent .content-panel.pipeline h2 {

font-weight: 400; font-size: 30px;

line-height: 40px; letter-spacing: 0.1em;

margin-bottom: 80px;

}

.content-panel.pipeline .pipeline-interface { display: flex; flex-direction: row; }

.content-panel.pipeline .pipeline-interface .pipeline-information { background-color: #ffffff; padding: 60px; flex: 1; }

.content-panel.pipeline .pipeline-interface .pipeline-information .hidden { display: none; }

.content-panel.pipeline .pipeline-interface .pipeline-information h3 {

display: inline;

font-family: Barlow Medium; font-style: normal; font-weight: 500; font-size: 36px;

line-height: 43px; align-items: center;

color: rgb(68, 68, 68);

margin-bottom: 20px;

}

.content-panel.pipeline .pipeline-interface .pipeline-information p {

display: flex;

font-family: Barlow; font-style: normal; font-weight: normal; font-size: 18px;

line-height: 25px;

color: rgb(68, 68, 68);

margin-bottom: 20px;

}

.content-panel.pipeline .pipeline-interface .pipeline-information p:last-child {

margin-bottom: 0px;

}

.content-panel.pipeline .pipeline-interface .pipeline-information .ast {

font-weight: 600;

color: #F8B200;

}

.content-panel.pipeline .pipeline-interface .pipeline-diagram { margin-right: 80px; }

.content-panel.pipeline .pipeline-interface .pipeline-diagram g:hover { cursor: pointer; }

.content-panel.pipeline .pipeline-interface .pipeline-diagram g .fixed { position: absolute; }

@media only screen and (max-width: 900px) {

#bodyContent .content-panel.pipeline h1 {

font-size: 36px;

line-height: 50px; letter-spacing: 0.2em;

}

#bodyContent .content-panel.pipeline h2 {

font-size: 30px;

line-height: 40px; letter-spacing: 0.1em;

}

.content-panel.pipeline .pipeline-interface { flex-direction: column; }

.content-panel.pipeline .pipeline-interface .pipeline-diagram { margin-right: 0px; margin-bottom: 80px; text-align: center; }

.content-panel.pipeline .pipeline-interface .pipeline-information { padding: 40px; }

#proposed-diagram {

max-width: 70vw;

}

}

@media only screen and (max-width: 600px) { 

   .content-panel.pipeline .pipeline-interface .pipeline-information h3 {

       font-size: 30px;

       line-height: 40px;

   }

}

@media only screen and (max-width: 400px) {

.content-panel.pipeline .pipeline-interface .pipeline-information h3 { 

       font-size: 24px;

       line-height: 30px;

   }

}


/* --- [ MAIN MESSAGE PANEL ] --- */

.content-panel.main-message { background-color: #1E6273; padding: 80px;

text-align: left; justify-content: left; }

.content-panel.main-message > * { margin-bottom: 10px; }

.content-panel.main-message h2 {

font-weight: bold; font-size: 36px; line-height: 43px; letter-spacing: 0.05em; text-transform: uppercase;

color: rgba(255, 255, 255, 0.6);

}

.content-panel.main-message h1 {

font-size: 48px; line-height: 58px; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase;

color: rgba(255, 255, 255, 0.9);

}

.content-panel.main-message h1 .emphasis {

color: #FFE600;

}

.content-panel.main-message p {

font-weight: 500; font-size: 24px; line-height: 29px;

color: rgba(255, 255, 255, 0.9);

max-width: 700px;

}

@media only screen and (max-width: 900px) {

.content-panel.main-message h2 { font-size: 30px; }

.content-panel.main-message h1 { font-size: 36px; }

.content-panel.main-message p { font-size: 21px; }

}


/* --- [ HIGHLIGHTS STYLING ] --- */

.content-panel.highlights .article-holder { display: flex; flex-direction: row; margin-top: 20px; }

.content-panel.highlights .article-holder .emphasis-quote {

display: flex; flex-direction: column;

justify-content: center;

margin-right: 40px;

padding: 60px;

}

.content-panel.highlights .article-holder .emphasis-quote:hover {

cursor:pointer;

}

.content-panel.highlights .article-holder .emphasis-quote > * {

margin-bottom: 60px;

}

.content-panel.highlights .article-holder .emphasis-quote > *:last-child {

margin-bottom: 0px;

}

  1. HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote {

font-weight: 500; font-size: 36px; line-height: 43px; align-items: center; text-align: center; letter-spacing: 0.1em; text-transform: uppercase; margin-left: auto; margin-right: auto;

color: #444444;

max-width: 350px;

}

.content-panel.highlights .articles { display: flex; flex-direction: column; justify-content: center; }

.content-panel.highlights .article-row { display: flex; flex-direction: row; margin-bottom: 40px; }

.content-panel.highlights .article-row:last-child { margin-bottom: 0px; }

.content-panel.highlights .article-row .article {

text-align: left; justify-content: left; margin-right: 40px;

max-width: 350px;

}

.content-panel.highlights .article-row .article:hover {

cursor: pointer;

}

.content-panel.highlights .article-row .article:last-child {

text-align: left; justify-content: left; margin-right: 0px;

}


.content-panel.highlights .article-row .article h2 {

font-weight: 700; font-size: 18px; line-height: 22px; letter-spacing: 0.1em;

color: #1E6273;

}

.content-panel.highlights .article-row .article h1 {

font-weight: 600; font-size: 24px; line-height: 29px; letter-spacing: 0.1em;

color: #444444;

}

.content-panel.highlights .article-row .article p {

font-size: 18px; line-height: 22px; letter-spacing: 0.1em;

color: #444444;

}

@media only screen and (max-width: 1000px) { 

 .content-panel.highlights .article-holder {
     flex-direction: column;
 }

.content-panel.highlights .article-holder .emphasis-quote { 

     margin-right: 0px;

margin-bottom: 40px; padding: 30px; 

 	}

#HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote { 

       max-width: 500px;

   }

}

@media only screen and (max-width: 600px) { 

   .content-panel.highlights .article-row {
     flex-direction: column;
     margin-bottom: 40px;
 	}

.content-panel.highlights .article-row .article { 

       margin-right: 0px;

margin-bottom: 40px; 

       max-width: 500px;

   }

.content-panel.highlights .article-row .article:last-child {

margin-bottom: 0px; 

   }

}

@media only screen and (max-width: 400px) { 

   .content-panel.highlights .article-holder .emphasis-quote {

padding: 0px; text-align: center; 

 	}

#HQ_page .content-panel.highlights .article-holder .emphasis-quote .quote { 

       font-size: 24px;
       line-height: 30px;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       margin-left: auto;
       margin-right: auto;

   }

#HQ_page .content-panel.highlights .article-holder .emphasis-quote .quotation { 

       max-width: 20px;

margin-left: auto; 

       margin-right: auto;

   }



   .content-panel.highlights .article-holder .emphasis-quote > * {

       margin-bottom: 20px;

   }

   .content-panel.highlights .article-holder .emphasis-quote > *:last-child {

       margin-bottom: 0px;

   }

}

/* --- [ PROJECT COMPONENTS STYLING ] --- */

.content-panel.project-icons { background-color: #f3f3f3; }

.content-panel.project-icons .component-holder { display: flex; flex-direction: column; margin-top: 120px; }

.content-panel.project-icons .component-holder .component-row { display: flex; flex-direction: row; margin-bottom: 40px; margin-left: auto; margin-right: auto; }

.content-panel.project-icons .component-holder .component-row:last-child { margin-bottom: 0px; }

.content-panel.project-icons .component-holder .component-row > * { margin-right: 40px; }

.content-panel.project-icons .component-holder .component-row > *:last-child { margin-right: 0px; }

  1. HQ_page .content-panel.project-icons .component-holder .component-row .project-component {

text-align: center; max-width: 260px; padding: 30px; transform: scale(1); -webkit-transition: transform 1000ms linear; 

   -ms-transition: transform 500ms linear;
   transition: transform 500ms linear;

cursor: pointer; background-color: white; }

  1. HQ_page .content-panel.project-icons .component-holder .component-row .project-component:hover {

transform: scale(1.1); -webkit-transition: transform 500ms linear; 

   -ms-transition: transform 500ms linear;
   transition: transform 500ms linear;

cursor: pointer; }

  1. HQ_page .content-panel.project-icons .component-holder .component-row .project-component:hover .icon svg > * {

stroke: #F8B200; 

   -webkit-transition: stroke 500ms linear;
   -ms-transition: stroke 500ms linear;
   transition: stroke 500ms linear;

}

  1. HQ_page .content-panel.project-icons .component-holder .component-row .project-component:hover p {

color: #444444; 

   -webkit-transition: color 500ms linear;
   -ms-transition: color 500ms linear;
   transition: color 500ms linear;

}

  1. HQ_page .content-panel.project-icons .component-holder .component-row .project-component p {

text-align: center; color: #AAAAAA; -webkit-transition: color 500ms linear; 

   -ms-transition: color 500ms linear;
   transition: color 500ms linear;

}

  1. HQ_page .content-panel.project-icons .component-holder .component-row .project-component h2 {
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
   text-transform: uppercase;
   font-variant: small-caps;

margin-bottom: 5px;

}

.content-panel.project-icons .component-holder .component-row .project-component .icon { margin-bottom: 20px; }

.content-panel.project-icons .component-holder .component-row .project-component .icon svg > * { stroke: #00C2FF; 

   -webkit-transition: stroke 1000ms linear;
   -ms-transition: stroke 1000ms linear;
   transition: stroke 1000ms linear;

}

@media only screen and (max-width: 750px) { 

   .content-panel.project-icons .component-holder .component-row {
       flex-direction: column;
       margin-bottom: 40px;
       margin-left: auto;
       margin-right: auto;
   }

   .content-panel.project-icons .component-holder .component-row > * {
       margin-right: 0px;

margin-bottom: 40px; 

   }

   .content-panel.project-icons .component-holder .component-row > *:last-child {
       margin-right: 0px;

margin-bottom: 0px; 

   }

}


/* --- [ MISCELLANEOUS STYLING ] --- */

.content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 {

display: flex;

font-family: Barlow SemiBold; font-style: normal; font-weight: 600; font-size: 48px;

color: rgb(68, 68, 68);

line-height: 58px; letter-spacing: 0.2em; text-transform: uppercase; justify-content: center; text-align: center;

}

.content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 {

display: flex;

font-family: Barlow Medium; font-style: normal; font-weight: 500; font-size: 36px;

color: rgba(68, 68, 68, 0.5);

line-height: 43px; justify-content: center; letter-spacing: 0.1em; text-align: center;

margin-bottom: 80px;

}

.content-panel.dynamic-padding { padding: 80px; }

@media only screen and (max-width: 900px) {

.content-panel.dynamic-padding { padding: 50px; }

}

@media only screen and (max-width: 600px) {

.content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 { 

       font-size: 36px;

       line-height: 50px;

   }

   .content-panel.pipeline > h2, .content-panel.highlights > h2. .content-panel.project-icons > h2 {

font-size: 30px; 

       line-height: 45px;

   }

}

@media only screen and (max-width: 400px) {

#bodyContent .content-panel.pipeline > h1, .content-panel.highlights > h1, .content-panel.project-icons > h1 { 

       font-size: 30px;

       line-height: 40px;

   }

   #bodyContent .content-panel.pipeline > h2, .content-panel.highlights > h2, .content-panel.project-icons > h2 {

font-size: 24px; 

       line-height: 35px;

   }

}