Site Download Buttons, RWD Adjustments and Main project Sass and CSS

typeplate · Jun 12, 2013 · c60d596 · c60d596
1 parent edac78b
commit c60d596
Show file tree

Hide file tree

Showing 9 changed files with 593 additions and 566 deletions.
diff --git a/codekit-config.json b/codekit-config.json
diff --git a/css/main.css b/css/main.css
diff --git a/index.html b/index.html
@@ -48,7 +48,7 @@
 			<a href="//raw.github.com/typeplate/typeplate.github.com/master/typeplate/css/typeplate.css" class="dl-item btn">
 				<i class="icon-download"></i>CSS
 				<hr>
-				<small>v1.1.0 | 7kb</small>
+				<small>v1.1.0 | 11kb</small>
 			</a>
 
 			<a href="//raw.github.com/typeplate/typeplate.github.com/master/typeplate/scss/_typeplate.scss" class="dl-item btn">
@@ -60,7 +60,7 @@
 			<a href="//github.com/TypePlate/typeplate-bower" class="dl-item btn">
 				<i class="icon-download"></i>Bower Pkg.
 				<hr>
-				<small>v1.1.0 | 7kb</small>
+				<small>v1.1.0</small>
 			</a>
 		</div>
 	</nav>
@@ -795,6 +795,17 @@ <h1 class="gamma section-title"><a class="perma-anchor" href="#block-quotes">§<
 $cite-text-align: right !default;
 $cite-font-size: inherit !default;
 
+// Use our pre-defined markup and add a class
+// to your custom blockquote element.
+// For example:
+//
+// .blockquote { @include blockquote("-"); }
+//
+// "-" is your citation flourish. For example:
+//
+// I always say important things because I'm so smart
+//                                      - author name
+
 // Citation Mixin for Custom Styling
 @mixin cite-style($display, $text-align, $font-size) {
 	display: $display;
@@ -815,15 +826,9 @@ <h1 class="gamma section-title"><a class="perma-anchor" href="#block-quotes">§<
 	+ figcaption {
 		@extend %cite;
 		&:before {
-			content: "#{$citation-flourish}";
+			content: $citation-flourish;
 		}
 	}
-}
-
-// Use the blockquote element as a selector or
-// use a custom class on your blockquote element.
-blockquote {
-	@include blockquote("—");
 }</code></pre>
 			</figure>
 			<a href="#table-of-contents" class="anchorLink btn btn-backtotop">↑ back to top</a>

