Merge pull request #3 from byzocker-de/cs1.6

Cs1.6 design rewrite

Author: byzocker

.vscode/extensions.json

@@ -1,4 +1,8 @@
 {
-  "recommendations": ["astro-build.astro-vscode"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "imgildev.vscode-astro-generator",
+    "imgildev.vscode-astro-pack"
+  ],
   "unwantedRecommendations": []
 }

byzocker.de.code-workspace

@@ -4,5 +4,6 @@
 			"path": "."
 		}
 	],
-	"settings": {}
+	"settings": {
+	}
 }

package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/sitemap": "^3.1.2",
     "astro": "^2.7.1",
+    "astro-auto-import": "^0.4.4",
     "astro-robots-txt": "^1.0.0",
     "dayjs": "^1.11.10",
     "reusify": "^1.0.4"

package.json

@@ -0,0 +1,117 @@
+---
+//const discord_id = '322035497826385920';
+
+
+
+---
+
+<div>
+    <span id="test"></span>
+    <div id="activity">
+        <div id="activity-image">
+            <img id="activity-icon" src="">
+        </div>
+        <div id="activity-info">
+            <h2 id="activity-title">Title</h2>
+            <p id="activity-description">Detail</p>
+            <button id="activiy-button" class="cs-btn hidden">Button</button>
+        </div>
+    </div>
+
+    <div id="progressbar-spanning" class="hidden ">
+        <div id="song-elapsed" class="">0:00</div>
+        <div id="song-progressbar " class="cs-progress-bar">
+        <!-- <div id="song-progressbar " class="cs-slider"> -->
+            <div id="song-progress" class="bars range"></div>
+        </div>
+        <div id="song-remaining" class="">0:00</div>
+    </div>
+</div>
+
+
+
+
+
+
+
+<script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js" defer></script>
+<script>
+
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import './lanyard.mjs';
+</script>
+
+
+
+
+<style>
+    
+    /* #activity{
+        background-color: red;
+    }
+    #activity-info{
+        background-color: green;
+    }
+    #activity-image{
+        background-color: yellow;
+    }
+    #activity-icon{
+        background-color: blue;
+    }
+    #progressbar-spanning{
+        background-color: blue;
+    } */
+    /* #song-progressbar{
+        background-color: green;
+    }
+    #song-progress{
+        background-color: yellow;
+    } */
+
+
+    #activity{
+        display: flex;
+        padding: 10px;
+    }
+
+    #activity-icon, #activity-info{
+        display: inherit;
+        padding: 5px;
+        padding-right: 10px
+    }
+    #activity-info{
+        display: block;
+        width: 85%;
+    }
+    #activity-title, #activity-description{
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    #activity-button{
+        /* Wrap button behind activity-description */
+        display: none;
+
+    }
+    #activity-icon{
+        width: 100px;
+        height: 100%;
+    }
+    #progressbar-spanning{
+        margin: fit-content;
+        padding-left: 15px;
+        padding-right: 15px;
+        padding: fit-content;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    #song-progressbar{
+        width: 85%;
+        height: 10px;
+    }
+    #song-progress{
+        height: 100%;
+    }
+</style>