The main app page is starting to take form.
Created stylesheet for page. Added real content and structure to the app page.
This commit is contained in:
Jonathan Bernard
parent
dcd836ba8e
commit
6bdf0ab526
@ -6,8 +6,8 @@
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin rounded2($side, $radius: 10px) {
|
||||
-moz-border-radius-#{$side}: $radius;
|
||||
-webkit-border-#{$side}-radius: $radius;
|
||||
border-#{$side}-radius: $radius;
|
||||
@mixin rounded2($side1, $side2, $radius: 10px) {
|
||||
-moz-border-radius-#{$side1}#{$side2}: $radius;
|
||||
-webkit-border-#{$side1}-#{$side2}-radius: $radius;
|
||||
border-#{$side1}-#{$side2}-radius: $radius;
|
||||
}
|
||||
|
||||
114
www/css/ts-screen.css
Normal file
114
www/css/ts-screen.css
Normal file
@ -0,0 +1,114 @@
|
||||
/*
|
||||
* 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;
|
||||
*/
|
||||
/* _rounded.scss */
|
||||
html {
|
||||
background: url("../img/loving_blu.png") repeat; }
|
||||
|
||||
body {
|
||||
width: 50%;
|
||||
background-color: #657a8b;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border: solid #b34c2b;
|
||||
border-top: 0;
|
||||
-moz-border-radius-bottomleft: 1em;
|
||||
-webkit-border-bottom-left-radius: 1em;
|
||||
border-bottom-left-radius: 1em;
|
||||
-moz-border-radius-bottomright: 1em;
|
||||
-webkit-border-bottom-right-radius: 1em;
|
||||
border-bottom-right-radius: 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: #252d42;
|
||||
background-color: #e6dec7;
|
||||
border-color: #979681;
|
||||
border-style: solid;
|
||||
border-width: 0.2em;
|
||||
border-bottom-width: 0;
|
||||
padding: 0.1em 1em 0.1em 1em; }
|
||||
|
||||
.last-bar {
|
||||
border-bottom-width: 0.2em;
|
||||
-moz-border-radius-bottomright: 0.5em;
|
||||
-webkit-border-bottom-right-radius: 0.5em;
|
||||
border-bottom-right-radius: 0.5em;
|
||||
-moz-border-radius-bottomleft: 0.5em;
|
||||
-webkit-border-bottom-left-radius: 0.5em;
|
||||
border-bottom-left-radius: 0.5em; }
|
||||
|
||||
.control-links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none; }
|
||||
.control-links li {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.control-links li a {
|
||||
text-decoration: none; }
|
||||
|
||||
#user {
|
||||
font-weight: bold;
|
||||
-moz-border-radius-topleft: 0.5em;
|
||||
-webkit-border-top-left-radius: 0.5em;
|
||||
border-top-left-radius: 0.5em;
|
||||
-moz-border-radius-topright: 0.5em;
|
||||
-webkit-border-top-right-radius: 0.5em;
|
||||
border-top-right-radius: 0.5em; }
|
||||
#user div {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
#user #fullname, #user #username {
|
||||
text-decoration: none;
|
||||
font-size: x-large;
|
||||
color: #252d42; }
|
||||
#user #fullname:hover, #user #username:hover {
|
||||
text-decoration: underline;
|
||||
color: #4a5a83; }
|
||||
#user #show-user-link, #user #fullname {
|
||||
float: left; }
|
||||
#user #logout-link, #user #username {
|
||||
float: right; }
|
||||
|
||||
#user-info {
|
||||
display: none; }
|
||||
|
||||
#timeline {
|
||||
font-weight: bold; }
|
||||
#timeline #timeline-name {
|
||||
text-decoration: none;
|
||||
color: #252d42; }
|
||||
#timeline #timeline-name:hover {
|
||||
text-decoration: underline;
|
||||
color: #4a5a83; }
|
||||
#timeline #timeline-desc {
|
||||
color: #626150; }
|
||||
|
||||
#timeline-info {
|
||||
display: none; }
|
||||
148
www/css/ts-screen.scss
Normal file
148
www/css/ts-screen.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
/*
|
||||
* author: Jonathan Bernard
|
||||
* TimeStamper main CSS
|
||||
*/
|
||||
/*
|
||||
$obg: #D9CEB2;
|
||||
$bor: #948C75;
|
||||
$ibg: #D5DED9;
|
||||
$txt: #7A6A53;
|
||||
$bbg: #99B2B7;
|
||||
*/
|
||||
/*
|
||||
$obg: #979681;
|
||||
$obor: #E6DEC7;
|
||||
$ibg: #657A8B;
|
||||
$bbor: #B34C2B;
|
||||
$bbg: #252D42;
|
||||
$txt: #E6DEC7;
|
||||
*/
|
||||
/* _rounded.scss */
|
||||
html {
|
||||
background: url("/img/loc.png") repeat; }
|
||||
|
||||
body {
|
||||
background-color: #657a8b;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border: solid #b34c2b;
|
||||
border-top: 0;
|
||||
-moz-border-radius-bottomleft: 1em;
|
||||
-webkit-border-bottomleft-radius: 1em;
|
||||
border-bottomleft-radius: 1em;
|
||||
-moz-border-radius-bottomright: 1em;
|
||||
-webkit-border-bottomright-radius: 1em;
|
||||
border-bottomright-radius: 1em; }
|
||||
|
||||
.bar {
|
||||
font-family: Helvetica, sans-serif;
|
||||
color: #252d42;
|
||||
background-color: #e6dec7;
|
||||
border-color: #979681;
|
||||
border-style: solid;
|
||||
border-width: 0.1em 0.1em 0 0.1em;
|
||||
padding: 0.1em 1em 0.1em 1em; }
|
||||
|
||||
.last-bar {
|
||||
border-bottom-width: 0.1em;
|
||||
-moz-border-radius-bottomright: 0.5em;
|
||||
-webkit-border-bottomright-radius: 0.5em;
|
||||
border-bottomright-radius: 0.5em;
|
||||
-moz-border-radius-bottomleft: 0.5em;
|
||||
-webkit-border-bottomleft-radius: 0.5em;
|
||||
border-bottomleft-radius: 0.5em; }
|
||||
|
||||
#user {
|
||||
overflow: hidden;
|
||||
-moz-border-radius-topleft: 0.5em;
|
||||
-webkit-border-topleft-radius: 0.5em;
|
||||
border-topleft-radius: 0.5em;
|
||||
-moz-border-radius-topright: 0.5em;
|
||||
-webkit-border-topright-radius: 0.5em;
|
||||
border-topright-radius: 0.5em; }
|
||||
#user #fullname {
|
||||
float: left; }
|
||||
#user #username {
|
||||
float: right; }
|
||||
|
||||
#user-info {
|
||||
display: none; }
|
||||
|
||||
#timeline-info {
|
||||
display: none; }
|
||||
@ -1,87 +0,0 @@
|
||||
/*
|
||||
* author: Jonathan Bernard
|
||||
* TimeStamper main CSS
|
||||
*/
|
||||
|
||||
/*
|
||||
$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;
|
||||
|
||||
@import "rounded";
|
||||
|
||||
html {
|
||||
//background-color: $obg;
|
||||
background: url('/img/loc.png') repeat;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $ibg;
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
border: solid $obor;
|
||||
border-top: 0;
|
||||
@include rounded2(bottomleft, 1em);
|
||||
@include rounded2(bottomright, 1em);
|
||||
}
|
||||
|
||||
.bar {
|
||||
|
||||
font-family: Helvetica, sans-serif;
|
||||
color: $txt;
|
||||
background-color: $bbg;
|
||||
border-color: $bbor;
|
||||
border-style: solid;
|
||||
border-width: 0.1em 0.1em 0 0.1em;
|
||||
padding: 0.1em 1em 0.1em 1em;
|
||||
}
|
||||
|
||||
.last-bar {
|
||||
border-bottom-width: 0.1em;
|
||||
@include rounded2(bottomright, 0.5em);
|
||||
@include rounded2(bottomleft, 0.5em);
|
||||
}
|
||||
|
||||
#user {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
#fullname {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#username {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include rounded2(topleft, 0.5em);
|
||||
@include rounded2(topright, 0.5em);
|
||||
}
|
||||
|
||||
#user-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#timeline-info {
|
||||
display: none;
|
||||
}
|
||||
BIN
www/img/loving_blu.png
Normal file
BIN
www/img/loving_blu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
@ -2,22 +2,32 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/ts.css" type="text/css"/>
|
||||
<link rel="stylesheet" media="screen" href="../css/ts-screen.css" type="text/css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="user" class="bar">
|
||||
<span id="fullname">Jonathan Bernard</span>
|
||||
<span id="username">jdbernard</span>
|
||||
<div>
|
||||
<a href="/ts/edit-user.yaws" id="fullname"
|
||||
onclick="toggleUserInfo()">Jonathan Bernard</a>
|
||||
<a href="/ts/logout.yaws" id="username"
|
||||
onclick="showUserMenu()">jdbernard</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="user-info" class="bar">
|
||||
<form action="/ts/update-user.yaws" onsubmit="updateUser(); false">
|
||||
<input type="text" disabled="true"/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="timeline" class="bar">
|
||||
<span id="timeline_name">work</span>
|
||||
<a href="/ts/edit-timeline.yaws" id="timeline-name"
|
||||
onclick="toggleTimelineInfo()">work</a> |
|
||||
<span id="timeline-desc">an accounting of time spent at work</span>
|
||||
</div>
|
||||
|
||||
<div id="timeline-info" class="bar">
|
||||
<form action="/ts/update-timeline.yaws" onsubmit="updateTimeline(); false">
|
||||
<!-- TODO -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user