bubbling-ale 0.0.3

data/_sass/rouge-github.scss

@@ -0,0 +1,209 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight .cm {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cp {
+  color: #999999;
+  font-weight: bold;
+}
+.highlight .c1 {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .cs {
+  color: #999999;
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .c, .highlight .cd {
+  color: #999988;
+  font-style: italic;
+}
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2;
+}
+.highlight .gd {
+  color: #000000;
+  background-color: #ffdddd;
+}
+.highlight .ge {
+  color: #000000;
+  font-style: italic;
+}
+.highlight .gr {
+  color: #aa0000;
+}
+.highlight .gh {
+  color: #999999;
+}
+.highlight .gi {
+  color: #000000;
+  background-color: #ddffdd;
+}
+.highlight .go {
+  color: #888888;
+}
+.highlight .gp {
+  color: #555555;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #aaaaaa;
+}
+.highlight .gt {
+  color: #aa0000;
+}
+.highlight .kc {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kd {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kn {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kp {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kr {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .kt {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kv {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .mf {
+  color: #009999;
+}
+.highlight .mh {
+  color: #009999;
+}
+.highlight .il {
+  color: #009999;
+}
+.highlight .mi {
+  color: #009999;
+}
+.highlight .mo {
+  color: #009999;
+}
+.highlight .m, .highlight .mb, .highlight .mx {
+  color: #009999;
+}
+.highlight .sb {
+  color: #d14;
+}
+.highlight .sc {
+  color: #d14;
+}
+.highlight .sd {
+  color: #d14;
+}
+.highlight .s2 {
+  color: #d14;
+}
+.highlight .se {
+  color: #d14;
+}
+.highlight .sh {
+  color: #d14;
+}
+.highlight .si {
+  color: #d14;
+}
+.highlight .sx {
+  color: #d14;
+}
+.highlight .sr {
+  color: #009926;
+}
+.highlight .s1 {
+  color: #d14;
+}
+.highlight .ss {
+  color: #990073;
+}
+.highlight .s {
+  color: #d14;
+}
+.highlight .na {
+  color: #008080;
+}
+.highlight .bp {
+  color: #999999;
+}
+.highlight .nb {
+  color: #0086B3;
+}
+.highlight .nc {
+  color: #445588;
+  font-weight: bold;
+}
+.highlight .no {
+  color: #008080;
+}
+.highlight .nd {
+  color: #3c5d5d;
+  font-weight: bold;
+}
+.highlight .ni {
+  color: #800080;
+}
+.highlight .ne {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nf {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nl {
+  color: #990000;
+  font-weight: bold;
+}
+.highlight .nn {
+  color: #555555;
+}
+.highlight .nt {
+  color: #000080;
+}
+.highlight .vc {
+  color: #008080;
+}
+.highlight .vg {
+  color: #008080;
+}
+.highlight .vi {
+  color: #008080;
+}
+.highlight .nv {
+  color: #008080;
+}
+.highlight .ow {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .o {
+  color: #000000;
+  font-weight: bold;
+}
+.highlight .w {
+  color: #bbbbbb;
+}
+.highlight {
+  background-color: #f8f8f8;
+}

data/_sass/variables.scss

@@ -0,0 +1,36 @@
+// Colors
+$color-cream-ale: #ffec99;
+$color-california-common: #f28b00;
+$color-thunder: #4c4c4c;
+$color-grain: #7A5624;
+$color-grain-transparent: rgba($color-grain, 0.2);
+$color-grain-light: lighten(desaturate($color-grain, 35%), 10%);
+
+// Breakpoints
+$large-breakpoint: 64em !default;
+$medium-breakpoint: 42em !default;
+
+// Headers
+$header-heading-color: $color-thunder !default;
+$header-bg-color: $color-cream-ale;
+$header-bg-color-secondary: $color-california-common !default;
+
+// Text
+$section-headings-color: $color-california-common !default;
+$body-text-color: $color-thunder !default;
+$body-link-color-hover: lighten($color-grain, 20%);
+$body-link-color: $color-grain !default;
+$blockquote-text-color: $color-grain-light !default;
+$blockquote-bar-color: $color-grain !default;
+
+// Code
+$code-bg-color: $color-grain-transparent !default;
+$code-text-color: $color-grain;
+
+// Borders
+$border-color: darken($color-grain, 20%) !default;
+$table-border-color: #e9ebec !default;
+$hr-border-color: $color-grain-transparent !default;
+
+// Gradients
+$beer: linear-gradient($color-cream-ale, $color-california-common);

data/assets/css/style.scss

@@ -0,0 +1,4 @@
+---
+---
+
+@import 'bubbling-ale';

data/assets/javascripts/bubbler.js

@@ -0,0 +1,122 @@
+function createBubble(parent) {
+  let size = getRandomBubbleSize();
+  let leftPos = getRandomBubbleLeftPosition(parent);
+  let bubbleElement = document.createElement('div');
+  bubbleElement.style.height = `${size}px`;
+  bubbleElement.style.width = `${size}px`;
+  bubbleElement.style.position = 'absolute';
+  bubbleElement.style.border = '1px solid rgba(255, 255, 255, 0.3)';
+  bubbleElement.style.borderRadius = '50%';
+  bubbleElement.style.left = `${leftPos}px`;
+  bubbleElement.style.bottom = '0px';
+  bubbleElement.style.zIndex = '1';
+
+  parent.appendChild(bubbleElement);
+
+  return {
+    element: bubbleElement,
+    position: 0,
+    speed: getRandomBubbleSpeed(),
+    maxPosition: Math.floor(parent.getBoundingClientRect().height + 10)
+  }
+}
+
+function getMaxBubblesForContainer(container) {
+  // We want a distribution of about 0.25 bubbles/sqpx
+  let sqpx = container.getBoundingClientRect().width
+    * container.getBoundingClientRect.height;
+
+  return Math.floor(0.25 * sqpx);
+}
+
+// Will return a random speed, in px/second, between 10 and 50
+function getRandomBubbleSpeed() {
+  return Math.floor((Math.random() * 40) + 10);
+}
+
+// Will return a random size, in px, between 4px and 15px
+function getRandomBubbleSize() {
+  return Math.floor(Math.random() * 11 + 4);
+}
+
+function getRandomBubbleLeftPosition(parent) {
+  // the left position must be between 1 and the max container width - 1
+  let maxContainerWidth = parent.getBoundingClientRect().width;
+
+  let leftPos = Math.floor((Math.random() * (maxContainerWidth - 1) + 1));
+  return leftPos;
+}
+
+function carbonate(element) {
+  let bubbles;
+  if (window.bubbler) {
+    bubbles = window.bubbler.bubbles;
+  } else {
+    bubbles = [];
+    window.bubbler = {};
+  }
+
+  bubbles.push(createBubble(element));
+
+  window.bubbler.bubbles = bubbles;
+  if (!window.bubbler.carbonatedElements) {
+    window.bubbler.carbonatedElements = [];
+  }
+
+  window.bubbler.carbonatedElements.push(element);
+
+  window.requestAnimationFrame(updateBubblePositions);
+}
+
+function updateBubblePositions(timestamp) {
+  if (window.bubbler.lastUpdateTime) {
+    let elapsed = timestamp - window.bubbler.lastUpdateTime;
+    let bubbles = window.bubbler.bubbles;
+    let updatedBubbles = [];
+    for (let bubbleIdx in bubbles) {
+      let bubble = bubbles[bubbleIdx];
+      let newPosition = bubble.position + ((bubble.speed / 1000.0) * elapsed);
+      bubble.position = newPosition;
+
+      if (bubble.position > bubble.maxPosition) {
+        bubble.element.parentNode.removeChild(bubble.element);
+      } else {
+        bubble.element.style.transform = `translateY(-${bubble.position}px)`;
+        updatedBubbles.push(bubble);
+      }
+    }
+
+    // Randomly create between 1 and 5 bubbles PER carbonated element, depending
+    // on bubbleChance
+    let carbonatedParents = window.bubbler.carbonatedElements;
+    for (let carbonatedContainerIdx in carbonatedParents) {
+      let carbonationContainer = carbonatedParents[carbonatedContainerIdx];
+
+      // There is a sliding scale determining how many bubbles will be created.
+      let numBubbles = window.bubbler.bubbles.length;
+      let bubbleChance;
+      if (numBubbles < 20) {
+        // if there are less than 20 bubbles in the view, there is a 100% chance
+        // that bubbles will be created
+        bubbleChance = 1.0;
+      } else if (numBubbles >= getMaxBubblesForContainer(carbonationContainer)) {
+        // if there are >= our max distribution of bubbles in the view, there
+        // is a 0% chance of new bubble creation.
+        bubbleChance = 0.0;
+      } else {
+        // there is a 50% chance of bubble creation
+        bubbleChance = 0.5;
+      }
+
+      let numBubblesToCreate = Math.floor(bubbleChance * (Math.random() * 5 + 1));
+      for (let i = 0; i < numBubblesToCreate; i++) {
+        updatedBubbles.push(createBubble(carbonationContainer));
+      }
+    }
+
+    window.bubbler.bubbles = updatedBubbles;
+  }
+
+  window.bubbler.lastUpdateTime = timestamp;
+  window.requestAnimationFrame(updateBubblePositions);
+}

metadata

@@ -0,0 +1,128 @@
+--- !ruby/object:Gem::Specification
+name: bubbling-ale
+version: !ruby/object:Gem::Version
+  version: 0.0.3
+platform: ruby
+authors:
+- Scott Johnson
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2020-10-18 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '3.5'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">"
+      - !ruby/object:Gem::Version
+        version: '3.5'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: html-proofer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.50'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.50'
+- !ruby/object:Gem::Dependency
+  name: w3c_validators
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+description: 
+email:
+- jaywir3@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- _layouts/default.html
+- _sass/bubbling-ale.scss
+- _sass/normalize.scss
+- _sass/rouge-github.scss
+- _sass/variables.scss
+- assets/css/style.scss
+- assets/javascripts/bubbler.js
+homepage: https://github.com/foamfactory/bubbling-ale
+licenses:
+- CC0-1.0
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.8
+signing_key: 
+specification_version: 4
+summary: Bubbling Ale is a Jekyll theme, designed specifically for Github Pages
+test_files: []