diff --git a/source/less/Typography.less b/source/less/Typography.less deleted file mode 100644 index 78eaa4e..0000000 --- a/source/less/Typography.less +++ /dev/null @@ -1,170 +0,0 @@ -/* Typography.less - * Headings, body text, lists, etc - * ---------------------------------------------------------------------------------------- */ - -.vmm-timeline { - 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; - } - } - .date, .title { - a { - color: @color-nav-description; - } - - } - - 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; - 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: 16px; - line-height:18px; - small { - font-size: 12px; - } - } - h5 { - font-size: 14px; - line-height:16px; - } - h6 { - font-size: 13px; - line-height:14px; - text-transform: uppercase; - } - strong { - font-weight:bold; - } - - - Q { - quotes: '„' '“'; - font-style: italic; - } - - /* BLOCKQUOTES - ================================================== */ - - blockquote { - font-size: 28px; - text-align:left; - line-height: 36px; - 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; - } - - -} \ No newline at end of file diff --git a/source/less/gfx.less b/source/less/gfx.less deleted file mode 100644 index 3a8680e..0000000 --- a/source/less/gfx.less +++ /dev/null @@ -1,138 +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; -} - -/* 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-wikipedia() { - .base-sprite(); - background-repeat:no-repeat; - background-position: -184px -48px; -} - -/* Thumbnail Icons (Extra) ------------------------------------------------------------------ */ -.icon-vimeo() { - .base-sprite(); - background-repeat:no-repeat; - background-position: -328px -48px; -} -.icon-youtube() { - .base-sprite(); - background-repeat:no-repeat; - background-position: -328px -72px; -} - -/* 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); - -} - diff --git a/source/less/mixins.less b/source/less/mixins.less deleted file mode 100644 index 1601b46..0000000 --- a/source/less/mixins.less +++ /dev/null @@ -1,216 +0,0 @@ -/* Mixins.less - * Snippets of reusable CSS to develop faster and keep code readable - * ----------------------------------------------------------------- */ - - -// Clearfix for clearing floats like a boss h5bp.com/q -.clearfix() { - zoom: 1; - &:before, - &:after { - display: table; - content: ""; - zoom: 1; - } - &:after { - clear: both; - } -} - -// Center-align a block level element -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -.size(@height: 5px, @width: 5px) { - height: @height; - width: @width; -} -.square(@size: 5px) { - .size(@size, @size); -} - -// Input placeholder text -.placeholder(@color: @grayLight) { - :-moz-placeholder { - color: @color; - } - ::-webkit-input-placeholder { - color: @color; - } -} - -// 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; - } -} - -// Border Radius -.border-radius(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Drop shadows -.box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; -} - -// 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; -} - -// 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; -} - -// Make any element resizable for prototyping -.resizable(@direction: both) { - resize: @direction; // Options are horizontal, vertical, both - overflow: auto; // Safari fix -} - -// 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 - } -} - -// Reset filters for IE -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - -// Opacity -.opacity(@opacity: 100) { - filter: e(%("alpha(opacity=%d)", @opacity)); - -khtml-opacity: @opacity / 100; - -moz-opacity: @opacity / 100; - opacity: @opacity / 100; -} \ No newline at end of file diff --git a/source/less/reset.less b/source/less/reset.less deleted file mode 100644 index 2b718a2..0000000 --- a/source/less/reset.less +++ /dev/null @@ -1,100 +0,0 @@ -/* Reset -------------------------------------------------------------------------------------------- */ - -.vmm-timeline { - - /* Reset tags and common classes - Display in IE6-9 and FF3 - Based on: http://github.com/necolas/normalize.css - ------------------------------------------------------------------------------------------- */ - - - 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 - } -} \ No newline at end of file diff --git a/source/less/variables.less b/source/less/variables.less deleted file mode 100644 index 2076c27..0000000 --- a/source/less/variables.less +++ /dev/null @@ -1,71 +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-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-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: 15px; -@base-line: 20px; -@base-space: 15px; -@base-font-small: 11px; - -/* 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;