shamrock: a limited edition theem for st. patty's day

index.html

@@ -138,6 +138,40 @@
 
 		<div class="row" id="gallery">
 
+<!-- 			<div class="offset4 span4">
+				<div class="thumbnail">
+					<a href="shamrock"><img src="shamrock/thumbnail.png" alt="Shamrock"></a>
+					<div class="caption">
+						<h3>Shamrock</h3>
+						<p>Limited edition for St. Patty's Day.</p>
+						<div class="btn-toolbar">
+							<div class="btn-group"><a class="btn btn-large" href="shamrock">Preview</a></div>
+							<div class="btn-group">
+								<a class="btn btn-large btn-primary" target="_blank" href="shamrock/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'shamrock', 'bootstrap.min.css']);">Download</a>
+								<a class="btn btn-large btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
+									<span class="caret"></span>
+								</a>
+								<ul class="dropdown-menu">
+									<li><a target="_blank" href="shamrock/bootstrap.min.css"
+										onClick="_gaq.push(['_trackEvent', 'bootswatch', 'shamrock', 'bootstrap.min.css']);">bootstrap.min.css</a></li>
+									<li><a target="_blank" href="shamrock/bootstrap.css"
+										onClick="_gaq.push(['_trackEvent', 'bootswatch', 'shamrock', 'bootstrap.css']);">bootstrap.css</a></li>
+									<li class="divider"></li>
+									<li><a target="_blank" href="shamrock/variables.less"
+										onClick="_gaq.push(['_trackEvent', 'bootswatch', 'shamrock', 'variables.less']);">variables.less</a></li>
+									<li><a target="_blank" href="shamrock/bootswatch.less"
+										onClick="_gaq.push(['_trackEvent', 'bootswatch', 'shamrock', 'bootswatch.less']);">bootswatch.less</a></li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+		</div>
+
+		<div class="row"> -->
+
 			<div class="span4">
 				<div class="thumbnail">
 					<a href="amelia"><img src="amelia/thumbnail.png" alt="Amelia"></a>

shamrock/bootswatch.less

