playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix for files not showing capital first letter on GitHub

pull/127/head
Zach Wise 13 years ago
parent
9e3b12df87
commit
857cba15ed
4 changed files with 619 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 148
      source/less/GFX.less
  2. 212
      source/less/Mixins.less
  3. 170
      source/less/Typography.less
  4. 89
      source/less/Variables.less

148
source/less/GFX.less
Unescape View File

@ -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);
}

212
source/less/Mixins.less
Unescape View File

@ -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;
}

170
source/less/Typography.less
Unescape View File

@ -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;
}
}

89
source/less/Variables.less
Unescape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save