Difference between revisions of "Template:Calgary/Home-Style"
MaultoBello (Talk | contribs) |
MaultoBello (Talk | contribs) |
||
| Line 649: | Line 649: | ||
max-width: 20px; | 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; | ||
} | } | ||
Revision as of 16:31, 13 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; background-color: #00C2FF;
}
.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; }
- HQ_page .intro-message .text-container {
flex-direction: column; background-color: white; padding: 4vw; max-width: 40vw; }
- 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;
}
- HQ_page .intro-message .text-container h1 .emphasis {
color: #FEC605;
}
- HQ_page .intro-message .text-container p {
font-size: 1.4vw; line-height: 2vw;
color: #6E6E6E;
}
- 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: #EEEEEE; }
- bodyContent .content-panel.pipeline h1 {
font-weight: 600; font-size: 36px;
line-height: 50px; letter-spacing: 0.2em;
margin-bottom: 10px;
}
- 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: flex;
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: 80vw;
}
}
/* --- [ MAIN MESSAGE PANEL ] --- */
.content-panel.main-message { background-color: #00C2FF; 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: 80px; }
.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;
}
- 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: #00C2FF;
}
.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;
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;
}
}
/* --- [ MISCELLANEOUS STYLING ] --- */
.content-panel.pipeline > h1, .content-panel.highlights > 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 {
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 {
font-size: 36px;
line-height: 50px;
}
.content-panel.pipeline > h2, .content-panel.highlights > h2 {
font-size: 30px;
line-height: 45px;
}
}
@media only screen and (max-width: 400px) {
.content-panel.pipeline > h1, .content-panel.highlights > h1 {
font-size: 30px;
line-height: 40px;
}
.content-panel.pipeline > h2, .content-panel.highlights > h2 {
font-size: 24px;
line-height: 35px;
}
}