Skip to content

Commit

Permalink
Add styling to master layout and css assets
Browse files Browse the repository at this point in the history
  • Loading branch information
lmarkus committed Dec 30, 2013
1 parent 0b4869f commit 076099d
Show file tree
Hide file tree
Showing 4 changed files with 297 additions and 6 deletions.
129 changes: 129 additions & 0 deletions public/css/app.less
Original file line number Diff line number Diff line change
@@ -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;
}
156 changes: 156 additions & 0 deletions public/css/elements.less
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file added public/img/Tentacle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 12 additions & 6 deletions public/templates/layouts/master.dust
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="nm-np">
<head>
<meta charset="utf-8" />
<meta charset="utf-8"/>
<title>{+title /}</title>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div id="wrapper">
<body class="nm-np">
<header class="grey">
<div class="wrapper">
<h1>Kraken Central</h1>
</div>
</header>

<div class="wrapper">
{+body /}
</div>

<div id="tentacle"></div>
</body>
</html>

0 comments on commit 076099d

Please sign in to comment.