diff --git a/assets/css/core.css b/assets/css/core.css index dc329ed..9a1fc16 100644 --- a/assets/css/core.css +++ b/assets/css/core.css @@ -1,5 +1 @@ -/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= - core.css - - Core styles are compressed here using LESS. -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/ \ No newline at end of file +*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-repeat:no-repeat;vertical-align:middle}::-moz-selection{background:#333;color:#f8f8f8;text-shadow:none}::selection{background:#333;color:#f8f8f8;text-shadow:none}html,body{-web-font-smoothing:antialiased}[type=search]{-webkit-appearance:none}::-webkit-validation-bubble-message{padding:40px}@media print{*{background:transparent!important;color:black!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}@page{margin:.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}} \ No newline at end of file diff --git a/assets/less/core.less b/assets/less/core.less new file mode 100644 index 0000000..86e611d --- /dev/null +++ b/assets/less/core.less @@ -0,0 +1,153 @@ +/*=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= + core.css + Contains core styles + Created at: + Created by: + + @credits + This site uses a modification on the SMACSS design - http://smacss.com/ - by @snookca + + +=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/ + +/* ==================================================== + LESS IMPORTS +==================================================== */ + +@import "libs/css3.less"; + + + + +/* ==================================================== + LESS VARS +==================================================== */ +@c-bg: #FFF; +@c-copy: #333; + + + + +/* ==================================================== + BASE STYLES + + Base rules are the defaults. They are almost exclusively + single element selectors but it could include attribute selectors, + pseudo-class selectors, child selectors or sibling selectors. + Essentially, a base style says that wherever this element is on the page, + it should look like... +==================================================== */ + +* { + /* Paul Irish's suggestion: http://paulirish.com/2012/box-sizing-border-box-ftw/ */ + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; + + /* Chris Coyier's suggestions */ + background-repeat: no-repeat; + vertical-align: middle; +} + + +::-moz-selection{ background:#333; color:#F8F8F8; text-shadow:none; } +::selection { background:#333; color:#F8F8F8; text-shadow:none; } + +html, body { -web-font-smoothing: antialiased; } + +::-webkit-input-placeholder {} +:-moz-placeholder {} +[type=search] { + /* resets webkit styling on search inputs */ + -webkit-appearance: none; +} +/* Style the webkit validation message for forms */ +::-webkit-validation-bubble-message { + padding: 40px; +} + +a {} +a:link {} +a:visited {} +a:hover {} +a:active {} +a:focus {} + +input:required {} +input:optional {} +input:valid {} +input:invalid {} +input:default {} +input:focus {} + +input:enabled {} +input:disabled {} +input:checked {} +input:indeterminate {} /* un-selected radio buttons :) */ + +::-webkit-input-placeholder {} +:-moz-placeholder {} + +/* ==================================================== + LAYOUT STYLES + + Layout rules divide the page into sections. + Layouts hold one or more modules together. +==================================================== */ + + + +/* ==================================================== + MODULES STYLES + + Modules are the reusable, modular parts of our design. + They are the callouts, the sidebar sections, the product lists and so on. +==================================================== */ + + + +/* ==================================================== + STATES STYLES + + State rules are ways to describe how our modules or layouts will + look when in a particular state. + Is it hidden or expanded? Is it active or inactive? + They are about describing how a module or layout looks on screens that are smaller or bigger. + They are also about describing how a module might look in different + views like the home page or the inside page. +==================================================== */ + + + + +/* ==|== Media Queries ====================================================== + PLACEHOLDER Media Queries for Responsive Design. + Modify as content requires. + + Notes: + MOBILE FIRST - use min-width (lowest first) and style upwards + MOBILE RESPONSIVE - use max-width (highest first) and style downwards + + Never set breakpoints for devices, only when the design requires it. +========================================================================== */ + +@media (max-width: 1000px) {} + + +/* ==|== print styles ======================================================= + Print styles. + Inlined to avoid required HTTP connection: h5bp.com/r + ========================================================================== */ + +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ + a, a:visited { text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* h5bp.com/t */ + tr, img { page-break-inside: avoid; } + img { max-width: 100% !important; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3 { page-break-after: avoid; } +} diff --git a/assets/less/libs/css3.less b/assets/less/libs/css3.less new file mode 100644 index 0000000..89135a8 --- /dev/null +++ b/assets/less/libs/css3.less @@ -0,0 +1,680 @@ +//============================================================ +// +// LESS CSS3 Mixins +// +// @description CSS3 mixins for projects using LESS +// @version 1.00 +// +// @author Matthew Wagerfield +// @see http://matthew.wagerfield.com +// @see http://twitter.com/mwagerfield +// +// ---------- INDEX ---------- +// +// Display: +// @mixin display-box +// @mixin box-orient +// @mixin box-pack +// @mixin box-align +// @mixin box-flex +// @mixin box-sizing +// @mixin user-select +// +// Decoration: +// @mixin border-radius +// @mixin box-shadow +// @mixin text-shadow +// @mixin linear-gradient +// @mixin radial-gradient +// +// Transformation: +// @mixin transform +// @mixin transform-origin +// @mixin transform-style +// @mixin perspective +// @mixin perspective-origin +// @mixin backface-visibility +// @mixin matrix +// @mixin translate +// @mixin scale +// @mixin rotate +// @mixin skew +// +// Animation: +// @mixin transition +// @mixin easing +// +//============================================================ + + + +//============================================================ +// +// display-box +// +// @see http://www.w3.org/TR/css3-flexbox/ +// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ +// +//============================================================ + +.display-box() { + display: -webkit-box; + display: -moz-box; + display: -ms-box; + display: -o-box; + display: box; +} + + + +//============================================================ +// +// box-orient +// +// @param value : horizontal | +// vertical | +// inherit +// +// @see http://www.w3.org/TR/css3-flexbox/ +// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ +// +//============================================================ + +.box-orient() { + .display-box(); + -webkit-box-orient: @arguments; + -moz-box-orient: @arguments; + -ms-box-orient: @arguments; + -o-box-orient: @arguments; + box-orient: @arguments; +} + + + +//============================================================ +// +// box-pack +// +// @param value : start | +// end | +// center | +// justify +// +// @see http://www.w3.org/TR/css3-flexbox/ +// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ +// +//============================================================ + +.box-pack() { + .display-box(); + -webkit-box-pack: @arguments; + -moz-box-pack: @arguments; + -ms-box-pack: @arguments; + -o-box-pack: @arguments; + box-pack: @arguments; +} + + + +//============================================================ +// +// box-align +// +// @param value : start | +// end | +// center | +// baseline | +// stretch +// +// @see http://www.w3.org/TR/css3-flexbox/ +// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ +// +//============================================================ + +.box-align() { + .display-box(); + -webkit-box-align: @arguments; + -moz-box-align: @arguments; + -ms-box-align: @arguments; + -o-box-align: @arguments; + box-align: @arguments; +} + + + +//============================================================ +// +// box-flex +// +// @param value : 0 | Integer +// +// @see http://www.w3.org/TR/css3-flexbox/ +// @see http://www.html5rocks.com/en/tutorials/flexbox/quick/ +// +//============================================================ + +.box-flex() { + .display-box(); + -webkit-box-flex: @arguments; + -moz-box-flex: @arguments; + -ms-box-flex: @arguments; + -o-box-flex: @arguments; + box-flex: @arguments; +} + + + +//============================================================ +// +// box-sizing +// +// @param value : content-box | +// padding-box | +// border-box | +// inherit +// +// @see http://www.w3.org/TR/css3-ui/#box-sizing +// +//============================================================ + +.box-sizing() { + -webkit-box-sizing: @arguments; + -moz-box-sizing: @arguments; + box-sizing: @arguments; +} + + + +//============================================================ +// +// user-select +// +// @param value : none || +// text || +// toggle || +// element || +// elements || +// all || +// inherit +// +// @see http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select +// +//============================================================ + +.user-select() { + -webkit-touch-callout: @arguments; + -webkit-user-select: @arguments; + -moz-user-select: @arguments; + -ms-user-select: @arguments; + -o-user-select: @arguments; + user-select: @arguments; +} + + + +//============================================================ +// +// border-radius +// +// @param top-left-radius : px, em, %; +// @param top-right-radius : px, em, %; +// @param bottom-right-radius : px, em, %; +// @param bottom-left-radius : px, em, %; +// +// @see http://www.w3.org/TR/css3-background/#border-radius +// +//============================================================ + +.border-radius() { + -webkit-border-radius: @arguments; + -moz-border-radius: @arguments; + border-radius: @arguments; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + + + +//============================================================ +// +// box-shadow +// +// @param colour : #000, rgba, hsla; +// @param horizontal-offset : px, em; +// @param vertical-offset : px, em; +// @param blur-radius : px, em; +// @param spread-distance : px, em, +// @param inset : inset; +// +// @see http://www.w3.org/TR/css3-background/#box-shadow +// +//============================================================ + +.box-shadow() { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; +} + + + +//============================================================ +// +// text-shadow +// +// @param colour : #000, rgba, hsla; +// @param horizontal-offset : px, em; +// @param vertical-offset : px, em; +// @param blur-radius : px, em; +// +// @see http://www.w3.org/TR/css3-text/#text-shadow +// +//============================================================ + +.text-shadow() { + text-shadow: @arguments; +} + + + +//============================================================ +// +// linear-gradient +// +// @param angle : top, left, 90deg; +// @param colourA : #000 0%, red 0%; +// @param colourB : #000 50%, red 50%; +// @param colourC : #000 100%, red 100%; +// +// @example .linear-gradient(top, ~',crimson 0%', ~',black 100%'); +// +// @see http://dev.w3.org/csswg/css3-images/#linear-gradients +// +//============================================================ + +.linear-gradient() { + background-image: -webkit-linear-gradient(@arguments); + background-image: -moz-linear-gradient(@arguments); + background-image: -ms-linear-gradient(@arguments); + background-image: -o-linear-gradient(@arguments); + background-image: linear-gradient(@arguments); +} + + + +//============================================================ +// +// radial-gradient +// +// @param location : left top, 50% 50%; +// @param shape : circle, ellipse, 100% 75%; +// @param colourA : #000 0%, red 0%; +// @param colourB : #000 50%, red 50%; +// @param colourC : #000 100%, red 100%; +// +// @example .radial-gradient(~'50% 50%,', circle, ~',crimson 0%', ~',black 100%'); +// +// @see http://dev.w3.org/csswg/css3-images/#radial-gradients +// +//============================================================ + +.radial-gradient() { + background-image: -webkit-radial-gradient(@arguments); + background-image: -moz-radial-gradient(@arguments); + background-image: -ms-radial-gradient(@arguments); + background-image: -o-radial-gradient(@arguments); + background-image: radial-gradient(@arguments); +} + + + +//============================================================ +// +// transform +// +// @param functions : matrix() +// : translate() +// : scale() +// : rotate() +// : skew() +// +// @see http://www.w3.org/TR/css3-2d-transforms/ +// +//============================================================ + +.transform() { + -webkit-transform: @arguments; + -moz-transform: @arguments; + -ms-transform: @arguments; + -o-transform: @arguments; + transform: @arguments; +} + + + +//============================================================ +// +// transform-origin +// +// @param value : left | +// center | +// right | +// px | +// em | +// %; +// +// @see http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property +// +//============================================================ + +.transform-origin() { + -webkit-transform-origin: @arguments; + -moz-transform-origin: @arguments; + -ms-transform-origin: @arguments; + -o-transform-origin: @arguments; + transform-origin: @arguments; +} + + + +//============================================================ +// +// transform-style +// +// @param value : preserve-3d | flat; +// +// @see http://www.w3.org/TR/css3-3d-transforms/#transform-style-property +// +//============================================================ + +.transform-style() { + -webkit-transform-style: @arguments; + -moz-transform-style: @arguments; + -ms-transform-style: @arguments; + -o-transform-style: @arguments; + transform-style: @arguments; +} + + + +//============================================================ +// +// perspective +// +// @param value : none | 0, 1, 100, 1000, etc; +// +// @see http://www.w3.org/TR/css3-3d-transforms/#perspective-property +// +//============================================================ + +.perspective() { + -webkit-perspective: @arguments; + -moz-perspective: @arguments; + -ms-perspective: @arguments; + -o-perspective: @arguments; + perspective: @arguments; +} + + + +//============================================================ +// +// perspective-origin +// +// @param value : left | +// center | +// right | +// px | +// em | +// %; +// +// @see http://www.w3.org/TR/css3-3d-transforms/#perspective-origin-property +// +//============================================================ + +.perspective-origin() { + -webkit-perspective-origin: @arguments; + -moz-perspective-origin: @arguments; + -ms-perspective-origin: @arguments; + -o-perspective-origin: @arguments; + perspective-origin: @arguments; +} + + + +//============================================================ +// +// backface-visibility +// +// @param value : visible | hidden; +// +// @see http://www.w3.org/TR/css3-3d-transforms/#backface-visibility-property +// +//============================================================ + +.backface-visibility() { + -webkit-backface-visibility: @arguments; + -moz-backface-visibility: @arguments; + -ms-backface-visibility: @arguments; + -o-backface-visibility: @arguments; + backface-visibility: @arguments; +} + + + +//============================================================ +// +// matrix +// +// @param a : Number; +// @param b : Number; +// @param c : Number; +// @param d : Number; +// @param e : Number; +// @param f : Number; +// +// http://www.w3.org/TR/css3-3d-transforms/#transform-functions +// +//============================================================ + +.matrix() { + -webkit-transform: matrix(@arguments); + -moz-transform: matrix(@arguments); + -ms-transform: matrix(@arguments); + -o-transform: matrix(@arguments); + transform: matrix(@arguments); +} + + + +//============================================================ +// +// translate +// +// @param translate-x : px; +// @param translate-y : px; +// +// http://www.w3.org/TR/css3-3d-transforms/#transform-functions +// +//============================================================ + +.translate() { + -webkit-transform: translate(@arguments); + -moz-transform: translate(@arguments); + -ms-transform: translate(@arguments); + -o-transform: translate(@arguments); + transform: translate(@arguments); +} + + + +//============================================================ +// +// scale +// +// @param scale-x : 0.5, 2, etc; +// @param scale-y : 0.5, 2, etc; +// +// http://www.w3.org/TR/css3-3d-transforms/#transform-functions +// +//============================================================ + +.scale() { + -webkit-transform: scale(@arguments); + -moz-transform: scale(@arguments); + -ms-transform: scale(@arguments); + -o-transform: scale(@arguments); + transform: scale(@arguments); +} + + + +//============================================================ +// +// rotate +// +// @param angle : 0deg; +// +// http://www.w3.org/TR/css3-3d-transforms/#transform-functions +// +//============================================================ + +.rotate() { + -webkit-transform: rotate(@arguments); + -moz-transform: rotate(@arguments); + -ms-transform: rotate(@arguments); + -o-transform: rotate(@arguments); + transform: rotate(@arguments); +} + + + +//============================================================ +// +// skew +// +// @param axis-x : 0deg; +// @param axis-y : 0deg; +// +// http://www.w3.org/TR/css3-3d-transforms/#transform-functions +// +//============================================================ + +.skew() { + -webkit-transform: skew(@arguments); + -moz-transform: skew(@arguments); + -ms-transform: skew(@arguments); + -o-transform: skew(@arguments); + transform: skew(@arguments); +} + + + +//============================================================ +// +// transition +// +// @param properties : all, left, opacity, etc; +// @param duration : 1s, 1000ms; +// @param delay : 1s, 1000ms; +// @param easing : linear, ease-in-out, etc; +// +// @see http://www.w3.org/TR/css3-transitions/ +// +//============================================================ + +.transition() { + -webkit-transition: @arguments; + -moz-transition: @arguments; + -ms-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; +} + + + +//============================================================ +// +// easing +// +// Thanks to Robert Penner for his sterling work on easing, +// and to Matthew Lein for converting these functions into +// approximated cubic-bezier functions. Respect. +// +// @see http://robertpenner.com/ +// @see http://matthewlein.com/ceaser/ +// +//============================================================ + +// Cubic +@easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190); +@easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000); +@easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000); + +// Circ +@easeInCirc : cubic-bezier(0.600, 0.040, 0.980, 0.335); +@easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000); +@easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860); + +// Expo +@easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035); +@easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000); +@easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000); + +// Quad +@easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530); +@easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940); +@easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955); + +// Quart +@easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220); +@easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000); +@easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000); + +// Quint +@easeInQuint : cubic-bezier(0.755, 0.050, 0.855, 0.060); +@easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000); +@easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000); + +// Sine +@easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715); +@easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000); +@easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950); + +// Back +@easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045); +@easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275); +@easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550); + + + +//============================================================ +// +// Copyright (c) 2012 Matthew Wagerfield +// +// Permission is hereby granted, free of charge, to any +// person obtaining a copy of this software and associated +// documentation files (the "Software"), to deal in the +// Software without restriction, including without limitation +// the rights to use, copy, modify, merge, publish, distribute, +// sublicense, and/or sell copies of the Software, and to +// permit persons to whom the Software is furnished to do +// so, subject to the following conditions: +// +// The above copyright notice and this permission notice +// shall be included in all copies or substantial portions +// of the Software. +// +// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY +// OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT +// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO +// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE +// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN +// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE +// OR OTHER DEALINGS IN THE SOFTWARE. +// +//============================================================