Provide an example configuration (with space for more!) (#99)

examples/eww-bar/eww.scss

@@ -0,0 +1,65 @@
+* {
+  all: unset; //Unsets everything so you can style everything from scratch
+}
+
+//Global Styles
+window {
+  background-color: #121212;
+  color: #ffd5cd;
+  font-family: Iosevka;
+}
+
+button {
+  all: unset;
+  background-color: #121212;
+  padding: 10px;
+}
+
+// Styles on classes (see eww.xml for more information)
+
+.sidestuff slider {
+  all: unset;
+  color: #ffd5cd;
+}
+
+.slider-vol scale trough highlight {
+  all: unset;
+  background-color: #D35D6E;
+  color: #000000;
+  border-radius: 10px;
+}
+.slider-vol scale trough {
+  all: unset;
+  background-color: #4e4e4e;
+  border-radius: 50px;
+  min-height: 3px;
+  min-width: 50px;
+  margin-left: 10px;
+  margin-right: 20px;
+}
+.slider-ram scale trough highlight {
+  all: unset;
+  background-color: #D35D6E;
+  color: #000000;
+  border-radius: 10px;
+}
+.slider-ram scale trough {
+  all: unset;
+  background-color: #4e4e4e;
+  border-radius: 50px;
+  min-height: 3px;
+  min-width: 50px;
+  margin-left: 10px;
+  margin-right: 20px;
+}
+.label-ram {
+  font-size: large;
+}
+.time {
+  padding-right: 10px;
+}
+.workspaces button:hover {
+  color: #D35D6E;
+}
+
+  

examples/eww-bar/eww.xml

@@ -0,0 +1,103 @@
+<!-- The main eww configuration file. This is where your widgets and how they appear on the screen and what they
+contain are defined. -->
+
+<eww>
+  <definitions>
+    <!-- This is the place where you structure your widgets, align them and stuff. -->
+
+    <def name="bar"> <!-- Starts the definition of a widget named main -->
+      <box orientation="h" hexpand="true">
+        <workspaces/>
+        <music/>
+        <sidestuff/>
+      </box>
+    </def>
+    <def name="sidestuff">
+      <box class="sidestuff" orientation="h" space-evenly="false" halign="end">
+          <slider-vol/>
+          <slider-ram/>
+          <time/>
+      </box>
+    </def>
+
+    <def name="workspaces">
+        <box orientation="h" class="workspaces" space-evenly="true" halign="start"> <!-- Your workspaces.-->
+          <button onclick="wmctrl -s 0">1</button>  
+          <button onclick="wmctrl -s 1">2</button>  
+          <button onclick="wmctrl -s 2">3</button>
+          <button onclick="wmctrl -s 3">4</button>  
+          <button onclick="wmctrl -s 4">5</button>  
+          <button onclick="wmctrl -s 5">6</button>  
+          <button onclick="wmctrl -s 6">7</button>  
+          <button onclick="wmctrl -s 7">8</button>  
+          <button onclick="wmctrl -s 8">9</button>  
+        </box>
+    </def>
+    <def name="music">
+        <box orientation="h" class="music" halign="center" space-evenly="false">
+          <!-- An image. We won't be using it, but it might be handy if you ever need it. -->
+          <!-- <image path="/home/user/.config/eww/icons/music.svg"/> -->
+
+             {{music}} <!--This is how you use variables.-->
+        </box>
+    </def>
+    <def name="slider-vol">
+      <!--A basic volume slider-->
+      <box orientation="h" class="slider-vol" space-evenly="false">
+        <box class="label-vol"></box>
+        <scale min="0" max="101" value="{{volume}}" onchange="amixer -D pulse sset Master {}%"/> 
+      </box>
+    </def>
+    <def name="slider-ram">
+      <!--A basic RAM slider-->
+      <box orientation="h" class="slider-ram" space-evenly="false">
+        <box class="label-ram"></box>
+        <scale min="0" active="false" max="101" value="{{ram-used}}"/>
+      </box>
+    </def>
+    <def name="time">
+      <!--Time-->
+      <box class="time">{{hour}}:{{min}} {{month}} {{number_day}}, {{year_full}}</box>
+    </def>
+  </definitions>
+
+  <variables>
+
+	  <!-- Music vars -->
+    <!-- These are your variables. Like they say, they run a script, and then output that to the variable. In
+    the following var, we get music info from playerctl. -->
+	 
+    <script-var name="music" interval="5s">playerctl metadata --format '{{ artist }} - {{ title }}'</script-var>
+
+
+    <!--Volume var-->    
+    <!-- If your vars get too complex to write down here, you can use an external script and paste it's path here as well, as shown below.
+     -->
+
+    <script-var name="volume" interval="16ms">~/.config/eww/scripts/getvol</script-var>
+
+    <!--Date vars-->
+    <script-var name="number_day" interval="5h">date "+%d"</script-var>
+    <script-var name="month" interval="10h">date "+%b"</script-var>
+    <script-var name="min" interval="10s">date "+%M"</script-var>
+    <script-var name="hour" interval="1m">date "+%H"</script-var>
+    <script-var name="year_full" interval="15h">date "+%Y"</script-var>
+
+    <!--RAM var-->
+    <script-var name="ram-used" interval="1s">~/.config/eww/scripts/getram</script-var>
+
+    <!--Battery charge var-->
+    <script-var name="battery-remaining" interval="2m">cat /sys/class/power_supply/BAT0/capacity</script-var>
+
+  </variables>
+
+  <windows>
+    <!-- These are the windows -->
+    <window name="bar">
+      <geometry x="0%" y="0%" width="100%" height="4%"/> <!--Specifies geometry-->
+      <widget>
+        <bar/> <!--This is the def we created earlier-->
+      </widget>
+    </window>
+  </windows>
+</eww>

examples/eww-bar/scripts/getram

@@ -0,0 +1,2 @@
+#!/bin/sh
+printf "%.0f\n" $(free -m | grep Mem | awk '{print ($3/$2)*100}')

examples/eww-bar/scripts/getvol

@@ -0,0 +1,2 @@
+#!/bin/sh
+amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'