Difference between revisions of "Template:Calgary/Template-Styling"

Latest revision as of 01:52, 10 October 2020

/* —————— [ GENERAL ] —————— */

html body { background-color: white; }

/* --- [ STYLING FOR MAIN TEXTUAL CONTENT AREA ] --- */

.content-area { padding: 25px; background: white; position: space-between; }

.content-area h1 { font-family: Barlow; font-style: normal; font-weight: bold; font-size: 30px; letter-spacing: 0.1em; color: #00A5FF; text-transform: uppercase; position: relative; }

.content-area h2 { font-family: Barlow; font-style: normal; font-weight: bold; font-size: 15px; line-height: 1.3; letter-spacing: 0.3em; text-transform: uppercase; }

.content-area .header-area { margin: 40px 0px 20px 0px; }

/* No top-margin on the first header */ .content-area .header-area:first-child { margin-top: 0; }

.section-marker { position: absolute; }

/* --- [ MOBILE TO DESKTOP TRANSITION ] --- */

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

.content-area { padding: 50px; width: 100%; align-content: space-between; }

html body { background-color: #FFFFFF; }

.desktop-section-menu { display: inherit; }

.interface-group { display: flex; padding: 60px; }

}

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

.section-menu { display: none; }

.desktop-section-menu { display: inherit; }

}

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

.interface-group { max-width: 1300px; margin-right: auto; margin-left: auto; }

}