added caffiene free parallax effect

This commit is contained in:
Are0h 2020-05-07 20:00:29 -07:00
parent 2b963e69ee
commit 5f55e76525
9 changed files with 168 additions and 81 deletions

View file

@ -230,44 +230,87 @@ template {
------------------------------- -------------------------------
**/ **/
html { html {
background: #113641; margin: 0;
font: 400 1.3em/1.3em Helvetica, Arial, sans-serif; padding: 0;
color: #fffacd;
}
a {
font: 300 1em $titleType;
color: #7ed07e;
text-decoration: underline;
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
a:hover {
color: #daf1da;
background: #113641;
}
svg.icons {
width: 20px;
fill: #fc6399;
}
.main-container {
margin: 0 auto;
z-index: 10;
position: relative;
}
.main-container header {
width: 100%; width: 100%;
height: 600px; height: 100%;
border-top: 5px #7ed07e solid;
border-bottom: 2px #f9690e solid;
}
.main-container section {
overflow: hidden; overflow: hidden;
font: 400 1.3em/1.3em Helvetica, Arial, sans-serif;
} }
.main-container section #index-content span { body {
font: 600 2em/2 Helvetica, Arial, sans-serif; color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
header {
box-sizing: border-box;
min-height: 100vh;
position: relative;
transform-style: inherit;
width: 100vw;
text-align: center;
color: #fc6399; color: #fc6399;
text-shadow: 1px 1px 1px rgba(50,48,47,0.5);
}
header h1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
header .menu {
width: 100%;
text-align: left;
}
header,
header:before {
background: 50% 50%/cover;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: url("/assets/images/global/default-bg.jpg");
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
.container {
z-index: 2;
position: absolute;
top: 100vh;
background: #32302f;
line-height: 30px;
font-weight: lighter;
padding: 40px;
color: #d5cfba;
}
.container article {
min-height: 500px;
}
.container article span {
font: 600 2em/2 Helvetica, Arial, sans-serif;
color: #f9690e;
text-decoration: underline;
}
.container footer {
background: #32302f;
border-top: 1px #7ed07e solid;
height: 100px;
padding: 20px 0 0 0;
} }
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.main-container .content #the-intro { .main-container .content #the-intro {
@ -294,7 +337,7 @@ svg.icons {
font-size: 3.3rem; font-size: 3.3rem;
} }
.main-container .header .header-desc span a { .main-container .header .header-desc span a {
color: #fffacd; color: #d5cfba;
width: 250px; width: 250px;
font-weight: 300; font-weight: 300;
display: inline-block; display: inline-block;
@ -364,7 +407,7 @@ header #header-two #the-intro {
position: relative; position: relative;
} }
#index-display #recent-title { #index-display #recent-title {
color: #fffacd; color: #d5cfba;
font: 400 2em $titleType; font: 400 2em $titleType;
vertical-align: top; vertical-align: top;
} }
@ -492,7 +535,7 @@ select {
} }
#post-content #header-post #header-one span#post-title { #post-content #header-post #header-one span#post-title {
font: 200 4.5em/1em $titleType; font: 200 4.5em/1em $titleType;
color: #fffacd; color: #d5cfba;
margin: 20px 0 0 10px; margin: 20px 0 0 10px;
padding: 20px 0 80px 0; padding: 20px 0 80px 0;
display: block; display: block;

File diff suppressed because one or more lines are too long

View file

@ -198,7 +198,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname; var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "50107" + '/'); var ws = new WebSocket(protocol + '://' + hostname + ':' + "60014" + '/');
ws.onmessage = function (event) { ws.onmessage = function (event) {
checkedAssets = {}; checkedAssets = {};

View file

@ -10,8 +10,14 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
meta(name="twitter:image" content=image) meta(name="twitter:image" content=image)
link(rel='stylesheet', href='/assets/css/base.css', type='text/css') link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
body body
.main-container#main-content .container#main-content
block main-content block main-content
header
.menu
| LINKZ
br
| LINKZ
h1 Hello There
script(src='/assets/scripts/start.min.js' type="text/javascript") script(src='/assets/scripts/start.min.js' type="text/javascript")

View file

@ -1,11 +1,10 @@
extends frame extends frame
block main-content block main-content
header(style="background: url("+default_bg+") scroll center center / cover") article
section#index-content .article-content
#index-display
#index-content
span= title span= title
div !{content_index} div !{content_index}
footer
| FOOTER PIPE

View file

@ -8,7 +8,7 @@ module.exports = {
default_bg: '/assets/images/global/default-bg.jpg', default_bg: '/assets/images/global/default-bg.jpg',
default_avi: '/assets/images/global/default-avi.png', default_avi: '/assets/images/global/default-avi.png',
content_index: content_index:
'Hey, welcome to the show. This is the theme kit for making cool stuff with Fipamo, the most chill blog frame work ever. Because people have better things to do than mess with complicated blog set ups.', "The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.",
content_page: 'This is some page content... for your broke ass', content_page: 'This is some page content... for your broke ass',
bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }] bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }]
} }

View file

@ -2,5 +2,5 @@ $primary = #113641;
$secondary = #FC6399; $secondary = #FC6399;
$tertiary = #F9690E; $tertiary = #F9690E;
$highlight = #7ED07E; $highlight = #7ED07E;
$white = #FFFACD; $white = #d5cfba;
$black = #32302f; $black = #32302f;

View file

@ -14,3 +14,4 @@ background-opacity(rgb-value, opacity)
custom-header(weight, size, line-height, color) custom-header(weight, size, line-height, color)
font: weight size/line-height $bodyType font: weight size/line-height $bodyType
color: color color: color
text-decoration: underline

View file

@ -1,38 +1,76 @@
html html
background $primary margin 0
font 400 1.3em/1.3em $bodyType padding 0
color $white width 100%
height 100%
a
font 300 1em $titleType
color $highlight
text-decoration underline
object-transitions(.1s)
a:hover
color lightness($highlight, 90%)
background $primary
svg.icons
width 20px
fill $secondary
.main-container
margin 0 auto
z-index 10
position relative
header
width: 100%;
height 600px;
border-top 5px $highlight solid
border-bottom 2px $tertiary solid
section
overflow hidden overflow hidden
#index-content font 400 1.3em/1.3em $bodyType
span
custom-header(600, 2em, 2, $secondary)
div body
color white
margin 0
padding 0
perspective 1px
transform-style preserve-3d
height 100%
width 100%
overflow-y scroll
overflow-x hidden
header
box-sizing border-box
min-height 100vh
position relative
transform-style inherit
width 100vw
text-align center
color $secondary
text-drop-shadow($black, .5, 1px, 1px, 1px)
h1
margin 0
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
.menu
width: 100%
text-align: left
header,header:before
background 50% 50% / cover
header::before
content ""
position absolute
top 0
left 0
right 0
bottom 0
display block
background url('/assets/images/global/default-bg.jpg')
background-size cover
transform-origin center center 0
transform translateZ(-1px) scale(2)
z-index -1
min-height 100vh
.container
z-index 2
position absolute
top 100vh
background $black
line-height 30px
font-weight lighter
padding 40px
color $white
article
min-height 500px
span
custom-header(600, 2em, 2, $tertiary)
footer
background $black
border-top 1px $highlight solid
height 100px
padding 20px 0 0 0