Commit 933a7fd9 authored by Thomas Park's avatar Thomas Park
Browse files

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

parent cb9827df
......@@ -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>
......
This diff is collapsed.
This diff is collapsed.
// 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
// -----------------------------------------------------
This diff is collapsed.
// 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;