From 04735a538deb098931a425d8d3a2c31dda05bc82 Mon Sep 17 00:00:00 2001
From: Astra <me@astrra.space>
Date: Thu, 15 May 2025 18:13:36 +0900
Subject: [PATCH] Remove colors.css and new default theme

---
 src/lib/PostComponent.svelte |   2 +-
 themes/colors.css            |  22 --
 themes/default/theme.css     | 422 +++++++++++++++++++++++++++++++++++
 themes/witchcraft/theme.css  |  16 ++
 theming.ts                   |   3 +-
 5 files changed, 440 insertions(+), 25 deletions(-)
 delete mode 100644 themes/colors.css

diff --git a/src/lib/PostComponent.svelte b/src/lib/PostComponent.svelte
index 6cb6bcd..1cacc28 100644
--- a/src/lib/PostComponent.svelte
+++ b/src/lib/PostComponent.svelte
@@ -71,7 +71,7 @@
       >
       <p id="handle">
         <a href="{Config.FRONTEND_URL}/profile/{post.authorHandle}"
-          >{post.authorHandle}</a
+          >@{post.authorHandle}</a
         >
 
         <a
diff --git a/themes/colors.css b/themes/colors.css
deleted file mode 100644
index b522a4f..0000000
--- a/themes/colors.css
+++ /dev/null
@@ -1,22 +0,0 @@
-:root {
-  /* Primary hue of the theme */
-  /* You can adjust it, or edit the values below directly */
-  --primary-h: 260;
-
-  /* Primary saturation and lightness of the theme, usually you shouldn't want to change those */
-  --primary-s: 75%;
-  --primary-l: 60%;
-
-  /* Derived colors using H, S, L manipulation */
-  /* You can set those to be static values if you want, i.e.: */
-  /* --link-color: #c579ff; */
-  --link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
-  --link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
-  --background-color: hsl(var(--primary-h), 75%, 10%);
-  --header-background-color: hsl(var(--primary-h), 75%, 18%);
-  --content-background-color: hsl(var(--primary-h), 75%, 8%);
-  --text-color: #fff;
-  --border-color: hsl(var(--primary-h), 75%, calc(var(--primary-l) * 1.05));
-  --indicator-inactive-color: #4a4a4a;
-  --indicator-active-color: var(--border-color);
-}
diff --git a/themes/default/theme.css b/themes/default/theme.css
index e69de29..f1182d2 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -0,0 +1,422 @@
+/* Generic Default Theme for pds-dash */
+
+:root {
+  /* Color overrides, edit to whatever you want */
+  --link-color: #3b82f6;
+  --link-hover-color: #2563eb;
+  --time-color: #8b5cf6;
+  --background-color: #f9fafb;
+  --header-background-color: #ffffff;
+  --content-background-color: #ffffff;
+  --text-color: #1f2937;
+  --border-color: #e5e7eb;
+  --indicator-inactive-color: #d1d5db;
+  --indicator-active-color: #6366f1;
+  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --hover-bg: #f3f4f6;
+  --button-bg: #f9fafb;
+  --button-hover: #f3f4f6;
+}
+
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: var(--background-color);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  color: var(--text-color);
+  border-color: var(--border-color);
+  overflow-wrap: break-word;
+  word-break: break-word;
+  hyphens: none;
+}
+
+a {
+  font-weight: 500;
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+a:hover {
+  color: var(--link-hover-color);
+}
+
+h1 {
+  font-size: 2.5em;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+#app {
+  max-width: 1400px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+}
+
+/* Post Component */
+#postContainer {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  background-color: var(--content-background-color);
+  margin-bottom: 20px;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  box-shadow: var(--card-shadow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+#postContainer:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+#postHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
+  background-color: var(--header-background-color);
+  padding: 12px 16px;
+  height: 60px;
+  border-bottom: 1px solid var(--border-color);
+  font-weight: 600;
+  overflow-wrap: break-word;
+}
+
+#displayName {
+  display: block;
+  color: var(--text-color);
+  font-size: 1.1em;
+  padding: 0;
+  margin: 0 0 2px 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  letter-spacing: -0.01em;
+}
+
+#handle {
+  display: flex;
+  align-items: center;
+  color: #6b7280;
+  font-size: 0.85em;
+  font-weight: 400;
+  padding: 0;
+  margin: 0;
+  gap: 8px;
+}
+
+#postLink {
+  color: var(--time-color);
+  font-size: 0.85em;
+  padding: 0;
+  margin: 0;
+  opacity: 0.9;
+}
+
+#postContent {
+  display: flex;
+  text-align: start;
+  flex-direction: column;
+  padding: 16px;
+  background-color: var(--content-background-color);
+  color: var(--text-color);
+  overflow-wrap: break-word;
+  white-space: pre-line;
+  line-height: 1.6;
+}
+
+#replyingText, #quotingText {
+  font-size: 0.8em;
+  margin: 0;
+  padding: 0 0 10px 0;
+  color: #6b7280;
+}
+
+#postText {
+  margin: 0 0 8px 0;
+  padding: 0;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  hyphens: none;
+  font-size: 1.05em;
+}
+
+#headerText {
+  margin-left: 12px;
+  font-size: 0.9em;
+  text-align: start;
+  word-break: break-word;
+  max-width: 80%;
+  max-height: 95%;
+  overflow: hidden;
+  align-self: flex-start;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+#carouselContainer {
+  position: relative;
+  width: 100%;
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+#carouselControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 500px;
+  margin-top: 10px;
+}
+
+#carouselIndicators {
+  display: flex;
+  gap: 6px;
+}
+
+.indicator {
+  width: 6px;
+  height: 6px;
+  background-color: var(--indicator-inactive-color);
+  border-radius: 50%;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+}
+
+.indicator.active {
+  background-color: var(--indicator-active-color);
+  transform: scale(1.3);
+}
+
+#prevBtn,
+#nextBtn {
+  background-color: var(--button-bg);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.15s ease, transform 0.15s ease;
+  font-size: 16px;
+}
+
+#prevBtn:hover:not(:disabled),
+#nextBtn:hover:not(:disabled) {
+  background-color: var(--button-hover);
+  transform: scale(1.05);
+}
+
+#prevBtn:disabled,
+#nextBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+#embedVideo {
+  width: 100%;
+  max-width: 500px;
+  margin-top: 12px;
+  align-self: center;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+#embedImages {
+  min-width: min(100%, 500px);
+  max-width: min(100%, 500px);
+  max-height: 500px;
+  object-fit: contain;
+  margin: 0;
+  border-radius: 8px;
+}
+
+/* Account Component */
+#accountContainer {
+  display: flex;
+  text-align: start;
+  align-items: center;
+  background-color: var(--content-background-color);
+  padding: 12px;
+  margin-bottom: 15px;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  transition: background-color 0.15s ease;
+}
+
+#accountContainer:hover {
+  background-color: var(--hover-bg);
+}
+
+#accountName {
+  margin-left: 12px;
+  font-size: 0.95em;
+  max-width: 80%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+#avatar {
+  width: 48px;
+  height: 48px;
+  margin: 0;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+/* App.Svelte Layout */
+#Content {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  gap: 24px;
+}
+
+#Feed {
+  overflow-y: auto;
+  width: 65%;
+  height: 100vh;
+  padding-right: 16px;
+  align-self: flex-start;
+}
+
+#spacer {
+  padding: 0;
+  margin: 0;
+  height: 10vh;
+  width: 100%;
+}
+
+#Account {
+  width: 35%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color);
+  background-color: var(--content-background-color);
+  max-height: 80vh;
+  padding: 24px;
+  margin-left: 16px;
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
+}
+
+#accountsList {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  padding: 8px 0;
+  margin: 0;
+}
+
+#Header {
+  text-align: center;
+  font-size: 1.8em;
+  margin-bottom: 16px;
+  font-weight: 700;
+  background: linear-gradient(to right, #3b82f6, #8b5cf6);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Mobile Styles */
+@media screen and (max-width: 768px) {
+  #Content {
+    flex-direction: column;
+    width: auto;
+    padding: 12px;
+    margin-top: 0;
+  }
+  
+  #Account {
+    width: calc(100% - 32px);
+    padding: 16px;
+    margin-bottom: 20px;
+    margin-left: 0;
+    margin-right: 0;
+    height: auto;
+    order: -1;
+  }
+  
+  #Feed {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+  
+  #spacer {
+    height: 5vh;
+  }
+
+  body {
+    font-size: 16px;
+  }
+
+  #postHeader {
+    padding: 10px;
+    height: auto;
+    min-height: 50px;
+  }
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+}
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+  border-radius: 0;
+}
+::-webkit-scrollbar-button {
+  background: transparent;
+  border-radius: 0;
+}
+
+* {
+  scrollbar-width: none;
+  scrollbar-color: transparent transparent;
+  -ms-overflow-style: none; /* IE and Edge */
+  -webkit-overflow-scrolling: touch;
+  -webkit-scrollbar: none; /* Safari */
+}
\ No newline at end of file
diff --git a/themes/witchcraft/theme.css b/themes/witchcraft/theme.css
index eee1f37..1f9cb00 100644
--- a/themes/witchcraft/theme.css
+++ b/themes/witchcraft/theme.css
@@ -3,6 +3,22 @@
   src: url(https://witchcraft.systems/ProggyCleanNerdFont-Regular.ttf);
 }
 
