Upload CSS Creatures v2

bennettfeely · Oct 9, 2017 · 93e8633 · 93e8633
1 parent 79356a1
commit 93e8633
Show file tree

Hide file tree

Showing 45 changed files with 5,909 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+npm-debug.log
+.sass-cache
+.sass-cache/*
+search.php
diff --git a/creatures.min.js b/creatures.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,122 @@
+// Include plugins ===================================================================
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+var cssmin = require('gulp-cssmin');
+
+var slim = require("gulp-slim");
+var replacer = require('gulp-batch-replace');
+var htmlmin = require('gulp-htmlmin');
+var injectfile = require('gulp-inject-file');
+var markdown = require('gulp-markdown');
+
+var pump = require('pump');
+var uglify = require('gulp-uglify');
+
+var rename = require('gulp-rename');
+var browserSync = require('browser-sync');
+
+
+// Browser Sync ======================================================================
+gulp.task('sync', function() {
+  browserSync({
+    server: {
+      baseDir: ''
+    },
+  })
+});
+
+
+
+// Refresh ===========================================================================
+gulp.task('refresh', function() {
+  return gulp.src('*')
+    .pipe(browserSync.reload({
+      stream: true
+    }));
+});
+
+
+// Compile Markdown ==================================================================
+gulp.task('markdown', function() {
+  return gulp.src('src/*.md')
+    .pipe(markdown())
+    .pipe(rename('body.html'))
+    .pipe(gulp.dest(''));
+});
+
+
+// Compile HTML ======================================================================
+var attribute_fixer = [
+  ['autoplay=\"autoplay\"', 'autoplay'],
+  ['muted=\"muted\"', 'muted'],
+  ['async=\"async\"', 'async'],
+  ['loop=\"loop\"', 'loop']
+];
+
+gulp.task('html', function() {
+  return gulp.src('src/*.slim')
+    .pipe(slim({
+      pretty: true
+    }))
+    .pipe(replacer(attribute_fixer))
+    .pipe(htmlmin({
+      collapseWhitespace: true,
+      // collapseInlineTagWhitespace: true,
+      removeComments: true,
+      minifyCSS: true,
+      minifyJS: true
+    }))
+    .pipe(injectfile({
+      pattern: '<!--{\\s*inject:<filename>}-->'
+    }))
+    .pipe(gulp.dest(''))
+    .pipe(browserSync.reload({
+      stream: true
+    }));
+});
+
+
+// JS ================================================================================
+gulp.task('js', function (cb) {
+  pump([
+        gulp.src('src/*.js'),
+        uglify(),
+        gulp.dest('')
+    ],
+    cb
+  )
+  .pipe(rename('creatures.min.js'))
+  .pipe(gulp.dest(''))
+});
+
+
+// Compile CSS =======================================================================
+gulp.task('css', function() {
+  return gulp.src('src/*.scss')
+    .pipe(sass()).on('error', sass.logError)
+    .pipe(autoprefixer({
+      browsers: ['last 2 versions'],
+      cascade: false
+    }))
+    .pipe(rename('style.css'))
+    .pipe(cssmin())
+    .pipe(rename('style.min.css'))
+    .pipe(gulp.dest(''))
+    .pipe(browserSync.reload({
+      stream: true
+    }));
+});
+
+
+// Watch Files For Changes ===========================================================
+gulp.task('watch', ['sync'], function() {
+  gulp.watch('src/*.md', ['markdown', 'html']);
+  gulp.watch('src/*.slim', ['html']);
+  gulp.watch('src/*.js', ['js']);
+  gulp.watch('src/*.scss', ['css']);
+});
+
+
+// Default Task ======================================================================
+gulp.task('default', ['watch']);
diff --git a/img/android-chrome-192x192.png b/img/android-chrome-192x192.png
diff --git a/img/android-chrome-256x256.png b/img/android-chrome-256x256.png
diff --git a/img/apple-touch-icon.png b/img/apple-touch-icon.png
diff --git a/img/browserconfig.xml b/img/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#0e0b20</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/img/creatures.png b/img/creatures.png
diff --git a/img/favicon-16x16.png b/img/favicon-16x16.png
diff --git a/img/favicon-32x32.png b/img/favicon-32x32.png
diff --git a/img/favicon-large.png b/img/favicon-large.png
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/mod-camouflage.png b/img/mod-camouflage.png
diff --git a/img/mod-transparent.png b/img/mod-transparent.png
diff --git a/img/mstile-150x150.png b/img/mstile-150x150.png
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta content="ie=edge" http-equiv="x-ua-compatible"><meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport"><title>CSS Creatures</title><meta content="#283377" name="theme-color"><meta content="CSS Creatures" name="application-name"><meta content="See your own creature appear here by tweeting to @csscreatures!" name="description"><meta content="General" name="rating"><meta content="yes" name="mobile-web-app-capable"><link href="manifest.json" rel="manifest"><link href="license.txt" rel="license"><meta content="Bennett Feely" property="article:author"><meta content="See your own creature appear here by tweeting to @csscreatures!" property="og:description"><meta content="img/creatures.png" property="og:image"><meta content="en_US" property="og:locale"><meta content="CSS Creatures" property="og:site_name"><meta content="CSS Creatures" property="og:title"><meta content="website" property="og:type"><meta content="https://bennettfeely.com/csscreatures" property="og:url"><meta content="summary" name="twitter:card"><meta content="@bennettfeely" name="twitter:creator"><meta content="See your own creature appear here by tweeting to @csscreatures!" name="twitter:description"><meta content="img/creatures.png" name="twitter:image"><meta content="@csscreatures" name="twitter:site"><meta content="CSS Creatures" name="twitter:title"><meta content="https://bennettfeely.com/csscreatures" name="twitter:url"><link href="img/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"><link href="img/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png"><link href="img/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png"><link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"><link href="style.min.css" rel="stylesheet"><meta content="webkit" name="renderer"></head><body><header><div class="container"><div class="content"><a class="logo" href="https://bennettfeely.com/csscreatures">CSS Creatures</a><div class="directions-toggle"><span>Make your own</span><svg class="close" height="16" preserveAspectRatio="xMaxYMid" viewBox="0 0 16 16" width="16"><path d="M 5 5, L 11 11, M 11 5, L 5 11"></path></svg></div></div><div class="directions-box"><div class="container"><h2 class="instructions">Create your CSS Creature by tweeting to <span class="handle-highlight">@csscreatures</span>. You can customize <span class="color-highlight">color</span>, <span class="personality-highlight">personality</span>, and <span class="more-highlight">more</span>!</h2></div><div class="examples"><h3>Examples:</h3><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="personality-highlight">happy</span> <span class="more-highlight">teeth</span> <span class="color-highlight">turquoise</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="color-highlight">#db2</span> <span class="more-highlight">tiny</span> <span class="personality-highlight">hungry</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="more-highlight">moustache</span> <span class="color-highlight">lightblue</span> <span class="more-highlight">tooth</span> <span class="more-highlight">winking</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div><div class="example-tweet"><span><span class="handle-highlight">@csscreatures</span> <span class="more-highlight">cyclops</span> <span class="color-highlight">#62822B</span> <span class="more-highlight">teeth</span></span><svg class="twitter-logo" height="10" viewBox="0 0 400 400" width="10" xmlns="http://www.w3.org/2000/svg"><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg></div></div><div class="container"><h3>Creatures take roughly 15-30 seconds to cook. Refresh this page and you'll see your creature here soon.</h3></div></div></div></header><main><div class="container"><div class="creatures"></div></div></main><footer><div class="container"><h2>CSS Creatures are generated from 100% all-natural HTML and fresh-squeezed CSS.</h2><div class="directions-toggle"><span>Make your own</span></div><h2>Brought to you by <a href="https://twitter.com/bennettfeely">@bennettfeely</a>. Find this project on <a href="https://github.com/bennettfeely">GitHub</a>.</h2></div></footer></body><script src="creatures.min.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-35724550-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-35724550-1")</script></html>