diff --git a/README.md b/README.md
index e6925ec..f4cb247 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Rumfoords
+# Code Study Boilerplate
**Local Development**
diff --git a/app.html b/app.html
index 123f64c..ed57dc5 100644
--- a/app.html
+++ b/app.html
@@ -1,10 +1,3 @@
-
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 2b22558..946dae8 100755
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -1,5 +1,5 @@
@import 'vars';
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
html {
font-size: 16px;
@@ -12,7 +12,7 @@ body {
--black: #000000;
--white: #ffffff;
- --font-sans: 'Poppins', sans-serif;
+ --font-sans: 'IBM Plex Sans', sans-serif;
--font-serif: 'EB Garamond', serif;
@include fontSize(16px);
@@ -107,20 +107,15 @@ a {
path {
transition: fill 0.3s;
}
-
- @include hover {
- color: var(--white);
-
- path {
- fill: var(--white);
- }
+ &:hover {
+ text-decoration: underline;
}
}
.contained {
padding-right: var(--margin);
padding-left: var(--margin);
- // max-width: 1380px;
+ max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
diff --git a/components/Blotter.vue b/components/Blotter.vue
new file mode 100644
index 0000000..760b863
--- /dev/null
+++ b/components/Blotter.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
diff --git a/components/StudyBody.vue b/components/StudyBody.vue
new file mode 100644
index 0000000..14a93fa
--- /dev/null
+++ b/components/StudyBody.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
diff --git a/components/VhsImage.vue b/components/VhsImage.vue
new file mode 100644
index 0000000..92fd2d5
--- /dev/null
+++ b/components/VhsImage.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/VhsText.vue b/components/VhsText.vue
new file mode 100644
index 0000000..f29aae0
--- /dev/null
+++ b/components/VhsText.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/fragment-shader-2.fs b/components/fragment-shader-2.fs
new file mode 100644
index 0000000..5157450
--- /dev/null
+++ b/components/fragment-shader-2.fs
@@ -0,0 +1,80 @@
+#define time iTime
+#define resolution ( iResolution.xy )
+#define iChannel0 iChannel0
+
+#define PI 3.14159265
+
+uniform sampler2D media;
+
+vec3 tex2D( sampler2D _tex, vec2 _p ){
+ vec3 col = texture2D( _tex, _p ).xyz;
+ if ( 0.5 < abs( _p.x - 0.5 ) ) {
+ col = vec3( 0.1 );
+ }
+ return col;
+}
+
+float hash( vec2 _v ){
+ return fract( sin( dot( _v, vec2( 89.44, 19.36 ) ) ) * 22189.22 );
+}
+
+float iHash( vec2 _v, vec2 _r ){
+ float h00 = hash( vec2( floor( _v * _r + vec2( 0.0, 0.0 ) ) / _r ) );
+ float h10 = hash( vec2( floor( _v * _r + vec2( 1.0, 0.0 ) ) / _r ) );
+ float h01 = hash( vec2( floor( _v * _r + vec2( 0.0, 1.0 ) ) / _r ) );
+ float h11 = hash( vec2( floor( _v * _r + vec2( 1.0, 1.0 ) ) / _r ) );
+ vec2 ip = vec2( smoothstep( vec2( 0.0, 0.0 ), vec2( 1.0, 1.0 ), mod( _v*_r, 1. ) ) );
+ return ( h00 * ( 1. - ip.x ) + h10 * ip.x ) * ( 1. - ip.y ) + ( h01 * ( 1. - ip.x ) + h11 * ip.x ) * ip.y;
+}
+
+float noise( vec2 _v ){
+ float sum = 0.;
+ for( int i=1; i<9; i++ )
+ {
+ sum += iHash( _v + vec2( i ), vec2( 2. * pow( 2., float( i ) ) ) ) / pow( 2., float( i ) );
+ }
+ return sum;
+}
+
+void main(){
+ vec2 uv = gl_FragCoord.xy / resolution;
+ vec2 uvn = uv;
+ vec3 col = vec3( 0.0 );
+
+ // tape wave
+ uvn.x += ( noise( vec2( uvn.y, time ) ) - 0.5 )* 0.005;
+ uvn.x += ( noise( vec2( uvn.y * 100.0, time * 10.0 ) ) - 0.5 ) * 0.01;
+
+ // tape crease
+ float tcPhase = clamp( ( sin( uvn.y * 8.0 - time * PI * 1.2 ) - 0.92 ) * noise( vec2( time ) ), 0.0, 0.01 ) * 10.0;
+ float tcNoise = max( noise( vec2( uvn.y * 100.0, time * 10.0 ) ) - 0.5, 0.0 );
+ uvn.x = uvn.x - tcNoise * tcPhase;
+
+ // switching noise
+ float snPhase = smoothstep( 0.03, 0.0, uvn.y );
+ uvn.y += snPhase * 0.3;
+ uvn.x += snPhase * ( ( noise( vec2( uv.y * 100.0, time * 10.0 ) ) - 0.5 ) * 0.2 );
+
+ col = tex2D( media, uvn );
+ col *= 1.0 - tcPhase;
+ col = mix(
+ col,
+ col.yzx,
+ snPhase
+ );
+
+ // bloom
+ for( float x = -4.0; x < 2.5; x += 1.0 ){
+ col.xyz += vec3(
+ tex2D( media, uvn + vec2( x - 0.0, 0.0 ) * 7E-3 ).x,
+ tex2D( media, uvn + vec2( x - 2.0, 0.0 ) * 7E-3 ).y,
+ tex2D( media, uvn + vec2( x - 4.0, 0.0 ) * 7E-3 ).z
+ ) * 0.1;
+ }
+ col *= 0.6;
+
+ // ac beat
+ col *= 1.0 + clamp( noise( vec2( 0.0, uv.y + time * 0.2 ) ) * 0.6 - 0.25, 0.0, 0.1 );
+
+ gl_FragColor = vec4( col, 1.0 );
+}
\ No newline at end of file
diff --git a/components/fragment-shader.fs b/components/fragment-shader.fs
new file mode 100644
index 0000000..d6c6e3f
--- /dev/null
+++ b/components/fragment-shader.fs
@@ -0,0 +1,100 @@
+uniform sampler2D noise;
+uniform sampler2D image;
+
+float ramp(float y, float start, float end) {
+ float inside = step(start, y) - step(end, y);
+ float fact = (y - start) / (end - start) * inside;
+ return (1.0 - fact) * inside;
+}
+
+// Return 0 or 1, like flicking a light switch.
+// see https://www.desmos.com/calculator/pyxpllulmh
+// a = amplitude of superimposed wave: higher = shorter state change durations, but mainly used as flavor
+// b = timescale: higher = longer state durations
+// c = preferred state: -1 always returns 1, 1 always returns 0.
+// <0 prefers returning 1, >0 prefers returning 0, 0 is an even split
+float onOff(float a, float b, float c, float t) {
+ return step(c, sin(t + a * cos(t * b)));
+}
+
+vec2 coverScreen(vec2 fragCoord, vec2 resolution, float aspect) {
+ vec2 uv = 0.5 * (2.0 * fragCoord - resolution);
+ if(resolution.x / resolution.y > aspect) {
+ uv = 0.5 - uv / vec2(resolution.x, -resolution.x / aspect);
+ } else {
+ uv = 0.5 - uv / vec2(resolution.y * aspect, -resolution.y);
+ }
+ return uv;
+}
+
+vec2 screenDistort(vec2 uv) {
+ uv -= vec2(0.5, 0.5);
+ uv = uv * 1.2 * (1.0 / 1.2 + 2.0 * uv.x * uv.x * uv.y * uv.y);
+ uv += vec2(0.5, 0.5);
+ return uv;
+}
+
+vec2 scanWarp(vec2 uv, float t) {
+ //float window = 1.0 / (1.0 + 20.0 * (uv.y - mod(t / 4.0, 1.0)) * (uv.y - mod(t / 4.0, 1.0)));
+ float effectStrength = 2.0;
+
+ float horizontalWobbleFrequency = 5.0;
+ // lower = more amplitude
+ float inverseHorizontalWobbleAmplitude = 150.0;
+ uv.x +=
+ // horizontal wobble amount
+ sin(uv.y * horizontalWobbleFrequency + t) / inverseHorizontalWobbleAmplitude
+ // whether the horizontal wobble will be applied
+ * onOff(4.0, 4.0, 0.3, t)
+ // ???
+ * (1.0 + cos(t * 80.0))
+ //
+ * effectStrength;
+ float vShift = 0.;//0.4 * onOff(2.0, 3.0, 0.9, t) * (sin(t) * sin(t * 20.0) + (0.5 + 0.1 * sin(t * 200.0) * cos(t)));
+ uv.y = mod(uv.y + vShift, 1.0);
+ return uv;
+}
+
+float vignette(vec2 uv, float t) {
+ float vigAmt = 3.0 + 0.3 * sin(t + 5.0 * cos(t * 5.0));
+ return (1.0 - vigAmt * (uv.y - 0.5) * (uv.y - 0.5)) * (1.0 - vigAmt * (uv.x - 0.5) * (uv.x - 0.5));
+}
+
+float crtLines(vec2 uv, float t) {
+ float contrast = 0.2;
+ float lineCount = 100.;
+ return (((1. / contrast) + fract(uv.y * lineCount + t)) * contrast);
+}
+
+float getNoise(vec2 p, float t) {
+ float s = texture2D(noise, vec2(1.0, 2.0 * cos(t)) * t * 8.0 + p * 1.0).x;
+ s *= s;
+ return s;
+}
+
+float getStripes(vec2 uv, float t) {
+ float noi = getNoise(uv * vec2(0.5, 1.0) + vec2(1.0, 3.0), t);
+ return ramp(mod(uv.y * 4.0 + t / 2.0 + sin(t + sin(t * 0.63)), 1.0), 0.5, 0.6) * noi;
+}
+
+void main() {
+ // stretch image to full area
+ float aspect = u_resolution.x / u_resolution.y;
+ vec2 uv = coverScreen(gl_FragCoord.xy, u_resolution, aspect);
+
+ // `uv` coordinates distort the space of the image
+ // (like taking a cloth the image is printed on and folding/twisting/etc)
+ // uv = screenDistort(uv);
+ uv = scanWarp(uv, u_time);
+ vec4 vid_out = texture2D(image, uv);
+
+ // editing .rgb changes the color of the image -
+ // static lines, noise, vignette effect, etc
+ // vid_out.rgb += getStripes(uv, u_time);
+ // vid_out.rgb += getNoise(uv * 3.0, u_time) / 3.0;
+ vid_out.rgb *= vignette(uv, u_time);
+ vid_out.rgb *= crtLines(uv, u_time);
+ // vid_out.rgb = vec3(onOff(4.0, 4.0, -1.6, u_time));
+
+ gl_FragColor = vid_out;
+}
\ No newline at end of file
diff --git a/components/svg/facebook-clipped.vue b/components/svg/facebook-clipped.vue
new file mode 100644
index 0000000..cee3cef
--- /dev/null
+++ b/components/svg/facebook-clipped.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
diff --git a/components/svg/social/social-facebook.vue b/components/svg/social/social-facebook.vue
index 255e297..76d98e7 100644
--- a/components/svg/social/social-facebook.vue
+++ b/components/svg/social/social-facebook.vue
@@ -1,5 +1,6 @@
-
\ No newline at end of file
+
diff --git a/components/svg/social/social-instagram.vue b/components/svg/social/social-instagram.vue
index 127d7bc..9d78085 100644
--- a/components/svg/social/social-instagram.vue
+++ b/components/svg/social/social-instagram.vue
@@ -1,5 +1,6 @@