diff --git a/public/css/app.less b/public/css/app.less index e69de29..07b996b 100644 --- a/public/css/app.less +++ b/public/css/app.less @@ -0,0 +1,129 @@ +@import "elements"; + +.nm-np { + margin: 0; + padding: 0; +} + +.grey { + background-color: rgba(0, 0, 0, 0.25); +} + +ul.inline li { + display: inline-block; +} + +body { + background-color: #263C81; + color: #F2F2F2; + font-family: "helvetica neue", "arial", "sans"; +} + +header { + margin: .5em 0; + padding: 0 0 .5em 0; + .box-shadow(0 0 3px rgba(255,255,255,.5)); +} + +header h1 { + margin: 0; + padding: .25em 0; + font-size: 1.75em + +} + +nav li { + margin-right: 2em; +} + +.lang { + float:right; + margin: -50px 0; +} + +.lang * { + display: inline-block; + margin-left: .25em; +} + +a { + text-decoration: none; + color: #00abd5; +} + +a:hover { + text-decoration: underline; +} + +.wrapper { + max-width: 980px; + padding: 0 1em; + margin: 0 auto; +} + +.products li { + background-color: rgba(255, 255, 255, 0.15); + .box-shadow(0 1px 2px rgba(0,0,0,.5)); + padding: .75em; + margin: .25em; + .rounded(5px); +} + +.tiny { + font-size: .75em; + font-weight: lighter; +} + +.mb2 { + margin-bottom: 2em; +} + +#tentacle{ + position: absolute; + height:415px; + width: 326px; + background-image: url('/img/Tentacle.png'); + background-position: 50px 50px; + background-repeat: no-repeat; + bottom: 0px; + right: 0px; + z-index: -1; +} + +/*CC Checkout*/ +.ccForm { + .rounded(5px); + background-color: #ccc; + display: inline-block; + +} + +.ccForm h3 { + .border-radius(5px, 0, 0, 5px); + background-color: #333; + margin: 0; + padding: .25em 1em; +} + +.ccForm fieldset { + padding: 1em; + border: none; + +} + +:-moz-placeholder { + color: #cccccc !important; +} + +::-moz-placeholder { + color: #cccccc !important; + opacity: 1; +} + +::-webkit-input-placeholder { + color: #cccccc; +} + +:-ms-input-placeholder { + color: #cccccc; +} diff --git a/public/css/elements.less b/public/css/elements.less new file mode 100755 index 0000000..9e45973 --- /dev/null +++ b/public/css/elements.less @@ -0,0 +1,156 @@ +/*--------------------------------------------------- + LESS Elements 0.9 + --------------------------------------------------- + A set of useful LESS mixins + More info at: http://lesselements.com + ---------------------------------------------------*/ + +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, @start), + color-stop(1, @stop)); + background: -ms-linear-gradient(bottom, + @start, + @stop); + background: -moz-linear-gradient(center bottom, + @start 0%, + @stop 100%); + background: -o-linear-gradient(@stop, + @start); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); +} +.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { + background: @color; + background: -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb(@start,@start,@start)), + color-stop(1, rgb(@stop,@stop,@stop))); + background: -ms-linear-gradient(bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%); + background: -moz-linear-gradient(center bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%); + background: -o-linear-gradient(rgb(@stop,@stop,@stop), + rgb(@start,@start,@start)); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); +} +.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { + border-top: solid 1px @top-color; + border-left: solid 1px @left-color; + border-right: solid 1px @right-color; + border-bottom: solid 1px @bottom-color; +} +.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { + -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); + -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); + box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); +} +.rounded(@radius: 2px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} +.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { + -webkit-border-top-right-radius: @topright; + -webkit-border-bottom-right-radius: @bottomright; + -webkit-border-bottom-left-radius: @bottomleft; + -webkit-border-top-left-radius: @topleft; + -moz-border-radius-topright: @topright; + -moz-border-radius-bottomright: @bottomright; + -moz-border-radius-bottomleft: @bottomleft; + -moz-border-radius-topleft: @topleft; + border-top-right-radius: @topright; + border-bottom-right-radius: @bottomright; + border-bottom-left-radius: @bottomleft; + border-top-left-radius: @topleft; + .background-clip(padding-box); +} +.opacity(@opacity: 0.5) { + -moz-opacity: @opacity; + -khtml-opacity: @opacity; + -webkit-opacity: @opacity; + opacity: @opacity; + @opperc: @opacity * 100; + -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; + filter: ~"alpha(opacity=@{opperc})"; +} +.transition-duration(@duration: 0.2s) { + -moz-transition-duration: @duration; + -webkit-transition-duration: @duration; + -o-transition-duration: @duration; + transition-duration: @duration; +} +.transform(...) { + -webkit-transform: @arguments; + -moz-transform: @arguments; + -o-transform: @arguments; + -ms-transform: @arguments; + transform: @arguments; +} +.rotation(@deg:5deg){ + .transform(rotate(@deg)); +} +.scale(@ratio:1.5){ + .transform(scale(@ratio)); +} +.transition(@duration:0.2s, @ease:ease-out) { + -webkit-transition: all @duration @ease; + -moz-transition: all @duration @ease; + -o-transition: all @duration @ease; + transition: all @duration @ease; +} +.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { + -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); + -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); + box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); +} +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; +} +.box-sizing(@sizing: border-box) { + -ms-box-sizing: @sizing; + -moz-box-sizing: @sizing; + -webkit-box-sizing: @sizing; + box-sizing: @sizing; +} +.user-select(@argument: none) { + -webkit-user-select: @argument; + -moz-user-select: @argument; + -ms-user-select: @argument; + user-select: @argument; +} +.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { + -moz-column-width: @colwidth; + -moz-column-count: @colcount; + -moz-column-gap: @colgap; + -moz-column-rule-color: @columnRuleColor; + -moz-column-rule-style: @columnRuleStyle; + -moz-column-rule-width: @columnRuleWidth; + -webkit-column-width: @colwidth; + -webkit-column-count: @colcount; + -webkit-column-gap: @colgap; + -webkit-column-rule-color: @columnRuleColor; + -webkit-column-rule-style: @columnRuleStyle; + -webkit-column-rule-width: @columnRuleWidth; + column-width: @colwidth; + column-count: @colcount; + column-gap: @colgap; + column-rule-color: @columnRuleColor; + column-rule-style: @columnRuleStyle; + column-rule-width: @columnRuleWidth; +} +.translate(@x:0, @y:0) { + .transform(translate(@x, @y)); +} +.background-clip(@argument: padding-box) { + -moz-background-clip: @argument; + -webkit-background-clip: @argument; + background-clip: @argument; +} \ No newline at end of file diff --git a/public/img/Tentacle.png b/public/img/Tentacle.png new file mode 100644 index 0000000..36640f9 Binary files /dev/null and b/public/img/Tentacle.png differ diff --git a/public/img/es.png b/public/img/es.png new file mode 100755 index 0000000..c2de2d7 Binary files /dev/null and b/public/img/es.png differ diff --git a/public/img/us.png b/public/img/us.png new file mode 100755 index 0000000..10f451f Binary files /dev/null and b/public/img/us.png differ