+// Swatch 2.3.0
+// Shamrock
+// -----------------------------------------------------
+
+
+// TYPOGRAPHY
+// -----------------------------------------------------
+
+@import url('//fonts.googleapis.com/css?family=Marcellus');
+
+h1:before {
+	content: "\2663";
+	margin-right: 10px;
+}
+
+strong {
+	font-weight: normal;
+}
+
+blockquote {
+
+	small {
+		color: @grayLighter;
+	}
+}
+
+.muted {
+	color: @grayLighter;
+}
+
+// SCAFFOLDING
+// -----------------------------------------------------
+
+.page-header {
+	border-bottom: 5px solid @grayLighter;
+}
+
+// NAVBAR
+// -----------------------------------------------------
+
+.navbar {
+
+	.brand {
+
+		&:hover {
+			color: @navbarLinkColorHover;
+		}
+	}
+
+	&-search .search-query {
+		line-height: normal;
+	}
+}
+
+div.subnav {
+
+	background-image: none;
+	background-color: @grayLight;
+	border-color: @grayDark;
+
+	.nav > li > a {
+		border-color: transparent;
+		color: @textColor;
+
+		&:hover {
+			background-color: transparent;
+			color: @linkColor;
+		}
+	}
+
+	.nav > .active > a,
+	.nav > .active > a:hover {
+		background-color: transparent;
+		.box-shadow(none);
+		border-color: transparent;
+		color: @linkColor;
+	}
+
+	&-fixed {
+		top: @navbarHeight + 1;
+		.box-shadow(none);
+	}
+
+
+
+}
+
+// NAV
+// -----------------------------------------------------
+
+.nav {
+
+	& > .active > a,
+	& > .active > a:hover,
+	& > .active > a:focus {
+		color: @textColor;
+	}
+
+	& > .disabled > a {
+		color: @grayLighter;
+	}
+}
+
+.nav-list {
+
+	& > li > a,
+	& > .active > a,
+	& > .active > a:hover,
+	& > .active > a:focus {
+		text-shadow: none;
+
+		&:hover {
+			background-color: @grayDark;
+		}
+	}
+
+	.divider {
+		background-color: #446e2a;
+		border-color: @grayDark;
+	}
+
+	.nav-header {
+		color: @textColor;
+		text-shadow: none;
+	}
+}
+
+.nav-pills {
+
+	& > li > a:hover, {
+		background-color: @grayDark;
+	}
+
+}
+
+.nav-tabs {
+
+	border-color: @grayDark;
+
+	& > li > a:hover,
+	.open .dropdown-toggle,
+	.open .dropdown-toggle:hover {
+		background-color: @grayDark;
+		border-color: @grayDark;
+		border-bottom-color: transparent;
+	}
+
+	& > .active > a,
+	& > .active > a:hover,
+	& > .active > a:focus {
+		border-color: @grayDark;
+		border-bottom-color: transparent;
+	}
+
+	&.nav-stacked > li > a {
+		border-color: @grayDark;
+
+		&:hover,
+		&:focus {
+			border-color: @grayDark;
+		}
+	}
+}
+
+.tabs-below > .nav-tabs {
+	border-top-color: @grayDark;
+
+	& > li > a:hover {
+		background-color: @grayDark;
+		border-color: @grayDark;
+		border-top-color: transparent;
+	}
+
+	& > .active > a,
+	& > .active > a:hover,
+	& > .active > a:focus {
+		border-color: @grayDark;
+		border-top-color: transparent;
+	}
+}
+
+.tabs-left > .nav-tabs {
+	border-right-color: @grayDark;
+
+	& > li > a:hover {
+		background-color: @grayDark;
+		border-color: @grayDark;
+		border-right-color: transparent;
+	}
+
+	& > .active > a,
+	& > .active > a:hover,
+	& > .active > a:focus {
+		border-color: @grayDark;
+		border-right-color: transparent;
+	}
+}
+
+.tabs-right > .nav-tabs {
+	border-left-color: @grayDark;
+
+	& > li > a:hover {
+		background-color: @grayDark;
+		border-color: @grayDark;
+		border-left-color: transparent;
+	}
+
+	& > .active > a,
+	& > .active > a:hover,
+	& > .active > a:focus {
+		border-color: @grayDark;
+		border-left-color: transparent;
+	}
+}
+
+.breadcrumb {
+
+	background-color: @grayDark;
+
+	& > li {
+		color: @textColor;
+		text-shadow: none;
+
+		& > .divider {
+			color: @grayLighter;
+		}
+	}
+
+	& > .active {
+		color: @textColor;
+	}
+}
+
+.pagination {
+
+
+	ul > li > a {
+		background-color: @grayDark;
+		border-color: @tableBorder;
+
+		&:hover {
+			background-color: @grayLight;
+		}
+	}
+
+	ul > .active > a,
+	ul > .active > span {
+		background-color: @grayLight;
+		color: @white;
+	}
+
+	ul > .disabled > span,
+	ul > .disabled > a,
+	ul > .disabled > a:hover,
+	ul > .disabled > a:focus {
+		background-color: @grayDark;
+		color: @grayLighter;
+	}
+}
+
+.pager {
+
+	li > a,
+	li > span {
+		background-color: @grayDark;
+		border: none;
+
+		&:hover {
+			background-color: @grayLight;
+		}
+	}
+
+	.disabled > a,
+	.disabled > a:hover,
+	.disabled > a:focus,
+	.disabled > span {
+		background-color: @grayDark;
+		border: none;
+		color: @grayLighter;
+	}
+}
+
+// BUTTONS
+// -----------------------------------------------------
+
+.btn {
+	color: @textColor;
+
+	&:hover,
+	&:focus,
+	&:active,
+	&.active,
+	&.disabled,
+	&[disabled] {
+		color: @textColor;
+	}
+}
+
+// TABLES
+// -----------------------------------------------------
+
+.table {
+
+	tbody tr.success > td,
+	tbody tr.error > td,
+	tbody tr.info > td {
+		background-color: @grayLighter;
+	}
+}
+
+// FORMS
+// -----------------------------------------------------
+
+legend {
+	border-bottom: 5px solid @grayLighter;
+	color: @textColor;
+}
+
+.control-group.warning {
+
+	.control-label,
+	.help-block,
+	.help-inline {
+		color: @yellow;
+	}
+
+	input,
+	select,
+	textarea {
+		border-color: @yellow;
+	}
+}
+
+.control-group.error {
+
+	.control-label,
+	.help-block,
+	.help-inline {
+		color: @yellow;
+	}
+
+	input,
+	select,
+	textarea {
+		border-color: @yellow;
+	}
+}
+
+.control-group.success {
+
+	.control-label,
+	.help-block,
+	.help-inline {
+		color: @yellow;
+	}
+
+	input,
+	select,
+	textarea {
+		border-color: @yellow;
+	}
+}
+
+.form-actions {
+	background-color: rgba(0, 0, 0, 0.1);
+	border-top: none;
+}
+
+// DROPDOWNS
+// -----------------------------------------------------
+
+.dropdown-menu {
+
+	.divider {
+		background-color: #446e2a;
+		border-color: @grayDark;
+	}
+}
+
+// ALERTS, LABELS, BADGES
+// -----------------------------------------------------
+
+.alert {
+	background-color: @yellow;
+	border: none;
+	color: @textColor;
+	text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
+
+	h1, h2, h3, h4, h5, h6 {
+		color: @textColor;
+		text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
+	}
+}
+
+.label,
+.badge {
+
+	&-success {
+		background-color: @btnBackground;
+	}
+
+	&-warning {
+		background-color: @btnWarningBackground;
+	}
+
+	&-important {
+		background-color: @btnDangerBackground;
+	}
+
+	&-info {
+		background-color: @btnInfoBackground;
+	}
+
+	&-inverse {
+		background-color: @btnInverseBackground;
+	}
+}
+
+// MISC
+// -----------------------------------------------------
+
+.progress {
+	background-image: none;
+	background-color: @grayDarker;
+
+	.bar {
+		background-color: @grayLighter;
+ 		 #gradient > .vertical(@grayLighter, darken(@grayLighter, 5%));
+	}
+
+	&.progress-striped .bar {
+		background-color: @grayLighter;
+		#gradient > .striped(@grayLighter);
+	}
+}
+
+.thumbnail,
+.img-polaroid {
+	background-color: @grayDark;
+	border: none;
+}
+
+.modal {
+	background-color: @grayLight;
+
+	&-header {
+		border-bottom: none;
+	}
+
+	&-footer {
+		background-color: @grayDark;
+		border-top: none;
+		.box-shadow(none);
+	}
+}
+
+// MEDIA QUERIES
+// -----------------------------------------------------

