pondasee 1.0.rc.2

data/stylesheets/pondasee/forms.scss

@@ -0,0 +1,345 @@
+/* 	BASE FORM STYLES
+	----------------- */
+
+label {
+	font-weight: bold; 
+	font-size: 12px;
+}
+
+fieldset {
+	border: 1px solid $grayLight;
+	font-size: 12px;
+	line-height: 1.3em;
+	margin: 0 0 1.5em;
+	padding: 0 1.4em 1.4em 1.4em;
+}
+
+legend {
+	background: $whiteDark;
+	border: 1px solid $grayLight;
+	@include border-radius;
+	font-weight: bold;
+	display: block;
+	left: 0;
+	margin: 0;
+	padding: rhythm(.2) rhythm(.8);
+	position: relative;
+	@include text-shadow( 1px 1px 0 rgba($white, .7) );
+	top: 0;
+}
+
+fieldset {
+	padding-top: 1.4em; 
+}
+
+legend {
+	margin-top: 0;
+	margin-bottom: 0; 
+}
+
+/* 	INPUT WIDTH
+	----------------- */
+
+.input-tiny {
+	width: 50px; 
+}
+
+.input-small {
+	width: 100px; 
+}
+
+.input-medium {
+	width: 150px; 
+}
+
+.input-large {
+	width: 200px; 
+}
+
+.input-xlarge {
+	width: 250px; 
+}
+
+.input-xxlarge {
+	width: 300px; 
+}
+
+.input-xxxlarge {
+	width: 350px; 
+}
+
+.input-full {
+	width: 100%; 
+}
+
+// Added via JS to <textarea> and class="input-full".
+// Applies only to IE7. Other browsers don't need it.
+
+.input_full_wrap {
+	display: block;
+	padding-right: 8px; 
+}
+
+/* 	UI Consistency
+	----------------- */
+
+input[type="search"]::-webkit-search-decoration {
+	display: none; 
+}
+
+button,
+select {
+  // Suppress red glow that Firefox
+  // adds to form fields by default.
+	&:invalid {
+		@include box-shadow(none); 
+	}
+}
+
+// For Firefox
+input,
+textarea {
+	// Add blue glow.
+	@include border-radius(3px);
+	@include single-transition(all, .2s, linear, 0s);
+  // Suppress red glow that Firefox
+  // adds to form fields by default.
+	&:invalid {
+		@include box-shadow(none); }
+	
+}
+
+input[type="file"],
+input[type="radio"],
+input[type="checkbox"],
+select,
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+	&:focus {
+		@include tab-focus();
+		@include box-shadow(none); // override for file inputs
+	}
+}
+
+input[type="file"],
+input[type="radio"],
+input[type="checkbox"] {
+	&:focus,
+	&:active {
+		@include box-shadow(none); 
+	} 
+}
+
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+	-webkit-appearance: none;
+	@include border-radius(3px);
+	@include background-clip(padding-box);
+	background: darken($white, 5%) image-url('button.png') repeat-x;
+	@include background-image(linear-gradient($white, darken($white, 5%)));
+	border: 1px solid darken($white, 10%);
+	cursor: pointer;
+	color: #333333;
+	// Helvetica Neue present, because it works better
+	// for line-height on buttons than Arial, on OS X.
+	font: bold 12px / 1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
+	outline: 0;
+	overflow: visible;
+	margin: 0;
+	padding: 10px 20px;
+	// IE7
+	*padding-top: 2px;
+	*padding-bottom: 0;
+	// Kill phantom spacing and dotted
+	// border that appears in Firefox.
+	text-shadow: white 0 1px 1px;
+	@include transition(none);
+	vertical-align: top;
+	width: auto;
+	&:hover {
+		background: $white;
+		@include background-image(linear-gradient(darken($white, 5%), $white));
+	}
+	&:active {
+		@include single-box-shadow( rgba($black, .15), 0, 2px, 3px, 0, true );
+		outline: 0;
+	}
+		
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0; 
+	} 
+}
+
+button {
+	// IE7
+	*padding-top: 1px;
+	*padding-bottom: 1px; 
+}
+
+textarea,
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+	@include box-sizing(border-box);
+	@include background-clip(padding-box);
+	@include border-radius(3px);
+	@include single-box-shadow( rgba($black, 0.075), 0, 1px, 1px, 0, true );
+	-webkit-appearance: none;
+	background-color: $white;
+	border: 1px solid;
+	border-color: $gray;
+	color: $black;
+	outline: 0;
+	margin: 0;
+	padding: 3px 4px;
+	text-align: left;
+	font-size: 13px;
+	// Leaving out Helvetica Neue, to not throw off size="..."
+	// on inputs. Arial is more reliable, on Windows and OS X.
+	font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+	height: 2em;
+	vertical-align: top;
+	// IE7
+	*padding-top: 2px;
+	*padding-bottom: 1px;
+	*height: auto;
+	&[disabled] {
+		background-color: $grayLighter; 
+	}
+	&:focus {
+		border-color: rgba(82,168,236,.8);
+		outline: 0;
+		outline: thin dotted \9; /* IE6-9 */
+		@include box-shadow(
+			inset 0 1px 1px rgba($black, .075), 
+			0 0 8px rgba(82,168,236,.6)
+		);
+	}
+}
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled] {
+	@include box-shadow(none);
+	-moz-user-select: -moz-none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	user-select: none;
+	color: #888888;
+	cursor: default; 
+}
+
+// Separate rule for Firefox.
+// Separate rule for IE, too.
+// Cannot stack with WebKit's.
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+	color: #888888; 
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+	color: #888888; 
+}
+
+input.placeholder_text,
+textarea.placeholder_text {
+	color: #888888; 
+}
+
+textarea,
+select[size],
+select[multiple] {
+	height: auto; 
+}
+
+// Set height back to normal,
+// for Opera, WebKit, and IE.
+select[size="0"],
+select[size="1"] {
+	height: 1.8em;
+	// IE7
+	*height: auto; 
+}
+
+// Tweaks for Safari + Chrome.
+@media (-webkit-min-device-pixel-ratio: 0) {
+	select[size],
+	select[multiple],
+	select[multiple][size] {
+		background-image: none;
+		padding-right: 3px; 
+	}
+	
+	select,
+	select[size="0"],
+	select[size="1"] {
+		background-image: image-url("select_arrow.gif");
+		background-repeat: no-repeat;
+		background-position: right center;
+		padding-right: 20px; 
+	}
+	
+	::-webkit-validation-bubble-message {
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, $black));
+		border: 1px solid;
+		border-color: #747474 #5e5e5e #4f4f4f;
+		color: $white;
+		font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
+		overflow: hidden;
+		padding: 15px 15px 17px;
+		@include text-shadow($black 0 0 1px);
+		height: 16px; 
+	}
+	
+	::-webkit-validation-bubble-arrow,
+	::-webkit-validation-bubble-top-outer-arrow,
+	::-webkit-validation-bubble-top-inner-arrow {
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		background: #666666;
+		border: 0; 
+	} 
+}
+
+textarea {
+	min-height: 40px;
+	overflow: auto;
+	resize: vertical;
+	width: 100%; 
+}
+
+optgroup {
+	color: $black;
+	font-style: normal;
+	font-weight: normal;
+	// Font family repeated, for Firefox.
+	font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+	// Kill phantom spacing and dotted
+	// border that appears in Firefox.
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0; 
+	} 
+}

