From 2ce26b4ed17e153d9834e6dd21ec0da92d71139e Mon Sep 17 00:00:00 2001 From: Samrat Man Singh Date: Sat, 7 Jul 2012 08:31:08 +0545 Subject: Move syte-pelican to syte --- syte/static/less/base.less | 68 ++ syte/static/less/buttons.less | 27 + syte/static/less/code.less | 86 +++ syte/static/less/less-1.1.5.min.js | 9 + syte/static/less/mixins.less | 250 +++++++ syte/static/less/modals.less | 67 ++ syte/static/less/profiles.less | 354 ++++++++++ syte/static/less/reset.less | 24 + syte/static/less/styles-mobile.less | 165 +++++ syte/static/less/styles.css | 1221 +++++++++++++++++++++++++++++++++++ syte/static/less/styles.less | 253 ++++++++ syte/static/less/variables.css | 0 syte/static/less/variables.less | 6 + 13 files changed, 2530 insertions(+) create mode 100644 syte/static/less/base.less create mode 100644 syte/static/less/buttons.less create mode 100644 syte/static/less/code.less create mode 100755 syte/static/less/less-1.1.5.min.js create mode 100644 syte/static/less/mixins.less create mode 100644 syte/static/less/modals.less create mode 100644 syte/static/less/profiles.less create mode 100644 syte/static/less/reset.less create mode 100644 syte/static/less/styles-mobile.less create mode 100644 syte/static/less/styles.css create mode 100644 syte/static/less/styles.less create mode 100644 syte/static/less/variables.css create mode 100644 syte/static/less/variables.less (limited to 'syte/static/less') diff --git a/syte/static/less/base.less b/syte/static/less/base.less new file mode 100644 index 0000000..b801e3f --- /dev/null +++ b/syte/static/less/base.less @@ -0,0 +1,68 @@ + +body { + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 15px; + color: @text-color; +} + +::selection, ::-moz-selection { + background: @adjacent-color; + color: #fff; + text-shadow: none; +} + +h1, .h1 { font-size: 30px; line-height: 35px; font-weight: 500; } +h2, .h2 { font-size: 24px; line-height: 30px; font-weight: 500; } +h3, .h3 { font-size: 18px; line-height: 25px; font-weight: 500; } +h4, .h4 { font-size: 16px; line-height: 20px; font-weight: 500; } +h5, .h5 { font-size: 16px; line-height: 20px; font-weight: 500; } +h6, .h6 { font-size: 14px; line-height: 20px; font-weight: 500; } + +ul { margin: 0 0 15px 15px; } +ol { margin: 0 0 15px 20px;} +li { margin-bottom: 5px; + ul, ol { margin-bottom: 0; } +} + +dl { + margin-bottom: 10px; + dt { font-weight: bold; } + dd { margin: 0 0 5px 10px; } +} + +p { + line-height: 25px; + margin-top: 20px; + margin-bottom: 20px; +} + +a { + color: @link-color; + text-decoration: none; + border-bottom: 1px solid @text-color; + + &:hover { + color: @adjacent-color; + border-bottom: 1px solid @adjacent-color; + } + + &.no-border {border-bottom: 0;} +} + +blockquote { + margin-top: 20px 0; + padding: 0 0 0 20px; + border-left: 5px solid @adjacent-color; + + p:first-child { + margin-top: 5px; + } +} + +.descr { + display: block; + font-size: 12px; + line-height: 20px; + color: #7f7e7e; +} + diff --git a/syte/static/less/buttons.less b/syte/static/less/buttons.less new file mode 100644 index 0000000..67547d8 --- /dev/null +++ b/syte/static/less/buttons.less @@ -0,0 +1,27 @@ +//Button +.btn { + display: inline-block; + padding: 4px 10px 4px; + font-size: 13px; + line-height: 18px; + color: #333; + text-align: center; + text-shadow: 0 1px 1px rgba(255,255,255,.75); + vertical-align: middle; + cursor: pointer; + .gradient(#fff, darken(#fff, 10%)); + border: 1px solid #ccc; + border-bottom-color: darken(#ccc, 10%); + .border-radius(4px); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); +} + +.btn:hover { + color: #333; + text-decoration: none; + background-color: darken(#fff, 10%); + background-position: 0 -15px; + border-bottom-color: darken(#ccc, 10%); + + .transition(background-position .1s linear); +} diff --git a/syte/static/less/code.less b/syte/static/less/code.less new file mode 100644 index 0000000..7861274 --- /dev/null +++ b/syte/static/less/code.less @@ -0,0 +1,86 @@ + +code, pre { + padding: 0 3px 2px; + color: #333; + + .font-monospace(); + .border-radius(3px); +} + +// Inline code +code { + padding: 2px 4px; + color: @adjacent-color; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} + +.reset-code() { + padding: 0; + color: inherit; + background-color: transparent; + border: 0; +} + +// Blocks of code +pre { + display: block; + padding: 8px; + margin: 0 0 9px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + + border: 1px solid #ccc; // IE8- + border: 1px solid rgba(0,0,0,.15); + .border-radius(4px); + + &.prettyprint { margin-bottom: 20px; } + + code { + .reset-code(); + } +} + +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} + +blockquote code { + .reset-code(); +} + +//Pretty print +.com { color: #93a1a1; } +.lit { color: #195f91; } +.pun, .opn, .clo { color: #93a1a1; } +.fun { color: #dc322f; } +.str, .atv { color: #da3f47; } +.kwd, .linenums .tag { color: #1e347b; } +.typ, .atn, .dec, .var { color: teal; } +.pln { color: #48484c; } + +.prettyprint { + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} +.prettyprint.linenums { + @linenums-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + .box-shadow(@linenums-shadow); +} + +ol.linenums { + margin: 0 0 0 33px; /* IE indents via margin-left */ + + li { + padding-left: 12px; + color: #bebec5; + line-height: 18px; + text-shadow: 0 1px 0 #fff; + } +} + diff --git a/syte/static/less/less-1.1.5.min.js b/syte/static/less/less-1.1.5.min.js new file mode 100755 index 0000000..49949fb --- /dev/null +++ b/syte/static/less/less-1.1.5.min.js @@ -0,0 +1,9 @@ +// +// LESS - Leaner CSS v1.1.5 +// http://lesscss.org +// +// Copyright (c) 2009-2011, Alexis Sellier +// Licensed under the Apache 2.0 License. +// +(function(a,b){function c(b){return a.less[b.split("/")[1]]}function l(){var a=document.getElementsByTagName("style");for(var b=0;b0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&g&&(t("saving "+e+" to cache."),g.setItem(e,a),g.setItem(e+":timestamp",c))}function q(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var g=r(),h=f?!1:d.async;typeof g.overrideMimeType=="function"&&g.overrideMimeType("text/css"),g.open("GET",a,h),g.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),g.send(null),f?g.status===0?c(g.responseText):e(g.status,a):h?g.onreadystatechange=function(){g.readyState==4&&i(g,c,e)}:i(g,c,e)}function r(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){return t("browser doesn't support AJAX."),null}}function s(a){return a&&a.parentNode.removeChild(a)}function t(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function u(a,b){var c="less-error-message:"+o(b),e=[""].join("\n"),f=document.createElement("div"),g,h;f.id=c,f.className="less-error-message",h="

"+(a.message||"There is an error in your .less file")+"

"+'

'+b+" ",a.extract&&(h+="on line "+a.line+", column "+(a.column+1)+":

"+e.replace(/\[(-?\d)\]/g,function(b,c){return parseInt(a.line)+parseInt(c)||""}).replace(/\{(\d)\}/g,function(b,c){return a.extract[parseInt(c)]||""}).replace(/\{current\}/,a.extract[1].slice(0,a.column)+''+a.extract[1].slice(a.column)+"")),f.innerHTML=h,p([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #ee4444;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.ctx {","color: #dd4444;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}Array.isArray||(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"||a instanceof Array}),Array.prototype.forEach||(Array.prototype.forEach=function(a,b){var c=this.length>>>0;for(var d=0;d>>0,c=new Array(b),d=arguments[1];for(var e=0;e>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c=b)return-1;c<0&&(c+=b);for(;ck&&(j[f]=j[f].slice(c-k),k=c)}function s(a){var d,e,g,h,i,m,n,o;if(a instanceof Function)return a.call(l.parsers);if(typeof a=="string")d=b.charAt(c)===a?a:null,g=1,r();else{r();if(d=a.exec(j[f]))g=d[0].length;else return null}if(d){o=c+=g,m=c+j[f].length-g;while(c0)throw{type:"Syntax",message:"Missing closing `}`",filename:a.filename};return c.map(function(a){return a.join("")})}([[]]),h=new e.Ruleset([],s(this.parsers.primary)),h.root=!0,h.toCSS=function(c){var d,f,g;return function(g,h){function n(a){return a?(b.slice(0,a).match(/\n/g)||"").length:null}var i=[];g=g||{},typeof h=="object"&&!Array.isArray(h)&&(h=Object.keys(h).map(function(a){var b=h[a];return b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b])),new e.Rule("@"+a,b,!1,0)}),i=[new e.Ruleset(null,h)]);try{var j=c.call(this,{frames:i}).toCSS([],{compress:g.compress||!1})}catch(k){f=b.split("\n"),d=n(k.index);for(var l=k.index,m=-1;l>=0&&b.charAt(l)!=="\n";l--)m++;throw{type:k.type,message:k.message,filename:a.filename,index:k.index,line:typeof d=="number"?d+1:null,callLine:k.call&&n(k.call)+1,callExtract:f[n(k.call)],stack:k.stack,column:m,extract:[f[d-1],f[d],f[d+1]]}}return g.compress?j.replace(/(\s)+/g,"$1"):j}}(h.eval);if(c=0&&b.charAt(v)!=="\n";v--)w++;u={name:"ParseError",message:"Syntax Error on line "+p,index:c,filename:a.filename,line:p,column:w,extract:[q[p-2],q[p-1],q[p]]}}this.imports.queue.length>0?n=function(){g(u,h)}:g(u,h)},parsers:{primary:function(){var a,b=[];while((a=s(this.mixin.definition)||s(this.rule)||s(this.ruleset)||s(this.mixin.call)||s(this.comment)||s(this.directive))||s(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(c)!=="/")return;if(b.charAt(c+1)==="/")return new e.Comment(s(/^\/\/.*/),!0);if(a=s(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)},entities:{quoted:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)!=='"'&&b.charAt(d)!=="'")return;f&&s("~");if(a=s(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],f)},keyword:function(){var a;if(a=s(/^[_A-Za-z-][_A-Za-z0-9-]*/))return new e.Keyword(a)},call:function(){var a,b,d=c;if(!(a=/^([\w-]+|%)\(/.exec(j[f])))return;a=a[1].toLowerCase();if(a==="url")return null;c+=a.length;if(a==="alpha")return s(this.alpha);s("("),b=s(this.entities.arguments);if(!s(")"))return;if(a)return new e.Call(a,b,d)},arguments:function(){var a=[],b;while(b=s(this.expression)){a.push(b);if(!s(","))break}return a},literal:function(){return s(this.entities.dimension)||s(this.entities.color)||s(this.entities.quoted)},url:function(){var a;if(b.charAt(c)!=="u"||!s(/^url\(/))return;a=s(this.entities.quoted)||s(this.entities.variable)||s(this.entities.dataURI)||s(/^[-\w%@$\/.&=:;#+?~]+/)||"";if(!s(")"))throw new Error("missing closing ) for url()");return new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),o.paths)},dataURI:function(){var a;if(s(/^data:/)){a={},a.mime=s(/^[^\/]+\/[^,;)]+/)||"",a.charset=s(/^;\s*charset=[^,;)]+/)||"",a.base64=s(/^;\s*base64/)||"",a.data=s(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,d=c;if(b.charAt(c)==="@"&&(a=s(/^@@?[\w-]+/)))return new e.Variable(a,d)},color:function(){var a;if(b.charAt(c)==="#"&&(a=s(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,d=b.charCodeAt(c);if(d>57||d<45||d===47)return;if(a=s(/^(-?\d*\.?\d+)(px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)!=="`")return;f&&s("~");if(a=s(/^`([^`]*)`/))return new e.JavaScript(a[1],c,f)}},variable:function(){var a;if(b.charAt(c)==="@"&&(a=s(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!t(/^[@\w.%-]+\/[@\w.-]+/))return;if((a=s(this.entity))&&s("/")&&(b=s(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var a=[],d,f,g,h=c,i=b.charAt(c);if(i!=="."&&i!=="#")return;while(d=s(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new e.Element(f,d,c)),f=s(">");s("(")&&(g=s(this.entities.arguments))&&s(")");if(a.length>0&&(s(";")||t("}")))return new e.mixin.Call(a,g,h)},definition:function(){var a,d=[],f,g,h,i;if(b.charAt(c)!=="."&&b.charAt(c)!=="#"||t(/^[^{]*(;|})/))return;if(f=s(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=f[1];while(h=s(this.entities.variable)||s(this.entities.literal)||s(this.entities.keyword)){if(h instanceof e.Variable)if(s(":"))if(i=s(this.expression))d.push({name:h.name,value:i});else throw new Error("Expected value");else d.push({name:h.name});else d.push({value:h});if(!s(","))break}if(!s(")"))throw new Error("Expected )");g=s(this.block);if(g)return new e.mixin.Definition(a,d,g)}}},entity:function(){return s(this.entities.literal)||s(this.entities.variable)||s(this.entities.url)||s(this.entities.call)||s(this.entities.keyword)||s(this.entities.javascript)||s(this.comment)},end:function(){return s(";")||t("}")},alpha:function(){var a;if(!s(/^\(opacity=/i))return;if(a=s(/^\d+/)||s(this.entities.variable)){if(!s(")"))throw new Error("missing closing ) for alpha()");return new e.Alpha(a)}},element:function(){var a,b,d;d=s(this.combinator),a=s(/^(?:\d+\.\d+|\d+)%/)||s(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||s("*")||s(this.attribute)||s(/^\([^)@]+\)/);if(a)return new e.Element(d,a,c);if(d.value&&d.value.charAt(0)==="&")return new e.Element(d,null,c)},combinator:function(){var a,d=b.charAt(c);if(d===">"||d==="+"||d==="~"){c++;while(b.charAt(c)===" ")c++;return new e.Combinator(d)}if(d==="&"){a="&",c++,b.charAt(c)===" "&&(a="& ");while(b.charAt(c)===" ")c++;return new e.Combinator(a)}if(d===":"&&b.charAt(c+1)===":"){c+=2;while(b.charAt(c)===" ")c++;return new e.Combinator("::")}return b.charAt(c-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,d,f=[],g,h;while(d=s(this.element)){g=b.charAt(c),f.push(d);if(g==="{"||g==="}"||g===";"||g===",")break}if(f.length>0)return new e.Selector(f)},tag:function(){return s(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||s("*")},attribute:function(){var a="",b,c,d;if(!s("["))return;if(b=s(/^[a-zA-Z-]+/)||s(this.entities.quoted))(d=s(/^[|~*$^]?=/))&&(c=s(this.entities.quoted)||s(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!s("]"))return;if(a)return"["+a+"]"},block:function(){var a;if(s("{")&&(a=s(this.primary))&&s("}"))return a},ruleset:function(){var a=[],b,d,f;p();while(b=s(this.selector)){a.push(b),s(this.comment);if(!s(","))break;s(this.comment)}if(a.length>0&&(d=s(this.block)))return new e.Ruleset(a,d);i=c,q()},rule:function(){var a,d,g=b.charAt(c),k,l;p();if(g==="."||g==="#"||g==="&")return;if(a=s(this.variable)||s(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(j[f]))?(c+=l[0].length-1,d=new e.Anonymous(l[1])):a==="font"?d=s(this.font):d=s(this.value),k=s(this.important);if(d&&s(this.end))return new e.Rule(a,d,k,h);i=c,q()}},"import":function(){var a;if(s(/^@import\s+/)&&(a=s(this.entities.quoted)||s(this.entities.url))&&s(";"))return new e.Import(a,o)},directive:function(){var a,d,f,g;if(b.charAt(c)!=="@")return;if(d=s(this["import"]))return d;if(a=s(/^@media|@page/)||s(/^@(?:-webkit-|-moz-)?keyframes/)){g=(s(/^[^{]+/)||"").trim();if(f=s(this.block))return new e.Directive(a+" "+g,f)}else if(a=s(/^@[-a-z]+/))if(a==="@font-face"){if(f=s(this.block))return new e.Directive(a,f)}else if((d=s(this.entity))&&s(";"))return new e.Directive(a,d)},font:function(){var a=[],b=[],c,d,f,g;while(g=s(this.shorthand)||s(this.entity))b.push(g);a.push(new e.Expression(b));if(s(","))while(g=s(this.expression)){a.push(g);if(!s(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=s(this.expression)){b.push(a);if(!s(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(c)==="!")return s(/^! *important/)},sub:function(){var a;if(s("(")&&(a=s(this.expression))&&s(")"))return a},multiplication:function(){var a,b,c,d;if(a=s(this.operand)){while((c=s("/")||s("*"))&&(b=s(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,d,f,g;if(a=s(this.multiplication)){while((f=s(/^[-+]\s+/)||b.charAt(c-1)!=" "&&(s("+")||s("-")))&&(d=s(this.multiplication)))g=new e.Operation(f,[g||a,d]);return g||a}},operand:function(){var a,d=b.charAt(c+1);b.charAt(c)==="-"&&(d==="@"||d==="(")&&(a=s("-"));var f=s(this.sub)||s(this.entities.dimension)||s(this.entities.color)||s(this.entities.variable)||s(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),f]):f},expression:function(){var a,b,c=[],d;while(a=s(this.addition)||s(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=s(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}};if(d.mode==="browser"||d.mode==="rhino")d.Parser.importer=function(a,b,c,d){a.charAt(0)!=="/"&&b.length>0&&(a=b[0]+a),n({href:a,title:a,type:d.mime},c,!0)};(function(a){function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function d(a){return Math.min(1,Math.max(0,a))}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){return a=a<0?a+1:a>1?a-1:a,a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();return e.s+=c.value/100,e.s=d(e.s),b(e)},desaturate:function(a,c){var e=a.toHSL();return e.s-=c.value/100,e.s=d(e.s),b(e)},lighten:function(a,c){var e=a.toHSL();return e.l+=c.value/100,e.l=d(e.l),b(e)},darken:function(a,c){var e=a.toHSL();return e.l-=c.value/100,e.l=d(e.l),b(e)},fadein:function(a,c){var e=a.toHSL();return e.a+=c.value/100,e.a=d(e.a),b(e)},fadeout:function(a,c){var e=a.toHSL();return e.a-=c.value/100,e.a=d(e.a),b(e)},fade:function(a,c){var e=a.toHSL();return e.a=c.value/100,e.a=d(e.a),b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;return d.h=e<0?360+e:e,b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b255?255:a<0?0:a).toString(16),a.length===1?"0"+a:a}).join("")}}}(c("../tree")),function(a){a.Comment=function(a,b){this.value=a,this.silent=!!b},a.Comment.prototype={toCSS:function(a){return a.compress?"":this.value},eval:function(){return this}}}(c("../tree")),function(a){a.Dimension=function(a,b){this.value=parseFloat(a),this.unit=b||null},a.Dimension.prototype={eval:function(){return this},toColor:function(){return new a.Color([this.value,this.value,this.value])},toCSS:function(){var a=this.value+this.unit;return a},operate:function(b,c){return new a.Dimension(a.operate(b,this.value,c.value),this.unit||c.unit)}}}(c("../tree")),function(a){a.Directive=function(b,c){this.name=b,Array.isArray(c)?this.ruleset=new a.Ruleset([],c):this.value=c},a.Directive.prototype={toCSS:function(a,b){return this.ruleset?(this.ruleset.root=!0,this.name+(b.compress?"{":" {\n ")+this.ruleset.toCSS(a,b).trim().replace(/\n/g,"\n ")+(b.compress?"}":"\n}\n")):this.name+" "+this.value.toCSS()+";\n"},eval:function(a){return a.frames.unshift(this),this.ruleset=this.ruleset&&this.ruleset.eval(a),a.frames.shift(),this},variable:function(b){return a.Ruleset.prototype.variable.call(this.ruleset,b)},find:function(){return a.Ruleset.prototype.find.apply(this.ruleset,arguments)},rulesets:function(){return a.Ruleset.prototype.rulesets.apply(this.ruleset)}}}(c("../tree")),function(a){a.Element=function(b,c,d){this.combinator=b instanceof a.Combinator?b:new a.Combinator(b),this.value=c?c.trim():"",this.index=d},a.Element.prototype.toCSS=function(a){return this.combinator.toCSS(a||{})+this.value},a.Combinator=function(a){a===" "?this.value=" ":a==="& "?this.value="& ":this.value=a?a.trim():""},a.Combinator.prototype.toCSS=function(a){return{"":""," ":" ","&":"","& ":" ",":":" :","::":"::","+":a.compress?"+":" + ","~":a.compress?"~":" ~ ",">":a.compress?">":" > "}[this.value]}}(c("../tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(" ")}}}(c("../tree")),function(a){a.Import=function(b,c){var d=this;this._path=b,b instanceof a.Quoted?this.path=/\.(le?|c)ss(\?.*)?$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css(\?.*)?$/.test(this.path),this.css||c.push(this.path,function(a){if(!a)throw new Error("Error parsing "+d.path);d.root=a})},a.Import.prototype={toCSS:function(){return this.css?"@import "+this._path.toCSS()+";\n":""},eval:function(b){var c;if(this.css)return this;c=new a.Ruleset(null,this.root.rules.slice(0));for(var d=0;d0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g0&&c>this.params.length)return!1;d=Math.min(c,this.arity);for(var e=0;ee.selectors[g].elements.length?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}}),this._lookups[g]=d)},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":g.length>3?",\n":", "),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f),d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l0&&(a.value=b[0]+(a.value.charAt(0)==="/"?a.value.slice(1):a.value)),this.value=a,this.paths=b)},a.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(b){return this.attrs?this:new a.URL(this.value.eval(b),this.paths)}}}(c("../tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("../tree")),function(a){a.Variable=function(a,b){this.name=a,this.index=b},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{message:"variable "+e+" is undefined",index:this.index}}}}(c("../tree")),c("./tree").find=function(a,b){for(var c=0,d;c1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)};var f=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||f?"development":"production"),d.async=!1,d.poll=d.poll||(f?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&m(function(a,b,c){a&&p(a.toCSS(),b,c.lastModified)})},d.poll)):d.optimization=3;var g;try{g=typeof a.localStorage=="undefined"?null:a.localStorage}catch(h){g=null}var i=document.getElementsByTagName("link"),j=/^text\/(x-)?less$/;d.sheets=[];for(var k=0;k li { + float: left; + width: 300px; + padding: 10px; + margin: 0 0px 20px 20px; + background: #fff; + + .box-shadow(); + } +} + +.profile-shot { + border-bottom: 0; + display: block; + + img { + width: 300px; + height: 225px; + } +} +.profile-shot:hover { + border-bottom: 0; +} + +.profile-shot-title { + display: block; + padding: 5px 0; + font-size: 13px; + line-height: 18px; + color: @alternate-text-color; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.profile-shot-stats { + list-style: none; + margin: 0; + font-size: 13px; + line-height: 18px; + + li { + margin-bottom: 0; + padding: 0; + border: 0; + display: inline-block; + + //ie7 inline-block hack + zoom: 1; + *display: inline; + } + li:first-child a, li:first-child span { + margin-left: 0; + } + + a { + border-bottom: 0; + } + + a:hover { + border-bottom: 0; + color: @adjacent-color; + } +} + +.profile-shot-date { + float: right; + color: #999; +} + +.instagram .profile-shot img { + width: 300px; + height: 300px; +} diff --git a/syte/static/less/reset.less b/syte/static/less/reset.less new file mode 100644 index 0000000..c597da0 --- /dev/null +++ b/syte/static/less/reset.less @@ -0,0 +1,24 @@ +html, body {margin: 0; padding: 0;} +h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit;} +strong, b {font-weight: bold;} +em, i {font-style:italic;} +body {line-height: 1;} +table {border-collapse: collapse; border-spacing: 0;} +q:before, q:after, blockquote:before, blockquote:after {content: "";} +html {overflow-y: scroll; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} +a:focus {outline: thin dotted;} +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;} +audio, canvas, video {display: inline-block; *display: inline; *zoom: 1;} +audio:not([controls]) {display: none;} +sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} +sup {top: -0.5em;} +sub {bottom: -0.25em;} +img {border: 0; -ms-interpolation-mode: bicubic;} +button, input, select, textarea {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;} +button, input {line-height: normal; *overflow: visible;} +button::-moz-focus-inner, input::-moz-focus-inner {border: 0;padding: 0;} +button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;} +input[type="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} +input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} +textarea {overflow: auto; vertical-align: top;} + diff --git a/syte/static/less/styles-mobile.less b/syte/static/less/styles-mobile.less new file mode 100644 index 0000000..6ff8003 --- /dev/null +++ b/syte/static/less/styles-mobile.less @@ -0,0 +1,165 @@ +@media (max-width: 600px) { + + body { + background: #E9E9E9 url('/static/imgs/b.png'); + overflow-x: hidden; + } + + .mobile-nav { + display: block; + position: fixed; + top: 0; + height: 45px; + width: 100%; + z-index: 3000; + + background: #E9E9E9 url('/static/imgs/b.png'); + border-top: 3px solid @adjacent-color; + .box-shadow(); + + h3 { + float: right; + padding: 10px; + + a { + border-bottom: 0; + font-weight: bold; + color: @text-color; + text-shadow: 0 1px 1px #f9f9f9; + } + } + + .nav-btn { + float: left; + padding: 7px 10px 4px; + margin: 8px 10px; + .gradient(#404040, #333); + .border-radius(4px); + .box-shadow(0 1px 1px #f9f9f9); + } + + .nav-btn-bar { + display: block; + width: 18px; + height: 2px; + margin-bottom: 3px; + background-color: #f9f9f9; + + .border-radius(1px); + .box-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); + } + } + + header.main-header { + position: absolute; + + + hgroup { + .picture a { margin: 60px 0 10px 10px; } + h1 { + font-size: 18px; + margin: 0 10px; + } + h2 { + margin: 0 10px 10px 10px; + } + } + + nav { + margin: 20px 0; + } + + .fork-me { + display: none; + } + } + + .main-section { + margin: 45px 0 0 0; + position: relative; + min-height: 500px; + left: 0; + z-index: 2000; + background-color: #fff; + + .box-shadow(); + .transition(e('left .3s ease-out')); + + &.nav-opened { + left: 240px; + } + } + + .blog-section { + + hgroup { + h2, h1 { .h2; margin: 10px 0 5px 0; } + + h3 a { + position: static; + margin: 0; + padding: 5px 0; + border: 0; + font-weight: 300; + } + } + + article { + width: 95%; + padding: 10px 10px 30px; + border-bottom: 1px solid #C2C2C2; + + img { max-width: 300px; } + } + + .loading { + padding: 15px; + } + } + + .modal-backdrop { + z-index: 3500; + } + + .modal { + position: absolute; + width: 100%; + height: 1500px; + z-index: 4000; + top: 45px; + + &.fade-large { width: 100%; } + + &.fade.in, &.fade-large.in { left: 0; } + } + + .profile.twitter, .profile.github, .profile.dribbble, .profile.instagram { + overflow: scroll; + } + + .profile-info .btn { + position: static; + margin-top: 5px; + } + + .shots-likes-received, .shots-likes-given { display: none; } + + .profile-shots { padding: 10px 0; + + > li { + margin: 0 0 20px 10px; + width: 280px; + } + + img { + width: 280px; + height: 210px; + } + } + + .instagram .profile-shot img { + width: 280px; + height: 280px; + } + +} diff --git a/syte/static/less/styles.css b/syte/static/less/styles.css new file mode 100644 index 0000000..1797222 --- /dev/null +++ b/syte/static/less/styles.css @@ -0,0 +1,1221 @@ +html, +body { + margin: 0; + padding: 0; +} +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +cite, +code, +del, +dfn, +em, +img, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +dd, +dl, +dt, +li, +ol, +ul, +fieldset, +form, +label, +legend, +button, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-weight: normal; + font-style: normal; + font-size: 100%; + font-family: inherit; +} +strong, +b { + font-weight: bold; +} +em, +i { + font-style: italic; +} +body { + line-height: 1; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} +html { + overflow-y: scroll; + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +a:focus { + outline: thin dotted; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section { + display: block; +} +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} +audio:not([controls]) { + display: none; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; + -ms-interpolation-mode: bicubic; +} +button, +input, +select, +textarea { + font-size: 100%; + margin: 0; + vertical-align: baseline; + *vertical-align: middle; +} +button, +input { + line-height: normal; + *overflow: visible; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} +input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +textarea { + overflow: auto; + vertical-align: top; +} +/* mixins.less + * CSS Reset and base mixinis for LESS based development. + * Inspired by bootstrap.less initially created by Mark Dotto + * https://github.com/markdotto/preboot.less + **/ +.fade { + -webkit-transition: opacity 0.15s linear; + -moz-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; + opacity: 0; +} +.fade.in { + opacity: 1; +} +body { + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 15px; + color: #404040; +} +::selection, +::-moz-selection { + background: #333366; + color: #fff; + text-shadow: none; +} +h1, +.h1 { + font-size: 30px; + line-height: 35px; + font-weight: 500; +} +h2, +.h2 { + font-size: 24px; + line-height: 30px; + font-weight: 500; +} +h3, +.h3 { + font-size: 18px; + line-height: 25px; + font-weight: 500; +} +h4, +.h4 { + font-size: 16px; + line-height: 20px; + font-weight: 500; +} +h5, +.h5 { + font-size: 16px; + line-height: 20px; + font-weight: 500; +} +h6, +.h6 { + font-size: 14px; + line-height: 20px; + font-weight: 500; +} +ul { + margin: 0 0 15px 15px; +} +ol { + margin: 0 0 15px 20px; +} +li { + margin-bottom: 5px; +} +li ul, +li ol { + margin-bottom: 0; +} +dl { + margin-bottom: 10px; +} +dl dt { + font-weight: bold; +} +dl dd { + margin: 0 0 5px 10px; +} +p { + line-height: 25px; + margin-top: 20px; + margin-bottom: 20px; +} +a { + color: #000000; + text-decoration: none; + border-bottom: 1px solid #404040; +} +a:hover { + color: #333366; + border-bottom: 1px solid #333366; +} +a.no-border { + border-bottom: 0; +} +blockquote { + margin-top: 20px 0; + padding: 0 0 0 20px; + border-left: 5px solid #333366; +} +blockquote p:first-child { + margin-top: 5px; +} +.descr { + display: block; + font-size: 12px; + line-height: 20px; + color: #7f7e7e; +} +.btn { + display: inline-block; + padding: 4px 10px 4px; + font-size: 13px; + line-height: 18px; + color: #333; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: middle; + cursor: pointer; + background-color: #e6e6e6; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#e6e6e6)); + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e6e6e6)); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(top, #ffffff, #e6e6e6); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + border: 1px solid #ccc; + border-bottom-color: #b3b3b3; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); + box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); +} +.btn:hover { + color: #333; + text-decoration: none; + background-color: #e6e6e6; + background-position: 0 -15px; + border-bottom-color: #b3b3b3; + -webkit-transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + transition: background-position 0.1s linear; +} +.modal-backdrop { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #000; +} +.modal-backdrop.fade, +.modal-backdrop.fade-large { + -webkit-transition: opacity .2s linear; + -moz-transition: opacity .2s linear; + -o-transition: opacity .2s linear; + transition: opacity .2s linear; + filter: alpha(opacity=0); + -khtml-opacity: 0; + -moz-opacity: 0; + opacity: 0; +} +.modal-backdrop, +.modal-backdrop.fade.in { + filter: alpha(opacity=50); + -khtml-opacity: 0.5; + -moz-opacity: 0.5; + opacity: 0.5; +} +.modal { + position: fixed; + top: 0; + left: 240px; + z-index: 1050; + overflow: auto; + width: 400px; + height: 100%; + background-color: #fff; + border-right: 1px solid #404040; + -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); +} +.modal.fade-large { + width: 700px; + -webkit-transition: left .4s ease-out; + -moz-transition: left .4s ease-out; + -o-transition: left .4s ease-out; + transition: left .4s ease-out; + left: -1100px; +} +.modal.fade { + -webkit-transition: left .4s ease-out; + -moz-transition: left .4s ease-out; + -o-transition: left .4s ease-out; + transition: left .4s ease-out; + left: -700px; +} +.modal.fade.in, +.modal.fade-large.in { + left: 240px; +} +.close { + float: right; + font-size: 26px; + line-height: 30px; + font-weight: bold; + color: #000; + background-color: #fff; + text-shadow: 0 1px 0 #ffffff; + filter: alpha(opacity=20); + -khtml-opacity: 0.2; + -moz-opacity: 0.2; + opacity: 0.2; +} +.close:hover { + color: #000; + text-decoration: none; + cursor: pointer; + filter: alpha(opacity=40); + -khtml-opacity: 0.4; + -moz-opacity: 0.4; + opacity: 0.4; +} +.profile { + background: #e9e9e9 url('/static/imgs/b.png'); +} +.profile-info { + position: relative; + padding: 15px; + background: #fff; +} +.profile-info .close { + line-height: 20px; +} +.profile-info .btn { + position: absolute; + right: 17px; + bottom: 20px; +} +.profile-avatar { + display: inline-block; + float: left; + border-bottom: 0; +} +.profile-avatar img { + height: 52px; + width: 52px; + border: 2px solid #333366; +} +.profile-avatar:hover { + border-bottom: 0; +} +.profile-name { + display: block; + float: left; + margin: 0 0 10px 10px; +} +.profile-name h2 { + font-size: 22px; + line-height: 30px; +} +.profile-name h2 a { + font-weight: 500; + color: #404040; + border-bottom: 0; +} +.profile-name h3 { + font-size: 16px; + line-height: 20px; +} +.profile-name h3 a { + color: #777; + border-bottom: 0; +} +.profile-name h2 a:hover, +.profile-name h3 a:hover { + color: #333366; +} +.profile-description { + clear: left; + font-size: 13px; + line-height: 18px; + font-style: italic; + color: #777; + margin: 0; + padding: 5px 0; +} +.profile-description a { + border-bottom: 0; +} +.profile-location-url { + clear: left; + margin: 0; +} +.profile-location-url span { + display: inline-block; + font-size: 13px; + line-height: 18px; + color: #777; +} +.profile-location-url .divider { + padding: 0 4px; + color: #ccc; +} +.profile-location-url a { + border-bottom: 0; +} +.profile-stats { + margin: 0; + list-style: none; + overflow: hidden; + border-top: 1px solid #C2C2C2; + border-bottom: 1px solid #C2C2C2; + background: #fff; +} +.profile-stats li { + display: inline; +} +.profile-stats li a, +.profile-stats li span { + float: left; + padding: 7px 15px; + color: #777; + font-size: 10px; + line-height: 16px; + text-transform: uppercase; + border-left: 1px solid #C2C2C2; + border-bottom: 0; +} +.profile-stats li strong { + display: block; + color: #404040; + font-size: 14px; +} +.profile-stats li a:hover, +.profile-stats li a:hover strong { + color: #333366; +} +.profile-stats li:first-child span { + border-left: 0; +} +.profile-info-footer { + padding: 10px 15px; + border-bottom: 1px solid #c2c2c2; +} +.profile-watchers { + display: inline-block; + background: url('/static/imgs/ico-watchers.png') no-repeat; + margin-left: 10px; + padding-left: 20px; +} +.profile-forks { + display: inline-block; + background: url('/static/imgs/ico-forks.png') no-repeat; + margin-left: 10px; + padding-left: 20px; +} +.profile-comments { + display: inline-block; + background: url('/static/imgs/ico-comments.png') no-repeat; + margin-left: 10px; + padding-left: 20px; +} +.profile-likes { + display: inline-block; + background: url('/static/imgs/ico-likes.png') no-repeat; + margin-left: 10px; + padding-left: 20px; +} +.profile.twitter { + overflow: hidden; +} +.profile-tweets { + list-style: none; + margin: 0; + background: #fff; +} +.profile-tweets li { + padding: 10px 15px; + border-bottom: 1px solid #c2c2c2; +} +.tweet-title { + border-bottom: 0; + position: relative; + padding-left: 45px; +} +.tweet-title img { + position: absolute; + left: 0; + width: 32px; + height: 32px; + border: 2px solid #333366; +} +.tweet-title span { + color: #777; + font-size: 13px; + padding-left: 3px; +} +.tweet-title:hover { + border-bottom: 0; +} +.tweet-text { + color: #777; + margin: 0; + padding: 3px 0; + font-size: 13px; + line-height: 18px; + margin-left: 45px; +} +.tweet-text a { + border-bottom: 0; +} +.tweet-date { + margin: 0; + font-size: 13px; + line-height: 18px; + margin-left: 45px; + color: #999; +} +.profile-repos { + list-style: none; + margin: 0; + background: #fff; +} +.profile-repos li { + padding: 10px 15px; + border-bottom: 1px solid #c2c2c2; +} +.profile-repo-name { + border-bottom: 0; + font-weight: 500; +} +.profile-repo-name:hover { + border-bottom: 0; +} +.profile-repo-text { + color: #777; + margin: 0; + padding: 5px 0; + font-size: 13px; + line-height: 18px; +} +.profile-repo-stats { + list-style: none; + margin: 0; + font-size: 13px; + line-height: 18px; +} +.profile-repo-stats li { + padding: 0; + border: 0; + display: inline-block; + zoom: 1; + *display: inline; +} +.profile-repo-stats a { + border-bottom: 0; +} +.profile-repo-stats a:hover { + border-bottom: 0; + color: #333366; +} +.profile-shots { + list-style: none; + margin: 0; + padding: 15px 0; +} +.profile-shots > li { + float: left; + width: 300px; + padding: 10px; + margin: 0 0px 20px 20px; + background: #fff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); +} +.profile-shot { + border-bottom: 0; + display: block; +} +.profile-shot img { + width: 300px; + height: 225px; +} +.profile-shot:hover { + border-bottom: 0; +} +.profile-shot-title { + display: block; + padding: 5px 0; + font-size: 13px; + line-height: 18px; + color: #4b4b4b; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.profile-shot-stats { + list-style: none; + margin: 0; + font-size: 13px; + line-height: 18px; +} +.profile-shot-stats li { + margin-bottom: 0; + padding: 0; + border: 0; + display: inline-block; + zoom: 1; + *display: inline; +} +.profile-shot-stats li:first-child a, +.profile-shot-stats li:first-child span { + margin-left: 0; +} +.profile-shot-stats a { + border-bottom: 0; +} +.profile-shot-stats a:hover { + border-bottom: 0; + color: #333366; +} +.profile-shot-date { + float: right; + color: #999; +} +.instagram .profile-shot img { + width: 300px; + height: 300px; +} +code, +pre { + padding: 0 3px 2px; + color: #333; + font-family: "Monaco", Courier New, monospace; + font-size: 12px; + font-weight: normal; + line-height: 20px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +code { + padding: 2px 4px; + color: #333366; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} +pre { + display: block; + padding: 8px; + margin: 0 0 9px; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + border: 1px solid #ccc; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +pre.prettyprint { + margin-bottom: 20px; +} +pre code { + padding: 0; + color: inherit; + background-color: transparent; + border: 0; +} +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} +blockquote code { + padding: 0; + color: inherit; + background-color: transparent; + border: 0; +} +.com { + color: #93a1a1; +} +.lit { + color: #195f91; +} +.pun, +.opn, +.clo { + color: #93a1a1; +} +.fun { + color: #dc322f; +} +.str, +.atv { + color: #da3f47; +} +.kwd, +.linenums .tag { + color: #1e347b; +} +.typ, +.atn, +.dec, +.var { + color: teal; +} +.pln { + color: #48484c; +} +.prettyprint { + padding: 8px; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; +} +.prettyprint.linenums { + -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; + box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; +} +ol.linenums { + margin: 0 0 0 33px; + /* IE indents via margin-left */ + +} +ol.linenums li { + padding-left: 12px; + color: #bebec5; + line-height: 18px; + text-shadow: 0 1px 0 #fff; +} +.main-header { + position: fixed; + z-index: 1100; + top: 0; + left: 0; + width: 240px; + height: 100%; + min-height: 700px; + float: left; + border-right: 1px solid #c2c2c2; + background: #e9e9e9 url('/static/imgs/b.png'); +} +.main-header hgroup .picture a { + display: inline-block; + height: 84px; + width: 84px; + margin: 60px 35px 20px 35px; + border: 3px solid #333366; + background: #000000 0 url('https://twimg0-a.akamaihd.net/profile_images/1149409097/20101018060848_samrat94_6HR8FZ5V2JQDPU34ENIKCWBL0STAMO91XG7Y.jpg'); + -webkit-box-shadow: 0 1px 1px #f9f9f9, inset 0 0 6px #000000; + -moz-box-shadow: 0 1px 1px #f9f9f9, inset 0 0 6px #000000; + box-shadow: 0 1px 1px #f9f9f9, inset 0 0 6px #000000; +} +.main-header hgroup h1 { + font-size: 24px; + margin: 0 35px; + text-shadow: 0 1px 1px #f9f9f9; +} +.main-header hgroup h2 { + margin: 10px 35px; + font-size: 14px; + font-weight: normal; + line-height: 25px; + color: #4b4b4b; +} +.main-header nav { + margin: 65px 0; +} +.main-header nav ul { + border-top: 1px solid #d2d2d2; + list-style: none; + margin-left: 0; +} +.main-header nav li { + margin-bottom: 0; +} +.main-header nav a, +.main-header nav a:hover { + border-bottom: 1px solid #d2d2d2; +} +.main-header nav a { + position: relative; + padding: 15px 30px; + color: #404040; + display: block; + font-weight: 500; + text-shadow: 0 1px 1px #f9f9f9; +} +.main-header nav a:hover { + color: #fff; + background: #333366; + border-right: 0; + text-shadow: none; +} +.main-header nav .sel { + border-right: 6px solid #333366; +} +.main-header .spinner { + position: absolute !important; + right: 30px; + top: 23px; +} +.main-header .fork-me { + position: absolute; + left: 30px; + bottom: 20px; + font-size: 13px; + color: #4b4b4b; + border-bottom: none; +} +.main-header .fork-me:hover { + color: #333366; +} +.main-section { + position: relative; + overflow: hidden; + margin-left: 241px; + padding: 35px; +} +.main-section h3.date { + width: 100%; + display: block; + margin-left: -34px; + padding: 20px 35px 30px 75px; + border-bottom: 1px solid #C2C2C2; + border-top: 1px solid #C2C2C2; + font-size: 16px; + font-weight: bold; + background-color: #ffffff; + background-color: rgba(255, 255, 255, 0.8); + color: #333366; +} +a.button_accent { + margin: 40px 50px; + padding: 10px 20px; + display: inline-block; + border: 3px solid #333366; + border-radius: 70px; + -moz-border-radius: 70px; + -webkit-border-radius: 70px; + text-transform: uppercase; + color: #333366; + font-size: 17px; + font-weight: 400; +} +a.button_accent:link { + color: #0e94ec; +} +a.button_accent:hover { + color: #ffffff; + background-color: #333366; + outline: 0; +} +a.button_accent:active { + color: #ffffff; + background-color: #333399; + outline: 0; +} +.blog-section { + padding: 0; +} +.blog-section hgroup h2, +.blog-section hgroup h1 { + font-size: 30px; + line-height: 35px; + font-weight: 500; + line-height: 40px; + margin: 50px 0 25px 0; +} +.blog-section hgroup h2 a { + border-bottom: 0; + font-weight: 500; +} +.blog-section hgroup h3 a { + display: none; +} +.blog-section hgroup h3 a.active { + position: fixed; + top: 0; + bottom: auto; + margin-top: 0; +} +.blog-section article { + width: 700px; + overflow: hidden; + line-height: 25px; + padding: 5px 35px 50px 34px; +} +.blog-section article img { + padding: 2px; + border: 1px solid #C2C2C2; + margin: 0px 15px 5px 0px; +} +.blog-section article a.img-link { + border-bottom: 0; +} +.blog-section article a.img-link:hover img { + border-color: #333366; +} +.blog-section footer { + padding-top: 10px; +} +.blog-section footer h4 { + float: left; + text-transform: uppercase; + font-size: 13px; + line-height: 28px; + padding: 0px 15px 0px 0; +} +.tags { + list-style: none; + margin: 0; +} +.tags li { + display: inline-block; + zoom: 1; + *display: inline; +} +.tags a { + padding: 3px 10px; + font-size: 13px; + text-shadow: 0 1px 1px #F9F9F9; + background: #E9E9E9; + border: 1px solid #C2C2C2; +} +.tags a:hover { + background: #333366; + color: #fff; + text-shadow: none; + border: 1px solid #333366; +} +.mobile-nav { + display: none; +} +.load-more-button { + display: inline-block; + margin: 0 20px 50px 20px; + padding: 10px 30px; + background-color: #333366; + color: #fff; +} +.load-more-button:hover { + border: 1px solid #333366; + background: #fff; + color: #333366; +} +.load-more-button .spinner { + left: 140px; + top: -8px; +} +@media (max-width: 767px) { + header.main-header hgroup .picture a, + header.main-header nav { + margin-top: 30px; + } + .blog-section article { + width: 400px; + } + .blog-section article img { + max-width: 400px; + } +} +@media (max-width: 600px) { + body { + background: #e9e9e9 url('/static/imgs/b.png'); + overflow-x: hidden; + } + .mobile-nav { + display: block; + position: fixed; + top: 0; + height: 45px; + width: 100%; + z-index: 3000; + background: #e9e9e9 url('/static/imgs/b.png'); + border-top: 3px solid #333366; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + } + .mobile-nav h3 { + float: right; + padding: 10px; + } + .mobile-nav h3 a { + border-bottom: 0; + font-weight: bold; + color: #404040; + text-shadow: 0 1px 1px #f9f9f9; + } + .mobile-nav .nav-btn { + float: left; + padding: 7px 10px 4px; + margin: 8px 10px; + background-color: #333333; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from(#404040), to(#333333)); + background-image: -moz-linear-gradient(top, #404040, #333333); + background-image: -ms-linear-gradient(top, #404040, #333333); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #404040), color-stop(100%, #333333)); + background-image: -webkit-linear-gradient(top, #404040, #333333); + background-image: -o-linear-gradient(top, #404040, #333333); + background-image: linear-gradient(top, #404040, #333333); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#404040', endColorstr='#333333', GradientType=0); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px #f9f9f9; + -moz-box-shadow: 0 1px 1px #f9f9f9; + box-shadow: 0 1px 1px #f9f9f9; + } + .mobile-nav .nav-btn-bar { + display: block; + width: 18px; + height: 2px; + margin-bottom: 3px; + background-color: #f9f9f9; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + } + header.main-header { + position: absolute; + } + header.main-header hgroup .picture a { + margin: 60px 0 10px 10px; + } + header.main-header hgroup h1 { + font-size: 18px; + margin: 0 10px; + } + header.main-header hgroup h2 { + margin: 0 10px 10px 10px; + } + header.main-header nav { + margin: 20px 0; + } + header.main-header .fork-me { + display: none; + } + .main-section { + margin: 45px 0 0 0; + position: relative; + min-height: 500px; + left: 0; + z-index: 2000; + background-color: #fff; + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); + -webkit-transition: left .3s ease-out; + -moz-transition: left .3s ease-out; + -o-transition: left .3s ease-out; + transition: left .3s ease-out; + } + .main-section.nav-opened { + left: 240px; + } + .blog-section hgroup h2, + .blog-section hgroup h1 { + font-size: 24px; + line-height: 30px; + font-weight: 500; + margin: 10px 0 5px 0; + } + .blog-section hgroup h3 a { + position: static; + margin: 0; + padding: 5px 0; + border: 0; + font-weight: 300; + } + .blog-section article { + width: 95%; + padding: 10px 10px 30px; + border-bottom: 1px solid #C2C2C2; + } + .blog-section article img { + max-width: 300px; + } + .blog-section .loading { + padding: 15px; + } + .modal-backdrop { + z-index: 3500; + } + .modal { + position: absolute; + width: 100%; + height: 1500px; + z-index: 4000; + top: 45px; + } + .modal.fade-large { + width: 100%; + } + .modal.fade.in, + .modal.fade-large.in { + left: 0; + } + .profile.twitter, + .profile.github, + .profile.dribbble, + .profile.instagram { + overflow: scroll; + } + .profile-info .btn { + position: static; + margin-top: 5px; + } + .shots-likes-received, + .shots-likes-given { + display: none; + } + .profile-shots { + padding: 10px 0; + } + .profile-shots > li { + margin: 0 0 20px 10px; + width: 280px; + } + .profile-shots img { + width: 280px; + height: 210px; + } + .instagram .profile-shot img { + width: 280px; + height: 280px; + } +} diff --git a/syte/static/less/styles.less b/syte/static/less/styles.less new file mode 100644 index 0000000..6a999c1 --- /dev/null +++ b/syte/static/less/styles.less @@ -0,0 +1,253 @@ +@import 'reset.less'; +@import 'mixins.less'; + +@import 'variables.less'; + +@import 'base.less'; +@import 'buttons.less'; +@import 'modals.less'; +@import 'profiles.less'; +@import 'code.less'; + + +// Specific styles +.main-header { + position: fixed; + z-index: 1100; + top: 0; + left: 0; + width: 240px; + height: 100%; + min-height: 700px; + float: left; + border-right: 1px solid #c2c2c2; + background: #E9E9E9 url('/static/imgs/b.png'); + + + hgroup { + .picture a { + display: inline-block; + .square(84px); + margin: 60px 35px 20px 35px; + border: 3px solid @adjacent-color; + background: #00000 url('https://twimg0-a.akamaihd.net/profile_images/1149409097/20101018060848_samrat94_6HR8FZ5V2JQDPU34ENIKCWBL0STAMO91XG7Y.jpg'); + + @pic-shadow:0 1px 1px #f9f9f9, inset 0 0 6px #000000; + .box-shadow(@pic-shadow); + } + + h1 { + font-size: 24px; + margin: 0 35px; + text-shadow: 0 1px 1px #f9f9f9; + } + h2 { + margin: 10px 35px; + font-size: 14px; + font-weight: normal; + line-height: 25px; + color: @alternate-text-color; + } + } + + nav { + margin: 65px 0; + + ul { border-top: 1px solid #d2d2d2; list-style: none; margin-left: 0; } + li { margin-bottom: 0; } + a, a:hover { border-bottom: 1px solid #d2d2d2; } + a { + position: relative; + padding: 15px 30px; + color: @text-color; + display: block; + font-weight: 500; + text-shadow: 0 1px 1px #f9f9f9; + } + a:hover { + color: #fff; + background: @adjacent-color; + border-right: 0; + text-shadow: none; + } + .sel { border-right: 6px solid @adjacent-color; } + } + + .spinner { + position: absolute !important; + right: 30px; + top: 23px; + } + + .fork-me { + position: absolute; + left: 30px; + bottom: 20px; + font-size: 13px; + color: @alternate-text-color; + border-bottom: none; + } + .fork-me:hover { + color: @adjacent-color; + } +} + +.main-section { + position: relative; + overflow: hidden; + margin-left: 241px; + padding: 35px; +} + +.main-section h3.date { + width: 100%; + display: block; + margin-left: -34px; + padding: 20px 35px 30px 75px; + border-bottom: 1px solid #C2C2C2; + border-top: 1px solid #C2C2C2; + font-size: 16px; + font-weight: bold; + .alpha-background(#ffffff, 0.8); + color: @adjacent-color; +} + +a.button_accent { + margin:40px 50px; + padding:10px 20px; + display:inline-block; + border:3px solid @adjacent-color; + border-radius:70px; + -moz-border-radius:70px; + -webkit-border-radius:70px; + text-transform:uppercase; + color:@adjacent-color; + font-size:17px; + font-weight:400;} + +a.button_accent:link{color:#0e94ec;} +a.button_accent:hover{color:#ffffff; + background-color:@adjacent-color; + outline:0;} +a.button_accent:active{ + color:#ffffff; + background-color:#333399; + outline:0;} + +.blog-section { + padding: 0; + + hgroup { + h2, h1 { .h1; line-height: 40px; margin: 50px 0 25px 0;} + h2 a { + border-bottom: 0; + font-weight: 500; + } + h3 a { + display: none; + } + + h3 a.active { + position: fixed; + top: 0; + bottom: auto; + margin-top: 0; + } + } + + article { + width: 700px; + overflow: hidden; + line-height: 25px; + padding: 5px 35px 50px 34px; + + img { + padding: 2px; + border: 1px solid #C2C2C2; + margin: 0px 15px 5px 0px; + } + + a.img-link { + border-bottom: 0; + + &:hover img { border-color: @adjacent-color; } + } + } + + footer { + padding-top: 10px; + + h4 { + float: left; + text-transform: uppercase; + font-size: 13px; + line-height: 28px; + padding: 0px 15px 0px 0; + } + } +} + +.tags { + list-style: none; + margin: 0; + + li { + display: inline-block; + + //ie7 inline-block hack + zoom: 1; + *display: inline; + } + + a { + padding: 3px 10px; + font-size: 13px; + text-shadow: 0 1px 1px #F9F9F9; + background: #E9E9E9; + border: 1px solid #C2C2C2; + } + a:hover { + background: @adjacent-color; + color: #fff; + text-shadow: none; + border: 1px solid @adjacent-color; + } +} + +.mobile-nav { + display: none; +} + +.load-more-button { + display: inline-block; + margin: 0 20px 50px 20px; + padding: 10px 30px; + background-color: @adjacent-color; + color: #fff; + + &:hover { + border: 1px solid @adjacent-color; + background: #fff; + color: @adjacent-color; + } + + .spinner { + left: 140px; + top: -8px; + } +} + +@media (max-width: 767px) { + + header.main-header { + hgroup .picture a, nav { margin-top: 30px; } + } + + .blog-section article { + width: 400px; + + img { max-width: 400px; } + } +} + +@import 'styles-mobile.less'; diff --git a/syte/static/less/variables.css b/syte/static/less/variables.css new file mode 100644 index 0000000..e69de29 diff --git a/syte/static/less/variables.less b/syte/static/less/variables.less new file mode 100644 index 0000000..1957a02 --- /dev/null +++ b/syte/static/less/variables.less @@ -0,0 +1,6 @@ +//variables +@adjacent-color: #333366; + +@text-color: #404040; +@alternate-text-color: #4b4b4b; +@link-color: #000000; -- cgit