Added Grunt.js to compile SASS and CoffeeScript assets; copied over styles and scripts from Hugo project

This commit is contained in:
Gregory Ballantine 2022-07-10 00:45:21 -04:00
parent 8297325cf6
commit 96c9fea488
7 changed files with 3465 additions and 0 deletions

8
.gitignore vendored
View File

@ -1 +1,9 @@
# Composer dependencies
/vendor/ /vendor/
# NPM dev dependencies
node_modules/
# Assets compiled by Grunt.js
public/css
public/js

66
Gruntfile.js Normal file
View 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']);
};

View 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)')

View File

@ -0,0 +1,4 @@
$footer-height: 165px
$color-primary: #1e76d1
$color-primary-hover: darken(#1e76d1, 10%)

156
assets/sass/lumbridge.sass Normal file
View 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

File diff suppressed because it is too large Load Diff

23
package.json Normal file
View 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"
}
}