cleanup, add _period to url params

zeroXbrock · Jun 25, 2024 · d9c8f81 · d9c8f81
1 parent 4f2e5dc
commit d9c8f81
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -16,15 +16,12 @@
         <script type="application/javascript">
             init({
                 marqueeId: "marquee-text",
-                // for debugging:
-                // _period: 5,
             });
         </script>
         <div class="banner">
-            <div class="marquee" style="margin-top: 30px;">
+            <div class="marquee">
                 <div id="marquee-text" class="marquee-text"></div>
             </div>
         </div>
-        <img class="animation" src="dancing-stickfigure.gif" alt="breakdancing stick figure">
     </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -5,19 +5,20 @@ const DEFAULT_CONTENT_SRC = 'https://raw.githubusercontent.com/zeroXbrock/banner
  * @param {{
  *  contentUrl: string,
  *  marqueeId: string,
- *  secondsPerChar: number,
- * }} params - Configuration parameters.
+ *  _period?: number,
+ * }} params - hardcoded configuration parameters.
  */
 const init = (params) => {
+    // query params take precedence over hardcoded parameters
     const queryParams = getQueryParams();
     if (!('contentUrl' in queryParams)) {
         console.warn(`No content URL provided, using default. To display your own content, set the 'contentUrl' query parameter in this page's URL.\nExample: ${window.location.href}?contentUrl=${DEFAULT_CONTENT_SRC}`)
     }
     const contentUrl = queryParams['contentUrl'] || DEFAULT_CONTENT_SRC
     const args = {
         ...params,
-        ...queryParams,
         contentUrl,
+        _period: queryParams['_period'] || params._period,
     }
     document.addEventListener('DOMContentLoaded', () => {
         doInit(args)

diff --git a/style.css b/style.css
@@ -7,27 +7,26 @@ body {
 }
 
 .banner {
-    background: linear-gradient(to right, transparent, #83e173);
+    background: linear-gradient(to right, transparent, #292929);
     color: greenyellow;
     margin: 0;
     padding: 0px;
-    height: 32px;
+    height: 24px;
 }
 
 .marquee {
-    background-color: #000000;
+    background-color: #00000000;
     color: greenyellow;
     margin: 0;
     padding: 1px;
-    padding-top: 2px;
+    padding-top: 3px;
     padding-bottom: 2px;
     position: fixed;
     z-index: 9001;
 }
 
 .animation {
     position: fixed;
-    top: -20px;
     left: 0;
     width: 64px;
     margin: 0;