start eww bar setup

modules/desktop-environment/home/panels/eww/configDir/eww.css

@@ -0,0 +1,7 @@
+.topbar {
+  margin-bottom: 2px;
+}
+
+label {
+  font: 14pt "FiraCode Nerd Font";
+}

modules/desktop-environment/home/panels/eww/configDir/eww.yuck

@@ -0,0 +1,85 @@
+(defwindow topBar
+  :monitor 0 
+  :stacking "fg"
+  :windowtype "normal"
+  :wm-ignore true
+  :exclusive true
+  :geometry (geometry
+              :width "100%"
+              :height "32px"
+              :anchor "top center")
+  (topBar))
+
+(defwidget topBar []
+  (overlay
+    :class "topBar"
+    (centerbox
+      (box
+        :halign "start"
+        :spacing 12
+        :space-evenly false
+        (label :text " ")
+        (cpu)
+        (sep)
+        (mem)
+      )
+      (box
+        :halign "center"
+        (label :text "Hi, jade! :3")
+      )
+      (box
+        :halign "end"
+        (time)
+      )
+    )
+    (box
+      :class "transFlag"
+      :height 1
+      ( flagEl :color "#5BCEFA")
+      ( flagEl :color "#F5A9B8")
+      ( flagEl :color "#FFFFFF")
+      ( flagEl :color "#F5A9B8")
+      ( flagEl :color "#5BCEFA")
+    )
+  )
+)
+
+(defwidget sep [] 
+  (label :text "|")
+)
+
+(defwidget time []
+  (label 
+    :markup { 
+      formattime(
+        EWW_TIME, 
+        "<span foreground=\"#d65d0e\"></span> %Y<span foreground=\"#7c6f64\">-</span>%m<span foreground=\"#7c6f64\">-</span>%d <span foreground=\"#d65d0e\"></span> %H<span foreground=\"#7c6f64\">:</span>%M<span foreground=\"#7c6f64\">:</span>%S "
+      ) 
+    }
+  )
+)
+
+(defwidget cpu [] 
+  (box
+    :class "cpuIndicator"
+    (label
+      :markup "<span foreground=\"#d65d0e\"></span> ${strlength(round(EWW_CPU.avg, 0)) == 1 ? " ${round(EWW_CPU.avg, 0)}" : round(EWW_CPU.avg, 0)}<span foreground=\"#7c6f64\">%</span>"
+    )
+  )
+)
+
+(defwidget mem []
+  (box 
+    :class "memIndicator"
+    (label
+      :markup "<span foreground=\"#d65d0e\"> </span> ${round(EWW_RAM.used_mem_perc, 0)}<span foreground=\"#7c6f64\">%</span>"
+    )
+  )
+)
+
+(defwidget flagEl [color]
+  (box
+    :style "border-bottom: 2px solid ${color}"
+    :halign "fill"
+  )
+)