update styles to fit new monitor + frame

README.md

@@ -24,13 +24,23 @@ _TODO: document widget creation and infrastructure_
 
 ## Installing on Raspberry Pi
 
-For speech recognition...
+1. Make sure Node.js/NPM is installed.
+
+2. For speech recognition...
 ```
 sudo apt-get install sox libmagic-dev libatlas-base-dev
 ```
 
 Set up `~/.asoundrc` -> some info on that [here](https://raspberrypi.stackexchange.com/questions/38161/how-to-reorder-the-index-for-mic-on-new-raspbian-jessie-for-pocketsphinx/38163).
 
+3. Turn off screensaver:
+```
+sudo apt-get install x11-xserver-utils
+```
+  http://www.raspberry-projects.com/pi/pi-operating-systems/raspbian/screensaver
+
+4. Run on launch:
+  http://www.raspberry-projects.com/pi/pi-operating-systems/raspbian/auto-running-programs-gui
 
 ## Keyboard Shortcuts
 

stylus/components/calendar.styl

@@ -1,15 +1,27 @@
 .widget-calendar
+  width: 50vw
+
   .time
-    font-size: 0.8em
+    font-size: 0.75em
     font-weight: 700
     margin: 0 10px
 
+  i, .time
+    color: #aaa
+
+
   ul
-    font-size: 0.8em
+    font-size: 1em
     list-style-type: none
     padding: 0
     margin: 0
 
+    li
+      margin-bottom: 15px
+
+      &:last-child
+        margin-bottom: 0
+
   h5
     font-size: 0.5em
     text-transform: uppercase

stylus/components/chores.styl

@@ -4,3 +4,9 @@
 
   i
     margin-right: 10px
+
+  .chore
+    margin-bottom: 15px
+
+    &:last-child
+      margin-bottom: 0px

stylus/components/clock.styl

@@ -5,8 +5,8 @@
     align-items: center
 
   .time
-    font-size: 5em
-    line-height: 1
+    font-size: 6em
+    line-height: 0.9
 
   .date
     font-size: 1.2em

stylus/components/weather.styl

@@ -14,8 +14,8 @@ $blue = #0074D9
     display: inline-block
 
   .temperature
-    font-size: 5em
-    line-height: 1
+    font-size: 6em
+    line-height: 0.9
 
   .high-low
     margin-top: -10px

stylus/styles.styl

@@ -6,6 +6,8 @@ $fa-font-path = '~font-awesome-stylus/fonts'
 @import 'mixins'
 @import 'colors'
 
+$widgetWidth = 38vw
+
 *
   box-sizing: border-box
 
@@ -36,9 +38,8 @@ h4
   flex-direction: row
   justify-content: space-between
   border: 3px solid transparent
-  margin: 5px
-  padding: 0 5px
-  height: calc(100vh - 10px)
+  margin: 33px 3px
+  height: calc(100vh - 66px)
 
   &.hotword
     border: 3px solid $activeBorderColor
@@ -48,24 +49,26 @@ h4
   flex-direction: column
   box-sizing: border-box
   height: 100%
-  width: 33.33vw
+  width: 50vw
 
 .left
   align-self: flex-start
 
 .right
+  align-items: flex-end
   align-self: flex-end
 
 .widget
   background: #111
   padding: 15px
   margin-bottom: 10px
   border-radius: 4px
-  width: 33.33vw
+  width: $widgetWidth
   transition: all 200ms ease
 
   &.widget-bottom
     margin-top: auto
+    margin-bottom: 0
     align-self: flex-end
 
   &.widget-active