+:root {
+  /* Color overrides, edit to whatever you want */
+  --primary-h: 260; /* Hue */
+  
+  --link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
+  --link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
+  --background-color: hsl(var(--primary-h), 75%, 10%);
+  --header-background-color: hsl(var(--primary-h), 75%, 18%);
+  --content-background-color: hsl(var(--primary-h), 75%, 8%);
+  --text-color: #fff;
+  --border-color: hsl(var(--primary-h), 75%, 60%);
+  --indicator-inactive-color: #4a4a4a;
+  --indicator-active-color: var(--border-color);
+}
+
+
 a {
   font-weight: 500;
   color: var(--link-color);
diff --git a/theming.ts b/theming.ts
index d963a2f..3b5964b 100644
--- a/theming.ts
+++ b/theming.ts
@@ -12,7 +12,6 @@ export const themePlugin = (): Plugin => {
         enforce: 'pre', // Ensure this plugin runs first
         transform(code, id) {
             if (id.endsWith('app.css')) {
-                const colorsCode = Deno.readTextFileSync(Deno.cwd() + '/themes/colors.css');
                 // Read the theme file and replace the contents of app.css with it
                 // Needs full path to the file
                 const themeCode = Deno.readTextFileSync(Deno.cwd() + '/themes/' + themeFolder + '/theme.css');
@@ -20,7 +19,7 @@ export const themePlugin = (): Plugin => {
 
                 // and add a comment at the top
                 const themeComment = `/* Generated from ${themeFolder} */\n`;
-                const themeCodeWithComment = themeComment + colorsCode + themeCode;
+                const themeCodeWithComment = themeComment + themeCode;
                 // Return the theme code as the new contents of app.css
                 return {
                     code: themeCodeWithComment,