added caffiene free parallax effect
This commit is contained in:
Are0h
parent
2b963e69ee
commit
5f55e76525
9 changed files with 168 additions and 81 deletions
|
|
@ -230,44 +230,87 @@ template {
|
|||
-------------------------------
|
||||
**/
|
||||
html {
|
||||
background: #113641;
|
||||
font: 400 1.3em/1.3em Helvetica, Arial, sans-serif;
|
||||
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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border-top: 5px #7ed07e solid;
|
||||
border-bottom: 2px #f9690e solid;
|
||||
}
|
||||
.main-container section {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font: 400 1.3em/1.3em Helvetica, Arial, sans-serif;
|
||||
}
|
||||
.main-container section #index-content span {
|
||||
font: 600 2em/2 Helvetica, Arial, sans-serif;
|
||||
body {
|
||||
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;
|
||||
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) {
|
||||
.main-container .content #the-intro {
|
||||
|
|
@ -294,7 +337,7 @@ svg.icons {
|
|||
font-size: 3.3rem;
|
||||
}
|
||||
.main-container .header .header-desc span a {
|
||||
color: #fffacd;
|
||||
color: #d5cfba;
|
||||
width: 250px;
|
||||
font-weight: 300;
|
||||
display: inline-block;
|
||||
|
|
@ -364,7 +407,7 @@ header #header-two #the-intro {
|
|||
position: relative;
|
||||
}
|
||||
#index-display #recent-title {
|
||||
color: #fffacd;
|
||||
color: #d5cfba;
|
||||
font: 400 2em $titleType;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -492,7 +535,7 @@ select {
|
|||
}
|
||||
#post-content #header-post #header-one span#post-title {
|
||||
font: 200 4.5em/1em $titleType;
|
||||
color: #fffacd;
|
||||
color: #d5cfba;
|
||||
margin: 20px 0 0 10px;
|
||||
padding: 20px 0 80px 0;
|
||||
display: block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
assets/scripts/start.min.js
vendored
2
assets/scripts/start.min.js
vendored
|
|
@ -198,7 +198,7 @@ var parent = module.bundle.parent;
|
|||
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
|
||||
var hostname = "" || location.hostname;
|
||||
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) {
|
||||
checkedAssets = {};
|
||||
|
|
|
|||
|
|
@ -10,8 +10,14 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
|
|||
meta(name="twitter:image" content=image)
|
||||
link(rel='stylesheet', href='/assets/css/base.css', type='text/css')
|
||||
body
|
||||
.main-container#main-content
|
||||
.container#main-content
|
||||
block main-content
|
||||
header
|
||||
.menu
|
||||
| LINKZ
|
||||
br
|
||||
| LINKZ
|
||||
h1 Hello There
|
||||
script(src='/assets/scripts/start.min.js' type="text/javascript")
|
||||
|
||||
|
||||
|
|
|
|||
13
index.pug
13
index.pug
|
|
@ -1,11 +1,10 @@
|
|||
extends frame
|
||||
|
||||
block main-content
|
||||
header(style="background: url("+default_bg+") scroll center center / cover")
|
||||
section#index-content
|
||||
|
||||
#index-display
|
||||
#index-content
|
||||
span= title
|
||||
div !{content_index}
|
||||
article
|
||||
.article-content
|
||||
span= title
|
||||
div !{content_index}
|
||||
footer
|
||||
| FOOTER PIPE
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ module.exports = {
|
|||
default_bg: '/assets/images/global/default-bg.jpg',
|
||||
default_avi: '/assets/images/global/default-avi.png',
|
||||
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',
|
||||
bucket: [{ item: 'one' }, { item: 'two' }, { item: 'three' }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@ $primary = #113641;
|
|||
$secondary = #FC6399;
|
||||
$tertiary = #F9690E;
|
||||
$highlight = #7ED07E;
|
||||
$white = #FFFACD;
|
||||
$white = #d5cfba;
|
||||
$black = #32302f;
|
||||
|
|
|
|||
|
|
@ -14,3 +14,4 @@ background-opacity(rgb-value, opacity)
|
|||
custom-header(weight, size, line-height, color)
|
||||
font: weight size/line-height $bodyType
|
||||
color: color
|
||||
text-decoration: underline
|
||||
|
|
|
|||
|
|
@ -1,38 +1,76 @@
|
|||
html
|
||||
background $primary
|
||||
font 400 1.3em/1.3em $bodyType
|
||||
color $white
|
||||
|
||||
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
|
||||
margin 0
|
||||
padding 0
|
||||
width 100%
|
||||
height 100%
|
||||
overflow hidden
|
||||
#index-content
|
||||
span
|
||||
custom-header(600, 2em, 2, $secondary)
|
||||
font 400 1.3em/1.3em $bodyType
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue