Commits

Kaique Silva committed 78b1bf4

structure complete, behavior in progress

Comments (0)

Files changed (4)

 </head>
 <body>
 <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
-    <div class="container">
+    <div class="application container">
     	<header>
-    		<h1 class="stamp title light">Simple press JS</h1>
+    		<h1 class="stamp title light">Simple Press JS</h1>
     		<hr />
     	</header>
 		
     	<hr />
 
 		<footer>
-		<p class="stamp center light">CC by kaique.developer@gmail.com</p>
+		<p class="stamp quote center light">CC by kaique.developer@gmail.com</p>
 		</footer>
     </div> <!-- /container -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 	SimplePress.start({
 		holder: {
 			width: '100%',
-			height: '600px',
+			height: '630px',
 		},
 		slide: { 
 			width: '700px',
-			height: '500px',
+			height: '600px',
+			spaceBetween: 200,
 		}
 	});
 });

js/simplepress.js

 
 	// Internals
 	_.prototype = {
-		win: win,
 		jQuery: $,
+		win: this.jQuery( win ),
 		press: this.jQuery('.press'),
 		mask: this.jQuery('.press .mask'),
 		slide: this.jQuery('.press .mask .slide'),
 			settings = settings || {},
 			stamp = self.stamp,
 			press = self.press,
+			mask = self.mask,
 			slide = self.slide;
 
 		if ( settings ) {
 				 	'height',
 				]
 			);
+			options.pressDimensions['position'] = 'relative';
+			options.pressDimensions['overflow'] = 'hidden';
+			// Space betweem slides
+			options.slideSpace = (function ( defaultValue ) {
+				var output = defaultValue;
+				var option = core.object.selectProperty( settings.slide, [
+					'spaceBetween',
+				]);
+
+				if ( option ) {
+					output = option[ 'spaceBetween' ];
+				}
+
+				return output;
+			} ( 10 ));
+			// Mask dimensions based on slide
+			options.maskDimensions = core.object.selectProperty(
+				settings.slide, [
+					'width',
+				]
+			);
+			options.maskDimensions['minWidth'] = ( options.maskDimensions.width.replace('px', '') + options.slideSpace ) * slide.length;
+			options.maskDimensions['height'] = '100%';
+			options.maskDimensions['position'] = 'relative';
+			options.maskDimensions['overflow'] = 'hidden';
 			// Dimensions of slide
 			options.slideDimensions = core.object.selectProperty(
 				settings.slide, [
 					'height'
 				]
 			);
+			options.slideDimensions['float'] = 'left';
+			options.slideDimensions['margin'] = '0 ' + options.slideSpace + 'px';
 
-			if ( options.pressDimensions && options.slideDimensions ) {
+			if ( options.pressDimensions && options.maskDimensions && options.slideDimensions ) {
 				// Add style to press
 				press.css( options.pressDimensions );
+				// Add style to mask based on slide
+				mask.css( options.maskDimensions );
 				// Add style to slide
 				slide.css( options.slideDimensions );
 
 @import "bootstrap/bootstrap.less";
 
-body {
-  padding-top: 60px;
-  padding-bottom: 40px;
+.bg {
+	background: #303030;
+	background: -moz-linear-gradient(top,  #303030 0%, #141414 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#141414));
+	background: -webkit-linear-gradient(top,  #303030 0%,#141414 100%);
+	background: -o-linear-gradient(top,  #303030 0%,#141414 100%);
+	background: -ms-linear-gradient(top,  #303030 0%,#141414 100%);
+	background: linear-gradient(top,  #303030 0%,#141414 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#141414',GradientType=0 );
+}
+
+.border( @border ) {
+	-moz-border-radius: @border;
+	-webkit-border-radius: @border;
+	-webkit-border-radius: @border;
+	border-radius: @border;
+}
+
+html, body {
+	.bg();
+	
+	margin: 0;
+	padding: 25px 0;
+	width: 100%;
+	height: 100%;
+	color: #fff;
 }
 
 @import "bootstrap/responsive.less";
 /* ===== Primary Styles =====================================================
    Author: kaique.developer@gmail.com
    ========================================================================== */
-.title {
-	color: #753D3D;
+hr {
+	border: none;
+	border-top: 1px solid #AFAFAF;
+}
+
+p {
+	font-weight: 300;
+	line-height: 130%;
+	letter-spacing: 0.5px;
+}
+
+.title, .quote {
+	color: #9C2D38;
+}
+
+.quote {
+	font-size: 14px;
 }
 
 .center {
 	letter-spacing: 2px;
 }
 
-.press {
-	position: relative;
-	overflow: hidden;
-}
-
-.press .mask {
-	border: 1px solid red;
-	height:;
-}
+.slide {
+	padding: 15px;
+	background: #ccc;
 
-.press .slide {
-	width: 700px;
-	height: 400px;
-	display: block;
-	float: left;
-	border: 1px solid red;
+	.border( 20px );
 }