shamrock/variables.less

+// Swatch 2.3.0
+// Variables
+// --------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+@black:                 #000;
+@grayDarker:            #284815;
+@grayDark:              #4B792E;
+@gray:                  #538935;
+@grayLight:             #76A547;
+@grayLighter:           #AECD5A;
+@white:                 #fff;
+
+
+// Accent colors
+// -------------------------
+@blue:                  #049cdb;
+@blueDark:              #0064cd;
+@green:                 #3A6624;
+@red:                   #9d261d;
+@yellow:                #F8E33C;
+@orange:                #f89406;
+@pink:                  #c3325f;
+@purple:                #7a43b6;
+
+
+// Scaffolding
+// -------------------------
+@bodyBackground:        @gray;
+@textColor:             @white;
+
+
+// Links
+// -------------------------
+@linkColor:             @yellow;
+@linkColorHover:        darken(@linkColor, 10%);
+
+
+// Typography
+// -------------------------
+@sansFontFamily:        "Marcellus", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
+
+@baseFontSize:          15px;
+@baseFontFamily:        @sansFontFamily;
+@baseLineHeight:        21px;
+@altFontFamily:         @serifFontFamily;
+
+@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
+@headingsFontWeight:    bold;    // instead of browser default, bold
+@headingsColor:         inherit; // empty to use BS default, @textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
+@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
+@fontSizeMini:          @baseFontSize * 0.75; // ~11px
+
+@paddingLarge:          11px 19px; // 44px
+@paddingSmall:          2px 10px;  // 26px
+@paddingMini:           1px 6px;   // 24px
+
+@baseBorderRadius:      4px;
+@borderRadiusLarge:     6px;
+@borderRadiusSmall:     3px;
+
+
+// Tables
+// -------------------------
+@tableBackground:                   transparent; // overall background-color
+@tableBackgroundAccent:             rgba(0, 0, 0, 0.1); // for striping
+@tableBackgroundHover:              @grayLight; // for hover
+@tableBorder:                       @grayDark; // table and cell border
+
+// Buttons
+// -------------------------
+@btnBackground:                     @green;
+@btnBackgroundHighlight:            darken(@btnBackground, 10%);
+@btnBorder:                         @gray;
+
+@btnPrimaryBackground:              @grayLighter;
+@btnPrimaryBackgroundHighlight:     darken(@btnPrimaryBackground, 10%);
+
+@btnInfoBackground:                 @grayLight;
+@btnInfoBackgroundHighlight:        darken(@btnInfoBackground, 10%);
+
+@btnSuccessBackground:              @gray;
+@btnSuccessBackgroundHighlight:     darken(@btnSuccessBackground, 10%);
+
+@btnWarningBackground:              @grayDark;
+@btnWarningBackgroundHighlight:     darken(@btnWarningBackground, 10%);
+
+@btnDangerBackground:               @grayDarker;
+@btnDangerBackgroundHighlight:      darken(@btnDangerBackground, 10%);
+
+@btnInverseBackground:              darken(@linkColor, 5%);
+@btnInverseBackgroundHighlight:     darken(@btnInverseBackground, 10%);
+
+
+// Forms
+// -------------------------
+@inputBackground:               @white;
+@inputBorder:                   #ccc;
+@inputBorderRadius:             @baseBorderRadius;
+@inputDisabledBackground:       @grayLighter;
+@formActionsBackground:         #f5f5f5;
+@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+@dropdownBackground:            @gray;
+@dropdownBorder:                rgba(0,0,0,.2);
+@dropdownDividerTop:            #e5e5e5;
+@dropdownDividerBottom:         @white;
+
+@dropdownLinkColor:             @textColor;
+@dropdownLinkColorHover:        @linkColorHover;
+@dropdownLinkColorActive:       @dropdownLinkColorHover;
+
+@dropdownLinkBackgroundActive:  @grayDark;
+@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;
+
+
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+@zindexDropdown:          1000;
+@zindexPopover:           1010;
+@zindexTooltip:           1030;
+@zindexFixedNavbar:       1030;
+@zindexModalBackdrop:     1040;
+@zindexModal:             1050;
+
+