diff options
author | Felix Boerner <ich@felix-boerner.de> | 2018-05-28 10:37:35 +0300 |
---|---|---|
committer | Felix Boerner <ich@felix-boerner.de> | 2018-05-28 10:37:35 +0300 |
commit | d677b09ae29c15a90bfc1080973c61393c835474 (patch) | |
tree | 230828f51e1f0e93b2f41ee6cf3964f8fa4a04c8 | |
parent | 49ae30544a1c13a83fbb5b14361d1d9b83b28822 (diff) |
style: uniform mixed indent
-rw-r--r-- | static/assets/sass/01-content.scss | 390 |
1 files changed, 195 insertions, 195 deletions
diff --git a/static/assets/sass/01-content.scss b/static/assets/sass/01-content.scss index f943e1e..27cbcd0 100644 --- a/static/assets/sass/01-content.scss +++ b/static/assets/sass/01-content.scss @@ -10,20 +10,20 @@ //------------------------------------------------------------------------------- // Colors -$color-background : #061C30; -$color-text : #848d96; -$color-link : #848d96; -$color-link-hover : #CA486d; -$color-maverick : #47bec7; -$color-tagline : #CCCCCC; +$color-background : #061C30; +$color-text : #848d96; +$color-link : #848d96; +$color-link-hover : #CA486d; +$color-maverick : #47bec7; +$color-tagline : #CCCCCC; // Breakpoints -$bp-smallish : 1200px; -$bp-tablet : 800px; -$bp-mobile : 500px; +$bp-smallish : 1200px; +$bp-tablet : 800px; +$bp-mobile : 500px; // Images -// $image-background : url('../../images/background.jpg'); +// $image-background : url('../../images/background.jpg'); //------------------------------------------------------------------------------- // Fade In @@ -39,25 +39,25 @@ $bp-mobile : 500px; //------------------------------------------------------------------------------- html { - background-color: $color-background; + background-color: $color-background; } body.page-template-page-fullsingle-split { - background-color: $color-background; - font-family: 'Montserrat', sans-serif; - font-weight: 400; - font-size: 21px; - line-height: 33px; - letter-spacing: -0.2px; - color: $color-text; - animation: fadein 2s; - - //------------------------------------------------------------------------------- - // Global Styles - //------------------------------------------------------------------------------- - - p { - color: $color-text; - } + background-color: $color-background; + font-family: 'Montserrat', sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 33px; + letter-spacing: -0.2px; + color: $color-text; + animation: fadein 2s; + + //------------------------------------------------------------------------------- + // Global Styles + //------------------------------------------------------------------------------- + + p { + color: $color-text; + } } @@ -66,67 +66,67 @@ body.page-template-page-fullsingle-split { //------------------------------------------------------------------------------- .fs-split { - width: 100vw; - height: 100vh; - display: flex; - - @media (max-width: $bp-tablet ) { - height: auto; - flex-wrap: wrap; - } - - //------------------------------------------------------------------------------- - // Column - Big Image - //------------------------------------------------------------------------------- - - .split-image { - width: 50%; - height: 100vh; - // background-image: $image-background; - // background-position:center center; - background-size:cover; - - @media (max-width: $bp-tablet ) { - height: 80vh; - width: 100%; - } - - } - - //------------------------------------------------------------------------------- - // Column - Content - //------------------------------------------------------------------------------- - - .split-content { - width: 50%; - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - overflow: auto; - - @media (max-width: $bp-tablet ) { - width: 100%; - height: auto; - } - - .split-content-vertically-center { - padding: 80px; - max-width: 640px; - margin-top: auto; - margin-bottom: auto; - - @media (max-width: $bp-smallish ) { - padding: 60px; - } - - @media (max-width: $bp-tablet ) { - padding: 40px; - } - - } - - } + width: 100vw; + height: 100vh; + display: flex; + + @media (max-width: $bp-tablet ) { + height: auto; + flex-wrap: wrap; + } + + //------------------------------------------------------------------------------- + // Column - Big Image + //------------------------------------------------------------------------------- + + .split-image { + width: 50%; + height: 100vh; + // background-image: $image-background; + // background-position:center center; + background-size:cover; + + @media (max-width: $bp-tablet ) { + height: 80vh; + width: 100%; + } + + } + + //------------------------------------------------------------------------------- + // Column - Content + //------------------------------------------------------------------------------- + + .split-content { + width: 50%; + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + overflow: auto; + + @media (max-width: $bp-tablet ) { + width: 100%; + height: auto; + } + + .split-content-vertically-center { + padding: 80px; + max-width: 640px; + margin-top: auto; + margin-bottom: auto; + + @media (max-width: $bp-smallish ) { + padding: 60px; + } + + @media (max-width: $bp-tablet ) { + padding: 40px; + } + + } + + } } @@ -139,24 +139,24 @@ body.page-template-page-fullsingle-split { //------------------------------------------------------------------------------- .split-intro { - font-weight: 600; - font-size: 64px; - line-height: 80px; - letter-spacing: -2px; - - h1 { - font-weight: 400; - text-transform: uppercase; - font-size: 16px; - line-height: 16px; - margin-bottom: 40px; - letter-spacing: 0.4px; - color: $color-maverick; - } - - .tagline { - color: $color-tagline; - } + font-weight: 600; + font-size: 64px; + line-height: 80px; + letter-spacing: -2px; + + h1 { + font-weight: 400; + text-transform: uppercase; + font-size: 16px; + line-height: 16px; + margin-bottom: 40px; + letter-spacing: 0.4px; + color: $color-maverick; + } + + .tagline { + color: $color-tagline; + } } @@ -165,33 +165,33 @@ body.page-template-page-fullsingle-split { //------------------------------------------------------------------------------- .split-bio { - padding: 40px 0 40px 0; - font-family: 'Lora', serif; + padding: 40px 0 40px 0; + font-family: 'Lora', serif; - @media (max-width: $bp-smallish ) { - padding: 30px 0; - } + @media (max-width: $bp-smallish ) { + padding: 30px 0; + } - @media (max-width: $bp-tablet ) { - padding: 20px 0; - } + @media (max-width: $bp-tablet ) { + padding: 20px 0; + } - p { - color: $color-text; - } + p { + color: $color-text; + } - a { - color: $color-link; - transition-duration: 0.5s; - border-bottom: 1px dotted $color-link; + a { + color: $color-link; + transition-duration: 0.5s; + border-bottom: 1px dotted $color-link; - &:hover { - color: $color-link-hover; - transition-duration: 0.1s; - border-bottom: 1px dotted $color-link-hover; - } + &:hover { + color: $color-link-hover; + transition-duration: 0.1s; + border-bottom: 1px dotted $color-link-hover; + } - } + } } @@ -201,51 +201,51 @@ body.page-template-page-fullsingle-split { .split-lists { - .split-list { - width: 30%; - display: inline-block; - margin-bottom: 40px; - vertical-align: top; + .split-list { + width: 30%; + display: inline-block; + margin-bottom: 40px; + vertical-align: top; - @media (max-width: $bp-mobile ) { - width: 90%; - } + @media (max-width: $bp-mobile ) { + width: 90%; + } - h3 { - font-weight: 400; - text-transform: uppercase; - font-size: 11px; - line-height: 11px; - margin-bottom: 31px; - color: $color-text; - letter-spacing: 2px; - opacity: 0.5; - } + h3 { + font-weight: 400; + text-transform: uppercase; + font-size: 11px; + line-height: 11px; + margin-bottom: 31px; + color: $color-text; + letter-spacing: 2px; + opacity: 0.5; + } - ul { + ul { - li { - font-size: 16px; - line-height: 16px; - margin-bottom: 12px; + li { + font-size: 16px; + line-height: 16px; + margin-bottom: 12px; - a { - color: $color-link; - transition-duration: 0.5s; + a { + color: $color-link; + transition-duration: 0.5s; - &:hover { - color: $color-link-hover; - transition-duration: 0.1s; - } + &:hover { + color: $color-link-hover; + transition-duration: 0.1s; + } - } + } - } + } - } + } - } + } } @@ -253,22 +253,22 @@ body.page-template-page-fullsingle-split { // Credit //------------------------------------------------------------------------------- -// To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split -// this really helps contribute towards us developing more templates and means the world to me! -// Cheers, Rob (@robhope) +// To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split +// this really helps contribute towards us developing more templates and means the world to me! +// Cheers, Rob (@robhope) .split-credit { - opacity: 0.4; + opacity: 0.4; - p { - font-size: 12px; - line-height: 14px; + p { + font-size: 12px; + line-height: 14px; - a { - color: $color-text; - } + a { + color: $color-text; + } - } + } } @@ -279,40 +279,40 @@ body.page-template-page-fullsingle-split { // YouTube .split-video { - overflow:hidden; - position:relative; + overflow:hidden; + position:relative; } .video-wrap{ - position:absolute; - top:50%; - left:50%; - transform:translate(-50%,-50%); + position:absolute; + top:50%; + left:50%; + transform:translate(-50%,-50%); } .video-container { - position:relative; - overflow:hidden; - height: 56.25vw; - width: 100vw; - @media (max-aspect-ratio:16/9) { - height: 100vh; - width: 177.7777777778vh; // this is for the ration 16:9 - } + position:relative; + overflow:hidden; + height: 56.25vw; + width: 100vw; + @media (max-aspect-ratio:16/9) { + height: 100vh; + width: 177.7777777778vh; // this is for the ration 16:9 + } } .video-container iframe, .video-container object, .video-container embed { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } // Self-Hosted video.video { - object-fit : cover; - object-position : 50% 50%; - width : 100%; - height : 100%; + object-fit : cover; + object-position : 50% 50%; + width : 100%; + height : 100%; } |