data/stylesheets/pondasee/grid.scss

@@ -0,0 +1,37 @@
+.container {
+	@include container;
+}
+
+.row {
+	@extend .clearfix;
+	[class*="column"] {
+		@include columnBase;
+	}
+}
+
+// Generate classes for the grid
+@for $n from 1 through $totalColumns {
+	.grid-#{$n} {
+		@include column($n);
+	}
+}
+
+// Prefix classes
+//
+// @for $n from 1 to $totalColumns {
+//	.row {
+//		.prefix#{$n} {
+//			@include prepend($n);
+//		}
+//	}
+//}
+
+// Suffix classes
+//
+// @for $n from 1 to $totalColumns {
+//	.row {
+//		.suffix#{$n} {
+//			@include append($n);
+//		}
+//	}
+// }

data/stylesheets/pondasee/images.scss

@@ -0,0 +1,168 @@
+/* 	BASE IMAGES STYLES
+	include w/ WordPress classes
+	----------------- */
+img[class*="align"],
+img[class*="wp-image-"],
+img[class*="attachment-"] {
+	height: auto;
+}
+
+img.size-full,
+img.size-large {
+	max-width: 97.5%;
+	height: auto;
+}
+
+img.wp-smiley {
+	border: none;
+	margin-bottom: 0;
+	margin-top: 0;
+	padding: 0;
+}
+
+img.alignleft,
+img.alignright,
+img.aligncenter {
+	margin-top: 10px;
+}
+
+/* 	CAPTION
+	----------------- */
+p img,
+.wp-caption,
+.caption {
+	margin-top: 8px;
+}
+
+.wp-caption {
+	background: $whiteDark;
+	max-width: 96%;
+	padding: 15px 10px 10px;
+	@include transition(all .15s ease-in-out);
+	img {
+		display: block;
+		margin: 0 auto;
+		max-width: 98%; 
+	}
+	&:hover {
+		background: $grayLighter;
+	}
+}
+
+.wp-caption-text {
+	color: $fontColor;
+	font-size: 12px;
+	margin: 0;
+	padding: 15px 0 5px 40px;
+	position: relative;
+	
+	&:before {
+		content: '\2014';
+		font-size: 14px;
+		font-style: normal;
+		font-weight: bold;
+		margin-right: 5px;
+		position: absolute;
+		left: 10px;
+		top: 17px; 
+	} 
+}
+
+.caption {
+	@extend .wp-caption;
+}
+
+.caption-text {
+	@extend .wp-caption-text;
+}
+
+/* 	GALLERY
+	----------------- */
+.gallery {
+	margin: auto;
+	overflow: hidden;
+	width: 100%;
+	.gallery-item {
+		@include float(left);
+		margin-bottom: 10px;
+		text-align: center; 
+	}
+	.gallery-caption {
+		background: #f7f7f7;
+		border: 1px solid #e6e6e6;
+		clear: both;
+		color: #888;
+		display: block;
+		font-size: 12px;
+		margin: 10px 0;
+		padding: 5px 3px;
+		text-align: center;
+		width: 100%; 
+	}
+	dl {
+		margin: 0; 
+	}
+	img {
+		border: 1px solid #e0e0e0; 
+	}
+	a:hover img {
+		border-color: $gray; 
+	}
+	br {
+		clear: both; 
+	}
+	br+br {
+		display: none;
+	} 
+}
+
+.gallery-columns-1 .gallery-item {
+	width: 100%; 
+}
+
+.gallery-columns-2 .gallery-item {
+	width: 50%; 
+}
+
+.gallery-columns-3 .gallery-item {
+	width: 33.333%; 
+}
+
+.gallery-columns-4 .gallery-item {
+	margin-right: 2%; 
+	width: 23%;
+}
+
+.gallery-columns-5 .gallery-item {
+	margin-right: 2%; 
+	width: 18%;
+}
+
+.gallery-columns-6 .gallery-item {
+	margin-right: 2%; 
+	width: 14.666%;
+}
+
+.gallery-columns-7 .gallery-item {
+	margin-right: 2%; 
+	width: 12.285%;
+}
+
+.gallery-columns-8 .gallery-item {
+	margin-right: 2%; 
+	width: 10.5%;
+}
+
+.gallery-columns-9 .gallery-item {
+	margin-right: 2%; 
+	width: 9.111%;
+}
+
+/* 	ATTACHMENT
+	----------------- */
+embed,
+iframe,
+object {
+	max-width: 100%;
+	width: 100%; 
+}