diff --git a/scss/_prism.scss b/scss/_prism.scss
@@ -116,7 +116,7 @@ pre[class*="language-"] {
 
 .language-scss {
 	.token.variable {
-		color: #B10000;
+		color: #A78F8F;
 	}
 	.token.statement {
 		color: #FF1000;

diff --git a/scss/_site.scss b/scss/_site.scss
@@ -156,7 +156,7 @@ hr {
 	}
 
 	@include breakpoint(baby-bear) {
-		width: 10em;
+		margin: #{$line-height/2}em auto;
 	}
 }
 
@@ -194,7 +194,7 @@ hr {
 	//@extend %rhythm;
 	display: inline-block;
 	@include breakpoint(baby-bear) {
-		padding-top: 0.825em;
+		padding: #{$line-height * 2}em 0 0;
 		display: block;
 	}
 	@media screen and (max-width: 44.9375em) {
@@ -274,7 +274,6 @@ hr {
 		font-size: 1em;
 		padding: $line-height * 0.5rem;
 		width: 100%;
-		//margin-right: -2%;
 	}
 }
 
@@ -289,10 +288,17 @@ hr {
 
 .dl-item.btn {
 	width: 32%;
+	@include breakpoint(mama-bear) {
+		display: block;
+		width: 100%;
+	}
 }
 
 [href*="_typeplate.scss"] {
 	margin: 0 1%;
+	@include breakpoint(mama-bear) {
+		margin: #{$line-height}em auto;
+	}
 }
 
 
@@ -304,10 +310,12 @@ hr {
 	top: 1.65em;
 	right: 1.65em;
 	@include breakpoint(baby-bear) {
-		position: static;
+		top: 13.25em;
+		left: 0;
+		width: 100%;
+		text-align: center;
 	}
 	@include breakpoint(mama-bear) {
-		//position: static;
 		margin-top: 0.825em;
 		margin-bottom: 0.825em;
 	}
@@ -686,7 +694,7 @@ h1, h2, h3, h4, h5, h6 {
 		@extend .gamma;
 		background: #B3AEAE image-url("subtle_grunge.png") top left repeat;
 		color: #dcdcdc;
-		width: 8%;
+		width: modular-scale($font-base, 14, em);
 		text-align: center;
 		border-radius: 80%;
 	}

diff --git a/typeplate/css/typeplate.css b/typeplate/css/typeplate.css
@@ -10,9 +10,9 @@
 |                                                                     |
 | URL: http://typeplate.com                                           |
 | VERSION: 1.1.0                                                      |
-| Github: https://github.com/typePlate/typeplate.github.com           |
+| Github: https://github.com/typeplate/typeplate.github.io            |
 | AUTHORS: Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain) |
-| LICENSE: Creative Commmons                                          |
+| LICENSE: Creative Commmons Attribution 3.0                          |
 | http://creativecommons.org/licenses/by/3.0                          |
 |                                                                     |
 +---------------------------------------------------------------------+
@@ -26,15 +26,15 @@
  */
 
 @font-face {
-  font-family: "Ampersand";
-  src: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
-  unicode-range: U+0026;
+	font-family: "Ampersand";
+	src: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
+	unicode-range: U+0026;
 }
 
 @font-face {
-  font-family: "Ampersand";
-  src: local("Georgia");
-  unicode-range: U+270C;
+	font-family: "Ampersand";
+	src: local("Georgia");
+	unicode-range: U+270C;
 }
 
 
@@ -49,7 +49,7 @@
 
  */
 .ampersand {
-  font-family: Ampersand, Verdana, sans-serif;
+	font-family: Ampersand, Verdana, sans-serif;
 }
 
 
@@ -456,7 +456,7 @@ abbr:hover {
  * Blockquote Markup
  *
 	<figure>
-		<blockquote cite="">
+		<blockquote class="blockquote" cite="">
 			<p></p>
 		</blockquote>
 		<figcaption>
@@ -469,12 +469,21 @@ abbr:hover {
  * Extend this object into your markup.
  *
  */
-.cite {
+
+.blockquote p:last-of-type {
+	margin-bottom: -0.825em;
+}
+
+.blockquote + figcaption {
 	display: block;
-	font-size: 0.875em;
+	font-size: inherit;
 	text-align: right;
 }
 
+.blockquote + figcaption:before {
+	content: "-"; /* "-" is your citation flourish */
+}
+
 
 /**
  *

diff --git a/typeplate/docs/installation.md b/typeplate/docs/installation.md
@@ -4,22 +4,19 @@
 
 - Based on use cases for most developers' workflow, we recommend using Typeplate just after your reset stylesheet (i.e. [normalize](http://necolas.github.com/normalize.css)) and your compass ``@import`` in order to operate as we've intended, but as you'll see from our <a href="http://typeplate.com/demo">demo</a> it isn't necessary.
 
-**Example using Sass:**
+- Regarding browsers <= IE8 : We don't always provide fallbacks for these legacy browsers and leave this up to you based on your needs. We feel IE8 will rapidly decline due to Microsoft upgrading users to install at least >= IE9 along with discontinuing updates for XP and below customers.
 
-```scss
-@import "compass";
-@import "[your_project_path]/reset";
-@import "[your_project_path]/typeplate";
-
-// Custom Author Styles
-// ====================================
-```
 ### &sect; Installation via ``.scss @import``
 
 Simply download our ``_typeplate.scss`` partial file and import from your project's primary ``.scss`` file like so:
 
 ```scss
+@import "compass"; // Not required. For example purposes only.
+@import "[your_project_path]/reset"; // Not required. For example purposes only.
 @import "[your_project_path]/typeplate";
+
+// Custom Author Styles
+// ====================================
 ```
 
 Authors can also take this one step further and include a custom variables file from outside the _typeplate.scss partial file. This allows authors to override the default variables set within ``_typeplate.scss``.

diff --git a/typeplate/scss/_typeplate.scss b/typeplate/scss/_typeplate.scss
@@ -10,9 +10,9 @@
 |                                                                     |
 | URL: http://typeplate.com                                           |
 | VERSION: 1.1.0                                                      |
-| Github: https://github.com/typePlate/typeplate.github.com           |
+| Github: https://github.com/typeplate/typeplate.github.io            |
 | AUTHORS: Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain) |
-| LICENSE: Creative Commmons                                          |
+| LICENSE: Creative Commmons Attribution 3.0                          |
 | http://creativecommons.org/licenses/by/3.0                          |
 |                                                                     |
 +---------------------------------------------------------------------+
@@ -325,9 +325,16 @@ $small-caps-weight: 600 !default;
 
 // $Blockquote-Mixin
 // -------------------------------------//
-
-// Remove the quotes within the p tag
-// use pseudos to create curly quotes around blockquote element
+// Use our pre-defined markup and add a class
+// to your custom blockquote element.
+// For example:
+//
+// .blockquote { @include blockquote("-"); }
+//
+// "-" is your citation flourish. For example:
+//
+// I always say important things because I'm so smart
+//                                      - author name
 
 // Citation Mixin for Custom Styling
 @mixin cite-style($display, $text-align, $font-size) {
@@ -349,11 +356,12 @@ $small-caps-weight: 600 !default;
 	+ figcaption {
 		@extend %cite;
 		&:before {
-			content: "#{$citation-flourish}";
+			content: $citation-flourish;
 		}
 	}
 }
 
+
 // $Pull Quotes-Mixin
 // -------------------------------------//
 

diff --git a/typeplate/scss/_vars-typeplate.scss b/typeplate/scss/_vars-typeplate.scss
@@ -77,6 +77,17 @@ $type-scale-unit-value: rem;
 $indent-val: 1.5em;
 
 
+// $StatsTab-Variables
+// -------------------------------------//
+
+$stats-font-size: 1.5em;
+$stats-list-margin: 0 0.625em 0 0;
+$stats-list-padding: 0 0.625em 0 0;
+$stats-item-font-size: 0.875em;
+$stats-item-margin: 0.125em 0 0 0;
+$stats-border-style: 0.125em solid #ccc;
+
+
 // $Pull Quotes-Variables
 // -------------------------------------//
 
@@ -98,14 +109,3 @@ $cite-font-size: inherit;
 
 $small-caps-color: gray;
 $small-caps-weight: 600;
-
-
-// $StatsTab-Variables
-// -------------------------------------//
-
-$stats-font-size: 1.5em;
-$stats-list-margin: 0 0.625em 0 0;
-$stats-list-padding: 0 0.625em 0 0;
-$stats-item-font-size: 0.875em;
-$stats-item-margin: 0.125em 0 0 0;
-$stats-border-style: 0.125em solid #ccc;