diff --git a/.gitignore b/.gitignore index f86fa8e..23981d5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ # https://git-scm.com/docs/gitignore # https://help.github.com/articles/ignoring-files -# Example .gitignore files: https://github.com/github/gitignore \ No newline at end of file +# Example .gitignore files: https://github.com/github/gitignore +/node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..95109be --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,129 @@ +module.exports = function (grunt) { + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + copy: { + build: { + cwd: 'src', + src: [ + '**', + '!**/*.less', + '!**/*.css', + '!**/*.js', + '!**/*.xcf' + ], + dest: 'build', + expand: true + } + }, + + clean: { + build: { + src: [ 'build' ] + } + }, + + cleanempty: { + build: { + options: { + files: false, + folders: true + }, + src: [ 'build/**/*' ] + } + }, + + uglify: { + build: { + options: { + compress: false, + beautify: true, + mangle: false + }, + files: { + 'build/application.js': [ 'src/**/*.js', '!src/assets/javascript/index.js', 'src/assets/javascript/index.js' ] + } + } + }, + + less: { + build: { + options: { + relativeUrls: true + }, + files: { + 'build/compiled-styles.css': 'src/site.less' + } + } + }, + + autoprefixer: { + build: { + expand: true, + src: [ 'build/**/*.css' ] + } + }, + + watch: { + options: { + livereload: true + }, + stylesheets: { + files: ['src/**/*.less', 'src/**/*.css'], + tasks: [ 'stylesheets' ] + }, + scripts: { + files: 'src/**/*.js', + tasks: [ 'scripts' ] + }, + copy: { + files: [ 'src/**', '!src/**/*.less', '!src/**/*.css', '!src/**/*.js' ], + tasks: [ 'copy', 'cleanempty' ] + } + }, + + php: { + watch: { + options: { + hostname: '0.0.0.0', + port: 1337, + base: 'build' + } + } + } + }); + + // Load plugins + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-cleanempty'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-autoprefixer'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-php'); + + // Default task(s). + grunt.registerTask( + 'default', + 'Default is to build everything, then watch for changes', + ['build', 'php:watch', 'watch'] + ); + grunt.registerTask( + 'stylesheets', + 'Compiles the stylesheets.', + [ 'less', 'autoprefixer' ] + ); + grunt.registerTask( + 'scripts', + 'Compiles the scripts.', + [ 'uglify' ] + ); + grunt.registerTask( + 'build', + 'Compiles all of the assets and copies the files to the build directory.', + [ 'clean', 'copy', 'stylesheets', 'scripts', 'cleanempty' ] + ); +}; diff --git a/assets/fonts/font.css b/assets/fonts/font.css deleted file mode 100644 index 67a8c71..0000000 --- a/assets/fonts/font.css +++ /dev/null @@ -1,10 +0,0 @@ -@font-face { - font-family: 'computerfontregular'; - src: url('computerfont-webfont.eot'); - src: url('computerfont-webfont.eot?#iefix') format('embedded-opentype'), - url('computerfont-webfont.woff2') format('woff2'), - url('computerfont-webfont.woff') format('woff'), - url('computerfont-webfont.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} diff --git a/build/application.js b/build/application.js new file mode 100644 index 0000000..c176c00 --- /dev/null +++ b/build/application.js @@ -0,0 +1,15 @@ +(function() { + function syncTyping() { + var beforeSelection, selection, afterSelection; + beforeSelection = this.value.slice(0, this.selectionStart); + selection = this.value.slice(this.selectionStart, this.selectionEnd); + afterSelection = this.value.slice(this.selectionEnd); + document.getElementById("typing").innerHTML = beforeSelection + (this.selectionStart == this.selectionEnd ? "" : "") + "" + selection + "" + afterSelection; + } + var commandline = document.getElementById("command"); + commandline.value = ""; + commandline.focus(); + commandline.onkeydown = syncTyping; + commandline.onkeyup = syncTyping; + commandline.onselect = syncTyping; +})(); \ No newline at end of file diff --git a/assets/fonts/computerfont-webfont.eot b/build/assets/fonts/computerfont-webfont.eot similarity index 100% rename from assets/fonts/computerfont-webfont.eot rename to build/assets/fonts/computerfont-webfont.eot diff --git a/assets/fonts/computerfont-webfont.ttf b/build/assets/fonts/computerfont-webfont.ttf similarity index 100% rename from assets/fonts/computerfont-webfont.ttf rename to build/assets/fonts/computerfont-webfont.ttf diff --git a/assets/fonts/computerfont-webfont.woff b/build/assets/fonts/computerfont-webfont.woff similarity index 100% rename from assets/fonts/computerfont-webfont.woff rename to build/assets/fonts/computerfont-webfont.woff diff --git a/assets/fonts/computerfont-webfont.woff2 b/build/assets/fonts/computerfont-webfont.woff2 similarity index 100% rename from assets/fonts/computerfont-webfont.woff2 rename to build/assets/fonts/computerfont-webfont.woff2 diff --git a/build/assets/images/scanline.svg b/build/assets/images/scanline.svg new file mode 100644 index 0000000..ad9c5ee --- /dev/null +++ b/build/assets/images/scanline.svg @@ -0,0 +1,17 @@ + + + + + + +image/svg+xml + + + + + + + + + + diff --git a/build/compiled-styles.css b/build/compiled-styles.css new file mode 100644 index 0000000..bf1b3da --- /dev/null +++ b/build/compiled-styles.css @@ -0,0 +1,128 @@ +*, +*:after, +*:before { + box-sizing: inherit; +} +html, +body { + margin: 0; + padding: 0; + height: 100%; + line-height: 1; + box-sizing: border-box; +} +label, +label:before, +label:after { + position: absolute; + left: 0; + right: 0; +} +label { + top: 0; + bottom: 0; + padding: 1em; + font-family: computerfontregular, monospace; + color: #009900; + font-size: 4vw; + overflow: hidden; + word-break: break-all; +} +label:before { + content: ""; + z-index: -1; + top: -8vw; + bottom: -8vw; + -webkit-animation: scroll 10s linear infinite; + animation: scroll 10s linear infinite; + background: url('/assets/images/scanline.svg'); + background-size: 115vw 15vw; + background-repeat: repeat-y; + background-position: 50% 0%; +} +#commandLine { + white-space: pre-wrap; +} +#command { + position: absolute; + margin-top: 1.25em; + z-index: -2; +} +#cursor { + position: absolute; + display: inline-block; + border-left: 0.1em solid; + margin-bottom: -0.2em; + height: 1em; + -webkit-animation: blink 1s linear infinite; + animation: blink 1s linear infinite; +} +#selection { + color: black; + background-color: #009900; +} +@-webkit-keyframes blink { + 0% { + opacity: 1; + } + 40% { + opacity: 1; + } + 50% { + opacity: 0; + } + 90% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes blink { + 0% { + opacity: 1; + } + 40% { + opacity: 1; + } + 50% { + opacity: 0; + } + 90% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes scroll { + 0% { + -webkit-transform: translate3d(0, -7.5vw, 0); + transform: translate3d(0, -7.5vw, 0); + } + 100% { + -webkit-transform: translate3d(0, 7.5vw, 0); + transform: translate3d(0, 7.5vw, 0); + } +} +@keyframes scroll { + 0% { + -webkit-transform: translate3d(0, -7.5vw, 0); + transform: translate3d(0, -7.5vw, 0); + } + 100% { + -webkit-transform: translate3d(0, 7.5vw, 0); + transform: translate3d(0, 7.5vw, 0); + } +} +@font-face { + font-family: 'computerfontregular'; + src: url('/assets/fonts/computerfont-webfont.eot'); + src: url('/assets/fonts/computerfont-webfont.eot?#iefix') format('embedded-opentype'), + url('/assets/fonts/computerfont-webfont.woff2') format('woff2'), + url('/assets/fonts/computerfont-webfont.woff') format('woff'), + url('/assets/fonts/computerfont-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + diff --git a/build/index.php b/build/index.php new file mode 100644 index 0000000..83e765e --- /dev/null +++ b/build/index.php @@ -0,0 +1,20 @@ + + + + + + FHQWHGADS + + + +
+ +
+ + + diff --git a/index.html b/index.html deleted file mode 100644 index 9ce540d..0000000 --- a/index.html +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - FHQWHGADS - - - - -
- -
- - - diff --git a/package.json b/package.json new file mode 100644 index 0000000..1f792b1 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "fhqwhgads.bit", + "version": "0.1.0", + "private": true, + "description": "novelty site", + "main": "src/scripts/index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Joshua Seigler", + "license": "CC BY 4.0", + "devDependencies": { + "grunt": "~0.4.5", + "grunt-contrib-copy": "~0.7.0", + "grunt-contrib-clean": "~0.6.0", + "grunt-contrib-less": "~0.12.0", + "grunt-autoprefixer": "~2.0.0", + "grunt-contrib-watch": "~0.6.1", + "grunt-contrib-uglify": "~0.6.0", + "grunt-cleanempty": "~1.0.1", + "grunt-php": "~1.1.1" + } +} diff --git a/src/assets/css/style.less b/src/assets/css/style.less new file mode 100644 index 0000000..2ad5424 --- /dev/null +++ b/src/assets/css/style.less @@ -0,0 +1,89 @@ +@consoleColor: #090; + +*, *:after, *:before { + box-sizing: inherit; +} +html, body { + margin: 0; + padding: 0; + height: 100%; + line-height: 1; + box-sizing: border-box; +} +label, label:before, label:after { + position: absolute; + left: 0; + right: 0; +} +label { + top: 0; + bottom: 0; + padding: 1em; + font-family: computerfontregular, monospace; + color: @consoleColor; + font-size: 4vw; + overflow: hidden; + word-break: break-all; +} +label:before { + content: ""; + z-index: -1; + top: -8vw; + bottom: -8vw; + animation: scroll 10s linear infinite; + background: url('/assets/images/scanline.svg'); + background-size: 115vw 15vw; + background-repeat: repeat-y; + background-position: 50% 0%; +} +//label:after { +// content: ""; +// top: 0; +// bottom: 0; +// background-image: radial-gradient(20vw circle at 5vw 5vw, rgba(255,255,255,0.25) 5%, transparent); +//} +#commandLine { + white-space: pre-wrap; +} +#command { + position: absolute; + margin-top: 1.25em; + z-index: -2; +} +#cursor { + position: absolute; + display: inline-block; + border-left: 0.1em solid; + margin-bottom: -0.2em; + height: 1em; + animation: blink 1s linear infinite; +} +#selection { + color: black; + background-color: @consoleColor; +} +@keyframes blink { + 0% { + opacity: 1; + } + 40% { + opacity: 1; + } + 50% { + opacity: 0; + } + 90% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes scroll { + 0% { + transform: translate3d(0,-7.5vw,0); + } + 100% { + transform: translate3d(0,7.5vw,0); + } +} diff --git a/src/assets/fonts/computerfont-webfont.eot b/src/assets/fonts/computerfont-webfont.eot new file mode 100644 index 0000000..6812a3d Binary files /dev/null and b/src/assets/fonts/computerfont-webfont.eot differ diff --git a/src/assets/fonts/computerfont-webfont.ttf b/src/assets/fonts/computerfont-webfont.ttf new file mode 100644 index 0000000..fb2eb2a Binary files /dev/null and b/src/assets/fonts/computerfont-webfont.ttf differ diff --git a/src/assets/fonts/computerfont-webfont.woff b/src/assets/fonts/computerfont-webfont.woff new file mode 100644 index 0000000..8f132e4 Binary files /dev/null and b/src/assets/fonts/computerfont-webfont.woff differ diff --git a/src/assets/fonts/computerfont-webfont.woff2 b/src/assets/fonts/computerfont-webfont.woff2 new file mode 100644 index 0000000..2d078ea Binary files /dev/null and b/src/assets/fonts/computerfont-webfont.woff2 differ diff --git a/src/assets/fonts/font.css b/src/assets/fonts/font.css new file mode 100644 index 0000000..d40ffaa --- /dev/null +++ b/src/assets/fonts/font.css @@ -0,0 +1,10 @@ +@font-face { + font-family: 'computerfontregular'; + src: url('/assets/fonts/computerfont-webfont.eot'); + src: url('/assets/fonts/computerfont-webfont.eot?#iefix') format('embedded-opentype'), + url('/assets/fonts/computerfont-webfont.woff2') format('woff2'), + url('/assets/fonts/computerfont-webfont.woff') format('woff'), + url('/assets/fonts/computerfont-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} diff --git a/src/assets/images/scanline.svg b/src/assets/images/scanline.svg new file mode 100644 index 0000000..ad9c5ee --- /dev/null +++ b/src/assets/images/scanline.svg @@ -0,0 +1,17 @@ + + + + + + +image/svg+xml + + + + + + + + + + diff --git a/src/index.php b/src/index.php new file mode 100644 index 0000000..83e765e --- /dev/null +++ b/src/index.php @@ -0,0 +1,20 @@ + + + + + + FHQWHGADS + + + +
+ +
+ + + diff --git a/src/scripts/index.js b/src/scripts/index.js new file mode 100644 index 0000000..b8e78e7 --- /dev/null +++ b/src/scripts/index.js @@ -0,0 +1,15 @@ +(function(){ + function syncTyping() { + var beforeSelection, selection, afterSelection; + beforeSelection = this.value.slice(0, this.selectionStart); + selection = this.value.slice(this.selectionStart, this.selectionEnd) + afterSelection = this.value.slice(this.selectionEnd) + document.getElementById("typing").innerHTML = beforeSelection + (this.selectionStart == this.selectionEnd ? "" : "") + "" + selection + "" + afterSelection; + } + var commandline = document.getElementById("command"); + commandline.value = ""; + commandline.focus(); + commandline.onkeydown = syncTyping; + commandline.onkeyup = syncTyping; + commandline.onselect = syncTyping; +}()); diff --git a/src/site.less b/src/site.less new file mode 100644 index 0000000..408d9b7 --- /dev/null +++ b/src/site.less @@ -0,0 +1,2 @@ +@import 'assets/css/style.less'; +@import (inline) 'assets/fonts/font.css';