bubbling-ale 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +373 -0
  3. data/README.md +112 -0
  4. data/_layouts/default.html +56 -0
  5. data/_sass/bubbling-ale.scss +389 -0
  6. data/_sass/normalize.scss +424 -0
  7. data/_sass/rouge-github.scss +209 -0
  8. data/_sass/variables.scss +36 -0
  9. data/assets/css/style.scss +4 -0
  10. data/assets/javascripts/bubbler.js +122 -0
  11. metadata +128 -0
data/_sass/rouge-github.scss ADDED
@@ -0,0 +1,209 @@
1
+ .highlight table td { padding: 5px; }
2
+ .highlight table pre { margin: 0; }
3
+ .highlight .cm {
4
+ color: #999988;
5
+ font-style: italic;
6
+ }
7
+ .highlight .cp {
8
+ color: #999999;
9
+ font-weight: bold;
10
+ }
11
+ .highlight .c1 {
12
+ color: #999988;
13
+ font-style: italic;
14
+ }
15
+ .highlight .cs {
16
+ color: #999999;
17
+ font-weight: bold;
18
+ font-style: italic;
19
+ }
20
+ .highlight .c, .highlight .cd {
21
+ color: #999988;
22
+ font-style: italic;
23
+ }
24
+ .highlight .err {
25
+ color: #a61717;
26
+ background-color: #e3d2d2;
27
+ }
28
+ .highlight .gd {
29
+ color: #000000;
30
+ background-color: #ffdddd;
31
+ }
32
+ .highlight .ge {
33
+ color: #000000;
34
+ font-style: italic;
35
+ }
36
+ .highlight .gr {
37
+ color: #aa0000;
38
+ }
39
+ .highlight .gh {
40
+ color: #999999;
41
+ }
42
+ .highlight .gi {
43
+ color: #000000;
44
+ background-color: #ddffdd;
45
+ }
46
+ .highlight .go {
47
+ color: #888888;
48
+ }
49
+ .highlight .gp {
50
+ color: #555555;
51
+ }
52
+ .highlight .gs {
53
+ font-weight: bold;
54
+ }
55
+ .highlight .gu {
56
+ color: #aaaaaa;
57
+ }
58
+ .highlight .gt {
59
+ color: #aa0000;
60
+ }
61
+ .highlight .kc {
62
+ color: #000000;
63
+ font-weight: bold;
64
+ }
65
+ .highlight .kd {
66
+ color: #000000;
67
+ font-weight: bold;
68
+ }
69
+ .highlight .kn {
70
+ color: #000000;
71
+ font-weight: bold;
72
+ }
73
+ .highlight .kp {
74
+ color: #000000;
75
+ font-weight: bold;
76
+ }
77
+ .highlight .kr {
78
+ color: #000000;
79
+ font-weight: bold;
80
+ }
81
+ .highlight .kt {
82
+ color: #445588;
83
+ font-weight: bold;
84
+ }
85
+ .highlight .k, .highlight .kv {
86
+ color: #000000;
87
+ font-weight: bold;
88
+ }
89
+ .highlight .mf {
90
+ color: #009999;
91
+ }
92
+ .highlight .mh {
93
+ color: #009999;
94
+ }
95
+ .highlight .il {
96
+ color: #009999;
97
+ }
98
+ .highlight .mi {
99
+ color: #009999;
100
+ }
101
+ .highlight .mo {
102
+ color: #009999;
103
+ }
104
+ .highlight .m, .highlight .mb, .highlight .mx {
105
+ color: #009999;
106
+ }
107
+ .highlight .sb {
108
+ color: #d14;
109
+ }
110
+ .highlight .sc {
111
+ color: #d14;
112
+ }
113
+ .highlight .sd {
114
+ color: #d14;
115
+ }
116
+ .highlight .s2 {
117
+ color: #d14;
118
+ }
119
+ .highlight .se {
120
+ color: #d14;
121
+ }
122
+ .highlight .sh {
123
+ color: #d14;
124
+ }
125
+ .highlight .si {
126
+ color: #d14;
127
+ }
128
+ .highlight .sx {
129
+ color: #d14;
130
+ }
131
+ .highlight .sr {
132
+ color: #009926;
133
+ }
134
+ .highlight .s1 {
135
+ color: #d14;
136
+ }
137
+ .highlight .ss {
138
+ color: #990073;
139
+ }
140
+ .highlight .s {
141
+ color: #d14;
142
+ }
143
+ .highlight .na {
144
+ color: #008080;
145
+ }
146
+ .highlight .bp {
147
+ color: #999999;
148
+ }
149
+ .highlight .nb {
150
+ color: #0086B3;
151
+ }
152
+ .highlight .nc {
153
+ color: #445588;
154
+ font-weight: bold;
155
+ }
156
+ .highlight .no {
157
+ color: #008080;
158
+ }
159
+ .highlight .nd {
160
+ color: #3c5d5d;
161
+ font-weight: bold;
162
+ }
163
+ .highlight .ni {
164
+ color: #800080;
165
+ }
166
+ .highlight .ne {
167
+ color: #990000;
168
+ font-weight: bold;
169
+ }
170
+ .highlight .nf {
171
+ color: #990000;
172
+ font-weight: bold;
173
+ }
174
+ .highlight .nl {
175
+ color: #990000;
176
+ font-weight: bold;
177
+ }
178
+ .highlight .nn {
179
+ color: #555555;
180
+ }
181
+ .highlight .nt {
182
+ color: #000080;
183
+ }
184
+ .highlight .vc {
185
+ color: #008080;
186
+ }
187
+ .highlight .vg {
188
+ color: #008080;
189
+ }
190
+ .highlight .vi {
191
+ color: #008080;
192
+ }
193
+ .highlight .nv {
194
+ color: #008080;
195
+ }
196
+ .highlight .ow {
197
+ color: #000000;
198
+ font-weight: bold;
199
+ }
200
+ .highlight .o {
201
+ color: #000000;
202
+ font-weight: bold;
203
+ }
204
+ .highlight .w {
205
+ color: #bbbbbb;
206
+ }
207
+ .highlight {
208
+ background-color: #f8f8f8;
209
+ }
data/_sass/variables.scss ADDED
@@ -0,0 +1,36 @@
1
+ // Colors
2
+ $color-cream-ale: #ffec99;
3
+ $color-california-common: #f28b00;
4
+ $color-thunder: #4c4c4c;
5
+ $color-grain: #7A5624;
6
+ $color-grain-transparent: rgba($color-grain, 0.2);
7
+ $color-grain-light: lighten(desaturate($color-grain, 35%), 10%);
8
+
9
+ // Breakpoints
10
+ $large-breakpoint: 64em !default;
11
+ $medium-breakpoint: 42em !default;
12
+
13
+ // Headers
14
+ $header-heading-color: $color-thunder !default;
15
+ $header-bg-color: $color-cream-ale;
16
+ $header-bg-color-secondary: $color-california-common !default;
17
+
18
+ // Text
19
+ $section-headings-color: $color-california-common !default;
20
+ $body-text-color: $color-thunder !default;
21
+ $body-link-color-hover: lighten($color-grain, 20%);
22
+ $body-link-color: $color-grain !default;
23
+ $blockquote-text-color: $color-grain-light !default;
24
+ $blockquote-bar-color: $color-grain !default;
25
+
26
+ // Code
27
+ $code-bg-color: $color-grain-transparent !default;
28
+ $code-text-color: $color-grain;
29
+
30
+ // Borders
31
+ $border-color: darken($color-grain, 20%) !default;
32
+ $table-border-color: #e9ebec !default;
33
+ $hr-border-color: $color-grain-transparent !default;
34
+
35
+ // Gradients
36
+ $beer: linear-gradient($color-cream-ale, $color-california-common);
data/assets/css/style.scss ADDED
@@ -0,0 +1,4 @@
1
+ ---
2
+ ---
3
+
4
+ @import 'bubbling-ale';
data/assets/javascripts/bubbler.js ADDED
@@ -0,0 +1,122 @@
1
+ function createBubble(parent) {
2
+ let size = getRandomBubbleSize();
3
+ let leftPos = getRandomBubbleLeftPosition(parent);
4
+ let bubbleElement = document.createElement('div');
5
+ bubbleElement.style.height = `${size}px`;
6
+ bubbleElement.style.width = `${size}px`;
7
+ bubbleElement.style.position = 'absolute';
8
+ bubbleElement.style.border = '1px solid rgba(255, 255, 255, 0.3)';
9
+ bubbleElement.style.borderRadius = '50%';
10
+ bubbleElement.style.left = `${leftPos}px`;
11
+ bubbleElement.style.bottom = '0px';
12
+ bubbleElement.style.zIndex = '1';
13
+
14
+ parent.appendChild(bubbleElement);
15
+
16
+ return {
17
+ element: bubbleElement,
18
+ position: 0,
19
+ speed: getRandomBubbleSpeed(),
20
+ maxPosition: Math.floor(parent.getBoundingClientRect().height + 10)
21
+ }
22
+ }
23
+
24
+ function getMaxBubblesForContainer(container) {
25
+ // We want a distribution of about 0.25 bubbles/sqpx
26
+ let sqpx = container.getBoundingClientRect().width
27
+ * container.getBoundingClientRect.height;
28
+
29
+ return Math.floor(0.25 * sqpx);
30
+ }
31
+
32
+ // Will return a random speed, in px/second, between 10 and 50
33
+ function getRandomBubbleSpeed() {
34
+ return Math.floor((Math.random() * 40) + 10);
35
+ }
36
+
37
+ // Will return a random size, in px, between 4px and 15px
38
+ function getRandomBubbleSize() {
39
+ return Math.floor(Math.random() * 11 + 4);
40
+ }
41
+
42
+ function getRandomBubbleLeftPosition(parent) {
43
+ // the left position must be between 1 and the max container width - 1
44
+ let maxContainerWidth = parent.getBoundingClientRect().width;
45
+
46
+ let leftPos = Math.floor((Math.random() * (maxContainerWidth - 1) + 1));
47
+ return leftPos;
48
+ }
49
+
50
+ function carbonate(element) {
51
+ let bubbles;
52
+ if (window.bubbler) {
53
+ bubbles = window.bubbler.bubbles;
54
+ } else {
55
+ bubbles = [];
56
+ window.bubbler = {};
57
+ }
58
+
59
+ bubbles.push(createBubble(element));
60
+
61
+ window.bubbler.bubbles = bubbles;
62
+ if (!window.bubbler.carbonatedElements) {
63
+ window.bubbler.carbonatedElements = [];
64
+ }
65
+
66
+ window.bubbler.carbonatedElements.push(element);
67
+
68
+ window.requestAnimationFrame(updateBubblePositions);
69
+ }
70
+
71
+ function updateBubblePositions(timestamp) {
72
+ if (window.bubbler.lastUpdateTime) {
73
+ let elapsed = timestamp - window.bubbler.lastUpdateTime;
74
+ let bubbles = window.bubbler.bubbles;
75
+ let updatedBubbles = [];
76
+ for (let bubbleIdx in bubbles) {
77
+ let bubble = bubbles[bubbleIdx];
78
+ let newPosition = bubble.position + ((bubble.speed / 1000.0) * elapsed);
79
+ bubble.position = newPosition;
80
+
81
+ if (bubble.position > bubble.maxPosition) {
82
+ bubble.element.parentNode.removeChild(bubble.element);
83
+ } else {
84
+ bubble.element.style.transform = `translateY(-${bubble.position}px)`;
85
+ updatedBubbles.push(bubble);
86
+ }
87
+ }
88
+
89
+ // Randomly create between 1 and 5 bubbles PER carbonated element, depending
90
+ // on bubbleChance
91
+ let carbonatedParents = window.bubbler.carbonatedElements;
92
+ for (let carbonatedContainerIdx in carbonatedParents) {
93
+ let carbonationContainer = carbonatedParents[carbonatedContainerIdx];
94
+
95
+ // There is a sliding scale determining how many bubbles will be created.
96
+ let numBubbles = window.bubbler.bubbles.length;
97
+ let bubbleChance;
98
+ if (numBubbles < 20) {
99
+ // if there are less than 20 bubbles in the view, there is a 100% chance
100
+ // that bubbles will be created
101
+ bubbleChance = 1.0;
102
+ } else if (numBubbles >= getMaxBubblesForContainer(carbonationContainer)) {
103
+ // if there are >= our max distribution of bubbles in the view, there
104
+ // is a 0% chance of new bubble creation.
105
+ bubbleChance = 0.0;
106
+ } else {
107
+ // there is a 50% chance of bubble creation
108
+ bubbleChance = 0.5;
109
+ }
110
+
111
+ let numBubblesToCreate = Math.floor(bubbleChance * (Math.random() * 5 + 1));
112
+ for (let i = 0; i < numBubblesToCreate; i++) {
113
+ updatedBubbles.push(createBubble(carbonationContainer));
114
+ }
115
+ }
116
+
117
+ window.bubbler.bubbles = updatedBubbles;
118
+ }
119
+
120
+ window.bubbler.lastUpdateTime = timestamp;
121
+ window.requestAnimationFrame(updateBubblePositions);
122
+ }
metadata ADDED
@@ -0,0 +1,128 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: bubbling-ale
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.3
5
+ platform: ruby
6
+ authors:
7
+ - Scott Johnson
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2020-10-18 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: jekyll
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">"
18
+ - !ruby/object:Gem::Version
19
+ version: '3.5'
20
+ - - "<"
21
+ - !ruby/object:Gem::Version
22
+ version: '5.0'
23
+ type: :runtime
24
+ prerelease: false
25
+ version_requirements: !ruby/object:Gem::Requirement
26
+ requirements:
27
+ - - ">"
28
+ - !ruby/object:Gem::Version
29
+ version: '3.5'
30
+ - - "<"
31
+ - !ruby/object:Gem::Version
32
+ version: '5.0'
33
+ - !ruby/object:Gem::Dependency
34
+ name: jekyll-seo-tag
35
+ requirement: !ruby/object:Gem::Requirement
36
+ requirements:
37
+ - - "~>"
38
+ - !ruby/object:Gem::Version
39
+ version: '2.0'
40
+ type: :runtime
41
+ prerelease: false
42
+ version_requirements: !ruby/object:Gem::Requirement
43
+ requirements:
44
+ - - "~>"
45
+ - !ruby/object:Gem::Version
46
+ version: '2.0'
47
+ - !ruby/object:Gem::Dependency
48
+ name: html-proofer
49
+ requirement: !ruby/object:Gem::Requirement
50
+ requirements:
51
+ - - "~>"
52
+ - !ruby/object:Gem::Version
53
+ version: '3.0'
54
+ type: :development
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ requirements:
58
+ - - "~>"
59
+ - !ruby/object:Gem::Version
60
+ version: '3.0'
61
+ - !ruby/object:Gem::Dependency
62
+ name: rubocop
63
+ requirement: !ruby/object:Gem::Requirement
64
+ requirements:
65
+ - - "~>"
66
+ - !ruby/object:Gem::Version
67
+ version: '0.50'
68
+ type: :development
69
+ prerelease: false
70
+ version_requirements: !ruby/object:Gem::Requirement
71
+ requirements:
72
+ - - "~>"
73
+ - !ruby/object:Gem::Version
74
+ version: '0.50'
75
+ - !ruby/object:Gem::Dependency
76
+ name: w3c_validators
77
+ requirement: !ruby/object:Gem::Requirement
78
+ requirements:
79
+ - - "~>"
80
+ - !ruby/object:Gem::Version
81
+ version: '1.3'
82
+ type: :development
83
+ prerelease: false
84
+ version_requirements: !ruby/object:Gem::Requirement
85
+ requirements:
86
+ - - "~>"
87
+ - !ruby/object:Gem::Version
88
+ version: '1.3'
89
+ description:
90
+ email:
91
+ - jaywir3@gmail.com
92
+ executables: []
93
+ extensions: []
94
+ extra_rdoc_files: []
95
+ files:
96
+ - LICENSE
97
+ - README.md
98
+ - _layouts/default.html
99
+ - _sass/bubbling-ale.scss
100
+ - _sass/normalize.scss
101
+ - _sass/rouge-github.scss
102
+ - _sass/variables.scss
103
+ - assets/css/style.scss
104
+ - assets/javascripts/bubbler.js
105
+ homepage: https://github.com/foamfactory/bubbling-ale
106
+ licenses:
107
+ - CC0-1.0
108
+ metadata: {}
109
+ post_install_message:
110
+ rdoc_options: []
111
+ require_paths:
112
+ - lib
113
+ required_ruby_version: !ruby/object:Gem::Requirement
114
+ requirements:
115
+ - - ">="
116
+ - !ruby/object:Gem::Version
117
+ version: '0'
118
+ required_rubygems_version: !ruby/object:Gem::Requirement
119
+ requirements:
120
+ - - ">="
121
+ - !ruby/object:Gem::Version
122
+ version: '0'
123
+ requirements: []
124
+ rubygems_version: 3.0.8
125
+ signing_key:
126
+ specification_version: 4
127
+ summary: Bubbling Ale is a Jekyll theme, designed specifically for Github Pages
128
+ test_files: []