style-tiles 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA512: 
-  data.tar.gz: e1e5d38a8f6ed2e16940e6efca801bafa7ab650cee8becaf28662dc8722b730930336d9493c5e9fe02a63f1b87438752097a32bdde218324b019aa58f8bae33a
-  metadata.gz: c040eefa0ce7f3b1693287f2b31dfec6b6fcbe6e8bc00d88c98098a62b2734e375ccfc4424d835b0e42f32201c5a623d53cf0349ebaff2e593fa1e00c326a49f
 SHA1: 
-  data.tar.gz: 13166150a00c914331d1f9443b5bca086a580446
-  metadata.gz: 0ae10a9bc343007eb59f886d2714c1d4fed67e13
+  data.tar.gz: 913ea0bd1a363d785346f8260f8dab8ed3f00fab
+  metadata.gz: 826a93059f8df6ed30c74e8d6c366f463a5722af
+SHA512: 
+  data.tar.gz: 4458f06e82c44e7053f4b4efc2b5c63c3980597f4ec25c7da19b61f0dc8809c1839137a7277da02ac663ae515ee72cccd5fc90602e800d4fe70fb9b1fd9f576c
+  metadata.gz: e992f0a474a2d7adc204cb2b7d5a27b1a93696e7a41b3c98ae3769fe9424049abc2fdc212b520dedd20450e834f232e21bce3cf6f1f5e55c1401c3cc96f03c4f

data/lib/style-tiles.rb

@@ -17,8 +17,8 @@ Compass::Frameworks.register('style-tiles', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Style_Tiles
-  VERSION = "0.1.2"
-  DATE = "2013-06-24"
+  VERSION = "0.1.3"
+  DATE = "2013-07-02"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/style-tiles/core/_mixins.scss

@@ -26,12 +26,36 @@
   @if $leading { line-height: $leading; }
 }
 