data/stylesheets/pondasee/media-queries.scss

@@ -0,0 +1,56 @@
+/* iPad & Tablets*/
+@media screen and (min-width: 768px) and (max-width: 959px) {}
+
+/* Tablets Portrait & Big Smartphone Landscape */
+@media screen and (min-width: 600px) and (max-width: 767px) {}
+
+/* Smartphone Landscape */
+@media screen and (min-width: 480px) and (max-width: 599px) {}
+
+/* Smartphone */
+@media screen and (min-width: 320px) and (max-width: 479px) {}
+
+/* Featured Phone (rarely used since featured phone often doesn't support CSS3) */
+@media screen and (max-width: 319px) {}
+
+
+
+// Be Prepared for SASS 3.2, embrace yourself! (or use it right now, if you already using SASS pre version)
+
+$query-big			: 959px;
+$query-bigMedium	: 767px;
+$query-medium		: 599px;
+$query-mediumSmall	: 479px;
+$query-small		: 319px;
+
+@mixin responsive($media) {
+	@if $media == ipad {
+		@media screen and (max-width:$query-big) { @content; }
+	}
+	@else if $media == tablet {
+		@media screen and (max-width:$bigMedium) { @content; }
+	}
+	@else if $media == smartphone {
+		@media screen and (max-width:$medium) { @content; }
+	}
+	@else if $media == phone {
+		@media screen and (max-width:$mediumSmall) { @content; }
+	}
+}
+
+//	How To Use It:
+//	.foo {
+//		float: left;
+//		width: 1000px;
+//	
+//		@include responsive(ipad) {
+//			float: none;
+//			width: 600px;
+//		}
+//		@include responsive(tablet) {
+//			width: 480px;
+//		}
+//		@include responsive(smartphone) {
+//			width: 280px;
+//		}
+//	}