From 857cba15eda8e20d4fdaffd3c4dfec4b584163aa Mon Sep 17 00:00:00 2001 From: Zach Wise Date: Tue, 15 May 2012 22:20:18 -0500 Subject: [PATCH] Fix for files not showing capital first letter on GitHub --- source/less/GFX.less | 148 +++++++++++++++++++++++++ source/less/Mixins.less | 212 ++++++++++++++++++++++++++++++++++++ source/less/Typography.less | 170 +++++++++++++++++++++++++++++ source/less/Variables.less | 89 +++++++++++++++ 4 files changed, 619 insertions(+) create mode 100644 source/less/GFX.less create mode 100644 source/less/Mixins.less create mode 100644 source/less/Typography.less create mode 100644 source/less/Variables.less diff --git a/source/less/GFX.less b/source/less/GFX.less new file mode 100644 index 0000000..edd4e41 --- /dev/null +++ b/source/less/GFX.less @@ -0,0 +1,148 @@ +/* + 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; +} + +/* Current Time Indicator +----------------------------------------------------------------- */ +.icon-currenttime() { + .base-sprite(); + background-repeat:no-repeat; + background-position: -160px -48px; + width:24px; + height:8px; +} + +/* 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 new file mode 100644 index 0000000..0aa40c3 --- /dev/null +++ b/source/less/Mixins.less @@ -0,0 +1,212 @@ +/* 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 + + +// 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/Typography.less b/source/less/Typography.less new file mode 100644 index 0000000..78eaa4e --- /dev/null +++ b/source/less/Typography.less @@ -0,0 +1,170 @@ +/* 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/Variables.less b/source/less/Variables.less new file mode 100644 index 0000000..24d6949 --- /dev/null +++ b/source/less/Variables.less @@ -0,0 +1,89 @@ +/* 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; +@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; + +/* MIXINS +================================================== */ +.box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; +} +.media-shadow(@shadow: 0 1px 3px 0px rgba(0,0,0,0.35)) { + -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; + //border-color: @color-line @color-line-hover @color-line-hover @color-line; +} +