Update style.scss

scss/style.scss

@@ -5,16 +5,6 @@
 @import "/Users/zzzeyez/.cache/wal/colors.scss";
 
 :root {
-
-/* position */
-	--pecan-padding-left: 0px;
-	--pecan-padding-right: 0px;
-	--pecan-padding-v: 0px;
-	/* change these to "padding" */
-	--pecan-xanthia-padding-h: calc(var(--pecan-padding-right) + calc(var(--pecan-text-padding) * 4) + 14ch + calc(3 * var(--pecan-border)));
-	--pecan-xanthia-padding-v: calc(var(--pecan-border) + var(--pecan-padding-v));
-	--pecan-xanthia-image-padding-v: calc(var(--pecan-height) + 15px);
-	--pecan-xanthia-image-padding-h: 15px;
 
 /* background colors */
 	--pecan-bg: #{$color0};
@@ -23,7 +13,6 @@
 	--pecan-bg-pecandate: none;
 	--pecan-bg-pecanbattery: none;
 	--pecan-bg-pecanclock: none;
-	/* xanthia */
 	--pecan-xanthia-bg: none;
 	--pecan-xanthia-image-bg: var(--pecan-bg);
 
@@ -33,51 +22,67 @@
 	--pecan-fg-pecandate: #{$color7};
 	--pecan-fg-pecanbattery: #{$color8};
 	--pecan-fg-pecanclock: #{$color7};
-	/* xanthia */
 	--pecan-xanthia-fg: #{$color2};
 
 /* opacity */
 	--pecan-opacity: 0.95; /* this value affects --pecan-border */
 	--pecan-opacity-inner: 1;
 	--pecan-opacity-center: 1;
-	/* xanthia */
 	--pecan-xanthia-opacity: 1;
-	--pecan-xanthia-image-opacity: 1;
+	--pecan-xanthia-image-opacity: 1;	
+
+/* alignment */
+	--pecan-alignment-top: 0;
+	--pecan-alignment-right: 0;
+	--pecan-alignment-bottom: auto;
+	--pecan-alignment-left: 0;
+	--pecan-xanthia-alignment-top: 0;
+	--pecan-xanthia-alignment-right: 0;
+	--pecan-xanthia-alignment-bottom: auto;
+	--pecan-xanthia-alignment-left: auto;
+	--pecan-xanthia-image-alignment-top: 0;
+	--pecan-xanthia-image-alignment-right: 0;
+	--pecan-xanthia-image-alignment-bottom: auto;
+	--pecan-xanthia-image-alignment-left: auto;
 
+/* padding */
+	--pecan-padding-left: 0px;
+	--pecan-padding-right: 0px;
+	--pecan-padding-v: 0px;
+	--pecan-xanthia-padding-h: calc(var(--pecan-padding-right) + calc(var(--pecan-text-padding) * 4) + 14ch + calc(3 * var(--pecan-border)));
+	--pecan-xanthia-padding-v: calc(var(--pecan-border) + var(--pecan-padding-v));
+	--pecan-xanthia-image-padding-v: calc(var(--pecan-height) + 15px);
+	--pecan-xanthia-image-padding-h: 15px;
 
+/* size */
+	--pecan-height: 36px;
+	--pecan-xanthia-max-width: 73ch;
+	--pecan-xanthia-max-height: calc(var(--pecan-height) - calc(var(--pecan-border) * 2));
+	--pecan-xanthia-min-width: none;
+	--pecan-xanthia-min-height: none;
+	--pecan-xanthia-image-size: 150px;
+
 /* shadow */
 	--pecan-shadow: 0px 4px 10px 4px rgba(0,0,0,0.15);
 	--pecan-shadow-inner: 0px 1px 1px 1px rgba(0,0,0,0.0);
-	/* xanthia */
 	--pecan-xanthia-shadow: var(--pecan-shadow-inner);
 	--pecan-xanthia-image-shadow: var(--pecan-shadow);
 
 /* border */
 	--pecan-border: 0px;
 	--pecan-border-radius: 0px;
 	--pecan-border-radius-inner: 8px;
-	/* xanthia */
-	--pecan-xanthia-border-radius: var(--pecan-border-radius-inner);	
+	--pecan-xanthia-border-radius: var(--pecan-border-radius-inner);
 	--pecan-xanthia-image-border-radius: 8px;
 	--pecan-xanthia-image-border: 0;
 
-/* size */
-	--pecan-height: 36px;
-	/* xanthia */
-	--pecan-xanthia-max-width: 73ch;
-	--pecan-xanthia-max-height: calc(var(--pecan-height) - calc(var(--pecan-border) * 2));
-	--pecan-xanthia-min-width: none;
-	--pecan-xanthia-min-height: none;
-	--pecan-xanthia-image-size: 150px;
-
 /* typography */
 	--pecan-font: SF Mono, Menlo;
 	--pecan-font-size: 11px;
 	--pecan-font-style: none;
 	--pecan-line-height: calc(var(--pecan-height) - calc(var(--pecan-border) * 2));
 	--pecan-text-padding: 3ch ;
 	/* --webkit-font-smoothing: none; */
-	/* xanthia */
 	--pecan-xanthia-font: var(--pecan-font);
 	--pecan-xanthia-font-size: var(--pecan-font-size);
 	--pecan-xanthia-font-style: var(--pecan-font-style);
@@ -89,22 +94,22 @@
 	--pecan-xanthia-image-time-visible: 15s;
 }
 
-/* Get monitor width */
+/* get monitor width */
 .screen {
 	width: 100vw;
 	height: 100vh;
 }
 
-/* Bar background */
+/* bar background */
 .pecanbackground {
 	background-color: var(--pecan-bg);
 	display: block;
 	position: absolute;
   	height: var(--pecan-height);
 	top: var(--pecan-alignment-top);
-	right: 0px;
+	right: var(--pecan-alignment-right);
 	bottom: var(--pecan-alignment-bottom);
-	left: 0px;
+	left: var(--pecan-alignment-left);
 	margin-top: var(--pecan-padding-v);
 	margin-right: var(--pecan-padding-right);
 	margin-bottom: var(--pecan-padding-v);
@@ -125,17 +130,16 @@
 	position: absolute;
   	height: var(--pecan-height);
 	top: var(--pecan-alignment-top);
-	right: 0px;
+	right: var(--pecan-alignment-right);
 	bottom: var(--pecan-alignment-bottom);
-	left: 0px;
+	left: var(--pecan-alignment-left);
 	margin-top: var(--pecan-padding-v);
 	margin-right: var(--pecan-padding-right);
 	margin-bottom: var(--pecan-padding-v);
 	margin-left: var(--pecan-padding-left);
 }
 
-
-/* Workspace indicator -- far left */
+/* workspace indicator -- far left */
 .pecanworkspace {
 	font: var(--pecan-font-size) var(--pecan-font);
 	font-style: var(--pecan-font-style);
@@ -235,7 +239,7 @@
 	box-shadow: var(--pecan-shadow-inner);
 }
 
-/* Clock -- 5th to left */
+/* clock -- 5th to left */
 .pecanclock {
 	font: var(--pecan-font-size) var(--pecan-font);
 	font-style: var(--pecan-font-style);