Added Grunt.js to compile SASS and CoffeeScript assets; copied over styles and scripts from Hugo project
This commit is contained in:
parent
8297325cf6
commit
96c9fea488
8
.gitignore
vendored
8
.gitignore
vendored
@ -1 +1,9 @@
|
||||
# Composer dependencies
|
||||
/vendor/
|
||||
|
||||
# NPM dev dependencies
|
||||
node_modules/
|
||||
|
||||
# Assets compiled by Grunt.js
|
||||
public/css
|
||||
public/js
|
||||
|
||||
66
Gruntfile.js
Normal file
66
Gruntfile.js
Normal file
@ -0,0 +1,66 @@
|
||||
module.exports = function(grunt) {
|
||||
|
||||
var pkg = grunt.file.readJSON('package.json');
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
'dart-sass': {
|
||||
target: {
|
||||
options: {
|
||||
indentedSyntax: true,
|
||||
outputStyle: 'compressed'
|
||||
},
|
||||
files: [{
|
||||
expand: true,
|
||||
cwd: 'assets/sass',
|
||||
src: ['*.sass', '!_*.sass'],
|
||||
dest: 'public/css',
|
||||
ext: '.css'
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
coffee: {
|
||||
options: {
|
||||
sourceMap: true,
|
||||
style: 'compressed'
|
||||
},
|
||||
files: {
|
||||
expand: true,
|
||||
flatten: true,
|
||||
cwd: 'assets/coffee',
|
||||
src: ['*.coffee'],
|
||||
dest: 'public/js',
|
||||
ext: '.js'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
css: {
|
||||
files: ['assets/sass/*.sass'],
|
||||
tasks: ['dart-sass'],
|
||||
options: {
|
||||
atBegin: true,
|
||||
spawn: false
|
||||
}
|
||||
},
|
||||
js: {
|
||||
files: ['assets/coffee/*.coffee'],
|
||||
tasks: ['coffee'],
|
||||
options: {
|
||||
atBegin: true,
|
||||
spawn: false
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Load task plugins
|
||||
grunt.loadNpmTasks('grunt-dart-sass');
|
||||
grunt.loadNpmTasks('grunt-contrib-coffee');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
|
||||
// Default task(s).
|
||||
grunt.registerTask('default', ['dart-sass', 'coffee']);
|
||||
|
||||
};
|
||||
15
assets/coffee/varrock.coffee
Normal file
15
assets/coffee/varrock.coffee
Normal file
@ -0,0 +1,15 @@
|
||||
$(window).scroll ->
|
||||
wScroll = $(this).scrollTop()
|
||||
|
||||
# Header parallax
|
||||
$('#header-logo').css('transform', 'translate(-50%, ' + (wScroll / 2) + 'px)')
|
||||
$('#header-logo h1').css('transform', 'translateY(-' + (wScroll / 2) + 'px)')
|
||||
|
||||
# YouTube section parallax
|
||||
if not (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
|
||||
$('.youtube-section').each (i, e) ->
|
||||
if wScroll >= ($(e).offset().top - $(window).height())
|
||||
offset = (Math.min(0, wScroll - $(e).offset().top + $(window).height() - 500)).toFixed()
|
||||
|
||||
$(e).find('.video-card:first-child').css('transform': 'translate(' + offset + 'px, ' + Math.abs(offset * 0.2) + 'px)')
|
||||
$(e).find('.video-card:last-child').css('transform': 'translate(' + Math.abs(offset) + 'px, ' + Math.abs(offset * 0.2) + 'px)')
|
||||
4
assets/sass/_variables.sass
Normal file
4
assets/sass/_variables.sass
Normal file
@ -0,0 +1,4 @@
|
||||
$footer-height: 165px
|
||||
|
||||
$color-primary: #1e76d1
|
||||
$color-primary-hover: darken(#1e76d1, 10%)
|
||||
156
assets/sass/lumbridge.sass
Normal file
156
assets/sass/lumbridge.sass
Normal file
@ -0,0 +1,156 @@
|
||||
@import "_variables"
|
||||
|
||||
body
|
||||
font-family: "Gill Sans", sans-serif
|
||||
font-size: 2rem
|
||||
margin: 0
|
||||
padding-bottom: $footer-height
|
||||
|
||||
a
|
||||
color: $color-primary
|
||||
font-weight: 500
|
||||
text-decoration: none
|
||||
transition: color 300ms ease-in-out
|
||||
&:hover
|
||||
color: $color-primary-hover
|
||||
|
||||
hr
|
||||
margin-top: 35px
|
||||
margin-bottom: 35px
|
||||
|
||||
.u-text-center
|
||||
text-align: center
|
||||
|
||||
.post-info
|
||||
color: #999
|
||||
font-style: italic
|
||||
|
||||
// this wrapper is only used to hide the footer
|
||||
#wrapper
|
||||
position: relative
|
||||
z-index: 10
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: white
|
||||
|
||||
// header
|
||||
|
||||
#header-box
|
||||
position: relative
|
||||
z-index: 2
|
||||
height: 500px
|
||||
background:
|
||||
image: url(/assets/images/bg-banner.jpg)
|
||||
size: auto 600px
|
||||
position: top center
|
||||
attachment: fixed
|
||||
overflow: hidden
|
||||
|
||||
#header-logo
|
||||
height: 350px
|
||||
width: 350px
|
||||
background:
|
||||
image: url(/assets/images/bg-icon.png)
|
||||
position: center
|
||||
repeat: no-repeat
|
||||
size: contain
|
||||
position: absolute
|
||||
top: 40px
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
|
||||
h1
|
||||
margin-top: calc(100% + 25px)
|
||||
color: white
|
||||
font:
|
||||
weight: bold
|
||||
text-align: center
|
||||
|
||||
#navigation
|
||||
width: 100%
|
||||
margin-top: 40px
|
||||
margin-bottom: 40px
|
||||
text-align: center
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
margin: 0
|
||||
padding: 0
|
||||
border-radius: 10px
|
||||
font-size: 3rem
|
||||
transition: all 300ms ease-in-out
|
||||
&:hover
|
||||
background: rgba(#000000, 0.1)
|
||||
margin-left: 25px
|
||||
margin-right: 25px
|
||||
transform: scale(1.1)
|
||||
a
|
||||
padding: 20px 30px
|
||||
text-decoration: underline
|
||||
|
||||
#main-content
|
||||
padding-bottom: 40px
|
||||
|
||||
// home page styles
|
||||
|
||||
.youtube-section
|
||||
@media only screen and (min-device-width: 960px)
|
||||
.row
|
||||
position: relative
|
||||
.video-card:nth-child(1)
|
||||
transform: translate(100px, 20px)
|
||||
.video-card:nth-child(2)
|
||||
position: relative
|
||||
z-index: 20
|
||||
.video-card:nth-child(3)
|
||||
transform: translate(-100px, 20px)
|
||||
|
||||
.video-card a
|
||||
display: block
|
||||
margin-bottom: 25px
|
||||
padding: 15px 20px 0
|
||||
background: white
|
||||
border: 2px solid #bbb
|
||||
|
||||
img, p
|
||||
transition: all 300ms ease-in-out
|
||||
|
||||
&:hover
|
||||
img
|
||||
transform: scale(1.1)
|
||||
|
||||
p
|
||||
transform: translate(20px, 10px) scale(1.1)
|
||||
|
||||
// Blog posts page
|
||||
|
||||
#post-list
|
||||
list-style: none
|
||||
|
||||
li
|
||||
padding: 15px 20px 0
|
||||
border: 2px solid #bbb
|
||||
|
||||
.post-title
|
||||
margin-bottom: 3px
|
||||
|
||||
.post-body
|
||||
margin-bottom: 0
|
||||
|
||||
// footer section
|
||||
|
||||
#footer
|
||||
box-sizing: border-box
|
||||
position: fixed
|
||||
z-index: 1
|
||||
bottom: 0
|
||||
width: 100%
|
||||
height: $footer-height
|
||||
padding-top: 35px
|
||||
background: #212121
|
||||
color: white
|
||||
3193
package-lock.json
generated
Normal file
3193
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
package.json
Normal file
23
package.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "bitgoblin-website",
|
||||
"version": "0.1.0",
|
||||
"description": "Bit Goblin website",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"grunt": "grunt",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "gitea@git.metaunix.net:bitgoblin/bitgoblin-website.git"
|
||||
},
|
||||
"author": "Gregory Ballantine <gballantine@bitgoblin.tech>",
|
||||
"license": "BSD-2-Clause",
|
||||
"devDependencies": {
|
||||
"grunt": "^1.5.3",
|
||||
"grunt-contrib-coffee": "^2.1.0",
|
||||
"grunt-contrib-watch": "^1.1.0",
|
||||
"grunt-dart-sass": "^2.0.1",
|
||||
"sass": "^1.53.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user