diff options
author | Christian Mendoza <christian.mendoza@gmail.com> | 2017-12-20 21:17:25 +0300 |
---|---|---|
committer | Christian Mendoza <christian.mendoza@gmail.com> | 2017-12-20 21:17:25 +0300 |
commit | 00d0ffc5d211e446914f6df12ee1f36699812947 (patch) | |
tree | 730523cae0e6f182fd6084d3e502e4e187789ae5 /static/assets | |
parent | 50d045ab5c481589a5f996c353b25f583d4fb6b5 (diff) |
Add template files
Diffstat (limited to 'static/assets')
-rw-r--r-- | static/assets/css/split.css | 274 | ||||
-rw-r--r-- | static/assets/sass/00-reset.scss | 110 | ||||
-rw-r--r-- | static/assets/sass/01-content.scss | 317 | ||||
-rw-r--r-- | static/assets/sass/split.scss | 13 |
4 files changed, 714 insertions, 0 deletions
diff --git a/static/assets/css/split.css b/static/assets/css/split.css new file mode 100644 index 0000000..385badb --- /dev/null +++ b/static/assets/css/split.css @@ -0,0 +1,274 @@ +/* +Template Name: Split +Author: One Page Love +Author URI: https://onepagelove.com +Template URI: https://onepagelove.com/split +Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content. +*/ +/* -- CSS Reset -- */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600"); +@import url("https://fonts.googleapis.com/css?family=Lora"); +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + -moz-font-feature-settings: "liga" on; + margin: 0; } + +img.alignright { + float: right; } + +img.alignleft { + float: left; } + +img.aligncenter { + clear: both; + display: block; + margin-right: auto; + margin-left: auto; } + +body { + background-color: #FFFFFF; + border-style: none; } + +body, +p, +a, +a:hover { + color: #000000; } + +a, +a:hover { + text-decoration: none; + border: none; + border-style: none; + box-shadow: none; } + +/* -- Content -- */ +@-webkit-keyframes fadein { + from { + opacity: 0; } + to { + opacity: 1; } } +@keyframes fadein { + from { + opacity: 0; } + to { + opacity: 1; } } + +html { + background-color: #061C30; } + +body.page-template-page-fullsingle-split { + background-color: #061C30; + font-family: 'Montserrat', sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 33px; + letter-spacing: -0.2px; + color: #848d96; + -webkit-animation: fadein 2s; + animation: fadein 2s; } + body.page-template-page-fullsingle-split p { + color: #848d96; } + +.fs-split { + width: 100vw; + height: 100vh; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + @media (max-width: 800px) { + .fs-split { + height: auto; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } } + .fs-split .split-image { + width: 50%; + height: 100vh; + background-image: url("../../images/background.jpg"); + background-position: center center; + background-size: cover; } + @media (max-width: 800px) { + .fs-split .split-image { + height: 80vh; + width: 100%; } } + .fs-split .split-content { + width: 50%; + min-height: 100vh; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + overflow: auto; } + @media (max-width: 800px) { + .fs-split .split-content { + width: 100%; + height: auto; } } + .fs-split .split-content .split-content-vertically-center { + padding: 80px; + max-width: 640px; + margin-top: auto; + margin-bottom: auto; } + @media (max-width: 1200px) { + .fs-split .split-content .split-content-vertically-center { + padding: 60px; } } + @media (max-width: 800px) { + .fs-split .split-content .split-content-vertically-center { + padding: 40px; } } + +.split-intro { + font-weight: 600; + font-size: 64px; + line-height: 80px; + letter-spacing: -2px; } + .split-intro h1 { + font-weight: 400; + text-transform: uppercase; + font-size: 16px; + line-height: 16px; + margin-bottom: 40px; + letter-spacing: 0.4px; + color: #47bec7; } + .split-intro .tagline { + color: #CCCCCC; } + +.split-bio { + padding: 40px 0 40px 0; + font-family: 'Lora', serif; } + @media (max-width: 1200px) { + .split-bio { + padding: 30px 0; } } + @media (max-width: 800px) { + .split-bio { + padding: 20px 0; } } + .split-bio p { + color: #848d96; } + .split-bio a { + color: #848d96; + transition-duration: 0.5s; + border-bottom: 1px dotted #848d96; } + .split-bio a:hover { + color: #CA486d; + transition-duration: 0.1s; + border-bottom: 1px dotted #CA486d; } + +.split-lists .split-list { + width: 30%; + display: inline-block; + margin-bottom: 40px; } + @media (max-width: 500px) { + .split-lists .split-list { + width: 90%; } } + .split-lists .split-list h3 { + font-weight: 400; + text-transform: uppercase; + font-size: 11px; + line-height: 11px; + margin-bottom: 31px; + color: #848d96; + letter-spacing: 2px; + opacity: 0.5; } + .split-lists .split-list ul li { + font-size: 16px; + line-height: 16px; + margin-bottom: 12px; } + .split-lists .split-list ul li a { + color: #848d96; + transition-duration: 0.5s; } + .split-lists .split-list ul li a:hover { + color: #CA486d; + transition-duration: 0.1s; } + +.split-credit { + opacity: 0.4; } + .split-credit p { + font-size: 12px; + line-height: 14px; } + .split-credit p a { + color: #848d96; } + +.split-video { + overflow: hidden; + position: relative; } + +.video-wrap { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + +.video-container { + position: relative; + overflow: hidden; + height: 56.25vw; + width: 100vw; } + @media (max-aspect-ratio: 16 / 9) { + .video-container { + height: 100vh; + width: 177.7777777778vh; } } + +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + +video.video { + -o-object-fit: cover; + object-fit: cover; + -o-object-position: 50% 50%; + object-position: 50% 50%; + width: 100%; + height: 100%; } diff --git a/static/assets/sass/00-reset.scss b/static/assets/sass/00-reset.scss new file mode 100644 index 0000000..1c060fe --- /dev/null +++ b/static/assets/sass/00-reset.scss @@ -0,0 +1,110 @@ +//------------------------------------------------------------------------------- +// Eric Meyer’s CSS Reset +//------------------------------------------------------------------------------- + +// http://meyerweb.com/eric/tools/css/reset/ +// v2.0 | 20110126 +// License: none (public domain) + + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +// HTML5 display-role reset for older browsers +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +//------------------------------------------------------------------------------- +// Make those fonts sexy +//------------------------------------------------------------------------------- + +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + -moz-font-feature-settings: "liga" on; + margin: 0; +} + +//------------------------------------------------------------------------------- +// General Styles +//------------------------------------------------------------------------------- + +img { + &.alignright { + float: right; + } + &.alignleft { + float: left; + } + &.aligncenter { + clear: both; + display: block; + margin-right: auto; + margin-left: auto; + } +} + +//------------------------------------------------------------------------------- +// Reset Body Colors +//------------------------------------------------------------------------------- + +body { + background-color: #FFFFFF; + border-style: none; +} +body, +p, +a, +a:hover { + color: #000000; +} + +//------------------------------------------------------------------------------- +// Reset Link Styles +//------------------------------------------------------------------------------- + +a, +a:hover { + text-decoration: none; + border: none; + border-style: none; + box-shadow: none; +}
\ No newline at end of file diff --git a/static/assets/sass/01-content.scss b/static/assets/sass/01-content.scss new file mode 100644 index 0000000..81b2b89 --- /dev/null +++ b/static/assets/sass/01-content.scss @@ -0,0 +1,317 @@ +//------------------------------------------------------------------------------- +// Google Font Import +//------------------------------------------------------------------------------- + +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600'); +@import url('https://fonts.googleapis.com/css?family=Lora'); + +//------------------------------------------------------------------------------- +// Variables +//------------------------------------------------------------------------------- + +// Colors +$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; + +// Images +$image-background : url('../../images/background.jpg'); + +//------------------------------------------------------------------------------- +// Fade In +//------------------------------------------------------------------------------- + +@keyframes fadein { + from { opacity: 0;} + to { opacity: 1;} +} + +//------------------------------------------------------------------------------- +// Content +//------------------------------------------------------------------------------- + +html { + 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; + } + +} + +//------------------------------------------------------------------------------- +// Sections and Columns +//------------------------------------------------------------------------------- + +.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; + } + + } + + } + +} + +//------------------------------------------------------------------------------- +// Content +//------------------------------------------------------------------------------- + +//------------------------------------------------------------------------------- +// Intro Text +//------------------------------------------------------------------------------- + +.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; + } + +} + +//------------------------------------------------------------------------------- +// Biography +//------------------------------------------------------------------------------- + +.split-bio { + padding: 40px 0 40px 0; + font-family: 'Lora', serif; + + @media (max-width: $bp-smallish ) { + padding: 30px 0; + } + + @media (max-width: $bp-tablet ) { + padding: 20px 0; + } + + p { + color: $color-text; + } + + 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; + } + + } + +} + +//------------------------------------------------------------------------------- +// Lists +//------------------------------------------------------------------------------- + +.split-lists { + + .split-list { + width: 30%; + display: inline-block; + margin-bottom: 40px; + + @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; + } + + ul { + + + li { + font-size: 16px; + line-height: 16px; + margin-bottom: 12px; + + a { + color: $color-link; + transition-duration: 0.5s; + + &:hover { + color: $color-link-hover; + transition-duration: 0.1s; + } + + } + + } + + } + + } + +} + +//------------------------------------------------------------------------------- +// 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) + +.split-credit { + opacity: 0.4; + + p { + font-size: 12px; + line-height: 14px; + + a { + color: $color-text; + } + + } + +} + +//------------------------------------------------------------------------------- +// Videos - shout out to my bud https://twitter.com/manuelmoreale for the Ninja skills +//------------------------------------------------------------------------------- + +// YouTube + +.split-video { + overflow:hidden; + position:relative; +} +.video-wrap{ + 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 + } +} +.video-container iframe, +.video-container object, +.video-container embed { + 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%; +} diff --git a/static/assets/sass/split.scss b/static/assets/sass/split.scss new file mode 100644 index 0000000..a01e8f1 --- /dev/null +++ b/static/assets/sass/split.scss @@ -0,0 +1,13 @@ +/* +Template Name: Split +Author: One Page Love +Author URI: https://onepagelove.com +Template URI: https://onepagelove.com/split +Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content. +*/ + +/* -- CSS Reset -- */ +@import "00-reset"; + +/* -- Content -- */ +@import "01-content";
\ No newline at end of file |