ben-burlingham
10 years ago
parent
df595d6c5e
commit
9db3080d34
20 changed files with 836 additions and 340 deletions
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,159 @@ |
||||
* { |
||||
box-sizing: border-box; |
||||
cursor: default; |
||||
font-family: 'open sans'; |
||||
letter-spacing: 0.7px; |
||||
margin: 0; |
||||
padding: 0; } |
||||
|
||||
.main { |
||||
height: 900px; |
||||
margin: 50px auto; |
||||
position: relative; |
||||
width: 900px; } |
||||
|
||||
#chart { |
||||
border: solid #e8e8e8; |
||||
border-width: 0 1px; |
||||
cursor: pointer; |
||||
height: 200px; |
||||
left: 0; |
||||
position: absolute; |
||||
top: 600px; |
||||
width: 100%; } |
||||
|
||||
#year-labels { |
||||
border: solid #e8e8e8; |
||||
border-width: 0 1px 1px 1px; |
||||
font-size: 0; |
||||
height: 30px; |
||||
padding-left: 24px; |
||||
position: absolute; |
||||
top: 800px; |
||||
width: 100%; } |
||||
#year-labels .label { |
||||
color: #bbb; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
line-height: 20px; |
||||
font-size: 9px; |
||||
margin-right: 2px; |
||||
text-align: center; |
||||
width: 23px; } |
||||
|
||||
.year-toggle:hover { |
||||
background: #eee; } |
||||
|
||||
.axis .domain { |
||||
fill: none; |
||||
stroke: none; } |
||||
|
||||
.axis .tick { |
||||
fill: #888; |
||||
font-size: 8px; } |
||||
|
||||
.label-axis-y { |
||||
fill: #333; |
||||
font-size: 10px; |
||||
letter-spacing: normal; } |
||||
|
||||
#map { |
||||
background: #e8fbfe; |
||||
border: 1px solid #e8e8e8; |
||||
height: 600px; |
||||
position: relative; |
||||
width: 100%; |
||||
z-index: 0; } |
||||
|
||||
.feature { |
||||
fill: #dffbb8; |
||||
stroke: #bde484; } |
||||
|
||||
.reticle { |
||||
fill: rgba(153, 173, 40, 0.2); |
||||
stroke: #5D5336; } |
||||
|
||||
.column-display { |
||||
cursor: pointer; |
||||
height: 210px; |
||||
left: 20px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 270px; |
||||
width: 180px; } |
||||
.column-display select { |
||||
background: 0; |
||||
border: 0; |
||||
outline: 0; |
||||
width: 200px; } |
||||
.column-display .toggle { |
||||
background: 0; |
||||
color: #ccc; |
||||
cursor: pointer; |
||||
font-size: 10px; |
||||
height: 30px; |
||||
letter-spacing: 1.5px; |
||||
line-height: 30px; |
||||
text-transform: uppercase; |
||||
transition: color 0.3s ease; } |
||||
.column-display .toggle:hover { |
||||
color: #777; } |
||||
.column-display .toggle.selected { |
||||
color: #444; |
||||
cursor: default; |
||||
font-weight: bold; } |
||||
|
||||
.reticle-sizer { |
||||
left: 20px; |
||||
position: absolute; |
||||
top: 520px; |
||||
z-index: 1; } |
||||
|
||||
.bar-display { |
||||
left: 25px; |
||||
position: absolute; |
||||
top: 560px; } |
||||
.bar-display .toggle { |
||||
background-image: url("../bar-display.png"); |
||||
background-repeat: no-repeat; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
font-size: 0; |
||||
height: 40px; |
||||
margin-right: 15px; |
||||
opacity: 0.15; |
||||
transition: opacity 0.3s ease; |
||||
width: 30px; } |
||||
.bar-display .toggle:hover { |
||||
opacity: 1; } |
||||
.bar-display .toggle.selected { |
||||
cursor: default; |
||||
opacity: 1; } |
||||
.bar-display .toggle1 { |
||||
background-position: -60px 10px; } |
||||
.bar-display .toggle2 { |
||||
background-position: -30px 10px; } |
||||
.bar-display .toggle3 { |
||||
background-position: 0 10px; } |
||||
|
||||
input[type=range] { |
||||
-webkit-appearance: none; } |
||||
|
||||
input[type=range]::-webkit-slider-runnable-track { |
||||
width: 300px; |
||||
height: 2px; |
||||
background: #ddd; |
||||
border: none; |
||||
border-radius: 3px; } |
||||
|
||||
input[type=range]::-webkit-slider-thumb { |
||||
background: #d8ebd3; |
||||
border: 2px solid #5D5336; |
||||
border-radius: 50%; |
||||
height: 16px; |
||||
margin-top: -7px; |
||||
width: 16px; |
||||
-webkit-appearance: none; } |
||||
|
||||
input[type=range]:focus { |
||||
outline: none; } |
||||
@ -0,0 +1,24 @@ |
||||
{ |
||||
"name": "buoy-analysis", |
||||
"version": "1.0.0", |
||||
"description": "", |
||||
"main": "server.js", |
||||
"dependencies": { |
||||
"chalk": "^1.1.1", |
||||
"dateformat": "^1.0.12", |
||||
"es6-promise": "^3.0.2", |
||||
"node-sass": "^3.4.2", |
||||
"watch": "^0.17.1", |
||||
"xml2js": "^0.4.15" |
||||
}, |
||||
"devDependencies": {}, |
||||
"scripts": { |
||||
"watch": "node tasks/watch" |
||||
}, |
||||
"repository": { |
||||
"type": "git", |
||||
"url": "http://gogs.benburlingham.com/ben.burlingham/buoy-analysis" |
||||
}, |
||||
"author": "", |
||||
"license": "ISC" |
||||
} |
||||
Binary file not shown.
@ -0,0 +1,52 @@ |
||||
#chart { |
||||
border:solid #e8e8e8; |
||||
border-width:0 1px; |
||||
cursor:pointer; |
||||
height:200px; |
||||
left:0; |
||||
position:absolute; |
||||
top:600px; |
||||
width:100%; |
||||
} |
||||
|
||||
#year-labels { |
||||
border:solid #e8e8e8; |
||||
border-width:0 1px 1px 1px; |
||||
font-size:0; |
||||
height:30px; |
||||
padding-left:24px; |
||||
position:absolute; |
||||
top:800px; |
||||
width:100%; |
||||
|
||||
.label { |
||||
color:#bbb; |
||||
cursor:pointer; |
||||
display:inline-block; |
||||
line-height:20px; |
||||
font-size:9px; |
||||
margin-right:2px; |
||||
text-align:center; |
||||
width:23px; |
||||
} |
||||
} |
||||
|
||||
.year-toggle:hover { |
||||
background:#eee; |
||||
} |
||||
|
||||
.axis .domain { |
||||
fill: none; |
||||
stroke: none; |
||||
} |
||||
|
||||
.axis .tick { |
||||
fill:#888; |
||||
font-size:8px; |
||||
} |
||||
|
||||
.label-axis-y { |
||||
fill: #333; |
||||
font-size:10px; |
||||
letter-spacing:normal; |
||||
} |
||||
@ -0,0 +1,22 @@ |
||||
$mainH: 900px; |
||||
$mainW: 900px; |
||||
|
||||
* { |
||||
box-sizing:border-box; |
||||
cursor:default; |
||||
font-family:'open sans'; |
||||
letter-spacing:0.7px; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.main { |
||||
height:$mainH; |
||||
margin:50px auto; |
||||
position:relative; |
||||
width:$mainW; |
||||
} |
||||
|
||||
@import 'chart'; |
||||
@import 'map'; |
||||
@import 'options'; |
||||
@ -0,0 +1,18 @@ |
||||
#map { |
||||
background:#e8fbfe; |
||||
border:1px solid #e8e8e8; |
||||
height:600px; |
||||
position:relative; |
||||
width:100%; |
||||
z-index:0; |
||||
} |
||||
|
||||
.feature { |
||||
fill:#dffbb8; |
||||
stroke:#bde484; |
||||
} |
||||
|
||||
.reticle { |
||||
fill: rgba(153, 173, 40, 0.2); |
||||
stroke: #5D5336; |
||||
} |
||||
@ -0,0 +1,116 @@ |
||||
.column-display { |
||||
cursor:pointer; |
||||
height:210px; |
||||
left:20px; |
||||
overflow:hidden; |
||||
position:absolute; |
||||
top:270px; |
||||
width:180px; |
||||
|
||||
select { |
||||
background:0; |
||||
border:0; |
||||
outline:0; |
||||
width:200px; |
||||
} |
||||
|
||||
.toggle { |
||||
background:0; |
||||
color:#ccc; |
||||
cursor:pointer; |
||||
font-size:10px; |
||||
height:30px; |
||||
letter-spacing:1.5px; |
||||
line-height:30px; |
||||
text-transform:uppercase; |
||||
transition:color 0.3s ease; |
||||
|
||||
&:hover { |
||||
color:#777; |
||||
} |
||||
|
||||
&.selected { |
||||
color:#444; |
||||
cursor:default; |
||||
font-weight:bold; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.reticle-sizer { |
||||
left:20px; |
||||
position:absolute; |
||||
top:520px; |
||||
z-index:1; |
||||
} |
||||
|
||||
.bar-display { |
||||
$toggleW: 30px; |
||||
$toggleH: 40px; |
||||
$toggleSpacing: 15px; |
||||
|
||||
left:25px; |
||||
position:absolute; |
||||
top:560px; |
||||
|
||||
.toggle { |
||||
background-image:url('../bar-display.png'); |
||||
background-repeat:no-repeat; |
||||
cursor:pointer; |
||||
display:inline-block; |
||||
font-size:0; |
||||
height:$toggleH; |
||||
margin-right:$toggleSpacing; |
||||
opacity:0.15; |
||||
transition:opacity 0.3s ease; |
||||
width:$toggleW; |
||||
|
||||
&:hover { |
||||
opacity:1; |
||||
} |
||||
|
||||
&.selected { |
||||
cursor:default; |
||||
opacity:1; |
||||
} |
||||
} |
||||
|
||||
.toggle1 { |
||||
background-position:-60px 10px; |
||||
} |
||||
|
||||
.toggle2 { |
||||
background-position:-30px 10px; |
||||
} |
||||
|
||||
.toggle3 { |
||||
background-position:0 10px; |
||||
} |
||||
} |
||||
|
||||
input[type=range]{ |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
input[type=range]::-webkit-slider-runnable-track { |
||||
width: 300px; |
||||
height: 2px; |
||||
background: #ddd; |
||||
border: none; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
input[type=range]::-webkit-slider-thumb { |
||||
background: #d8ebd3; |
||||
border: 2px solid #5D5336; |
||||
border-radius: 50%; |
||||
height: 16px; |
||||
margin-top: -7px; |
||||
width: 16px; |
||||
-webkit-appearance: none; |
||||
} |
||||
|
||||
input[type=range]:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
@ -0,0 +1,21 @@ |
||||
var sass = require('node-sass'); |
||||
var fs = require('fs'); |
||||
var chalk = require('chalk'); |
||||
var dateFormat = require('dateformat'); |
||||
|
||||
function thenWrite(err, result) { |
||||
if (err) { |
||||
console.log(err); |
||||
return; |
||||
} |
||||
|
||||
var d = new Date(); |
||||
fs.writeFile('css/index.css', result.css, 'utf8'); |
||||
console.log(dateFormat(new Date(), "dddd mmm d H:MM:ss") + ' ' + chalk.green('Rendered css/index.css')) |
||||
} |
||||
|
||||
module.exports = { |
||||
render: function() { |
||||
sass.render({ file: 'sass/index.scss' }, thenWrite); |
||||
} |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
var watch = require('watch'); |
||||
var sass = require('./sass'); |
||||
|
||||
watch.watchTree('sass', function (f, curr, prev) { |
||||
if (typeof f == "object" && prev === null && curr === null) { |
||||
// Finished walking the tree
|
||||
return; |
||||
} |
||||
|
||||
sass.render(); |
||||
}); |
||||
Loading…
Reference in new issue