diff options
author | Jan Raasch <jan@janraasch.com> | 2020-09-24 18:59:45 +0300 |
---|---|---|
committer | Felix Börner <github@felix-boerner.de> | 2021-02-27 12:03:27 +0300 |
commit | 33105650eeb500b678461709000d89f83a35f1e9 (patch) | |
tree | 197d7112feeb078e1b601bdc122034186822147c /static | |
parent | 288cfbb7c92bbf2d597549dd262d40006863808f (diff) |
Revert "Move static directory to exampleSite"
This reverts commit 0522465f9f73e85cc6555bd0d3c9dc7699abda8d.
Diffstat (limited to 'static')
-rw-r--r-- | static/assets/css/split.css | 413 | ||||
-rw-r--r-- | static/assets/sass/00-reset.scss | 110 | ||||
-rw-r--r-- | static/assets/sass/01-content.scss | 435 | ||||
-rw-r--r-- | static/assets/sass/split.scss | 13 | ||||
-rw-r--r-- | static/favicon.ico | bin | 0 -> 1150 bytes | |||
-rw-r--r-- | static/images/background.jpg | bin | 0 -> 253285 bytes | |||
-rw-r--r-- | static/images/social.jpg | bin | 0 -> 107864 bytes | |||
-rw-r--r-- | static/videos/background.mp4 | bin | 0 -> 1911510 bytes |
8 files changed, 971 insertions, 0 deletions
diff --git a/static/assets/css/split.css b/static/assets/css/split.css new file mode 100644 index 0000000..dd13d04 --- /dev/null +++ b/static/assets/css/split.css @@ -0,0 +1,413 @@ +/* +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 -- */ +@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; + animation: fadein 2s; +} +body.page-template-page-fullsingle-split p { + color: #848d96; +} + +.fs-split { + width: 100vw; + height: 100vh; + display: flex; +} +@media (max-width: 800px) { + .fs-split { + height: auto; + flex-wrap: wrap; + } +} +.fs-split .split-image { + width: 50%; + height: 100vh; + 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: flex; + align-items: 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 20px 0; + font-family: "Lora", serif; +} +@media (max-width: 1200px) { + .split-bio { + padding: 30px 0 10px 0; + } +} +@media (max-width: 800px) { + .split-bio { + padding: 20px 0 0 0; + } +} +.split-bio p { + color: #848d96; + margin-bottom: 20px; + line-height: inherit; +} +.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-bio em, +.split-bio i { + font-style: italic; + line-height: inherit; +} +.split-bio strong, +.split-bio b { + font-weight: bold; + line-height: inherit; +} +.split-bio small { + font-size: 80%; + line-height: inherit; +} +.split-bio h1, .split-bio .h1, +.split-bio h2, .split-bio .h2, +.split-bio h3, .split-bio .h3, +.split-bio h4, .split-bio .h4, +.split-bio h5, .split-bio .h5, +.split-bio h6, .split-bio .h6 { + font-style: normal; + font-weight: normal; + color: inherit; +} +.split-bio h1 small, .split-bio .h1 small, +.split-bio h2 small, .split-bio .h2 small, +.split-bio h3 small, .split-bio .h3 small, +.split-bio h4 small, .split-bio .h4 small, +.split-bio h5 small, .split-bio .h5 small, +.split-bio h6 small, .split-bio .h6 small { + line-height: 0; +} +.split-bio h1, .split-bio .h1 { + font-size: 1.5em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h2, .split-bio .h2 { + font-size: 1.25em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h3, .split-bio .h3 { + font-size: 1.1875em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h4, .split-bio .h4 { + font-size: 1.125em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h5, .split-bio .h5 { + font-size: 1.0625em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio h6, .split-bio .h6 { + font-size: 1em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; +} +.split-bio ul, +.split-bio ol, +.split-bio dl { + margin-bottom: 20px; + list-style-position: outside; + line-height: inherit; +} +.split-bio li { + font-size: inherit; +} +.split-bio ul { + margin-left: 2.25em; + list-style-type: disc; +} +.split-bio ol { + margin-left: 2.25em; + list-style-type: decimal; +} +.split-bio ul ul, .split-bio ol ul, .split-bio ul ol, .split-bio ol ol { + margin-left: 1.25em; + margin-bottom: 0; +} +.split-bio dl dt { + margin-bottom: 10px; + font-weight: bold; +} +.split-bio dl dd { + margin-bottom: 10px; +} + +.split-lists .split-list { + width: 30%; + display: inline-block; + margin-bottom: 40px; + vertical-align: top; +} +@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%; + 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 { + object-fit: cover; + 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..c512148 --- /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; +} diff --git a/static/assets/sass/01-content.scss b/static/assets/sass/01-content.scss new file mode 100644 index 0000000..99c6c6d --- /dev/null +++ b/static/assets/sass/01-content.scss @@ -0,0 +1,435 @@ +//------------------------------------------------------------------------------- +// 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 20px 0; + font-family: 'Lora', serif; + + @media (max-width: $bp-smallish ) { + padding: 30px 0 10px 0; + } + + @media (max-width: $bp-tablet ) { + padding: 20px 0 0 0; + } + + p { + color: $color-text; + margin-bottom: 20px; + line-height: inherit; + } + + 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; + } + + } + + em, + i { + font-style: italic; + line-height: inherit; + } + + strong, + b { + font-weight: bold; + line-height: inherit; + } + + small { + font-size: 80%; + line-height: inherit; + } + + h1, .h1, + h2, .h2, + h3, .h3, + h4, .h4, + h5, .h5, + h6, .h6 { + font-style: normal; + font-weight: normal; + color: inherit; + } + + h1 small, .h1 small, + h2 small, .h2 small, + h3 small, .h3 small, + h4 small, .h4 small, + h5 small, .h5 small, + h6 small, .h6 small { + line-height: 0; + } + + h1, .h1 { + font-size: 1.5em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h2, .h2 { + font-size: 1.25em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h3, .h3 { + font-size: 1.1875em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h4, .h4 { + font-size: 1.125em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h5, .h5 { + font-size: 1.0625em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + h6, .h6 { + font-size: 1em; + line-height: inherit; + margin-top: 0; + margin-bottom: 20px; + } + + ul, + ol, + dl { + margin-bottom: 20px; + list-style-position: outside; + line-height: inherit; + } + + li { + font-size: inherit; + } + + ul { + margin-left: 2.25em; + list-style-type: disc; + } + + ol { + margin-left: 2.25em; + list-style-type: decimal; + } + + ul ul, ol ul, ul ol, ol ol { + margin-left: 1.25em; + margin-bottom: 0; + } + + dl dt { + margin-bottom: 10px; + font-weight: bold; + } + + dl dd { + margin-bottom: 10px; + } +} + +//------------------------------------------------------------------------------- +// Lists +//------------------------------------------------------------------------------- + +.split-lists { + + .split-list { + width: 30%; + display: inline-block; + margin-bottom: 40px; + vertical-align: top; + + @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 diff --git a/static/favicon.ico b/static/favicon.ico Binary files differnew file mode 100644 index 0000000..ed410b2 --- /dev/null +++ b/static/favicon.ico diff --git a/static/images/background.jpg b/static/images/background.jpg Binary files differnew file mode 100644 index 0000000..b5ea412 --- /dev/null +++ b/static/images/background.jpg diff --git a/static/images/social.jpg b/static/images/social.jpg Binary files differnew file mode 100644 index 0000000..5638107 --- /dev/null +++ b/static/images/social.jpg diff --git a/static/videos/background.mp4 b/static/videos/background.mp4 Binary files differnew file mode 100644 index 0000000..31dc4bc --- /dev/null +++ b/static/videos/background.mp4 |