Testing out design ideas.
This commit is contained in:
Jonathan Bernard
parent
afca12ecc9
commit
dcd836ba8e
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
*.sw?
|
||||
ebin/
|
||||
*.beam
|
||||
.sass-cache
|
||||
|
||||
Binary file not shown.
Binary file not shown.
13
www/css/rounded.scss
Normal file
13
www/css/rounded.scss
Normal file
@ -0,0 +1,13 @@
|
||||
/* _rounded.scss */
|
||||
|
||||
@mixin rounded($radius: 10px) {
|
||||
-moz-border-radius: $radius;
|
||||
-webkit-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin rounded2($side, $radius: 10px) {
|
||||
-moz-border-radius-#{$side}: $radius;
|
||||
-webkit-border-#{$side}-radius: $radius;
|
||||
border-#{$side}-radius: $radius;
|
||||
}
|
||||
73
www/css/ts.css
Normal file
73
www/css/ts.css
Normal file
@ -0,0 +1,73 @@
|
||||
/*
|
||||
* 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; }
|
||||
@ -0,0 +1,87 @@
|
||||
/*
|
||||
* 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/loc.png
Normal file
BIN
www/img/loc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
www/img/phos-bg.png
Normal file
BIN
www/img/phos-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@ -2,6 +2,7 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="/css/ts.css" type="text/css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -11,7 +12,7 @@
|
||||
</div>
|
||||
<div id="user-info" class="bar">
|
||||
<form action="/ts/update-user.yaws" onsubmit="updateUser(); false">
|
||||
<!-- TODO -->
|
||||
<input type="text" disabled="true"/>
|
||||
</form>
|
||||
</div>
|
||||
<div id="timeline" class="bar">
|
||||
@ -22,9 +23,7 @@
|
||||
<!-- TODO -->
|
||||
</form>
|
||||
</div>
|
||||
<div id="new-entry" class="bar">
|
||||
</div>
|
||||
<div id="new-entry-notes" class="bar">
|
||||
<div id="new-entry" class="bar last-bar">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user