From b870471ecc8cca68a436e5b225765e39c7567629 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sat, 2 Apr 2016 17:38:31 -0400 Subject: [PATCH] Everything init --- css/main.css | 493 +++++++++++++++++++++++++++++++++++++++ css/normalize.css | 425 +++++++++++++++++++++++++++++++++ home.html | 60 +++++ index.html | 56 +++++ js/AnimationFrame.min.js | 8 + js/stuff.js | 217 +++++++++++++++++ 6 files changed, 1259 insertions(+) create mode 100755 css/main.css create mode 100644 css/normalize.css create mode 100644 home.html create mode 100644 index.html create mode 100644 js/AnimationFrame.min.js create mode 100644 js/stuff.js diff --git a/css/main.css b/css/main.css new file mode 100755 index 0000000..dfd4821 --- /dev/null +++ b/css/main.css @@ -0,0 +1,493 @@ +/*****************************************************************************/ +/* +/* Common +/* +/*****************************************************************************/ + +/* Box sizing. Courtesy of Paul Irish + * (http://www.paulirish.com/2012/box-sizing-border-box-ftw/) */ +*, *:before, *:after { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html { + width: 100%; + height: 100%; + background: whitesmoke; +} + +body { + font-family: 'Open Sans', Arial, sans-serif; + font-style: normal; + font-weight: 400; + color: #444; +} + +h2 { + font-weight: 300; +} + +hr { + width: 75%; +} + +a { + color:FireBrick; + text-decoration: none; +} + +p { + margin: 0 0 10px; +} + +a:visited { + color:#855C85; +} + +a:hover { + color:FireBrick; + text-decoration: underline; +} + +canvas { + position: fixed; + top: 0; + left: 0; +} + +blockquote { + margin-left: 20px; + margin-right: 20px; + padding-left: 1rem; + border-left: solid 3px #aaa; +} + +blockquote p { + margin-bottom: 6px; +} + +@font-face { + font-family: 'dejavu_sans_monobook'; + src: url('DejaVuSansMono-webfont.eot'); + src: url('DejaVuSansMono-webfont.eot?#iefix') format('embedded-opentype'), + url('DejaVuSansMono-webfont.woff') format('woff'), + url('DejaVuSansMono-webfont.ttf') format('truetype'), + url('DejaVuSansMono-webfont.svg#dejavu_sans_monobook') format('svg'); + font-weight: normal; + font-style: normal; +} + +/*****************************************************************************/ +/* +/* Grid +/* +/*****************************************************************************/ + +/* Grid. Courtesy of Adam Kaplan (http://www.adamkaplan.me/grid/) */ +.container { + margin: 0 auto; + max-width: 48rem; + width: 90%; +} + +@media (min-width: 40rem) { + .column { + float: left; + padding-left: 1rem; + padding-right: 1rem; + } + + .column.full { width: 100%; } + .column.two-thirds { width: 66.7%; } + .column.half { width: 50%; } + .column.third { width: 33.3%; } + .column.fourth { width: 25%; } + .column.three-fourths { width: 75%; } + .column.flow-opposite { float: right; } +} + +.clearfix:before, +.clearfix:after { + content: " "; + display: table; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + *zoom: 1; +} + +@media (min-width: 40rem) { + .column.flow-opposite { float: right; } +} + +/* More suggestions from Jorden Lev (http://jordanlev.github.io/grid/) */ +@-webkit-viewport {width: device-width;} +@-moz-viewport {width: device-width;} +@-ms-viewport {width: device-width;} +@-o-viewport {width: device-width;} +@viewport {width: device-width;} + +img { width: auto; max-width: 100%; height: auto; } + +/* Credit http://avexdesigns.com/responsive-youtube-embed/#sthash.Q9VzxV8M.dpuf + * for this responsive video embed css */ +.video-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; height: 0; overflow: hidden; +} + +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding-bottom: 5px; +} + +/* By me */ +.hide-mobile { + display: none; +} +.hide-desktop-inline-block { display: inline-block } +.hide-desktop-block { display: block } +.hide-desktop-inline { display: inline } + +@media (min-width: 40rem) { + .hide-desktop { display: none } + .hide-mobile-inline-block { display: inline-block } + .hide-mobile-block { display: block } + .hide-mobile-inline { display: inline } +} + +/*****************************************************************************/ +/* +/* Blog +/* +/*****************************************************************************/ + +h1.title { + display: inline-block; + padding-right: 10px; + font-size: 2rem; + font-weight: 200; + margin: 0; +} + +div.header { + margin: 20px 0 20px; + text-align: center; +} + +@media (min-width: 40rem) { + div.header { + text-align: start; + } +} + +div.header a { + color: FireBrick; +} + +span.timestamp { + font-size: 0.85rem; + margin-top: 7px; +} + +@media (min-width: 40rem) { + span.timestamp { + float: right; + } +} + +.post-header { + padding-bottom: 10px; +} + +a.read-more { + float: right; + font-size: 0.85rem; +} + +h2.post-title { + margin-top: 0; + margin-bottom: 0; +} + +@media (min-width: 40rem) { + p.contact-links { + float: right; + } +} + +.contact { + text-align: center; + padding-bottom: 10px; +} + +div.more-row { + padding-top: 5px; +} + +div.pagination { + text-align: center; + margin-bottom: 10px; +} + +div.rss { + text-align: center; +} + +a.rss img { + max-width: 16px; + max-height: 16px; + margin: 0.5rem 0; +} + +/*****************************************************************************/ +/* +/* Posts +/* +/*****************************************************************************/ + +/* standard */ +.post pre { + border: 1px solid #ddd; + background-color: #eef; + padding: 0 .4em; + white-space: pre; +} + +@media (min-width: 40rem) { + .post pre { + white-space: pre-wrap; + } +} + +.post ul, .post ol { + margin-left: 0; + padding-left: 20px; +} + +@media (min-width: 40rem) { + .post ul, .post ol { + margin-left: 0.5em; + padding-left: 40px; + } +} + +.post code { + border: 1px solid #ddd; + background-color: #eef; + padding: 0 .2em; + font-size: 8pt; + font-family: 'dejavu_sans_monobook', Courier, monospace; +} + +@media (min-width: 40rem) { + .post code { + font-size: 10pt; + } +} + +.post pre code { + border: none; + padding: 0; +} + +/* terminal */ +.post pre.terminal { + border: 1px solid #000; + background-color: #333; + color: #FFF; +} + +.post pre.terminal code { + background-color: #333; +} + +.post img.half-left { + float: none; + width: 100%; +} + +.post img.half-right { + float: none; + width: 100%; +} + +@media (min-width: 40rem) { + .post img.half-left { + float: left; + width: 49%; + margin-bottom: 10px; + } + .post img.half-right { + float: right; + width: 49%; + margin-bottom: 10px; + } +} + +/*****************************************************************************/ +/* +/* Homepage +/* +/*****************************************************************************/ + +#home { + display: block; + position: relative; + padding-top: 1.5rem; +} + +/* credit to http://codepen.io/bennettfeely/pen/Ftczh for a lot of this css */ + +.card { + position: relative; + z-index: 2; + padding: 1rem; + box-shadow: 0 1px 2px #aaa; + background: white; + margin: 0 0.5rem 1rem; + border-radius: 3px; + user-select: none; +} + +h1.big-name { + font-size: 2rem; + font-weight: 200; + margin-top: 0; + text-align: center; +} + +#front-quote , #front-quote, .profile-card-desc p { + margin-top: 0; + margin-bottom: 0; +} + +.profile-card-portrait { + width: 100%; + margin-bottom: 1.5rem; +} + +.profile-card-quote { + margin-top: 1.5rem; +} + +.profile-card-portrait img { + margin: 0 auto; + display: block; +} + +.profile-card-desc { + margin-top: 1.25rem; +} + +@media (min-width: 40rem) { + .profile-card-portrait { + margin-bottom: 0; + } + .profile-card-links { + margin-top: 0; + } +} + +.link-card { + text-align: center; + text-decoration: none; +} + +.link-card img { + max-width: 64px; + max-height: 64px; +} + +.mobile-half { + padding: 0; + float: left; + width: 50%; +} + +@media (min-width: 40rem) { + .mobile-half { + padding: 0; + } +} + +a.no-decoration { + color: #444; + display: block; +} + +a.no-decoration:visited { + color: #444; +} + +a.no-decoration:hover { + color: #444; + text-decoration: none; +} + +/*****************************************************************************/ +/* +/* Magic +/* +/*****************************************************************************/ + +div.controls-tab button { + width: 28px; + height: 28px; +} + +div.options-panel { + position: fixed; + bottom: 0; + left: 0; + padding: 10px; + width: 100%; + z-index: 10; + height: auto; + background-color: rgba(140,120,100,0.75); + color: white; +} + +div.controls-tab { + position: relative; +} + +div.controls { + position: absolute; + top: -2.6rem; + right: 1rem; + height: 2rem; + padding-right: 5px; + padding-left: 5px; + background-color: rgba(140,120,100,0.75); +} + +div.controls button { + padding: 0.25rem; + margin-top: 0.25rem; + background-color: rgb(100, 100, 100); + border: 1px grey solid; + color: white; + font-size: small; +} + +div.options-panel form { + text-align: center +} + +div.options-panel form label { + display: block; +} diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..08f8950 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,425 @@ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/home.html b/home.html new file mode 100644 index 0000000..081652c --- /dev/null +++ b/home.html @@ -0,0 +1,60 @@ + + + + + + UI Stuff + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..a49f4f0 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ + + + + + + Stuff + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/js/AnimationFrame.min.js b/js/AnimationFrame.min.js new file mode 100644 index 0000000..db09a24 --- /dev/null +++ b/js/AnimationFrame.min.js @@ -0,0 +1,8 @@ +/** + * An even better animation frame. + * + * @copyright Oleg Slobodskoi 2013 + * @website https://github.com/kof/animationFrame + * @license MIT + */ +(function(window){"use strict";var nativeRequestAnimationFrame,nativeCancelAnimationFrame;(function(){var i,vendors=["webkit","moz","ms","o"],top;try{window.top.name;top=window.top}catch(e){top=window}nativeRequestAnimationFrame=top.requestAnimationFrame;nativeCancelAnimationFrame=top.cancelAnimationFrame||top.cancelRequestAnimationFrame;for(i=0;i= value) { + ordered_array.splice(i, 0, to_insert); + return; + } + } + ordered_array.push(to_insert); +}; + +Stuff.prototype.lineToNearestPoints = function(context, ordered_array) { + for (i = 0; i < ordered_array.length; i++) { + point = ordered_array[i]; + context.beginPath(); + context.strokeStyle = 'black'; + context.moveTo(point.x, point.y); + if (i !== 0) { + point_before = ordered_array[i-1]; + context.lineTo(point_before.x, point_before.y); + } + context.moveTo(point.x, point.y); + if (i !== (ordered_array.length - 1)) { + point_after = ordered_array[i+1]; + context.lineTo(point_after.x, point_after.y); + } + context.stroke(); + context.closePath(); + } +}; + +Stuff.prototype.initPoints = function(width, height, num_points) { + this.points = []; + for (i = 0; i < num_points; i++) { + random_x = Math.floor(Math.random() * (width + 1)); + random_y = Math.floor(Math.random() * (height + 1)); + point = {'x': random_x, 'y': random_y}; + this.points.push(point); + } +}; + +Stuff.prototype.distance = function(point1, point2) { + return Math.sqrt(Math.pow((point1.x - point2.x), 2) + Math.pow((point1.y - point2.y), 2)); +}; + +Stuff.prototype.drawPolygon = function(context) { + for (i = 0; i < this.points.length; i++) { + if (this.converge_point) { + if (this.points[i].x >= this.converge_point.x) { + this.points[i].x = this.points[i].x - 3; + } else { + this.points[i].x = this.points[i].x + 3; + } + if (this.points[i].y >= this.converge_point.y) { + this.points[i].y = this.points[i].y - 3; + } else { + this.points[i].y = this.points[i].y + 3; + } + } else if (this.counter % 10 === 0) { + if (Math.random() < 0.5) { + this.points[i].y = this.points[i].y - 10; + } else { + this.points[i].y = this.points[i].y + 10; + } + } else if ((this.mouse_position) && (this.distance(this.mouse_position, this.points[i]) < 50)) { + if (this.points[i].x >= this.mouse_position.x) { + this.points[i].x = this.points[i].x + 3; + } else { + this.points[i].x = this.points[i].x - 3; + } + if (this.points[i].y >= this.mouse_position.y) { + this.points[i].y = this.points[i].y + 3; + } else { + this.points[i].y = this.points[i].y - 3; + } + } else { + this.points[i].x = this.points[i].x + this.getRandomInRange(0, 2, true); + this.points[i].y = this.points[i].y + this.getRandomInRange(0, 2, true); + } + // this.x_sorted = []; + // this.y_sorted = []; + // this.sortedInsert(this.x_sorted, this.points[i].x, point); + // this.sortedInsert(this.y_sorted, this.points[i].y, point); + + context.beginPath(); + context.strokeStyle = 'black'; + context.arc(this.points[i].x, this.points[i].y, 1, 0, 2*Math.PI); + context.stroke(); + context.closePath(); + } + + this.converge_point = null; + // this.lineToNearestPoints(context, this.x_sorted); + // this.lineToNearestPoints(context, this.y_sorted); +}; + +/* Most of this funtion is provided by Maissan Inc. in their tutorial: + http://www.maissan.net/articles/simulating-vines */ + Stuff.prototype.drawThing = function(context, sort, prune, chain) { + var AnimationFrame = window.AnimationFrame; + AnimationFrame.shim(); + var animationFrame = new AnimationFrame(30), + timeCounter = 0, + color, + gradient; + context.lineWidth = 0.5; + + var self = this; + function animate(time) { + // resize canvas if document size changed + dimensions = self.getDocumentDimensions(); + if ((dimensions.height !== self.canvas.height) || + (dimensions.width !== self.canvas.width)) { + self.canvas.height = dimensions.height; + self.canvas.width = dimensions.width; + } + if (self.points === undefined) { + self.initPoints(self.canvas.width, self.canvas.height, 5000); + } + + if (!self.paused) { + self.clear(); + self.drawPolygon(context); + self.counter = self.counter + 1; + } + frameId = animationFrame.request(animate); + } + + // Drawing interval + var frameId = animationFrame.request(animate); + return frameId; +}; + +Stuff.prototype.canvasClickHandler = function(event) { + var x = event.pageX; + var y = event.pageY; + this.converge_point = {'x': x, 'y': y}; + color = this.pickRandomColor(); + this.canvas.style.backgroundColor = "rgb(" + color.r + "," + color.g + "," + color.b + ")"; +}; + +Stuff.prototype.canvasMouseMoveHandler = function(event) { + var x = event.pageX; + var y = event.pageY; + this.mouse_position = {'x': x, 'y': y}; +}; + +Stuff.prototype.draw = function() { + var interval_time = 2000; + + // Initialize canvas + var dimensions = this.getDocumentDimensions(); + this.canvas.height = dimensions.height; + this.canvas.width = dimensions.width; + + // Check for canvas support, bind click event, and get context + if (this.canvas.getContext){ + var self = this; + this.canvas.addEventListener("click", function () { self.canvasClickHandler.apply(self, arguments); }); + this.canvas.addEventListener("mousemove", function () { self.canvasMouseMoveHandler.apply(self, arguments); }); + + this.context = this.canvas.getContext("2d"); + + // Draw stuff + var frameId = this.drawThing(this.context, false, true, true); + } +};