/*! CalvinMois.es / style.css */
! STYLES - _style.less ! --------------------
/*! CalvinMois.es / style.css */
! Invisibles ! ----------
@import '_variables';
@import '_mixins';
& { .at-viewport(device-width); }
/*! Base */
! ----------
@import '_normalize';
& { .selection(text, @grey-light); }
body {
margin: 0;
color: @black-light;
font: normal @baby-font-size @body;
background-color: @white;
line-height: 1.5;
letter-spacing: 0.1em;
text-rendering: optimizeLegibility;
fix odd resizing on iOS Safari (and others)
-webkit-text-size-adjust: 100%;
}
#media(mama) { body { font-size: @base-font-size; } }
header, footer, div, article, section, nav, a, ul, ol, dl {
margin: 0;
padding: 0;
font-weight: inherit;
.box-sizing(border-box);
}
dl, dl div { &:extend(.clearfix all); }
ul, ol { list-style-position: inside; }
img, video {
max-width: 100%;
*width: 100%; // IE7 hack
vertical-align: middle;
.box-sizing(border-box);
}
hr { color: inherit; border-style: solid; }
/*! Typography */
! ----------
/*! -- baseline grid */
@import '_baseline'; //! (import)
.baseline-grid { .baseline-grid(@red); }
/*! -- presentation */
.heading {
small {
display: inline-block;
.inline-block();
color: @grey-dark;
.hyphens(none);
}
}
a utility for adding swtandard p
styles to any element I may need to
.p-level { &:extend(p all); }
.fake-h1 to mimic h1 for the "CalvinMois.es" in the .header on other pages, maybe
.fake-h1 { &:extend(h1 all); }
.figure-indent {
position: relative;
padding-left: 1em;
border-left-width: 1px;
border-left-style: dotted;
}
figcaption {
font-weight: 300; font-style: italic;
.heading, &@{heading} { font-style: normal; }
@heading: ~'.heading';
}
pre {
padding: 0 0.5em 3px;
color: @white-dark;
font-size: 0.8em; // about 14px, 80%
line-height: 18px;
background-color: @black-light;
.box-sizing(border-box); // so padding doesn't affect height and stuff.
overflow: scroll;
&, code, samp, kbd, var { color: @white-dark; white-space: pre; }
}
code, samp, kbd {
padding: 0 2px 0px;
background-color: fade(@grey-dark,30%);
pre & {
background-color: transparent;
background: none;
color: inherit;
}
}
code, samp, kbd, var {
font-family: monospace;
font-style: normal;
white-space: nowrap;
}
link base
a { .links(@white, @white-dark, @grey-light); }
a.dark { .links(@grey-dark, @grey); }
/*! Helpers & Minutiae */
.clearfix {
*zoom: 1;
&:before, &:after { content: " "; display: table; }
&:after { clear: both; }
}
.unstyled {
margin: 0;
margin-left: 0;
list-style-type: none;
li { margin: 0; }
}
.list-inline {
&:extend(.unstyled);
margin: 0 -0.5em;
li {
display: inline-block;
.inline-block();
padding: 0 0.5em;
}
}
.vice { .hyphens(none); }
.icon-fixed {
display: inline-block;
.inline-block();
width: 1em;
padding-right: .38em;
text-align: center;
}
! -- flavor
.tab {
display: inline-block;
.inline-block();
margin: 0;
padding: 3px 8px;
}
.btw {
font-style: italic;
.hyphens(none);
}
.emboss { text-shadow: 0 -1px 0 fade(@black,40), 0 1px 0 fade(@white,40); }
.raise { text-shadow: 0 0 8px fade(@black,50); }
.outline { text-shadow: 0 0 1px @black; }
.box-raise { .box-shadow(0 0 8px 1px fade(@black,50)); }
.box-emboss { .box-shadow(~'inset 0 1px 1px 0 @{fade-black}, inset 0 -1px 1px 0 @{fade-white}'); }
! ---- .shadow classes
.shadow {
.box-shadow(3px 3px @shadow-color);
.heading { .shadow-text(); }
}
.shadow-text { text-shadow: 3px 3px fade(@shadow-color,(@shadow-opacity - 10)); }
.shadow-inset, .shadow-inset-top, .shadow-inset-left { border: 3px solid fade(@shadow-color,0); }
.shadow-inset, .shadow-inset-top { border-top-color: @shadow-color; }
.shadow-inset, .shadow-inset-left { border-left-color: @shadow-color; }
/*! Objects */
! ---------- ! -- Mini Objects
.flyout-link {
display: block;
white-space: nowrap;
.flyout-content {
display: inline-block;
max-width: 0px;
margin-left: 3px;
overflow: hidden;
.transition(max-width .2s ease);
}
&:hover, &.out { .flyout-content { max-width: 200px; } }
}
! -- Unit Objects
.magic-box {
/* see demo at http://jsfiddle.net/calvinjuarez/sgFQ9/ */
height: 0;
width: 100%;
padding-bottom: 100%;
position: relative;
}
.magic-box-half { padding-bottom: 50%; }
.magic-box-inner {
position: absolute;
top: 0;
height: 100%;
width: 100%;
text-align: center;
white-space: nowrap;
overflow:hidden
&:before {
content: "";
width: 0;
height: 100%;
margin-left: -5px;
display: inline-block;
vertical-align: middle;
}
}
.magic-box-content {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
/*! Content Blocks */
! ----------
.header, .navbar, .main { margin: 0; padding: 16px 0; }
#media(mama) { .navbar, .main { margin: 0 16px; } }
! -- .header
#media(mama) { .header { margin: 16px 16px 0; } }
! -- .nav
.nav {
position: relative;
list-style-type: none;
color: @grey-dark;
&:extend(.clearfix all);
ul {
margin: 0;
list-style-type: none;
&:extend(.clearfix all);
}
a {
display: block;
padding: 4px 12px;
color: inherit;
font-family: @title;
line-height: inherit;
}
a:hover, li.active a {
color: @white;
background-color: @grey-dark;
}
a.disabled, a.coming-soon {
color: @grey-light;
&:hover { color: @white; background-color: @grey-light; }
}
}
.menu { // consider removing
&:extend(.nav);
.menu-item{
&:extend(.nav a all);
&:hover { cursor: pointer; }
}
}
#media(mama) { .nav { a { padding: 4px 16px; } } }
! ---- .nav- variants
.nav-list {
a {
&:hover, li.active & {
color: inherit;
background-color: transparent;
}
}
}
.nav-flyouts, .nav-flyouts-right {
margin: 0 16px;
padding: 0;
li {
margin-top: 8px;
&:first-child { margin-top: 0; }
}
a {
padding: 0;
background-color: transparent;
.flyout-link();
&:hover, li.active & {
color: @grey-dark;
background-color: transparent;
}
}
}
#media(mama) {
.nav-flyouts, .nav-flyouts-right {
a { padding: 0; }
}
}
.nav-flyouts-right { direction: rtl; }
! ---- .navbar
.navbar {
padding: 0;
li {
float: left;
display: block;
text-align: center;
}
a {
display: block;
.inline-block();
text-transform: uppercase;
}
&.fixed {
height: 1.95em;
width: 100%;
ul {
position: fixed;
z-index: 500;
}
a { white-space: nowrap; }
}
&.small a { font-size: @small; }
! ------ internal .navbars
.header &, .navbar & { margin: -8px 0 -16px; } // legacy strategy
.content & { // legacy strategy
.small(); // `.small` extends `small`, btw, so .content .navbar-internal will too.
margin: -16px;
margin-bottom: 0;
}
}
! ---- .subnav
.subnav {
.open, .open:hover { // a class on the toggle when the list is open
color: inherit;
background-color: @white;
}
&-items {
display: block;
height: 0;
z-index: 1;
position: absolute;
overflow: hidden;
}
li { // stack links for narrow (ie "baby") views
float: none;
width: 100%;
text-align: left;
}
.active {
a {
}
}
[class^="icon-"], [class*=" icon-"] {
&:extend(.icon-fixed);
}
}
! -- .main
.main { padding: 0; &:extend(.clearfix all); .nav + & { margin-top: 0; } }
#media(mama) { .main { margin: 16px; } }
! ---- .content
.content {
float: left;
display: block;
width: 100%;
margin: 0;
padding: 16px;
-webkit-column-break-inside: avoid; /* webkit */
page-break-inside: avoid; /* firefox */
break-inside: avoid-column; /* spec, unsupported */
.box-sizing(border-box);
&:extend(.clearfix all);
&:first-child { margin-top: 0; }
.heading { padding: 0; }
p { .hyphens(); }
! ------ .content-body
&-body {
&:extend(.clearfix all);
}
}
! -- .footer
.footer {
&:extend(.clearfix all);
margin: 0;
padding: 16px 0;
.copyright { padding: 0 16px; }
}
#media(mama) { .footer { margin: 16px; } }
/*! Themes */
! ----------
@import '_themes'; //! (import)
/*! Pages */
! ---------- keep styling here to a minimum
.home { //! -- home
.nav li a { color: #5ad; }
.nav li.active a, .nav li a:hover { color: #fff; background-color: #5ad; }
.header .nav li a { color: #f99; }
.header .nav li.active a, .header .nav li a:hover { color: #fff; background-color: #f99; }
.subnav-parent .open, .subnav-parent .open:hover { color: #5ad; background-color: @white; }
}
/*! Structure */
@import '_grid';
#media(mama) {
.columns {
.columns(2);
.column-gap(24px);
}
}
#media(papa) {
.columns {
.columns(3);
}
}
/*! Utilities */
.left { float: left !important; }
#media(mama) { .mama-left { .left() } }
#media(papa) { .papa-left { .left() } }
.right { float: right !important; }
#media(mama) { .mama-left { .right() } }
#media(papa) { .papa-left { .right() } }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.block-gap-before { margin-top: 16px; }
.block-gap-after { margin-bottom: 16px; }
.block-center { &:extend(.clearfix all); float: none !important; margin: 0 auto !important; }
.padless {
padding: 0 !important;
&-top { padding-top: 0 !important; }
&-bottom { padding-bottom: 0 !important; }
&-left { padding-left: 0 !important; }
&-right { padding-right: 0 !important; }
}
.baby-big { .big(); }
#media(mama) { .baby-big { font-size: inherit; } }
.hide { display: none !important; }
#media(mama) {
.mama {
&-hide { display: none !important; }
&-show { display: block !important; }
&-show-inline { display: inline !important; }
}
}
#media(papa) {
.papa {
&-hide { display: none !important; }
&-show { display: block !important; }
&-show-inline { display: inline !important; }
}
}
@import '_colors';
/*! Libraries */
@import '_prism';
! -- sean's lightbox
.capture-wrap {
width: 100%;
height: 100%;
display: none;
position: fixed;
top: 0;
z-index: 9000;
color: @grey-light;
background-color: #000;
background-color: fade(@black, 70%);
.container {
height: 100%;
position: relative;
overflow: auto;
}
}
@import '_capture';
/*! Media Queries */
@import '_media';