Zach Wise
12 years ago
8 changed files with 0 additions and 1677 deletions
@ -1,37 +0,0 @@ |
|||||||
/* |
|
||||||
FONT |
|
||||||
Default |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
|
|
||||||
@font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
||||||
@font-serif: "Georgia", Times New Roman, Times, serif; |
|
||||||
|
|
||||||
.vmm-storyjs { |
|
||||||
font-family: @font-serif; |
|
||||||
/* HEADERS |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
.twitter, .vcard, .messege, .credit, .caption, .zoom-in, .zoom-out, .back-home, .time-interval div, .time-interval-major div, .nav-container, { |
|
||||||
font-family: @font-sans !important; |
|
||||||
} |
|
||||||
h1.date, h2.date, h3.date, h4.date, h5.date, h6.date { |
|
||||||
font-family: @font-sans !important; |
|
||||||
} |
|
||||||
.timenav, .flag-content, .era { |
|
||||||
h1, h2, h3, h4, h5, h6 { |
|
||||||
font-family: @font-sans !important; |
|
||||||
} |
|
||||||
} |
|
||||||
/* CONTENT |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
p, blockquote, blockquote p, .twitter blockquote p { |
|
||||||
font-family: @font-serif !important; |
|
||||||
} |
|
||||||
.feature { |
|
||||||
h1, h2, h3, h4, h5, h6 { |
|
||||||
font-family: @font-serif; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.tooltip { |
|
||||||
font-family: @font-sans; |
|
||||||
} |
|
||||||
@ -1,297 +0,0 @@ |
|||||||
/* |
|
||||||
GFX |
|
||||||
Icons etc |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
|
|
||||||
/* Feature Navigation |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.icon-previous() { |
|
||||||
height:24px; |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -160px 0; width: 24px; height: 24px; |
|
||||||
overflow:hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-next() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -184px 0; width: 24px; height: 24px; |
|
||||||
height:24px; |
|
||||||
overflow:hidden; |
|
||||||
|
|
||||||
} |
|
||||||
/* TimeNav Navigation |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.icon-zoom-in() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -256px 0; width: 24px; height: 24px; |
|
||||||
} |
|
||||||
.icon-zoom-out() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -280px 0; width: 24px; height: 24px; |
|
||||||
} |
|
||||||
.icon-back-home() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -328px 0; width: 24px; height: 24px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Time Flag |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.time-flag() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: 0 0; width:153px; height: 53px; |
|
||||||
} |
|
||||||
.time-flag-active() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: 0 -53px; width:153px; height: 53px; |
|
||||||
} |
|
||||||
.time-flag-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: 0 -135px; width:153px; height: 26px; |
|
||||||
} |
|
||||||
.time-flag-small-active() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: 0 -109px; width:153px; height: 26px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Thumbnail Icons |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.icon-map() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -24px; |
|
||||||
} |
|
||||||
.icon-mappin() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -48px; |
|
||||||
} |
|
||||||
.icon-website() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -232px -24px; |
|
||||||
} |
|
||||||
.icon-document() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -256px -48px; |
|
||||||
} |
|
||||||
.icon-quote() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -232px -48px; |
|
||||||
} |
|
||||||
.icon-plaintext() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -280px -48px; |
|
||||||
} |
|
||||||
.icon-twitter() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -256px -24px; |
|
||||||
} |
|
||||||
.icon-video() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -328px -24px; |
|
||||||
} |
|
||||||
.icon-audio() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -304px -24px; |
|
||||||
} |
|
||||||
.icon-photo() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -280px -24px; |
|
||||||
} |
|
||||||
.icon-link() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -184px -72px; |
|
||||||
} |
|
||||||
.icon-storify() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -328px -96px; |
|
||||||
} |
|
||||||
.icon-wikipedia() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -184px -48px; |
|
||||||
} |
|
||||||
.icon-instagram() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -96px; |
|
||||||
} |
|
||||||
.icon-googleplus() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -72px; |
|
||||||
} |
|
||||||
.icon-vimeo() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -328px -48px; |
|
||||||
} |
|
||||||
.icon-youtube() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -328px -72px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Thumbnail Icons Small 10px |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.icon-map-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -120px; |
|
||||||
} |
|
||||||
.icon-mappin-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -120px; |
|
||||||
} |
|
||||||
.icon-website-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -232px -120px; |
|
||||||
} |
|
||||||
.icon-document-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -256px -130px; |
|
||||||
} |
|
||||||
.icon-quote-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -232px -130px; |
|
||||||
} |
|
||||||
.icon-plaintext-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -280px -130px; |
|
||||||
} |
|
||||||
.icon-twitter-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -256px -120px; |
|
||||||
} |
|
||||||
.icon-video-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -328px -120px; |
|
||||||
} |
|
||||||
.icon-audio-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -304px -120px; |
|
||||||
} |
|
||||||
.icon-photo-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -280px -120px; |
|
||||||
} |
|
||||||
.icon-link-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -232px -120px; |
|
||||||
} |
|
||||||
.icon-wikipedia-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -184px -120px; |
|
||||||
} |
|
||||||
.icon-instagram-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -96px; |
|
||||||
} |
|
||||||
.icon-googleplus-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -130px; |
|
||||||
} |
|
||||||
.icon-vimeo-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -328px -130px; |
|
||||||
} |
|
||||||
.icon-youtube-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -304px -130px; |
|
||||||
} |
|
||||||
.icon-storify-small() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -184px -130px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Thumbnail Icons (Extra) |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.icon-twitter-inline() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -160px -96px; |
|
||||||
} |
|
||||||
.icon-googleplus-inline() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -208px -96px; |
|
||||||
} |
|
||||||
.icon-storify-inline() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -184px -96px; |
|
||||||
} |
|
||||||
.icon-storify-full() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -280px -96px; |
|
||||||
width:@base-thumb*2; |
|
||||||
//height:12px; |
|
||||||
} |
|
||||||
.icon-instagram-full() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -232px -96px; |
|
||||||
width:@base-thumb*2; |
|
||||||
height:@base-thumb; |
|
||||||
} |
|
||||||
|
|
||||||
/* Current Time Indicator |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.icon-currenttime() { |
|
||||||
.base-sprite(); |
|
||||||
background-repeat:no-repeat; |
|
||||||
background-position: -160px -48px; |
|
||||||
width:24px; |
|
||||||
height:24px; |
|
||||||
} |
|
||||||
|
|
||||||
/* Time Tics |
|
||||||
----------------------------------------------------------------- */ |
|
||||||
.background-time-tic() { |
|
||||||
background: @color-background url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAMAAAA8JaR5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBrwkQIABAAHIABkHeR3aAAAAAElFTkSuQmCC); |
|
||||||
} |
|
||||||
|
|
||||||
.background-time-interval() { |
|
||||||
//background: @color-base url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
|
||||||
//background-repeat: no-repeat; |
|
||||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
|
||||||
|
|
||||||
} |
|
||||||
.background-time-interval-major() { |
|
||||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQAQMAAADtUYf0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOTAzRjI3REIzNDcxMUUxQUQ3QUZCOThEODQ1NDhCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyOTAzRjI3RUIzNDcxMUUxQUQ3QUZCOThEODQ1NDhCNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI5MDNGMjdCQjM0NzExRTFBRDdBRkI5OEQ4NDU0OEI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI5MDNGMjdDQjM0NzExRTFBRDdBRkI5OEQ4NDU0OEI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DPWNfQAAAANQTFRFzMzMylJEJwAAAAtJREFUCB1jYMAPAAAgAAHDvpOtAAAAAElFTkSuQmCC); |
|
||||||
} |
|
||||||
@ -1,216 +0,0 @@ |
|||||||
/* Mixins.less |
|
||||||
* Snippets of reusable CSS to develop faster and keep code readable |
|
||||||
* ----------------------------------------------------------------- */ |
|
||||||
|
|
||||||
// Text Font |
|
||||||
.text-font(@fontsize: 15px) { |
|
||||||
font-size: @fontsize; |
|
||||||
line-height: round((@fontsize/100) * 130); |
|
||||||
} |
|
||||||
// Border Radius |
|
||||||
.border-radius(@radius: 5px) { |
|
||||||
-webkit-border-radius: @radius; |
|
||||||
-moz-border-radius: @radius; |
|
||||||
border-radius: @radius; |
|
||||||
} |
|
||||||
// User Select |
|
||||||
.user-select(@userselect) { |
|
||||||
-webkit-user-select: @userselect; |
|
||||||
-moz-user-select: @userselect; |
|
||||||
user-select: @userselect; |
|
||||||
} |
|
||||||
// Box Shadow |
|
||||||
.box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) { |
|
||||||
-webkit-box-shadow: @shadow; |
|
||||||
-moz-box-shadow: @shadow; |
|
||||||
box-shadow: @shadow; |
|
||||||
} |
|
||||||
// Media Shadow |
|
||||||
.media-shadow(@shadow: 0 1px 3px 0px @color-dark-fourth) { |
|
||||||
-webkit-box-shadow: @shadow; |
|
||||||
-moz-box-shadow: @shadow; |
|
||||||
box-shadow: @shadow; |
|
||||||
border: 1px solid; |
|
||||||
border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line; |
|
||||||
} |
|
||||||
// Transform |
|
||||||
.transform(@transform) { |
|
||||||
-webkit-transform: @transform; |
|
||||||
-moz-transform: @transform; |
|
||||||
-ms-transform: @transform; |
|
||||||
-o-transform: @transform; |
|
||||||
transform: @transform; |
|
||||||
} |
|
||||||
// Transitions |
|
||||||
.transition(@transition) { |
|
||||||
-webkit-transition: @transition; |
|
||||||
-moz-transition: @transition; |
|
||||||
-ms-transition: @transition; |
|
||||||
-o-transition: @transition; |
|
||||||
transition: @transition; |
|
||||||
} |
|
||||||
// Background clipping |
|
||||||
.background-clip(@clip) { |
|
||||||
-webkit-background-clip: @clip; |
|
||||||
-moz-background-clip: @clip; |
|
||||||
background-clip: @clip; |
|
||||||
} |
|
||||||
// Opacity |
|
||||||
.opacity(@opacity: 100) { |
|
||||||
filter: e(%("alpha(opacity=%d)", @opacity)); |
|
||||||
-khtml-opacity: @opacity / 100; |
|
||||||
-moz-opacity: @opacity / 100; |
|
||||||
opacity: @opacity / 100; |
|
||||||
} |
|
||||||
// Hyphens |
|
||||||
.hyphens(@hyphens: auto) { |
|
||||||
-webkit-hyphens:@hyphens; |
|
||||||
-moz-hyphens:@hyphens; |
|
||||||
-ms-hyphens:@hyphens; |
|
||||||
hyphens:@hyphens; |
|
||||||
} |
|
||||||
// Clear Fix |
|
||||||
.clearfix() { |
|
||||||
*zoom: 1; |
|
||||||
&:before, |
|
||||||
&:after { |
|
||||||
display: table; |
|
||||||
content: ""; |
|
||||||
} |
|
||||||
&:after { |
|
||||||
clear: both; |
|
||||||
} |
|
||||||
} |
|
||||||
// Reset filters for IE |
|
||||||
.reset-filter() { |
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); |
|
||||||
} |
|
||||||
// Center-align a block level element |
|
||||||
.center-block() { |
|
||||||
display: block; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
} |
|
||||||
|
|
||||||
// Font Stacks |
|
||||||
#font { |
|
||||||
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { |
|
||||||
font-size: @size; |
|
||||||
font-weight: @weight; |
|
||||||
line-height: @lineHeight; |
|
||||||
} |
|
||||||
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { |
|
||||||
font-family: @font-sansserif; |
|
||||||
font-size: @size; |
|
||||||
font-weight: @weight; |
|
||||||
line-height: @lineHeight; |
|
||||||
} |
|
||||||
.font-body(@weight: normal, @size: 14px, @lineHeight: 20px) { |
|
||||||
font-family: @fontBody, Helvetica, Arial, sans-serif; |
|
||||||
font-size: @size; |
|
||||||
font-weight: @weight; |
|
||||||
line-height: @lineHeight; |
|
||||||
} |
|
||||||
.font-header(@weight: normal, @size: 14px, @lineHeight: 20px) { |
|
||||||
font-family: @fontHeader; |
|
||||||
font-size: @size; |
|
||||||
font-weight: @weight; |
|
||||||
line-height: @lineHeight; |
|
||||||
} |
|
||||||
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) { |
|
||||||
font-family: @font-serif; |
|
||||||
font-size: @size; |
|
||||||
font-weight: @weight; |
|
||||||
line-height: @lineHeight; |
|
||||||
} |
|
||||||
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { |
|
||||||
font-family: "Monaco", Courier New, monospace; |
|
||||||
font-size: @size; |
|
||||||
font-weight: @weight; |
|
||||||
line-height: @lineHeight; |
|
||||||
} |
|
||||||
|
|
||||||
.navigation(@weight: normal, @size: 14px, @lineHeight: 20px) { |
|
||||||
font-family: @font-sansserif; |
|
||||||
font-size: @size; |
|
||||||
font-weight: @weight; |
|
||||||
line-height: @lineHeight; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// CSS3 Content Columns |
|
||||||
.content-columns(@columnCount, @columnGap: 20px) { |
|
||||||
-webkit-column-count: @columnCount; |
|
||||||
-moz-column-count: @columnCount; |
|
||||||
column-count: @columnCount; |
|
||||||
-webkit-column-gap: @columnGap; |
|
||||||
-moz-column-gap: @columnGap; |
|
||||||
column-gap: @columnGap; |
|
||||||
} |
|
||||||
|
|
||||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay) |
|
||||||
#translucent { |
|
||||||
.background(@color: @white, @alpha: 1) { |
|
||||||
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); |
|
||||||
} |
|
||||||
.border(@color: @white, @alpha: 1) { |
|
||||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); |
|
||||||
background-clip: padding-box; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Gradient Bar Colors for buttons and allerts |
|
||||||
.gradientBar(@primaryColor, @secondaryColor) { |
|
||||||
#gradient > .vertical(@primaryColor, @secondaryColor); |
|
||||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
|
||||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); |
|
||||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); |
|
||||||
} |
|
||||||
|
|
||||||
// Gradients |
|
||||||
#gradient { |
|
||||||
.horizontal (@startColor: #555, @endColor: #333) { |
|
||||||
background-color: @endColor; |
|
||||||
background-repeat: repeat-x; |
|
||||||
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror |
|
||||||
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ |
|
||||||
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 |
|
||||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ |
|
||||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
|
||||||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 |
|
||||||
background-image: linear-gradient(left, @startColor, @endColor); // Le standard |
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down |
|
||||||
} |
|
||||||
.vertical (@startColor: #555, @endColor: #333) { |
|
||||||
background-color: @endColor; |
|
||||||
background-repeat: repeat-x; |
|
||||||
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror |
|
||||||
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ |
|
||||||
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 |
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ |
|
||||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
|
||||||
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 |
|
||||||
background-image: linear-gradient(top, @startColor, @endColor); // The standard |
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down |
|
||||||
} |
|
||||||
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) { |
|
||||||
background-color: @endColor; |
|
||||||
background-repeat: repeat-x; |
|
||||||
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ |
|
||||||
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 |
|
||||||
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
|
||||||
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 |
|
||||||
background-image: linear-gradient(@deg, @startColor, @endColor); // The standard |
|
||||||
} |
|
||||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { |
|
||||||
background-color: @endColor; |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); |
|
||||||
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
|
||||||
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); |
|
||||||
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
|
||||||
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
|
||||||
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); |
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,105 +0,0 @@ |
|||||||
/* Reset |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
|
|
||||||
.vmm-storyjs { |
|
||||||
|
|
||||||
/* Reset tags and common classes |
|
||||||
Display in IE6-9 and FF3 |
|
||||||
Based on: http://github.com/necolas/normalize.css |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
|
|
||||||
div * { |
|
||||||
-webkit-box-sizing:content-box; |
|
||||||
-moz-box-sizing:content-box; |
|
||||||
box-sizing:content-box; |
|
||||||
} |
|
||||||
|
|
||||||
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, |
|
||||||
.container, .content-container, .media, .text, .slider, .date, .title, .messege, .map, .credit, .caption, .feedback, .feature, .toolbar, |
|
||||||
.marker, .dot, .line, .flag, .time, .era, .major, .minor, .navigation, .start, .active { |
|
||||||
margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; |
|
||||||
} |
|
||||||
table { border-collapse: collapse; border-spacing: 0;} |
|
||||||
ol, ul { list-style: none;} |
|
||||||
q:before, q:after, blockquote:before, blockquote:after { content: ""; } |
|
||||||
a:focus { outline: thin dotted; } |
|
||||||
a:hover, a:active { outline: 0;} |
|
||||||
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
audio, canvas, video { |
|
||||||
display: inline-block; |
|
||||||
*display: inline; |
|
||||||
*zoom: 1; |
|
||||||
} |
|
||||||
|
|
||||||
/* Prevents modern browsers from displaying 'audio' without controls |
|
||||||
Based on: http://github.com/necolas/normalize.css |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
audio:not([controls]) { |
|
||||||
display: none; |
|
||||||
} |
|
||||||
div { |
|
||||||
max-width:none; |
|
||||||
} |
|
||||||
|
|
||||||
/* Prevents sub and sup affecting line-height in all browsers |
|
||||||
Based on: http://github.com/necolas/normalize.css |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
sub, sup { |
|
||||||
font-size: 75%; |
|
||||||
line-height: 0; |
|
||||||
position: relative; |
|
||||||
vertical-align: baseline; |
|
||||||
} |
|
||||||
sup { |
|
||||||
top: -0.5em; |
|
||||||
} |
|
||||||
sub { |
|
||||||
bottom: -0.25em; |
|
||||||
} |
|
||||||
|
|
||||||
/* Img border in a's and image quality |
|
||||||
Based on: http://github.com/necolas/normalize.css |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
img { |
|
||||||
border: 0; |
|
||||||
-ms-interpolation-mode: bicubic; |
|
||||||
} |
|
||||||
|
|
||||||
/* Forms |
|
||||||
Based on: http://github.com/necolas/normalize.css |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
button, input, select, textarea { |
|
||||||
font-size: 100%; |
|
||||||
margin: 0; |
|
||||||
vertical-align: baseline; |
|
||||||
*vertical-align: middle; |
|
||||||
} |
|
||||||
button, input { |
|
||||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet |
|
||||||
*overflow: visible; // Inner spacing ie IE6/7 |
|
||||||
} |
|
||||||
button::-moz-focus-inner, input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 |
|
||||||
border: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
button, input[type="button"], input[type="reset"], input[type="submit"] { |
|
||||||
cursor: pointer; // Cursors on all buttons applied consistently |
|
||||||
-webkit-appearance: button; // Style clicable inputs in iOS |
|
||||||
} |
|
||||||
input[type="search"] { // Appearance in Safari/Chrome |
|
||||||
-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; // Inner-padding issues in Chrome OSX, Safari 5 |
|
||||||
} |
|
||||||
textarea { |
|
||||||
overflow: auto; // Remove vertical scrollbar in IE6-9 |
|
||||||
vertical-align: top; // Readability and alignment cross-browser |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,188 +0,0 @@ |
|||||||
/* Typography.less |
|
||||||
* Headings, body text, lists, etc |
|
||||||
* ---------------------------------------------------------------------------------------- */ |
|
||||||
|
|
||||||
.vmm-storyjs { |
|
||||||
font-size: @base-font; |
|
||||||
font-weight: normal; |
|
||||||
line-height: @base-line; |
|
||||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ |
|
||||||
-webkit-text-size-adjust: 100%; |
|
||||||
|
|
||||||
p { |
|
||||||
font-size: @base-font; |
|
||||||
font-weight: normal; |
|
||||||
line-height: @base-line; |
|
||||||
margin-bottom: @base-line; |
|
||||||
color: @color-feature-description; |
|
||||||
|
|
||||||
small { |
|
||||||
font-size: @base-font - 3; |
|
||||||
line-height: @base-line - 3; |
|
||||||
} |
|
||||||
} |
|
||||||
p:first-child { |
|
||||||
margin-top:@base-line; |
|
||||||
} |
|
||||||
.navigation { |
|
||||||
p { |
|
||||||
color: @color-nav-description; |
|
||||||
} |
|
||||||
} |
|
||||||
.feature { |
|
||||||
h3, h4, h5, h6 { |
|
||||||
margin-bottom: @base-space; |
|
||||||
} |
|
||||||
p { |
|
||||||
color: @color-feature-description; |
|
||||||
} |
|
||||||
blockquote, blockquote p { |
|
||||||
color:@color-feature-title; |
|
||||||
} |
|
||||||
} |
|
||||||
.date, .title { |
|
||||||
a { |
|
||||||
color: @color-nav-description; |
|
||||||
} |
|
||||||
} |
|
||||||
.hyphenate { |
|
||||||
.hyphens(auto); |
|
||||||
word-wrap:break-word; |
|
||||||
} |
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 { |
|
||||||
font-weight: normal; |
|
||||||
color: @color-feature-title; |
|
||||||
text-transform: none; |
|
||||||
a { |
|
||||||
color: @color-nav-description; |
|
||||||
} |
|
||||||
small { |
|
||||||
color: @color-nav-title; |
|
||||||
} |
|
||||||
} |
|
||||||
h1.date, h2.date, h3.date, h4.date, h5.date, h6.date { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
h2.start { |
|
||||||
//font-size: 42px; |
|
||||||
//line-height: 44px; |
|
||||||
font-size: 36px; |
|
||||||
line-height: 38px; |
|
||||||
|
|
||||||
margin-bottom: @base-space; |
|
||||||
} |
|
||||||
h1 { |
|
||||||
margin-bottom: @base-space; |
|
||||||
font-size: 32px; |
|
||||||
line-height: 34px; |
|
||||||
small { |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
} |
|
||||||
h2 { |
|
||||||
margin-bottom: @base-space; |
|
||||||
font-size: 28px; |
|
||||||
line-height: 30px; |
|
||||||
|
|
||||||
small { |
|
||||||
font-size: 14px; |
|
||||||
line-height: 16px; |
|
||||||
|
|
||||||
//margin-left:5px; |
|
||||||
} |
|
||||||
} |
|
||||||
h2.date { |
|
||||||
font-size: 16px; |
|
||||||
line-height:18px; |
|
||||||
margin-bottom: @base-space/4; |
|
||||||
color:@color-feature-date; |
|
||||||
|
|
||||||
//margin-bottom: @base-space; |
|
||||||
} |
|
||||||
h3, h4, h5, h6 { |
|
||||||
line-height: @base-line * 2; |
|
||||||
.active { |
|
||||||
color: @color-theme; |
|
||||||
} |
|
||||||
} |
|
||||||
h3 { |
|
||||||
font-size: 28px; |
|
||||||
line-height: 30px; |
|
||||||
//font-size: 24px; |
|
||||||
//line-height:26px; |
|
||||||
small { |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
} |
|
||||||
h4 { |
|
||||||
font-size: 20px; |
|
||||||
line-height: 22px; |
|
||||||
//font-size: 16px; |
|
||||||
//line-height:18px; |
|
||||||
small { |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
} |
|
||||||
h5 { |
|
||||||
font-size: 16px; |
|
||||||
line-height:18px; |
|
||||||
|
|
||||||
//font-size: 14px; |
|
||||||
//line-height:16px; |
|
||||||
} |
|
||||||
h6 { |
|
||||||
font-size: 13px; |
|
||||||
line-height:14px; |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
strong { |
|
||||||
font-weight:bold; |
|
||||||
font-style:inherit; |
|
||||||
} |
|
||||||
em { |
|
||||||
font-style: italic; |
|
||||||
font-weight: inherit; |
|
||||||
} |
|
||||||
Q { |
|
||||||
quotes: '„' '“'; |
|
||||||
font-style: italic; |
|
||||||
} |
|
||||||
|
|
||||||
/* BLOCKQUOTES |
|
||||||
================================================== */ |
|
||||||
|
|
||||||
blockquote, blockquote p { |
|
||||||
font-size: @base-font-large; |
|
||||||
line-height: @base-line-large; |
|
||||||
text-align:left; |
|
||||||
margin-bottom: 6px; |
|
||||||
padding-top: 10px; |
|
||||||
background-color:@white; |
|
||||||
color:@color-feature-title; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
/* Caption and Credits |
|
||||||
================================================== */ |
|
||||||
|
|
||||||
.credit { |
|
||||||
color: @color-credit; |
|
||||||
text-align: right; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 10px; |
|
||||||
display: block; |
|
||||||
margin: 0 auto; |
|
||||||
clear:both; |
|
||||||
} |
|
||||||
.caption { |
|
||||||
text-align:left; |
|
||||||
margin-top:5px; |
|
||||||
color: @color-caption; |
|
||||||
font-size: 11px; |
|
||||||
line-height: 14px; |
|
||||||
clear:both; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
@ -1,662 +0,0 @@ |
|||||||
/* Slider |
|
||||||
------------------------------------------------------------------------------------------- */ |
|
||||||
|
|
||||||
/* SLIDER CONTAINERS |
|
||||||
================================================== */ |
|
||||||
.vmm-slider { |
|
||||||
width:100%; |
|
||||||
height:100%; |
|
||||||
overflow:hidden; |
|
||||||
.slider-container-mask { |
|
||||||
text-align: center; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
.slider-container { |
|
||||||
position: absolute; |
|
||||||
top: 0px; |
|
||||||
left: -2160px; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
text-align: center; |
|
||||||
display: block; |
|
||||||
|
|
||||||
.slider-item-container { |
|
||||||
//overflow:hidden; |
|
||||||
display:table-cell; |
|
||||||
vertical-align:middle; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* HOVER ELEMENTS |
|
||||||
================================================== */ |
|
||||||
.vmm-notouch { |
|
||||||
.vmm-slider { |
|
||||||
.nav-previous:hover, .nav-next:hover { |
|
||||||
color: @color-dark-second; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.nav-previous:hover { |
|
||||||
.icon { |
|
||||||
margin-left: @base-space - 5; |
|
||||||
} |
|
||||||
} |
|
||||||
.nav-next:hover { |
|
||||||
.icon { |
|
||||||
margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5; |
|
||||||
} |
|
||||||
} |
|
||||||
.slider-item { |
|
||||||
.content { |
|
||||||
.content-container { |
|
||||||
.media { |
|
||||||
.media-container { |
|
||||||
.wikipedia { |
|
||||||
h4 a:hover { |
|
||||||
color: @color-theme; |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.created-at:hover { |
|
||||||
.opacity(100); |
|
||||||
} |
|
||||||
.googleplus { |
|
||||||
.googleplus-content { |
|
||||||
.googleplus-attachments { |
|
||||||
a:hover { |
|
||||||
text-decoration: none; |
|
||||||
h5 { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
/* SLIDER ELEMENTS |
|
||||||
================================================== */ |
|
||||||
.vmm-slider { |
|
||||||
img, embed, object, video, iframe { |
|
||||||
max-width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* SLIDER NAV |
|
||||||
================================================== */ |
|
||||||
.vmm-slider { |
|
||||||
//position: relative; |
|
||||||
|
|
||||||
.nav-previous, .nav-next { |
|
||||||
position:absolute; |
|
||||||
top: 0px; |
|
||||||
width: @feature-nav-width; |
|
||||||
color: #DBDBDB; |
|
||||||
font-size:@base-font-small; |
|
||||||
.nav-container { |
|
||||||
height:100px; |
|
||||||
width:100px; |
|
||||||
position:absolute; |
|
||||||
} |
|
||||||
.icon { |
|
||||||
margin-top:@feature-nav-icon-wh/2; |
|
||||||
margin-bottom:@base-space; |
|
||||||
} |
|
||||||
.date, .title { |
|
||||||
line-height:14px; |
|
||||||
a { |
|
||||||
color: @color-nav-description; |
|
||||||
} |
|
||||||
small { |
|
||||||
display:none; |
|
||||||
} |
|
||||||
} |
|
||||||
.date { |
|
||||||
font-size: @base-font-small + 2; |
|
||||||
line-height: @base-font-small + 2; |
|
||||||
|
|
||||||
//font-size: @base-font; |
|
||||||
//line-height: @base-line; |
|
||||||
font-weight: bold; |
|
||||||
|
|
||||||
text-transform: uppercase; |
|
||||||
margin-bottom:5px; |
|
||||||
} |
|
||||||
.title { |
|
||||||
font-size: @base-font-small; |
|
||||||
line-height: @base-font-small + 2; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.nav-previous { |
|
||||||
float: left; |
|
||||||
text-align:left; |
|
||||||
.icon { |
|
||||||
margin-left: @base-space; |
|
||||||
.icon-previous(); |
|
||||||
} |
|
||||||
.date, .title { |
|
||||||
text-align:left; |
|
||||||
padding-left:@base-space; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.nav-next { |
|
||||||
float: right; |
|
||||||
text-align:right; |
|
||||||
.icon { |
|
||||||
margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh; |
|
||||||
.icon-next() |
|
||||||
} |
|
||||||
.date, .title { |
|
||||||
text-align:right; |
|
||||||
padding-right:@base-space; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* SLIDE CONTENT |
|
||||||
================================================== */ |
|
||||||
.vmm-slider { |
|
||||||
.slider-item { |
|
||||||
position:absolute; |
|
||||||
width:700px; |
|
||||||
height:100%; |
|
||||||
padding:0px; |
|
||||||
margin:0px; |
|
||||||
//overflow: hidden; |
|
||||||
display:table; |
|
||||||
//overflow-x:hidden; |
|
||||||
overflow-y:auto; |
|
||||||
|
|
||||||
.content { |
|
||||||
display:table-cell; |
|
||||||
vertical-align:middle; |
|
||||||
|
|
||||||
/* All Slides |
|
||||||
================================================== */ |
|
||||||
.pad-top { |
|
||||||
.text { |
|
||||||
.container { |
|
||||||
padding-top: @base-space; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.pad-right { |
|
||||||
.text { |
|
||||||
.container { |
|
||||||
padding-right: @base-space; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.pad-left { |
|
||||||
.text { |
|
||||||
.container { |
|
||||||
padding-left: @base-space*2; |
|
||||||
} |
|
||||||
} |
|
||||||
.media.text-media { |
|
||||||
.media-wrapper { |
|
||||||
.media-container { |
|
||||||
border: none; |
|
||||||
background-color: @white; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
.content-container { |
|
||||||
display:table; |
|
||||||
vertical-align:middle; |
|
||||||
.text { |
|
||||||
width:40%; |
|
||||||
max-width:50%; |
|
||||||
min-width:120px; |
|
||||||
display:table-cell; |
|
||||||
vertical-align:middle; |
|
||||||
.container { |
|
||||||
display:table-cell; |
|
||||||
vertical-align:middle; |
|
||||||
text-align:left; |
|
||||||
p { |
|
||||||
-webkit-hyphens:auto; |
|
||||||
-moz-hyphens:auto; |
|
||||||
-ms-hyphens:auto; |
|
||||||
hyphens:auto; |
|
||||||
word-wrap:break-word; |
|
||||||
} |
|
||||||
h2.date { |
|
||||||
font-size: @base-font; |
|
||||||
line-height: @base-font; |
|
||||||
//margin-bottom: @base-space/2; |
|
||||||
//color:@color-feature-date; |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
|
|
||||||
.slide-tag { |
|
||||||
font-size: @base-font-small; |
|
||||||
font-weight: bold; |
|
||||||
color: @color-base; |
|
||||||
background-color: lighten(@color-feature-date, 20%); |
|
||||||
-webkit-border-radius: 3px; |
|
||||||
-moz-border-radius: 3px; |
|
||||||
border-radius: 3px; |
|
||||||
vertical-align: baseline; |
|
||||||
white-space: nowrap; |
|
||||||
//text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
|
||||||
line-height: @base-font-small; |
|
||||||
padding: 1px 3px 1px; |
|
||||||
margin-left:@base-space/2; |
|
||||||
margin-bottom: @base-space/2; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.media { |
|
||||||
width:100%; |
|
||||||
min-width:50%; |
|
||||||
float: left; |
|
||||||
.media-wrapper { |
|
||||||
display:inline-block; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
.media-container { |
|
||||||
display:inline-block; |
|
||||||
line-height:0px; |
|
||||||
padding:0px; |
|
||||||
max-height:100%; |
|
||||||
//overflow:hidden; |
|
||||||
|
|
||||||
/* MEDIA SHADOWS AND BORDERS |
|
||||||
================================================== */ |
|
||||||
.media-frame, .media-image img { |
|
||||||
border: 1px solid; |
|
||||||
border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line; |
|
||||||
background-color: @color-background; |
|
||||||
} |
|
||||||
.media-frame iframe { |
|
||||||
background-color: @color-background; |
|
||||||
} |
|
||||||
.soundcloud { |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
.media-image { |
|
||||||
display: inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
.media-shadow { |
|
||||||
position: relative; |
|
||||||
z-index: 1; |
|
||||||
background:@color-background; |
|
||||||
|
|
||||||
} |
|
||||||
.media-shadow:before, .media-shadow:after { |
|
||||||
z-index: -1; |
|
||||||
position: absolute; |
|
||||||
content: ""; |
|
||||||
bottom: 15px; |
|
||||||
left: 10px; |
|
||||||
width: 50%; |
|
||||||
top: 80%; |
|
||||||
max-width:300px; |
|
||||||
background: @color-dark-fourth; |
|
||||||
-webkit-box-shadow: 0 15px 10px @color-dark-fourth; |
|
||||||
-moz-box-shadow: 0 15px 10px @color-dark-fourth; |
|
||||||
box-shadow: 0 15px 10px @color-dark-fourth; |
|
||||||
-webkit-transform: rotate(-2deg); |
|
||||||
-moz-transform: rotate(-2deg); |
|
||||||
-o-transform: rotate(-2deg); |
|
||||||
-ms-transform: rotate(-2deg); |
|
||||||
transform: rotate(-2deg); |
|
||||||
} |
|
||||||
.media-shadow::after { |
|
||||||
-webkit-transform: rotate(2deg); |
|
||||||
-moz-transform: rotate(2deg); |
|
||||||
-o-transform: rotate(2deg); |
|
||||||
-ms-transform: rotate(2deg); |
|
||||||
transform: rotate(2deg); |
|
||||||
right: 10px; |
|
||||||
left: auto; |
|
||||||
} |
|
||||||
.plain-text { |
|
||||||
display:table; |
|
||||||
.container { |
|
||||||
display:table-cell; |
|
||||||
vertical-align:middle; |
|
||||||
font-size: @base-font; |
|
||||||
line-height:@base-line; |
|
||||||
color: @color-feature-description; |
|
||||||
p { |
|
||||||
margin-bottom:@base-line; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.wikipedia { |
|
||||||
font-size: @base-font; |
|
||||||
line-height: @base-line; |
|
||||||
text-align:left; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
margin-bottom:@base-space; |
|
||||||
clear:both; |
|
||||||
.wiki-source { |
|
||||||
margin-bottom:@base-space; |
|
||||||
font-size: 13px; |
|
||||||
line-height: 19px; |
|
||||||
font-style: italic; |
|
||||||
} |
|
||||||
h4 { |
|
||||||
border-bottom: 1px solid @color-line; |
|
||||||
margin-bottom:5px; |
|
||||||
} |
|
||||||
h4 a { |
|
||||||
color: @color-feature-title; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
font-size: 13px; |
|
||||||
line-height: 19px; |
|
||||||
} |
|
||||||
} |
|
||||||
.map { |
|
||||||
line-height: normal; |
|
||||||
z-index:200; |
|
||||||
text-align:left; |
|
||||||
background-color:@white; |
|
||||||
|
|
||||||
img { |
|
||||||
max-height:none !important; |
|
||||||
max-width:none !important; |
|
||||||
border:0; |
|
||||||
-webkit-box-shadow: none; |
|
||||||
-moz-box-shadow: none; |
|
||||||
box-shadow: none; |
|
||||||
|
|
||||||
} |
|
||||||
.google-map { |
|
||||||
height:100%; |
|
||||||
width:100%; |
|
||||||
} |
|
||||||
.map-attribution { |
|
||||||
position: absolute; |
|
||||||
z-index: 201; |
|
||||||
//right: 0px; |
|
||||||
bottom: 0px; |
|
||||||
width:100%; |
|
||||||
overflow:hidden; |
|
||||||
|
|
||||||
.attribution-text { |
|
||||||
height: 19px; |
|
||||||
overflow:hidden; |
|
||||||
-webkit-user-select: none; |
|
||||||
line-height: 19px; |
|
||||||
margin-right: 60px; |
|
||||||
padding-left: 65px; |
|
||||||
font-family: Arial, sans-serif; |
|
||||||
font-size: 10px; |
|
||||||
//font-weight: bold; |
|
||||||
color: #444; |
|
||||||
white-space: nowrap; |
|
||||||
color:@color-base; |
|
||||||
text-shadow:1px 1px 1px @color-dark-second; |
|
||||||
//direction: ltr; |
|
||||||
text-align: center; |
|
||||||
a { |
|
||||||
color:@color-base !important; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.credit { |
|
||||||
color: @color-credit; |
|
||||||
text-align: right; |
|
||||||
display: block; |
|
||||||
margin: 0 auto; |
|
||||||
margin-top:6px; |
|
||||||
.text-font(@base-font-small - 1); |
|
||||||
//max-height:16px; |
|
||||||
//overflow:auto; |
|
||||||
} |
|
||||||
.caption { |
|
||||||
text-align:left; |
|
||||||
margin-top:@base-font-small - 1; |
|
||||||
color: @color-caption; |
|
||||||
.text-font(@base-font-small); |
|
||||||
text-rendering: optimizeLegibility; |
|
||||||
word-wrap: break-word; |
|
||||||
//max-height:45px; |
|
||||||
//overflow-x:hidden; |
|
||||||
//overflow-y:auto; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.media.text-media { |
|
||||||
.media-wrapper { |
|
||||||
.media-container { |
|
||||||
border: none; |
|
||||||
background-color: @white; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.created-at { |
|
||||||
width:24px; |
|
||||||
height:24px; |
|
||||||
overflow:hidden; |
|
||||||
margin-left:@base-space/2; |
|
||||||
margin-top:2px; |
|
||||||
display:inline-block; |
|
||||||
float:right; |
|
||||||
.opacity(25); |
|
||||||
} |
|
||||||
.storify { |
|
||||||
.created-at { |
|
||||||
.icon-storify(); |
|
||||||
} |
|
||||||
} |
|
||||||
.twitter { |
|
||||||
.created-at { |
|
||||||
.icon-twitter(); |
|
||||||
} |
|
||||||
} |
|
||||||
.googleplus { |
|
||||||
.googleplus-content { |
|
||||||
font-size: 13px; |
|
||||||
line-height: 19px; |
|
||||||
|
|
||||||
margin-bottom: 6px; |
|
||||||
padding-top: 10px; |
|
||||||
background-color:@white; |
|
||||||
color: @color-feature-description; |
|
||||||
p { |
|
||||||
font-size: 13px; |
|
||||||
line-height: 19px; |
|
||||||
} |
|
||||||
.googleplus-title { |
|
||||||
font-size: @base-font-large; |
|
||||||
line-height: @base-line-large; |
|
||||||
margin-bottom: 6px; |
|
||||||
padding-top: 10px; |
|
||||||
background-color:@white; |
|
||||||
color:@color-feature-title; |
|
||||||
} |
|
||||||
.googleplus-annotation { |
|
||||||
font-size: @base-font; |
|
||||||
line-height: @base-line; |
|
||||||
color: @color-feature-title; |
|
||||||
border-bottom: 1px solid @color-dark-fifth; |
|
||||||
padding-bottom: @base-space/2; |
|
||||||
margin-bottom: @base-space/2; |
|
||||||
} |
|
||||||
.googleplus-attachments { |
|
||||||
border-top: 1px solid @color-dark-fifth; |
|
||||||
padding-top: @base-space; |
|
||||||
margin-top: @base-space; |
|
||||||
border-bottom: 1px solid @color-dark-fifth; |
|
||||||
padding-bottom: @base-space; |
|
||||||
margin-bottom: @base-space; |
|
||||||
.clearfix(); |
|
||||||
h5 { |
|
||||||
margin-bottom:5px; |
|
||||||
} |
|
||||||
div { |
|
||||||
width: 50%; |
|
||||||
padding-left: @base-space; |
|
||||||
display:inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
.text-font(@base-font-small); |
|
||||||
margin-bottom: 5px; |
|
||||||
//float:left; |
|
||||||
} |
|
||||||
img { |
|
||||||
float:left; |
|
||||||
display: block; |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
margin: auto; |
|
||||||
position: relative; |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
width: 40%; |
|
||||||
//display:inline-block; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
.proflinkPrefix { |
|
||||||
color:@color-theme; |
|
||||||
} |
|
||||||
.created-at { |
|
||||||
.icon-googleplus(); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.twitter, .plain-text-quote, .storify, .googleplus { |
|
||||||
text-align:left; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
margin-bottom:@base-space; |
|
||||||
clear:both; |
|
||||||
blockquote { |
|
||||||
//font-size: @base-font; |
|
||||||
//line-height: @base-line; |
|
||||||
color:@color-feature-description; |
|
||||||
p { |
|
||||||
font-size: @base-font-large; |
|
||||||
line-height: @base-line-large; |
|
||||||
margin-bottom: 6px; |
|
||||||
padding-top: 10px; |
|
||||||
background-color:@white; |
|
||||||
color:@color-feature-title; |
|
||||||
} |
|
||||||
.quote-mark { |
|
||||||
color:@color-dark-third; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
/* Text and Media Slides |
|
||||||
================================================== */ |
|
||||||
|
|
||||||
.content-container.layout-text-media { |
|
||||||
.text-media { |
|
||||||
border-top: 1px solid @color-dark-fifth; |
|
||||||
padding-top:@base-space; |
|
||||||
padding-right:0; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
.content-container.layout-text-media.pad-left { |
|
||||||
.text-media { |
|
||||||
padding-right:@base-space; |
|
||||||
padding-top:0; |
|
||||||
border-right: 1px solid @color-dark-fifth; |
|
||||||
border-top: 0px solid @color-dark-fifth; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Text Only Slides |
|
||||||
================================================== */ |
|
||||||
.content-container.layout-text { |
|
||||||
width:100%; |
|
||||||
.text { |
|
||||||
width:100%; |
|
||||||
max-width:100%; |
|
||||||
.container { |
|
||||||
display:block; |
|
||||||
vertical-align:middle; |
|
||||||
text-align:left; |
|
||||||
padding:0px; |
|
||||||
width: 90%; |
|
||||||
text-align:left; |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* Media Only Slides |
|
||||||
================================================== */ |
|
||||||
.content-container.layout-media { |
|
||||||
width:100%; |
|
||||||
.text { |
|
||||||
width:100%; |
|
||||||
height:100%; |
|
||||||
max-width:100%; |
|
||||||
display:block; |
|
||||||
text-align:center; |
|
||||||
.container { |
|
||||||
display:block; |
|
||||||
text-align:center; |
|
||||||
width:100%; |
|
||||||
margin-left: none; |
|
||||||
margin-right: none; |
|
||||||
} |
|
||||||
} |
|
||||||
.media { |
|
||||||
width:100%; |
|
||||||
min-width:50%; |
|
||||||
float: none; |
|
||||||
.media-wrapper { |
|
||||||
//display:block; |
|
||||||
.media-container { |
|
||||||
margin-left: auto; |
|
||||||
margin-right: auto; |
|
||||||
//overflow: hidden; |
|
||||||
line-height:0px; |
|
||||||
padding:0px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
.twitter, .wikipedia, .googleplus { |
|
||||||
max-width:70%; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
/* |
|
||||||
* TOOLTIP |
|
||||||
* Styles for tooltip |
|
||||||
* ------------------------------------------------------------------------------------------- */ |
|
||||||
|
|
||||||
.tooltip { |
|
||||||
position: absolute; |
|
||||||
z-index: 205; |
|
||||||
display: block; |
|
||||||
visibility: visible; |
|
||||||
padding: 5px; |
|
||||||
//font-size: 11px; |
|
||||||
opacity: 0; |
|
||||||
filter: alpha(opacity=0); |
|
||||||
|
|
||||||
font-size: @base-font; |
|
||||||
font-weight: bold; |
|
||||||
line-height: @base-line; |
|
||||||
|
|
||||||
font-size: 12px; |
|
||||||
line-height:12px; |
|
||||||
} |
|
||||||
.tooltip.in { |
|
||||||
opacity: 0.8; |
|
||||||
filter: alpha(opacity=80); |
|
||||||
} |
|
||||||
.tooltip.top { |
|
||||||
margin-top: -2px; |
|
||||||
} |
|
||||||
.tooltip.right { |
|
||||||
margin-left: 2px; |
|
||||||
} |
|
||||||
.tooltip.bottom { |
|
||||||
margin-top: 2px; |
|
||||||
} |
|
||||||
.tooltip.left { |
|
||||||
margin-left: -2px; |
|
||||||
} |
|
||||||
.tooltip.top .tooltip-arrow { |
|
||||||
bottom: 0; |
|
||||||
left: 50%; |
|
||||||
margin-left: -5px; |
|
||||||
border-left: 5px solid transparent; |
|
||||||
border-right: 5px solid transparent; |
|
||||||
border-top: 5px solid #000000; |
|
||||||
} |
|
||||||
.tooltip.left .tooltip-arrow { |
|
||||||
top: 50%; |
|
||||||
right: 0; |
|
||||||
margin-top: -5px; |
|
||||||
border-top: 5px solid transparent; |
|
||||||
border-bottom: 5px solid transparent; |
|
||||||
border-left: 5px solid #000000; |
|
||||||
} |
|
||||||
.tooltip.bottom .tooltip-arrow { |
|
||||||
top: 0; |
|
||||||
left: 50%; |
|
||||||
margin-left: -5px; |
|
||||||
border-left: 5px solid transparent; |
|
||||||
border-right: 5px solid transparent; |
|
||||||
border-bottom: 5px solid #000000; |
|
||||||
} |
|
||||||
.tooltip.right .tooltip-arrow { |
|
||||||
top: 50%; |
|
||||||
left: 0; |
|
||||||
margin-top: -5px; |
|
||||||
border-top: 5px solid transparent; |
|
||||||
border-bottom: 5px solid transparent; |
|
||||||
border-right: 5px solid #000000; |
|
||||||
} |
|
||||||
.tooltip-inner { |
|
||||||
max-width: 200px; |
|
||||||
padding: 3px 8px; |
|
||||||
color: #ffffff; |
|
||||||
text-align: center; |
|
||||||
text-decoration: none; |
|
||||||
background-color: #000000; |
|
||||||
-webkit-border-radius: 4px; |
|
||||||
-moz-border-radius: 4px; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
.tooltip-arrow { |
|
||||||
position: absolute; |
|
||||||
width: 0; |
|
||||||
height: 0; |
|
||||||
} |
|
||||||
@ -1,86 +0,0 @@ |
|||||||
/* VARIABLES |
|
||||||
----------------------------------------------------- */ |
|
||||||
|
|
||||||
/* COLOR SCHEME |
|
||||||
================================================== */ |
|
||||||
@color-theme-dark: darken(@color-theme, 15); |
|
||||||
@color-theme-complement: spin(@color-theme, 180); |
|
||||||
@color-theme-complement-dark: darken(@color-theme-complement, 15); |
|
||||||
@color-theme-complement-darker: darken(@color-theme-complement, 30); |
|
||||||
|
|
||||||
@color-theme-split1: spin(@color-theme, -158); |
|
||||||
@color-theme-split2: spin(@color-theme, 158); |
|
||||||
|
|
||||||
@color-theme-triad1: spin(@color-theme, -135); |
|
||||||
@color-theme-triad2: spin(@color-theme, 135); |
|
||||||
|
|
||||||
@color-theme-tetrad1: spin(@color-theme, 180); |
|
||||||
@color-theme-tetrad2: spin(@color-theme, 150); |
|
||||||
@color-theme-tetrad3: spin(@color-theme, 30); |
|
||||||
@color-theme-tetrad4: spin(@color-theme, 210); |
|
||||||
@color-theme-tetrad5: spin(@color-theme, -30); |
|
||||||
@color-theme-tetrad6: @color-theme; |
|
||||||
|
|
||||||
@color-theme-tetra1: spin(@color-theme, -90); |
|
||||||
@color-theme-tetra2: spin(@color-theme, 90); |
|
||||||
|
|
||||||
@color-theme-analog1: spin(@color-theme, -22); |
|
||||||
@color-theme-analog2: spin(@color-theme, 22); |
|
||||||
|
|
||||||
@color-background: @color-base; |
|
||||||
|
|
||||||
@white: @color-base; |
|
||||||
|
|
||||||
/* NAVIGATION COLORS |
|
||||||
================================================== */ |
|
||||||
@color-nav-date: #AAA; // 33% |
|
||||||
@color-nav-description: @color-dark-fourth; // 40% |
|
||||||
@color-nav-title: @color-dark-fourth; |
|
||||||
|
|
||||||
@color-navigation-time: @color-dark-third; // 60% |
|
||||||
@color-navigation-major-time: @color-dark-second; // 80% |
|
||||||
@color-navigation-time-strong: @color-dark; // 100% |
|
||||||
|
|
||||||
@era-background: #E2E2E2; //#E3E3E3; // 11% |
|
||||||
@era-line: @color-line; |
|
||||||
@era-text: @color-feature-date; |
|
||||||
|
|
||||||
/* FEATURE COLORS |
|
||||||
================================================== */ |
|
||||||
@color-feature-date: @color-dark-fourth; |
|
||||||
@color-feature-description: @color-dark-third; |
|
||||||
@color-feature-title: @color-dark; |
|
||||||
|
|
||||||
|
|
||||||
@color-caption: @color-dark-third; |
|
||||||
@color-credit: @color-dark-fourth; |
|
||||||
|
|
||||||
/* BASE SIZES |
|
||||||
================================================== */ |
|
||||||
@base-font-small: 11px; |
|
||||||
@base-font: 15px; |
|
||||||
@base-font-large: 28px; |
|
||||||
|
|
||||||
@base-line: 20px; |
|
||||||
@base-line-large: 36px; |
|
||||||
|
|
||||||
@base-space: 15px; |
|
||||||
@base-thumb: 24px; |
|
||||||
|
|
||||||
|
|
||||||
/* FEATURE SIZES |
|
||||||
================================================== */ |
|
||||||
@feature-content-text: 200px; |
|
||||||
@feature-content-width: 720px; |
|
||||||
@feature-content-height: 400px; |
|
||||||
@feature-nav-width: 100px; |
|
||||||
@feature-nav-height: 200px; |
|
||||||
@feature-nav-icon-wh: 24px; |
|
||||||
|
|
||||||
/* NAVIGATION SIZES |
|
||||||
================================================== */ |
|
||||||
@navigation-height: 200px; |
|
||||||
@navigation-time-height: 50px; |
|
||||||
@navigation-content-height: @navigation-height - @navigation-time-height; |
|
||||||
@navigation-marker-height: 6px; |
|
||||||
|
|
||||||
Loading…
Reference in new issue