-@mixin st-font-face($font-name, $font-woff, $font-ttf, $inline-fonts: false, $font-style:normal, $font-weight:normal, $eot:false) {
-  @if $inline-fonts and $font-name { @include font-face($font-name, inline-font-files($font-woff, woff, $font-ttf, truetype), $eot, $font-weight, $font-style); }
-  @else if $font-name { @include font-face($font-name, font-files($font-woff, woff, $font-ttf, truetype), $eot, $font-weight, $font-style); }
-  
+@mixin web-font-face($font-name, $font-file-name, $font-weight: normal, $font-style: normal, $inline-fonts: false) { 
+  @if $inline-fonts and $font-name {
+  @include font-face(
+    $font-name, 
+    inline-font-files(
+      "#{$font-file-name}.woff", woff, 
+      "#{$font-file-name}.ttf", truetype, 
+      "#{$font-file-name}.svg", svg
+    ), 
+    "#{$font-file-name}.eot",  
+    $font-weight, 
+    $font-style
+  );
+  }
+  @else if $font-name { 
+    @include font-face(
+      $font-name, 
+      font-files(
+        "#{$font-file-name}.woff", woff, 
+        "#{$font-file-name}.ttf", truetype,
+        "#{$font-file-name}.svg##{$font-name}", svg
+      ), 
+      "#{$font-file-name}.eot", 
+      $font-weight, 
+      $font-style
+    );
+  }
 }
-@mixin st-font-faced($font-name: false) {
+
+@mixin web-font-family($font-name: false) {
   @if $font-name { font-family: $font-name; }
 }
 
@@ -156,14 +180,14 @@
           @include st-text-shadow($heading-h1-text-shadow);
           @include bold-italic-uppercase($heading-h1-font-style);
           @if $heading-h1-font-size { font-size:$heading-h1-font-size; }
-          @include st-font-faced($heading-h1-font-name);
+          @include web-font-family($heading-h1-font-name);
           color: $heading-h1-font-color;
         }
         h2 {
           @include st-text-shadow($heading-h2-text-shadow);
           @include bold-italic-uppercase($heading-h2-font-style);
           @if $heading-h2-font-size { font-size:$heading-h2-font-size; }
-          @include st-font-faced($heading-h2-font-name);
+          @include web-font-family($heading-h2-font-name);
           color: $heading-h2-font-color; 
         }
         @if $heading-h1-font-name { @include content-before-after("font: "$heading-h1-font-name, false, true) };

data/stylesheets/style-tiles/core/_structure.scss

@@ -2,7 +2,7 @@
 * { 
   @include box-sizing(border-box);
 }
-@include st-font-face($font-name, $font-woff, $font-ttf, $inline-fonts, $font-weight, $font-style);
+@include web-font-face($font-name, $font-file-name, $font-weight, $font-style, $inline-fonts);
 
 body {
   @include background($body-background-color, $body-background-image, $inline-images, $body-background-gradient-1, $body-background-gradient-position-1, $body-background-gradient-2, $body-background-gradient-position-2);
@@ -70,14 +70,14 @@ section:nth-of-type(2) {
       @include st-text-shadow($heading-h1-text-shadow);
       @include bold-italic-uppercase($heading-h1-font-style);
       @if $heading-h1-font-size { font-size:$heading-h1-font-size; }
-      @include st-font-faced($heading-h1-font-name);
+      @include web-font-family($heading-h1-font-name);
       color: $heading-h1-font-color;
     }
     h2 {
       @include st-text-shadow($heading-h2-text-shadow);
       @include bold-italic-uppercase($heading-h2-font-style);
       @if $heading-h2-font-size { font-size:$heading-h2-font-size; }
-      @include st-font-faced($heading-h2-font-name);
+      @include web-font-family($heading-h2-font-name);
       color: $heading-h2-font-color; 
     }
     @if $heading-h1-font-name { @include content-before-after("font: "$heading-h1-font-name, false, true) };
@@ -117,6 +117,7 @@ aside {
   @include background-size($aside-background-size);
   @include border-radius($aside-border-radius);
   outline: $aside-outline;
+  outline-offset: $aside-outline-offset;
   border: $aside-border;
   @include st-box-shadow($aside-box-shadow);
   color: $aside-text-color;

data/stylesheets/style-tiles/core/_variables.scss

@@ -32,10 +32,7 @@ $body-font-size: calc-em(14px, $base-font-size) !default;
 
 // @font-face fonts
 $font-name: false !default;
-$font-ttf: false !default;
-$font-woff: false !default;
-$font-eot: false !default; // we don't need this as it's not production code
-$font-svg: false !default; // we don't need this either
+$font-file-name: false !default;
 $inline-fonts: true !default;
 $font-weight: normal !default;
 $font-style: normal !default;
@@ -124,6 +121,7 @@ $aside-box-shadow: none !default;
 $aside-border: $standard-spacing solid rgba(255,255,255,.35) !default;
 $aside-border-radius: false !default; // 3px
 $aside-outline: calc-em(1px, $base-font-size) solid rgba(200,200,200,.25) !default;
+$aside-outline-offset: 0 !default;
 $aside-text-color: #333 !default;
 
 // Figure (colors and textures boxes)

data/templates/project/fonts/DroidSerif/demo.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+	<title>Font Face Demo</title>
+	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
+	<style type="text/css" media="screen">
+		h1.fontface {font: 60px/68px 'DroidSerifRegular', Arial, sans-serif;letter-spacing: 0;}
+
+		p.style1 {font: 18px/27px 'DroidSerifRegular', Arial, sans-serif;}
+		p.style2 {font: 18px/27px 'DroidSerifItalic', Arial, sans-serif;}
+		p.style3 {font: 18px/27px 'DroidSerifBold', Arial, sans-serif;}
+		p.style4 {font: 18px/27px 'DroidSerifBoldItalic', Arial, sans-serif;}
+		
+		#container {
+			width: 800px;
+			margin-left: auto;
+			margin-right: auto;
+		}
+	</style>
+</head>
+
+<body>
+	<div id="container">
+		<h1 class="fontface">Font-face Demo for the Droid Serif Font</h1>
+	
+	 
+
+	<p class="style1">Droid Serif Regular - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+	 
+
+	<p class="style2">Droid Serif Italic - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+	 
+
+	<p class="style3">Droid Serif Bold - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+	 
+
+	<p class="style4">Droid Serif Bold Italic - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+		</div>
+</body>
+</html>

data/templates/project/fonts/DroidSerif/stylesheet.css

@@ -0,0 +1,52 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 26, 2013 08:50:27 AM America/New_York */
+
+
+
+@font-face {
+    font-family: 'DroidSerifRegular';
+    src: url('DroidSerif-Regular-webfont.eot');
+    src: url('DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('DroidSerif-Regular-webfont.woff') format('woff'),
+         url('DroidSerif-Regular-webfont.ttf') format('truetype'),
+         url('DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'DroidSerifItalic';
+    src: url('DroidSerif-Italic-webfont.eot');
+    src: url('DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('DroidSerif-Italic-webfont.woff') format('woff'),
+         url('DroidSerif-Italic-webfont.ttf') format('truetype'),
+         url('DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'DroidSerifBold';
+    src: url('DroidSerif-Bold-webfont.eot');
+    src: url('DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('DroidSerif-Bold-webfont.woff') format('woff'),
+         url('DroidSerif-Bold-webfont.ttf') format('truetype'),
+         url('DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'DroidSerifBoldItalic';
+    src: url('DroidSerif-BoldItalic-webfont.eot');
+    src: url('DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('DroidSerif-BoldItalic-webfont.woff') format('woff'),
+         url('DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
+         url('DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+

data/templates/project/manifest.rb

@@ -76,9 +76,9 @@ help %Q{
 # Compass Extension Welcome Message
 #  Users will see this when they create a new project using this template.
 welcome_message %Q{
-  Welcome to my Style Tiles. 
+  Welcome to Style Tiles. 
   Congratulations! You just have built the basic scaffolding for getting started.
   To get started 'cd' into your project and run 'compass compile'.
   Documentation is on Github: https://github.com/alienresident/style-tiles
-  Contact: mark@alienresident.net or use the Issue Queue on Github. 
+  Contact: mark@alienresident.net or use the Style Tiles issue queue on Github. 
 }

data/templates/project/sass/partials/variations/_v1.scss

@@ -15,8 +15,7 @@ $adjectives:  current, clean, sleek, technical ;
 $link-color: #FF5E00;
 
 $font-name: 'peraltaregular';
-$font-ttf: 'Peralta/peralta-regular-webfont.ttf';
-$font-woff: 'Peralta/peralta-regular-webfont.woff';
+$font-file-name: 'Peralta/peralta-regular-webfont';
 
 
 $body-background-color: #fff;
@@ -56,7 +55,7 @@ $main-text-shadow: 0 calc-em(1px, $base-font-size) 0 rgba(255,255,255,.35);
 $heading-h2-font-name: $font-name;
 
 $aside-margin: 0 0 ($standard-spacing * 2) 0;
-$aside-padding: $standard-spacing;
+$aside-padding: ($standard-spacing * 2);
 $aside-background-color: none;
 $aside-background-image: "textures/denim.jpg";
 $aside-background-gradient-position-1: 135deg;
@@ -67,8 +66,9 @@ $aside-background-size: false;
 $aside-background-repeat: repeat;
 $aside-box-shadow: calc-em(3px, $base-font-size) calc-em(6px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5), calc-em(-3px, $base-font-size) calc-em(-1px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5);
 $aside-border: calc-em(1px, $base-font-size) dashed rgba(255,160,20,.5);
-$aside-border-radius: calc-em(5px, $base-font-size);
-$aside-outline: calc-em(1px, $base-font-size) dashed rgba(0,20,2,.5);
+$aside-border-radius: calc-em(5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(12px, $base-font-size) calc-em(12px, $base-font-size);
+$aside-outline: $aside-border;
+$aside-outline-offset: -1em;
 $aside-text-color: #aaa;
 
 // Figure (colors and textures boxes)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: style-tiles
 version: !ruby/object:Gem::Version 
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors: 
 - Mark Reilly
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-06-24 00:00:00 Z
+date: 2013-07-02 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: sass
@@ -49,6 +49,7 @@ files:
 - stylesheets/style-tiles/core/_variables.scss
 - stylesheets/style-tiles.scss
 - templates/project/config.rb
+- templates/project/fonts/DroidSerif/demo.html
 - templates/project/fonts/DroidSerif/DroidSerif-Bold-webfont.eot
 - templates/project/fonts/DroidSerif/DroidSerif-Bold-webfont.svg
 - templates/project/fonts/DroidSerif/DroidSerif-Bold-webfont.ttf
@@ -66,6 +67,7 @@ files:
 - templates/project/fonts/DroidSerif/DroidSerif-Regular-webfont.ttf
 - templates/project/fonts/DroidSerif/DroidSerif-Regular-webfont.woff
 - templates/project/fonts/DroidSerif/Google Android License.txt
+- templates/project/fonts/DroidSerif/stylesheet.css
 - templates/project/fonts/Pacifico/Pacifico SIL OFL Font License 1.1.txt
 - templates/project/fonts/Pacifico/Pacifico-webfont.eot
 - templates/project/fonts/Pacifico/Pacifico-webfont.svg