From 5e921240ff02908106e294c60a71cecb5c0057f1 Mon Sep 17 00:00:00 2001
From: Jeff Moe <moe@spacecruft.org>
Date: Sat, 24 Dec 2022 14:56:55 -0700
Subject: [PATCH] position (meh), color

---
 src/routes/+page.svelte | 79 +++++++++++++++++++++++++++--------------
 1 file changed, 53 insertions(+), 26 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 22d1cfb..2fb2e0e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,43 +1,70 @@
-
-
-<h1>Scrolltron</h1>
-
 <script>
 import Ticker from 'svelte-ticker';
 import {HsvPicker} from 'svelte-color-picker';
 
 function colorCallback(rgba) {
-	console.log(rgba.detail)
+    let r = rgba.detail.r;
+    let g = rgba.detail.g;
+    let b = rgba.detail.b;
+    let a = rgba.detail.a;
 }
 </script>
 
-<HsvPicker on:colorChange={colorCallback} startColor={"#FF00FF"}/>
-
-<div>
-<Ticker pausing=false>
-    <strong> foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo </strong>
-    <strong> barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr </strong>
-</Ticker>
-
-<Ticker pausing=false>
-    <strong> boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo boooo </strong>
-    <strong> mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr  mooorrr </strong>
-</Ticker>
+<div class="main">
+	<div class="container">
+        <h1>Scrolltron</h1>
+	</div>
+    <p></p>
+    <div class="picker">
+		<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
+	</div>
+    <p></p>
+    <div class="horizontal">
+        <Ticker pausing=false duration=60>
+            foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo 
+            barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr  barrrr 
+        </Ticker>
+    </div>    
 </div>
 
+
+
 <style>
-	div { 
-		bottom: 0;
-		color: purple;
+
+	h3 {
+		padding:0;
+		margin:0;
+		font-family: sans-serif;
+	}
+
+	p {
+		margin:30px 5px;
+	}
+    .horizontal{
+        padding:516px;
+        color: rgb(113, 131, 33);
 		font-family: Verdana, sans-serif;
 		font-weight: 600;
 		font-size: 2.75em;
-		background: rgba(128, 255, 32, 0.25);
-	}
-	#div > :global(*) { display: inline-block!important; }
-
-
-	@keyframes horizontal {
+		background: rgba(128, 128, 128, 0);
+        @keyframes horizontal {
 		100% { transform: translateX(-50%); }
+    	}
+    }
+	.main {
+	}
+	.container{
+		color: pink;
+		font-family: Verdana, sans-serif;
+		font-weight: 600;
+		font-size: 2.75em;
+		background: rgba(128, 128, 128, 0);
+	}
+	.picker{
+		color: rgb(61, 177, 206);
+		font-family: Verdana, sans-serif;
+		font-weight: 600;
+		font-size: 2.75em;
+		background: rgba(128, 128, 128, 0);
 	}
 </style>