The main app page is starting to take form.

Created stylesheet for page. Added real content and structure to the app page.
2011-02-11 16:35:11 -06:00
parent dcd836ba8e
commit 6bdf0ab526
7 changed files with 280 additions and 168 deletions
--- a/www/css/ts-screen.scss
+++ b/www/css/ts-screen.scss
@ -0,0 +1,148 @@
+/*
+ * author: Jonathan Bernard
+ * TimeStamper main CSS for screen media types
+ */
+
+/*
+    $obg: #D9CEB2;
+    $bor: #948C75;
+    $ibg: #D5DED9;
+    $txt: #7A6A53;
+    $bbg: #99B2B7;
+*/
+
+/*
+$obg:  #979681;
+$obor: #E6DEC7;
+$ibg:  #657A8B;
+$bbor: #B34C2B;
+$bbg:  #252D42;
+$txt:  #E6DEC7;
+*/
+
+$obg:  #252D42;
+$obor: #B34C2B;
+$ibg:  #657A8B;
+$bbor: #979681;
+$bbg:  #E6DEC7;
+$txt:  #252D42;
+$greyTxt:  darken($bbor, 20%);
+
+$iBorWidth: 0.2em;
+
+@import "rounded";
+
+html {
+    //background-color: $obg;
+    background: url('../img/loving_blu.png') repeat;
+}
+
+body {
+    width: 50%;
+    background-color: $ibg;
+    margin: auto;
+    padding: 1em;
+    border: solid $obor;
+    border-top: 0;
+    @include rounded2(bottom, left, 1em);
+    @include rounded2(bottom, right, 1em);
+}
+
+@media all and (min-device-width: 480) { body { width: 50%; }}
+
+@media all and (max-device-width: 480) { body { width: 80%; }}
+
+.bar {
+
+    font-family: Helvetica, sans-serif;
+    color: $txt;
+    background-color: $bbg;
+    border-color: $bbor;
+    border-style: solid;
+    border-width: $iBorWidth;
+    border-bottom-width: 0;
+    padding: 0.1em 1em 0.1em 1em;
+}
+
+.last-bar {
+    border-bottom-width: $iBorWidth;
+    @include rounded2(bottom, right, 0.5em);
+    @include rounded2(bottom, left, 0.5em);
+}
+
+.left-header {
+}
+
+.right-header {
+}
+
+.control-links {
+
+    li {
+
+        a {
+            text-decoration: none
+        }
+
+        margin: 0;
+        padding: 0;
+    }
+    
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+}
+
+#user {
+
+    div { 
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+    }
+
+    #fullname, #username {
+
+        &:hover {
+            text-decoration: underline;
+            color: lighten($txt, 20%);
+        }
+
+        text-decoration: none;
+        font-size: x-large;
+        color: $txt;
+    }
+
+    #show-user-link, #fullname { float: left; }
+    #logout-link, #username { float: right; }
+
+    font-weight: bold;
+    @include rounded2(top, left, 0.5em);
+    @include rounded2(top, right, 0.5em);
+}
+
+#user-info {
+    display: none;
+}
+
+#timeline {
+    font-weight: bold;
+
+    #timeline-name {
+
+        &:hover {
+            text-decoration: underline;
+            color: lighten($txt, 20%);
+        }
+
+        text-decoration: none;
+        color: $txt;
+    }
+
+    #timeline-desc { color: $greyTxt; }
+}
+
+#timeline-info {
+    display: none;
+}