├── LICENSE
├── README.md
├── Using Stackicons-Social.md
├── _source
    └── font source
    │   ├── Icon Font Template (1000 units per em).glyphs
    │   ├── Icon Font Template (2048 units per em).glyphs
    │   ├── Stackicons Social-Minimal-v2.glyphs
    │   ├── Stackicons-Branding-v2.glyphs
    │   └── Stackicons-Social-Regular-v2.glyphs
├── apple-touch-icon-114x114.png
├── apple-touch-icon-120x120.png
├── apple-touch-icon-152x152.png
├── apple-touch-icon-76x76.png
├── apple-touch-icon.png
├── config.rb
├── css
    ├── fontviewer.css
    ├── normalize.css
    ├── stackicons-branding.css
    ├── stackicons-branding.min.css
    ├── stackicons-min.css
    ├── stackicons-social-minimal.css
    ├── stackicons-social-minimal.min.css
    ├── stackicons-social.css
    ├── stackicons-social.min.css
    └── style.css
├── examples.html
├── favicon.ico
├── fonts
    └── Stackicons
    │   ├── Desktop Fonts
    │       ├── FONTLOG.txt
    │       ├── Stackicons-Branding.otf
    │       ├── Stackicons-Social-Minimal.otf
    │       └── Stackicons-Social.otf
    │   ├── Stackicons-Branding.eot
    │   ├── Stackicons-Branding.svg
    │   ├── Stackicons-Branding.ttf
    │   ├── Stackicons-Branding.woff
    │   ├── Stackicons-Social-Minimal.eot
    │   ├── Stackicons-Social-Minimal.svg
    │   ├── Stackicons-Social-Minimal.ttf
    │   ├── Stackicons-Social-Minimal.woff
    │   ├── Stackicons-Social.eot
    │   ├── Stackicons-Social.svg
    │   ├── Stackicons-Social.ttf
    │   └── Stackicons-Social.woff
├── icon.png
├── img
    ├── logo-stackicons_340x40.png
    ├── logo-stackicons_t_340x40.png
    └── logo-stackicons_t_850x100.png
├── index.html
├── js
    └── vendor
    │   ├── fontviewer-min.js
    │   ├── fontviewer.js
    │   └── jquery.js
├── og-image.png
├── scss
    ├── _colors-social-2014.scss
    ├── _construction-kit-stackicons-social.scss
    ├── _css-defaults-stackicons-social.scss
    ├── _fonts-stackicons-social.scss
    ├── _multi-color-css-stackicons-social.scss
    ├── _multi-color-kit-stackicons-social.scss
    ├── _multi-color-override-shapes-stackicons-social.scss
    ├── _override-button-shapes-stackicons-social.scss
    ├── _override-colors-stackicons-social.scss
    ├── _override-icon-only-stackicons-social.scss
    ├── _unicodes-stackicons-social.scss
    ├── stackicons-social-minimal.scss
    ├── stackicons-social-minimal
    │   ├── _css-defaults-stackicons-social-minimal.scss
    │   ├── _fonts-stackicons-social-minimal.scss
    │   ├── _multi-color-css-stackicons-social-minimal.scss
    │   ├── _multi-color-override-shapes-stackicons-social-minimal.scss
    │   ├── _override-button-shapes-stackicons-social-minimal.scss
    │   ├── _override-colors-stackicons-social-minimal.scss
    │   └── _override-icon-only-stackicons-social-minimal.scss
    └── stackicons-social.scss
├── stackicons-social-characters.html
└── stackicons-social_class_list.txt


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Parker Bennett
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Stackicons
2 | ==========
3 | 
4 | Icon font and Sass-based construction kit for Stackicons-Social, which supports multiple button shapes and a unique "multi-color" option in CSS for over 60 social brands. 
5 | 
6 | For more information visit <http://stackicons.com>
7 | 


--------------------------------------------------------------------------------
/Using Stackicons-Social.md:
--------------------------------------------------------------------------------
  1 | ![Doing More with Icon Fonts](http://stackicons.com/img/logo-stackicons_340x40.png)
  2 | 
  3 | [http://stackicons.com](http://stackicons.com)
  4 | [@stackicons](https://twitter.com/stackicons)
  5 | 
  6 | ## Using Stackicons-Social
  7 | 
  8 | Stackicons-Social comes with default CSS that you can simply @import into your main CSS style sheet:
  9 | 
 10 | `@import url("stackicons.css");`
 11 | 
 12 | Or link to in the header of your html file:
 13 | 
 14 | `<link rel="stylesheet" type="text/css" href="css/stackicons.css" />`
 15 | 
 16 | Make sure the relative path to the CSS file is correct, and also that the @font-face declaration at the beginning of the CSS file has the correct relative path to the fonts.
 17 | 
 18 | There's also an [examples.html](http://stackicons.com/examples.html) file that you can use as a reference.
 19 | 
 20 | A smaller version of the font, *Stackicons-Social-Minimal,* includes a subset of commonly-used icons. Change "stackicons.css" to "stackicons-minimal.css" if you don't need more than the following:
 21 | 
 22 | * App.net
 23 | * Codepen
 24 | * Dribbble
 25 | * Email
 26 | * Facebook
 27 | * Flickr
 28 | * Github
 29 | * Gmail
 30 | * Google+
 31 | * Instagram
 32 | * LinkedIn
 33 | * Pinboard
 34 | * Pinterest
 35 | * RSS
 36 | * Tumblr
 37 | * Twitter
 38 | * Vimeo
 39 | * YouTube
 40 | * Menu (navicon)
 41 | * Search
 42 | * Triangle-down
 43 | 
 44 | ### Markup
 45 | 
 46 | The default CSS outputs a horizontal row of icons without text (text in the markup is hidden, but available to screen readers). The icons use `display: inline-block` so it's easy to position them on the left, right, or center using `text-align`.
 47 | 
 48 | Stackicons' default CSS renders a slightly rounded button (r1) in a single color that reflects the brand. You can override the shape by adding a class to either the parent element or the icon itself:
 49 | 
 50 | * .st-shape-square or .st-shape-r0
 51 | * .st-shape-rounded1 or .st-shape-r1
 52 | * .st-shape-rounded2 or .st-shape-r2
 53 | * .st-shape-rounded3 or .st-shape-r3 *(iOS 7 style)*
 54 | * .st-shape-circle or .st-shape-r4
 55 | * .st-shape-icon or .st-shape-r5
 56 | 
 57 | For example, you might add `class="st-shape-circle"` to brands like App.net, CodePen, Gittip, or StumbleUpon, whose logos are circular. Android, Apple, and Windows are usually informational icons rather than buttons, so you'd add  `class="st-shape-icon"`.
 58 | 
 59 | #### Multi-color
 60 | Stackicons are designed with a unique "multi-color" option that uses absolute positioning to stack multiple colors on top of each other (sort of like two-color or screen-printing). You can invoke it by adding `class="st-multi-color"`.
 61 | 
 62 | Because the button shape is solid with the icon layered on top, .st-multi-color can give you more flexibility in using text-shadows.
 63 | 
 64 | Stackicons stack pseudo elements, which may create an issue with clearfix methods that rely on pseudo elements (if you decide to float the icons instead of using inline-block to position horizontally).
 65 | 
 66 | #### Other Markup Options
 67 | 
 68 | If you're not comfortable using Sass (see below), you can still easily change sizing and spacing by adjusting the CSS. For example, to change the size of the icons, specify a percentage `font-size` on the parent element. To change the spacing, adjust the margin on the ` (.parent-class) a` element.
 69 | 
 70 | There's also a built-in class, `.nav-list`, for creating a vertical list with icons to the left of text. Usually, you'd want these to be icon-only, e.g:  `class="nav-list st-icon-only st-multi-color"`.
 71 | 
 72 | 	CSS:
 73 | 	.nav-social {
 74 | 	  /* if they're on the right */
 75 | 	  text-align: right;
 76 | 	  /* adjust icons larger or smaller */
 77 | 	  font-size: 110%; }
 78 | 
 79 | 	.nav-social a {
 80 | 	  /* closer spacing */
 81 | 	  margin-right: -.125em }
 82 | 
 83 | 	HTML:
 84 | 	<nav class="nav-social st-multi-color">
 85 | 	  <ul>
 86 | 	    <li><a class="st-icon-twitter" href="#">Twitter</a></li>
 87 | 	    <li><a class="st-icon-facebook" href="#">Facebook</a></li>
 88 | 	  </ul>
 89 | 	</nav>
 90 | 
 91 | You can also look at the source in the [examples](http://stackicons.com/examples.html) file.
 92 | 
 93 | ### Customizing With Sass
 94 | 
 95 | There is a folder of .scss _partial files that Sass compiles to create the CSS for Stackicons-Social. If you have Sass installed and are comfortable using it to compile CSS, you can adjust a number of variables within these files to adjust the default output.
 96 | 
 97 | Start with the two "kit" files:  *_construction-kit-stackicons-social.scss* and *multi-color-kit-stackicons-social.scss*. Here you can change things like the default button shape, colors, :hover behavior, and more.
 98 | 
 99 | There are some pre-made "color-style" options: For example, the default output uses the brand color for each button and a lighter variant for the :hover state. You could choose to reverse that, having a pale version of the brand color by default with the brand color on :hover. You could also change the @mixin to make the variant color darker instead of lighter.
100 | 
101 | With single-color buttons there are four "color-style" options available:
102 | 
103 | **single-color**
104 | :	All icons are the same color.
105 | 
106 | **brand-color**
107 | :	Each icon reflects the brand color (defined by variable).
108 | 
109 | **brand-variant**
110 | :	Each icon reflects the brand color altered by a @mixin that scales the color lighter or darker, changes the saturation, and transparentizes based on variables you can tweak.
111 | 
112 | **embossed-only**
113 | :	All icons are a darkened background-color, with text-shadow embossing.
114 | 
115 | Then there are three choices to pair with for the :hover state:
116 | 
117 | **single-color-hover**
118 | :	All buttons or icons are the same color on :hover.
119 | 
120 | **brand-color**
121 | :	Each button or icon reflects the brand color on :hover.
122 | 
123 | **brand-color-hover**
124 | :	Each button or icon reflects the brand color altered by a @mixin that scales the color lighter or darker, changes the saturation, and transparentizes based on variables you can tweak.
125 | 
126 | There are additional variables related to text-shadows, transitions, and more. The comments within the Sass files provide more information. There's no limit to how you can choose to customize, of course. I just included some pre-made options for convenience.
127 | 
128 | The other Sass files contain variables for brand color, which you can tweak, and there are files that do the grunt work of generating CSS for each brand. Here's a brief description of each (it's a good idea to make a backup copy before customizing these files):
129 | 
130 | **fonts-stackicons-social**
131 | :	Path to stackicons-social font. (Make sure it's correct for your directories.)
132 | 
133 | **colors-social-2014**
134 | :	Color variables for social brands. (Tweak as desired.)
135 | 
136 | **unicodes-stackicons-social**
137 | :	Font unicode characters abstracted into variables. (Don't change this.)
138 | 
139 | **construction-kit-stackicons-social**
140 | :	This is where we generate default values for icon size, margin, padding, shape, color, hover-style, etc. (Play here.)
141 | 
142 | **css-defaults-stackicons-social**
143 | :	This does the CSS grunt work to create each .st-icon-($brand) class.\*
144 | 
145 | **override-button-shapes-stackicons-social**
146 | :	 Let's you override the button shape on single-color icons using classes: st-shape-square to st-shape-circle.\*
147 | 
148 | **override-icon-only-stackicons-social**
149 | :	 Allows .st-shape-icon to overrides the default button shape.\*
150 | 
151 | **override-colors-stackicons-social**
152 | :	"Color-style" classes for single-color icons for demo purposes. This generates lots of extra CSS, so it's commented out by default.\*
153 | 
154 | **multi-color-kit-stackicons-social.scss**
155 | :	Like "construction-kit" above, but for the .st-multi-color class: generates default shape, color-style, etc. (Play here.)
156 | 
157 | **multi-color-css-stackicons-social.scss**
158 | :	Like "css-defaults" above, this does the CSS grunt work to generate each multi-color .st-icon-($brand) class.\*
159 | 
160 | **multi-color-override-shapes-stackicons-social**
161 | :	This allows you to change icon shapes using classes on multi-color icons.\*
162 | 
163 | \* Because Sass doesn't allow us to use variables within variables, this uses a lot of @if statements to generate the .st-icon-($brand) classes. Ugly, but marginally maintainable. There are several @each statements, listing the brands to output. Ideally, you would go through and edit these lists to limit the CSS output to only the brands you need.
164 | 
165 | For now, the "multi-color" icons need to be invoked with a separate ".st-multi-color" class. I'm planning to make it an option for default output in the future. If you'd like to be notified of updates, and receive occasional info or offers, head over to <http://stackicons.com/subscribe>.
166 | 
167 | #### Contribute
168 | 
169 | Stackicons-Social is open source and free for any use. Attribution is welcome but not required.
170 | 
171 | If you (or a client) are able to contribute to the project, it would be a big help. As a small token of thanks, I'll send you *Stackicons-Social-Complete,* with a few more of my own custom icons. [Click here to donate any amount, thanks] (https://spb.io/AY3rLlt5aG).
172 | 
173 | If you have any questions, or are interested in creating a custom icon font for your project, please get in touch:
174 | 
175 | Parker Bennett
176 | 
177 | <parker@stackicons.com>
178 | 
179 | [@parkerbennett](https://twitter.com/parkerbennett)
180 | [@stackicons](https://twitter.com/stackicons)
181 | 


--------------------------------------------------------------------------------
/_source/font source/Icon Font Template (2048 units per em).glyphs:
--------------------------------------------------------------------------------
  1 | {
  2 | copyright = "\U00A9 2014 by Parker Bennett. OpenFont SIL & MIT Licensed.";
  3 | customParameters = (
  4 | {
  5 | name = vendorID;
  6 | value = STAC;
  7 | }
  8 | );
  9 | date = "2013-11-12 22:20:42 +0000";
 10 | designer = "Parker Bennett";
 11 | designerURL = "http://parkerbennett.com";
 12 | familyName = "Icon Font Template";
 13 | featurePrefixes = (
 14 | {
 15 | automatic = 1;
 16 | code = "languagesystem DFLT dflt;\012languagesystem latn dflt;\012";
 17 | name = Languagesystems;
 18 | }
 19 | );
 20 | fontMaster = (
 21 | {
 22 | ascender = 1691;
 23 | capHeight = 1467;
 24 | customParameters = (
 25 | {
 26 | name = typoAscender;
 27 | value = 1491;
 28 | },
 29 | {
 30 | name = typoDescender;
 31 | value = "-431";
 32 | },
 33 | {
 34 | name = typoLineGap;
 35 | value = 307;
 36 | },
 37 | {
 38 | name = underlinePosition;
 39 | value = "-217";
 40 | }
 41 | );
 42 | descender = "-431";
 43 | id = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
 44 | userData = {
 45 | GSOffsetHorizontal = 8;
 46 | GSOffsetProportional = 1;
 47 | GSOffsetVertical = "-32";
 48 | };
 49 | weightValue = 400;
 50 | widthValue = 5;
 51 | xHeight = 1062;
 52 | }
 53 | );
 54 | glyphs = (
 55 | {
 56 | glyphname = hairspace;
 57 | layers = (
 58 | {
 59 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
 60 | name = Regular;
 61 | width = 1;
 62 | }
 63 | );
 64 | unicode = 200A;
 65 | },
 66 | {
 67 | glyphname = space;
 68 | lastChange = "2013-06-30 06:39:41 -0800";
 69 | layers = (
 70 | {
 71 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
 72 | name = Regular;
 73 | width = 569;
 74 | }
 75 | );
 76 | unicode = 0020;
 77 | },
 78 | {
 79 | glyphname = thinspace;
 80 | lastChange = "2013-06-30 06:38:52 -0800";
 81 | layers = (
 82 | {
 83 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
 84 | name = Regular;
 85 | width = 100;
 86 | }
 87 | );
 88 | unicode = 2009;
 89 | },
 90 | {
 91 | glyphname = uni000D;
 92 | lastChange = "2013-11-11 20:06:35 -0800";
 93 | layers = (
 94 | {
 95 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
 96 | name = Regular;
 97 | width = 569;
 98 | }
 99 | );
100 | unicode = 000D;
101 | },
102 | {
103 | glyphname = .notdef;
104 | lastChange = "2013-11-11 20:05:06 -0800";
105 | layers = (
106 | {
107 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
108 | name = Regular;
109 | width = 600;
110 | }
111 | );
112 | },
113 | {
114 | glyphname = uni0000;
115 | layers = (
116 | {
117 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
118 | name = Regular;
119 | width = 569;
120 | }
121 | );
122 | unicode = 0000;
123 | },
124 | {
125 | glyphname = uniE001;
126 | lastChange = "2013-11-17 09:28:39 -0800";
127 | layers = (
128 | {
129 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
130 | name = Regular;
131 | paths = (
132 | {
133 | closed = 1;
134 | nodes = (
135 | "2400 1969 LINE",
136 | "0 1969 LINE",
137 | "0 -431 LINE",
138 | "2400 -431 LINE"
139 | );
140 | }
141 | );
142 | width = 2400;
143 | }
144 | );
145 | unicode = E001;
146 | },
147 | {
148 | glyphname = uniE002;
149 | lastChange = "2013-11-17 09:10:22 -0800";
150 | layers = (
151 | {
152 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
153 | name = Regular;
154 | paths = (
155 | {
156 | closed = 1;
157 | nodes = (
158 | "2400 -316 OFFCURVE",
159 | "2285.38 -431 OFFCURVE",
160 | "2144 -431 CURVE SMOOTH",
161 | "256 -431 LINE SMOOTH",
162 | "114.615 -431 OFFCURVE",
163 | "0 -316 OFFCURVE",
164 | "0 -175 CURVE SMOOTH",
165 | "0 1713 LINE SMOOTH",
166 | "0 1854.39 OFFCURVE",
167 | "114.615 1969 OFFCURVE",
168 | "256 1969 CURVE SMOOTH",
169 | "2144 1969 LINE SMOOTH",
170 | "2285.38 1969 OFFCURVE",
171 | "2400 1854.39 OFFCURVE",
172 | "2400 1713 CURVE SMOOTH",
173 | "2400 -175 LINE SMOOTH"
174 | );
175 | }
176 | );
177 | width = 2400;
178 | }
179 | );
180 | unicode = E002;
181 | },
182 | {
183 | glyphname = uniE003;
184 | lastChange = "2013-11-17 09:10:31 -0800";
185 | layers = (
186 | {
187 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
188 | name = Regular;
189 | paths = (
190 | {
191 | closed = 1;
192 | nodes = (
193 | "2400 -273 OFFCURVE",
194 | "2242.4 -431 OFFCURVE",
195 | "2048 -431 CURVE SMOOTH",
196 | "352 -431 LINE SMOOTH",
197 | "157.596 -431 OFFCURVE",
198 | "0 -273 OFFCURVE",
199 | "0 -79 CURVE SMOOTH",
200 | "0 1617 LINE SMOOTH",
201 | "0 1811.4 OFFCURVE",
202 | "157.596 1969 OFFCURVE",
203 | "352 1969 CURVE SMOOTH",
204 | "2048 1969 LINE SMOOTH",
205 | "2242.4 1969 OFFCURVE",
206 | "2400 1811.4 OFFCURVE",
207 | "2400 1617 CURVE SMOOTH",
208 | "2400 -79 LINE SMOOTH"
209 | );
210 | }
211 | );
212 | width = 2400;
213 | }
214 | );
215 | unicode = E003;
216 | },
217 | {
218 | glyphname = uniE004;
219 | lastChange = "2013-11-17 09:10:41 -0800";
220 | layers = (
221 | {
222 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
223 | name = Regular;
224 | paths = (
225 | {
226 | closed = 1;
227 | nodes = (
228 | "836.742 1969 LINE SMOOTH",
229 | "595.804 1969 OFFCURVE",
230 | "475.34 1969 OFFCURVE",
231 | "345.66 1928 CURVE",
232 | "204.07 1876.46 OFFCURVE",
233 | "92.539 1764.93 OFFCURVE",
234 | "41.004 1623.34 CURVE",
235 | "0 1493.66 OFFCURVE",
236 | "0 1373.2 OFFCURVE",
237 | "0 1132.26 CURVE SMOOTH",
238 | "0 405.743 LINE SMOOTH",
239 | "0 164.805 OFFCURVE",
240 | "0 44.344 OFFCURVE",
241 | "41.004 -85 CURVE",
242 | "92.539 -227 OFFCURVE",
243 | "204.07 -338 OFFCURVE",
244 | "345.66 -390 CURVE",
245 | "475.34 -431 OFFCURVE",
246 | "595.804 -431 OFFCURVE",
247 | "836.742 -431 CURVE SMOOTH",
248 | "1563.26 -431 LINE SMOOTH",
249 | "1804.2 -431 OFFCURVE",
250 | "1924.66 -431 OFFCURVE",
251 | "2054.34 -390 CURVE",
252 | "2195.93 -338 OFFCURVE",
253 | "2307.46 -227 OFFCURVE",
254 | "2359 -85 CURVE",
255 | "2400 44.344 OFFCURVE",
256 | "2400 164.805 OFFCURVE",
257 | "2400 405.743 CURVE SMOOTH",
258 | "2400 1132.26 LINE SMOOTH",
259 | "2400 1373.2 OFFCURVE",
260 | "2400 1493.66 OFFCURVE",
261 | "2359 1623.34 CURVE",
262 | "2307.46 1764.93 OFFCURVE",
263 | "2195.93 1876.46 OFFCURVE",
264 | "2054.34 1928 CURVE",
265 | "1924.66 1969 OFFCURVE",
266 | "1804.2 1969 OFFCURVE",
267 | "1563.26 1969 CURVE SMOOTH"
268 | );
269 | }
270 | );
271 | width = 2400;
272 | }
273 | );
274 | unicode = E004;
275 | },
276 | {
277 | glyphname = uniE005;
278 | lastChange = "2013-11-17 09:11:03 -0800";
279 | layers = (
280 | {
281 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
282 | name = Regular;
283 | paths = (
284 | {
285 | closed = 1;
286 | nodes = (
287 | "537.252 1969 OFFCURVE",
288 | "0 1431.75 OFFCURVE",
289 | "0 769 CURVE SMOOTH",
290 | "0 106.252 OFFCURVE",
291 | "537.252 -431 OFFCURVE",
292 | "1200 -431 CURVE SMOOTH",
293 | "1862.75 -431 OFFCURVE",
294 | "2400 106.252 OFFCURVE",
295 | "2400 769 CURVE SMOOTH",
296 | "2400 1431.75 OFFCURVE",
297 | "1862.75 1969 OFFCURVE",
298 | "1200 1969 CURVE SMOOTH"
299 | );
300 | }
301 | );
302 | width = 2400;
303 | }
304 | );
305 | unicode = E005;
306 | },
307 | {
308 | glyphname = uniE020;
309 | lastChange = "2014-02-19 01:32:54 -0800";
310 | layers = (
311 | {
312 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
313 | name = Regular;
314 | paths = (
315 | {
316 | closed = 1;
317 | nodes = (
318 | "2400 1969 LINE",
319 | "0 1969 LINE",
320 | "0 -431 LINE",
321 | "2400 -431 LINE"
322 | );
323 | },
324 | {
325 | closed = 1;
326 | nodes = (
327 | "1697.06 1669 OFFCURVE",
328 | "2100 1266.06 OFFCURVE",
329 | "2100 769 CURVE SMOOTH",
330 | "2100 271.939 OFFCURVE",
331 | "1697.06 -131 OFFCURVE",
332 | "1200 -131 CURVE SMOOTH",
333 | "702.939 -131 OFFCURVE",
334 | "300 271.939 OFFCURVE",
335 | "300 769 CURVE SMOOTH",
336 | "300 1266.06 OFFCURVE",
337 | "702.939 1669 OFFCURVE",
338 | "1200 1669 CURVE SMOOTH"
339 | );
340 | }
341 | );
342 | width = 2400;
343 | }
344 | );
345 | unicode = E020;
346 | },
347 | {
348 | glyphname = uniE021;
349 | lastChange = "2014-02-19 01:32:31 -0800";
350 | layers = (
351 | {
352 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
353 | name = Regular;
354 | paths = (
355 | {
356 | closed = 1;
357 | nodes = (
358 | "0 1969 LINE",
359 | "0 -431 LINE",
360 | "1240 -431 LINE",
361 | "1240 492 LINE",
362 | "928 492 LINE",
363 | "928 846 LINE",
364 | "1240 846 LINE",
365 | "1240 1135 LINE SMOOTH",
366 | "1240 1292 OFFCURVE",
367 | "1291.02 1412.71 OFFCURVE",
368 | "1355 1474 CURVE SMOOTH",
369 | "1438.36 1553.85 OFFCURVE",
370 | "1572.97 1601 OFFCURVE",
371 | "1705.94 1601 CURVE SMOOTH",
372 | "1822.04 1601 OFFCURVE",
373 | "1924.05 1589.32 OFFCURVE",
374 | "1973.54 1582 CURVE",
375 | "1973.54 1267 LINE",
376 | "1935.35 1269.13 OFFCURVE",
377 | "1854.46 1273.65 OFFCURVE",
378 | "1765.67 1273.65 CURVE SMOOTH",
379 | "1668.71 1273.65 OFFCURVE",
380 | "1596 1219.75 OFFCURVE",
381 | "1596 1130.29 CURVE SMOOTH",
382 | "1596 846 LINE",
383 | "1974 846 LINE",
384 | "1916 492 LINE",
385 | "1596 492 LINE",
386 | "1596 -431 LINE",
387 | "2400 -431 LINE",
388 | "2400 1969 LINE"
389 | );
390 | }
391 | );
392 | width = 2400;
393 | }
394 | );
395 | unicode = E021;
396 | },
397 | {
398 | glyphname = uniE031;
399 | lastChange = "2014-02-19 01:32:31 -0800";
400 | layers = (
401 | {
402 | layerId = "06D35582-4FA2-40C1-8C5B-DEFCD1A2473F";
403 | name = Regular;
404 | paths = (
405 | {
406 | closed = 1;
407 | nodes = (
408 | "2400 1969 LINE",
409 | "0 1969 LINE",
410 | "0 -431 LINE",
411 | "2400 -431 LINE"
412 | );
413 | },
414 | {
415 | closed = 1;
416 | nodes = (
417 | "1648.82 1392.4 OFFCURVE",
418 | "1731.4 1353.83 OFFCURVE",
419 | "1789.36 1292.06 CURVE",
420 | "1861.76 1306.31 OFFCURVE",
421 | "1929.77 1332.76 OFFCURVE",
422 | "1991.17 1369.18 CURVE",
423 | "1967.44 1294.96 OFFCURVE",
424 | "1917.05 1232.69 OFFCURVE",
425 | "1851.45 1193.36 CURVE",
426 | "1915.72 1201.04 OFFCURVE",
427 | "1976.96 1218.11 OFFCURVE",
428 | "2033.97 1243.39 CURVE",
429 | "1991.36 1179.67 OFFCURVE",
430 | "1937.48 1123.69 OFFCURVE",
431 | "1875.4 1078.89 CURVE",
432 | "1875.4 1037.77 LINE SMOOTH",
433 | "1876.32 617.83 OFFCURVE",
434 | "1556.67 133.592 OFFCURVE",
435 | "972.14 133.592 CURVE SMOOTH",
436 | "792.676 133.592 OFFCURVE",
437 | "625.634 186.211 OFFCURVE",
438 | "485 276.379 CURVE",
439 | "509.863 273.433 OFFCURVE",
440 | "535.166 271.927 OFFCURVE",
441 | "560.811 271.927 CURVE SMOOTH",
442 | "709.699 271.927 OFFCURVE",
443 | "846.721 322.732 OFFCURVE",
444 | "955.48 407.964 CURVE",
445 | "816.424 410.533 OFFCURVE",
446 | "699.059 502.417 OFFCURVE",
447 | "658.623 628.662 CURVE",
448 | "678.039 624.954 OFFCURVE",
449 | "697.941 622.955 OFFCURVE",
450 | "718.415 622.955 CURVE SMOOTH",
451 | "747.398 622.955 OFFCURVE",
452 | "775.471 626.845 OFFCURVE",
453 | "802.132 634.108 CURVE",
454 | "656.768 663.308 OFFCURVE",
455 | "547.22 791.751 OFFCURVE",
456 | "547.22 945.716 CURVE SMOOTH",
457 | "547.251 949.716 LINE",
458 | "590.091 925.918 OFFCURVE",
459 | "639.101 911.623 OFFCURVE",
460 | "691.187 909.972 CURVE",
461 | "605.911 966.962 OFFCURVE",
462 | "549.815 1064.22 OFFCURVE",
463 | "549.815 1174.48 CURVE SMOOTH",
464 | "549.815 1232.72 OFFCURVE",
465 | "565.48 1287.31 OFFCURVE",
466 | "592.844 1334.25 CURVE",
467 | "749.578 1141.98 OFFCURVE",
468 | "983.748 1015.46 OFFCURVE",
469 | "1247.86 1002.2 CURVE",
470 | "1242.43 1025.48 OFFCURVE",
471 | "1239.62 1049.72 OFFCURVE",
472 | "1239.62 1074.63 CURVE SMOOTH",
473 | "1239.62 1250.13 OFFCURVE",
474 | "1381.92 1392.4 OFFCURVE",
475 | "1557.41 1392.4 CURVE SMOOTH"
476 | );
477 | }
478 | );
479 | width = 2400;
480 | }
481 | );
482 | unicode = E031;
483 | }
484 | );
485 | gridLength = 0;
486 | instances = (
487 | {
488 | name = Regular;
489 | }
490 | );
491 | manufacturer = Stackicons;
492 | manufacturerURL = "http://stackicons.com";
493 | unitsPerEm = 2048;
494 | versionMajor = 1;
495 | versionMinor = 1;
496 | }
497 | 


--------------------------------------------------------------------------------
/apple-touch-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/apple-touch-icon-114x114.png


--------------------------------------------------------------------------------
/apple-touch-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/apple-touch-icon-120x120.png


--------------------------------------------------------------------------------
/apple-touch-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/apple-touch-icon-152x152.png


--------------------------------------------------------------------------------
/apple-touch-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/apple-touch-icon-76x76.png


--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/apple-touch-icon.png


--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
 1 | # Require any additional compass plugins here.
 2 | 
 3 | # Set this to the root of your project when deployed:
 4 | http_path = "/"
 5 | css_dir = "css"
 6 | sass_dir = "scss"
 7 | images_dir = "img"
 8 | javascripts_dir = "js"
 9 | fonts_dir = "fonts"
10 | 
11 | output_style = :expanded
12 | 
13 | # To enable relative paths to assets via compass helper functions. Uncomment:
14 | # relative_assets = true
15 | 
16 | # To disable debugging comments that display the original location of your selectors. Uncomment:
17 | # line_comments = false
18 | color_output = false
19 | 
20 | 
21 | # If you prefer the indented syntax, you might want to regenerate this
22 | # project again passing --syntax sass, or you can uncomment this:
23 | # preferred_syntax = :sass
24 | # and then run:
25 | # sass-convert -R --from scss --to sass css scss && rm -rf sass && mv scss sass
26 | 


--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */
  2 | 
  3 | /* ==========================================================================
  4 |    HTML5 display definitions
  5 |    ========================================================================== */
  6 | 
  7 | /**
  8 |  * Correct `block` display not defined in IE 8/9.
  9 |  */
 10 | 
 11 | article,
 12 | aside,
 13 | details,
 14 | figcaption,
 15 | figure,
 16 | footer,
 17 | header,
 18 | hgroup,
 19 | main,
 20 | nav,
 21 | section,
 22 | summary {
 23 |     display: block;
 24 | }
 25 | 
 26 | /**
 27 |  * Correct `inline-block` display not defined in IE 8/9.
 28 |  */
 29 | 
 30 | audio,
 31 | canvas,
 32 | video {
 33 |     display: inline-block;
 34 | }
 35 | 
 36 | /**
 37 |  * Prevent modern browsers from displaying `audio` without controls.
 38 |  * Remove excess height in iOS 5 devices.
 39 |  */
 40 | 
 41 | audio:not([controls]) {
 42 |     display: none;
 43 |     height: 0;
 44 | }
 45 | 
 46 | /**
 47 |  * Address `[hidden]` styling not present in IE 8/9.
 48 |  * Hide the `template` element in IE, Safari, and Firefox < 22.
 49 |  */
 50 | 
 51 | [hidden],
 52 | template {
 53 |     display: none;
 54 | }
 55 | 
 56 | /* ==========================================================================
 57 |    Base
 58 |    ========================================================================== */
 59 | 
 60 | /**
 61 |  * 1. Set default font family to sans-serif.
 62 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
 63 |  *    user zoom.
 64 |  */
 65 | 
 66 | html {
 67 |     font-family: sans-serif; /* 1 */
 68 |     -ms-text-size-adjust: 100%; /* 2 */
 69 |     -webkit-text-size-adjust: 100%; /* 2 */
 70 | }
 71 | 
 72 | /**
 73 |  * Remove default margin.
 74 |  */
 75 | 
 76 | body {
 77 |     margin: 0;
 78 | }
 79 | 
 80 | /* ==========================================================================
 81 |    Links
 82 |    ========================================================================== */
 83 | 
 84 | /**
 85 |  * Remove the gray background color from active links in IE 10.
 86 |  */
 87 | 
 88 | a {
 89 |     background: transparent;
 90 | }
 91 | 
 92 | /**
 93 |  * Address `outline` inconsistency between Chrome and other browsers.
 94 |  */
 95 | 
 96 | a:focus {
 97 |     outline: thin dotted;
 98 | }
 99 | 
100 | /**
101 |  * Improve readability when focused and also mouse hovered in all browsers.
102 |  */
103 | 
104 | a:active,
105 | a:hover {
106 |     outline: 0;
107 | }
108 | 
109 | /* ==========================================================================
110 |    Typography
111 |    ========================================================================== */
112 | 
113 | /**
114 |  * Address variable `h1` font-size and margin within `section` and `article`
115 |  * contexts in Firefox 4+, Safari 5, and Chrome.
116 |  */
117 | 
118 | h1 {
119 |     font-size: 2em;
120 |     margin: 0.67em 0;
121 | }
122 | 
123 | /**
124 |  * Address styling not present in IE 8/9, Safari 5, and Chrome.
125 |  */
126 | 
127 | abbr[title] {
128 |     border-bottom: 1px dotted;
129 | }
130 | 
131 | /**
132 |  * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
133 |  */
134 | 
135 | b,
136 | strong {
137 |     font-weight: bold;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in Safari 5 and Chrome.
142 |  */
143 | 
144 | dfn {
145 |     font-style: italic;
146 | }
147 | 
148 | /**
149 |  * Address differences between Firefox and other browsers.
150 |  */
151 | 
152 | hr {
153 |     -moz-box-sizing: content-box;
154 |     box-sizing: content-box;
155 |     height: 0;
156 | }
157 | 
158 | /**
159 |  * Address styling not present in IE 8/9.
160 |  */
161 | 
162 | mark {
163 |     background: #ff0;
164 |     color: #000;
165 | }
166 | 
167 | /**
168 |  * Correct font family set oddly in Safari 5 and Chrome.
169 |  */
170 | 
171 | code,
172 | kbd,
173 | pre,
174 | samp {
175 |     font-family: monospace, serif;
176 |     font-size: 1em;
177 | }
178 | 
179 | /**
180 |  * Improve readability of pre-formatted text in all browsers.
181 |  */
182 | 
183 | pre {
184 |     white-space: pre-wrap;
185 | }
186 | 
187 | /**
188 |  * Set consistent quote types.
189 |  */
190 | 
191 | q {
192 |     quotes: "\201C" "\201D" "\2018" "\2019";
193 | }
194 | 
195 | /**
196 |  * Address inconsistent and variable font size in all browsers.
197 |  */
198 | 
199 | small {
200 |     font-size: 80%;
201 | }
202 | 
203 | /**
204 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
205 |  */
206 | 
207 | sub,
208 | sup {
209 |     font-size: 75%;
210 |     line-height: 0;
211 |     position: relative;
212 |     vertical-align: baseline;
213 | }
214 | 
215 | sup {
216 |     top: -0.5em;
217 | }
218 | 
219 | sub {
220 |     bottom: -0.25em;
221 | }
222 | 
223 | /* ==========================================================================
224 |    Embedded content
225 |    ========================================================================== */
226 | 
227 | /**
228 |  * Remove border when inside `a` element in IE 8/9.
229 |  */
230 | 
231 | img {
232 |     border: 0;
233 | }
234 | 
235 | /**
236 |  * Correct overflow displayed oddly in IE 9.
237 |  */
238 | 
239 | svg:not(:root) {
240 |     overflow: hidden;
241 | }
242 | 
243 | /* ==========================================================================
244 |    Figures
245 |    ========================================================================== */
246 | 
247 | /**
248 |  * Address margin not present in IE 8/9 and Safari 5.
249 |  */
250 | 
251 | figure {
252 |     margin: 0;
253 | }
254 | 
255 | /* ==========================================================================
256 |    Forms
257 |    ========================================================================== */
258 | 
259 | /**
260 |  * Define consistent border, margin, and padding.
261 |  */
262 | 
263 | fieldset {
264 |     border: 1px solid #c0c0c0;
265 |     margin: 0 2px;
266 |     padding: 0.35em 0.625em 0.75em;
267 | }
268 | 
269 | /**
270 |  * 1. Correct `color` not being inherited in IE 8/9.
271 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
272 |  */
273 | 
274 | legend {
275 |     border: 0; /* 1 */
276 |     padding: 0; /* 2 */
277 | }
278 | 
279 | /**
280 |  * 1. Correct font family not being inherited in all browsers.
281 |  * 2. Correct font size not being inherited in all browsers.
282 |  * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
283 |  */
284 | 
285 | button,
286 | input,
287 | select,
288 | textarea {
289 |     font-family: inherit; /* 1 */
290 |     font-size: 100%; /* 2 */
291 |     margin: 0; /* 3 */
292 | }
293 | 
294 | /**
295 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
296 |  * the UA stylesheet.
297 |  */
298 | 
299 | button,
300 | input {
301 |     line-height: normal;
302 | }
303 | 
304 | /**
305 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
306 |  * All other form control elements do not inherit `text-transform` values.
307 |  * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
308 |  * Correct `select` style inheritance in Firefox 4+ and Opera.
309 |  */
310 | 
311 | button,
312 | select {
313 |     text-transform: none;
314 | }
315 | 
316 | /**
317 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
318 |  *    and `video` controls.
319 |  * 2. Correct inability to style clickable `input` types in iOS.
320 |  * 3. Improve usability and consistency of cursor style between image-type
321 |  *    `input` and others.
322 |  */
323 | 
324 | button,
325 | html input[type="button"], /* 1 */
326 | input[type="reset"],
327 | input[type="submit"] {
328 |     -webkit-appearance: button; /* 2 */
329 |     cursor: pointer; /* 3 */
330 | }
331 | 
332 | /**
333 |  * Re-set default cursor for disabled elements.
334 |  */
335 | 
336 | button[disabled],
337 | html input[disabled] {
338 |     cursor: default;
339 | }
340 | 
341 | /**
342 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
343 |  * 2. Remove excess padding in IE 8/9/10.
344 |  */
345 | 
346 | input[type="checkbox"],
347 | input[type="radio"] {
348 |     box-sizing: border-box; /* 1 */
349 |     padding: 0; /* 2 */
350 | }
351 | 
352 | /**
353 |  * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
354 |  * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
355 |  *    (include `-moz` to future-proof).
356 |  */
357 | 
358 | input[type="search"] {
359 |     -webkit-appearance: textfield; /* 1 */
360 |     -moz-box-sizing: content-box;
361 |     -webkit-box-sizing: content-box; /* 2 */
362 |     box-sizing: content-box;
363 | }
364 | 
365 | /**
366 |  * Remove inner padding and search cancel button in Safari 5 and Chrome
367 |  * on OS X.
368 |  */
369 | 
370 | input[type="search"]::-webkit-search-cancel-button,
371 | input[type="search"]::-webkit-search-decoration {
372 |     -webkit-appearance: none;
373 | }
374 | 
375 | /**
376 |  * Remove inner padding and border in Firefox 4+.
377 |  */
378 | 
379 | button::-moz-focus-inner,
380 | input::-moz-focus-inner {
381 |     border: 0;
382 |     padding: 0;
383 | }
384 | 
385 | /**
386 |  * 1. Remove default vertical scrollbar in IE 8/9.
387 |  * 2. Improve readability and alignment in all browsers.
388 |  */
389 | 
390 | textarea {
391 |     overflow: auto; /* 1 */
392 |     vertical-align: top; /* 2 */
393 | }
394 | 
395 | /* ==========================================================================
396 |    Tables
397 |    ========================================================================== */
398 | 
399 | /**
400 |  * Remove most spacing between table cells.
401 |  */
402 | 
403 | table {
404 |     border-collapse: collapse;
405 |     border-spacing: 0;
406 | }
407 | 


--------------------------------------------------------------------------------
/css/stackicons-branding.css:
--------------------------------------------------------------------------------
  1 | /* Stackicons-Branding */
  2 | @font-face {
  3 |   font-family: 'Stackicons-Branding';
  4 |   src: url("../fonts/Stackicons/Stackicons-Branding.eot");
  5 |   /* IE9 Compat Modes */
  6 |   src: url("../fonts/Stackicons/Stackicons-Branding.eot?#iefix") format("embedded-opentype"), url("../fonts/Stackicons/Stackicons-Branding.woff") format("woff"), url("../fonts/Stackicons/Stackicons-Branding.ttf") format("truetype"), url("../fonts/Stackicons/Stackicons-Branding.svg#76cc4077294aa89eeb6c5fa684bb9048") format("svg");
  7 |   /* Legacy iOS */
  8 |   font-style: normal !important;
  9 |   font-weight: 400 !important;
 10 |   -webkit-font-smoothing: antialiased;
 11 |   -moz-osx-font-smoothing: grayscale;
 12 |   font-smoothing: antialiased;
 13 |   speak: none;
 14 | }
 15 | /* stackicons */
 16 | 
 17 | .stackicons-logo {
 18 |   position: relative;
 19 |   display: inline-block;
 20 |   height: 1.1em;
 21 |   width: 7.4em;
 22 |   font-family: 'Stackicons-Branding';
 23 |   font-size: 1.4em;
 24 |   font-weight: 400 !important;
 25 |   -webkit-font-smoothing: antialiased;
 26 |   -moz-osx-font-smoothing: grayscale;
 27 |   font-smoothing: antialiased;
 28 |   text-align: left;
 29 |   text-indent: -9999px !important;
 30 |   speak: none;
 31 |   /* ie7 inline-block hack */
 32 |   zoom: 1;
 33 |   *display: inline;
 34 |   -webkit-transition: color .2s ease-out,
 35 |                  background .2s ease-out,
 36 |                 text-shadow .2s ease-out;
 37 |      -moz-transition: color .2s ease-out,
 38 |                  background .2s ease-out,
 39 |                 text-shadow .2s ease-out;
 40 |        -o-transition: color .2s ease-out,
 41 |                  background .2s ease-out,
 42 |                 text-shadow .2s ease-out;
 43 |       -ms-transition: color .2s ease-out,
 44 |                  background .2s ease-out,
 45 |                 text-shadow .2s ease-out;
 46 |           transition: color .2s ease-out,
 47 |                  background .2s ease-out,
 48 |                 text-shadow .2s ease-out;
 49 | }
 50 | 
 51 | 
 52 | .stackicons-logo:before,
 53 | .stackicons-logo span:before,
 54 | .stackicons-logo span:after,
 55 | .stackicons-logo:after {
 56 |   position: absolute;
 57 |   display: block;
 58 |   top: 0;
 59 |   left: 0;
 60 |   text-indent: 0;
 61 |   -webkit-font-smoothing: antialiased;
 62 |   -moz-osx-font-smoothing: grayscale;
 63 |   font-smoothing: antialiased;
 64 |   speak: none;
 65 |   -webkit-transition: color .2s ease-out,
 66 |                  background .2s ease-out,
 67 |                 text-shadow .2s ease-out;
 68 |      -moz-transition: color .2s ease-out,
 69 |                  background .2s ease-out,
 70 |                 text-shadow .2s ease-out;
 71 |        -o-transition: color .2s ease-out,
 72 |                  background .2s ease-out,
 73 |                 text-shadow .2s ease-out;
 74 |       -ms-transition: color .2s ease-out,
 75 |                  background .2s ease-out,
 76 |                 text-shadow .2s ease-out;
 77 |           transition: color .2s ease-out,
 78 |                  background .2s ease-out,
 79 |                 text-shadow .2s ease-out;
 80 | }
 81 | 
 82 | .text-left.stackicons-logo {
 83 |   width: 7.15em; }
 84 | 
 85 | .text-left.stackicons-logo:before,
 86 | .text-left.stackicons-logo span:before,
 87 | .text-left.stackicons-logo span:after,
 88 | .text-left.stackicons-logo:after {
 89 |   left: -.18em; }
 90 | 
 91 | .stackicons-logo:before {
 92 |   content: "\e69c";
 93 |   color: #c8002a; /* red-dk */ }
 94 | 
 95 | .stackicons-logo span:before {
 96 |   content: "\e69d";
 97 |   color: #fa580d; /* red */ }
 98 | 
 99 | .stackicons-logo span:after {
100 |   content: "\e69e";
101 |   color: #ff8b19; /* orange */ }
102 | 
103 | .stackicons-logo:after {
104 |   content: "\e69f";
105 |   color: #f5aa00; /* orange-lt */ }
106 | 
107 | 
108 | /* ie10 needs plain :hover declared */
109 | .stackicons-logo:hover, .stackicons-logo span:hover {}
110 | 
111 | .stackicons-logo:hover:before {
112 |   /* don't repeat content:attr for transitions to work in Chrome */
113 |   color: #fa580d; /* orange-red */
114 |   text-shadow: 0 0 5px rgba(245,139,25,0.67); }
115 | 
116 | .stackicons-logo:hover span:before {
117 |   color: #ff8b19; /* orange */
118 |   text-shadow: 0 0 5px rgba(245,170,0,0.67); }
119 | 
120 | .stackicons-logo:hover span:after {
121 |   color: #f5aa00; /* orange-lt */
122 |   text-shadow: 0 0 5px rgba(255,210,0,0.67); }
123 | 
124 | .stackicons-logo:hover:after {
125 |   color: #ffd200; /* yellow */
126 |   text-shadow: 0 0 5px rgba(255,225,0,0.67); }
127 | 


--------------------------------------------------------------------------------
/css/stackicons-branding.min.css:
--------------------------------------------------------------------------------
1 | @font-face{font-family:'Stackicons-Branding';src:url("../fonts/Stackicons/Stackicons-Branding.eot");src:url("../fonts/Stackicons/Stackicons-Branding.eot?#iefix") format("embedded-opentype"),url("../fonts/Stackicons/Stackicons-Branding.woff") format("woff"),url("../fonts/Stackicons/Stackicons-Branding.ttf") format("truetype"),url("../fonts/Stackicons/Stackicons-Branding.svg#76cc4077294aa89eeb6c5fa684bb9048") format("svg");font-style:normal!important;font-weight:400!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;speak:none}.stackicons-logo{position:relative;display:inline-block;height:1.1em;width:7.4em;font-family:'Stackicons-Branding';font-size:1.4em;font-weight:400!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;text-align:left;text-indent:-9999px!important;speak:none;zoom:1;*display:inline;-webkit-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;-moz-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;-o-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;-ms-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out}.stackicons-logo:before,.stackicons-logo span:before,.stackicons-logo span:after,.stackicons-logo:after{position:absolute;display:block;top:0;left:0;text-indent:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;speak:none;-webkit-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;-moz-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;-o-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;-ms-transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out;transition:color .2s ease-out,background .2s ease-out,text-shadow .2s ease-out}.text-left.stackicons-logo{width:7.15em}.text-left.stackicons-logo:before,.text-left.stackicons-logo span:before,.text-left.stackicons-logo span:after,.text-left.stackicons-logo:after{left:-.18em}.stackicons-logo:before{content:"\e69c";color:#c8002a}.stackicons-logo span:before{content:"\e69d";color:#fa580d}.stackicons-logo span:after{content:"\e69e";color:#ff8b19}.stackicons-logo:after{content:"\e69f";color:#f5aa00}.stackicons-logo:hover:before{color:#fa580d;text-shadow:0 0 5px rgba(245,139,25,0.67)}.stackicons-logo:hover span:before{color:#ff8b19;text-shadow:0 0 5px rgba(245,170,0,0.67)}.stackicons-logo:hover span:after{color:#f5aa00;text-shadow:0 0 5px rgba(255,210,0,0.67)}.stackicons-logo:hover:after{color:#ffd200;text-shadow:0 0 5px rgba(255,225,0,0.67)}


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 |     @font-face {
  2 |     font-family: 'RTR-sans';
  3 |     src: url('../fonts/RTRsans/RTRsans-light.eot'); /* IE9 Compat Modes */
  4 |     src: url('../fonts/RTRsans/RTRsans-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  5 |          url('../fonts/RTRsans/RTRsans-light.woff') format('woff'), /* Modern Browsers */
  6 |          url('../fonts/RTRsans/RTRsans-light.ttf')  format('truetype'), /* Safari, Android, iOS */
  7 |          url('../fonts/RTRsans/RTRsans-light.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
  8 |     font-style:   normal;
  9 |     font-weight:  250;
 10 |     -webkit-font-smoothing: antialiased;
 11 |    -moz-osx-font-smoothing: grayscale;
 12 |             font-smoothing: antialiased; }
 13 | 
 14 |     @font-face {
 15 |       font-family: 'RTR-sans';
 16 |       src: url('../fonts/RTRsans/RTRsans-lightitalic.eot'); /* IE9 Compat Modes */
 17 |       src: url('../fonts/RTRsans/RTRsans-lightitalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 18 |            url('../fonts/RTRsans/RTRsans-lightitalic.woff') format('woff'), /* Modern Browsers */
 19 |            url('../fonts/RTRsans/RTRsans-lightitalic.ttf')  format('truetype'), /* Safari, Android, iOS */
 20 |            url('../fonts/RTRsans/RTRsans-lightitalic.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
 21 |       font-style:   italic;
 22 |       font-weight:  250;
 23 |       -webkit-font-smoothing: antialiased;
 24 |      -moz-osx-font-smoothing: grayscale;
 25 |               font-smoothing: antialiased; }
 26 | 
 27 |     @font-face {
 28 |       font-family: 'RTR-sans';
 29 |       src: url('../fonts/RTRsans/RTRsans-regular.eot'); /* IE9 Compat Modes */
 30 |       src: url('../fonts/RTRsans/RTRsans-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 31 |            url('../fonts/RTRsans/RTRsans-regular.woff') format('woff'), /* Modern Browsers */
 32 |            url('../fonts/RTRsans/RTRsans-regular.ttf')  format('truetype'), /* Safari, Android, iOS */
 33 |            url('../fonts/RTRsans/RTRsans-regular.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
 34 |       font-style:   normal;
 35 |       font-weight:  400;
 36 |       -webkit-font-smoothing: antialiased;
 37 |               font-smoothing: antialiased; }
 38 | 
 39 |     @font-face {
 40 |       font-family: 'RTR-sans';
 41 |       src: url('../fonts/RTRsans/RTRsans-regularitalic.eot'); /* IE9 Compat Modes */
 42 |       src: url('../fonts/RTRsans/RTRsans-regularitalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 43 |            url('../fonts/RTRsans/RTRsans-regularitalic.woff') format('woff'), /* Modern Browsers */
 44 |            url('../fonts/RTRsans/RTRsans-regularitalic.ttf')  format('truetype'), /* Safari, Android, iOS */
 45 |            url('../fonts/RTRsans/RTRsans-regularitalic.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
 46 |       font-style:   italic;
 47 |       font-weight:  400;
 48 |       -webkit-font-smoothing: antialiased;
 49 |      -moz-osx-font-smoothing: grayscale;
 50 |               font-smoothing: antialiased; }
 51 | 
 52 | 
 53 |     @font-face {
 54 |       font-family: 'RTR-sans';
 55 |       src: url('../fonts/RTRsans/RTRsans-bold.eot'); /* IE9 Compat Modes */
 56 |       src: url('../fonts/RTRsans/RTRsans-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 57 |            url('../fonts/RTRsans/RTRsans-bold.woff') format('woff'), /* Modern Browsers */
 58 |            url('../fonts/RTRsans/RTRsans-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
 59 |            url('../fonts/RTRsans/RTRsans-bold.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
 60 |       font-style:   normal;
 61 |       font-weight:  700;
 62 |       -webkit-font-smoothing: antialiased;
 63 |      -moz-osx-font-smoothing: grayscale;
 64 |               font-smoothing: antialiased; }
 65 | 
 66 |     @font-face {
 67 |       font-family: 'RTR-sans';
 68 |       src: url('../fonts/RTRsans/RTRsans-bolditalic.eot'); /* IE9 Compat Modes */
 69 |       src: url('../fonts/RTRsans/RTRsans-bolditalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 70 |            url('../fonts/RTRsans/RTRsans-bolditalic.woff') format('woff'), /* Modern Browsers */
 71 |            url('../fonts/RTRsans/RTRsans-bolditalic.ttf')  format('truetype'), /* Safari, Android, iOS */
 72 |            url('../fonts/RTRsans/RTRsans-bolditalic.svg#c28c03afd387a798452c838546d2621a') format('svg'); /* Legacy iOS */
 73 |       font-style:   italic;
 74 |       font-weight:  700;
 75 |       -webkit-font-smoothing: antialiased;
 76 |      -moz-osx-font-smoothing: grayscale;
 77 |               font-smoothing: antialiased; }
 78 | 
 79 |     *,
 80 |     *:before,
 81 |     *:after {
 82 |       -moz-box-sizing: border-box;
 83 |       -webkit-box-sizing: border-box;
 84 |       box-sizing: border-box; }
 85 | 
 86 |     html {
 87 |       width: 100%;
 88 |       border-top: 6px solid #f5aa00;
 89 |       font-size: 100%; }
 90 | 
 91 |     body {
 92 |       font-size: 96%; }
 93 | 
 94 |     body {
 95 |       background: white;
 96 |       color: #666;
 97 |       padding: 0;
 98 |       margin: 0;
 99 |       font-family: 'RTR-sans', sans-serif;
100 |       font-weight: normal;
101 |       font-style: normal;
102 |       line-height: 1.125;
103 |       position: relative;
104 |       cursor: default;
105 |   -webkit-font-smoothing: antialiased;
106 |  -moz-osx-font-smoothing: grayscale;
107 |           font-smoothing: antialiased; }
108 | 
109 |     a:hover {
110 |       cursor: pointer; }
111 | 
112 |     img,
113 |     object,
114 |     embed {
115 |       max-width: 100%;
116 |       height: auto; }
117 | 
118 |     object,
119 |     embed {
120 |       height: 100%; }
121 | 
122 |     .left {
123 |       float: left !important; }
124 | 
125 |     .right {
126 |       float: right !important; }
127 | 
128 |     img {
129 |       display: inline-block;
130 |       vertical-align: middle;
131 |       -ms-interpolation-mode: bicubic; }
132 | 
133 |     .clearfix {
134 |       *zoom: 1; }
135 |       .clearfix:before, .clearfix:after {
136 |         content: " ";
137 |         display: table; }
138 |       .clearfix:after {
139 |         clear: both; }
140 | 
141 |     .hide {
142 |       display: none; }
143 | 
144 |     .visuallyhidden, .screen-reader-text {
145 |             border: 0;
146 |             clip: rect(0 0 0 0);
147 |             height: 1px;
148 |             margin: -1px;
149 |             overflow: hidden;
150 |             padding: 0;
151 |             position: absolute;
152 |             width: 1px; }
153 | 
154 |     /*
155 |      * Extends the .visuallyhidden class to allow the element to be focusable
156 |      * when navigated to via the keyboard: h5bp.com/p
157 |      */
158 | 
159 |     .visuallyhidden.focusable:active, .screen-reader-text.focusable:active,
160 |         .visuallyhidden.focusable:focus, .screen-reader-text.focusable:focus {
161 |             clip: auto;
162 |             height: auto;
163 |             margin: 0;
164 |             overflow: visible;
165 |             position: static;
166 |             width: auto; }
167 | 
168 |     .wrap {
169 |       display: block;
170 |       position: relative;
171 |       margin: 0 auto;
172 |       padding: 0 10px;
173 |       min-width: 320px;
174 |       max-width: 800px; }
175 | 
176 |     header {
177 |       background: #fff;
178 |       padding-bottom: 1em; }
179 | 
180 |     footer {
181 |       min-height: 4em;
182 |       margin-top: 5em;
183 |       padding: .75em 0;
184 |       background: #555;
185 |       color: #999; }
186 | 
187 |     .hero .wrap,
188 |     .callout-panels .wrap,
189 |     .news .wrap { padding: 0; }
190 | 
191 |     h1, h2, h3 {
192 |       margin: 0;
193 |       color: #bbb;
194 |       font-weight: 200; }
195 | 
196 |     h4 {
197 |       margin-bottom: 0; }
198 | 
199 |     a {
200 |       text-decoration: none;
201 |       color: #f5aa00;
202 |   -webkit-transition: color .2s ease,
203 |                  background .2s ease;
204 |      -moz-transition: color .2s ease,
205 |                  background .2s ease;
206 |        -o-transition: color .2s ease,
207 |                  background .2s ease;
208 |       -ms-transition: color .2s ease,
209 |                  background .2s ease;
210 |           transition: color .2s ease,
211 |                  background .2s ease; }
212 | 
213 |     a:hover, a:focus {
214 |       color: #fa580d; }
215 | 
216 |     a:active {
217 |       color: #dc002a; }
218 | 
219 |     .button {
220 |       display: block;
221 |       margin: .75em 0;
222 |       padding: .4em 1em .45em;
223 |       background: #f5aa00;
224 |       text-align: center;
225 |       color: #fff !important;
226 |       font-size: 1.25em;
227 |       font-weight: bold;
228 |   -webkit-transition: color .2s ease,
229 |                  background .2s ease;
230 |      -moz-transition: color .2s ease,
231 |                  background .2s ease;
232 |        -o-transition: color .2s ease,
233 |                  background .2s ease;
234 |       -ms-transition: color .2s ease,
235 |                  background .2s ease;
236 |           transition: color .2s ease,
237 |                  background .2s ease; }
238 | 
239 |     .button.button-small {
240 |       font-size: 1em;
241 |       width: auto;  }
242 | 
243 |     .button {
244 |       background: #f5aa00; }
245 | 
246 |     .button.lighter {
247 |       background: #ffdd3d; }
248 | 
249 |     .button.darker {
250 |       background: #fc7113; }
251 | 
252 |     .button:hover, .button:focus {
253 |       background: #fa580d; }
254 | 
255 |     .button:active {
256 |       background: #dc002a; }
257 | 
258 |     .button.download, .button.contribute-button { margin: .75em 0 0; }
259 | 
260 |     hr {
261 |       display: block;
262 |       height: 1px;
263 |       border: 0;
264 |       border-top: 1px solid #ccc;
265 |       margin: 1em 0;
266 |       padding: 0; }
267 | 
268 |     nav ul, nav li {
269 |       display: inline;
270 |       margin: 0;
271 |       padding: 0;
272 |       list-style: none; }
273 | 
274 |     .nobr {
275 |       white-space: nowrap; }
276 | 
277 |     .nobr-wide { white-space: normal; }
278 | 
279 |     .width-half { width: 50%; }
280 | 
281 |     .clear-both {
282 |       clear: both !important; }
283 | 
284 |     pre {
285 |       clear: both;
286 |       padding: .75em 1em 0;
287 |       color: #222;
288 |       background: lightyellow; }
289 | 
290 |     pre span { color: #999; }
291 | 
292 |     code {
293 |       margin: 0 -.125em;
294 |       padding: 0 .125em;
295 |       background: lightyellow; }
296 | 
297 |     .stackicons-logo {
298 |         margin-top: .75em;
299 |         font-size: 136%;}
300 | 
301 |     .nav-top {
302 |       position: absolute;
303 |       top: 0;
304 |       margin-top: 1.125em; }
305 | 
306 |     .nav-top a {
307 |       margin: -.5em -.27em 0; }
308 | 
309 |     .nav-top .st-icon-email {
310 |       /* more spacing */
311 |       margin: -.5em -.1em 0 }
312 | 
313 |     .mynav {
314 |       float: right;
315 |       /* offset  button padding */
316 |       padding-right: .214em;
317 |       font-size: 115%;
318 |       text-align: right; }
319 | 
320 |     .mynav a {
321 |       margin-left: -.15em;
322 |       margin-bottom: .125em; }
323 | 
324 |     .nav-list a { color: #999;
325 |       font-family: 'Helvetica', sans-serif;
326 |       font-weight: 200; }
327 | 
328 |     .nav-list a:hover, .nav-list a:focus { color: #666; }
329 | 
330 |     .nav-list a:active { color: #222; }
331 | 
332 |     .nav-panel { white-space: nowrap; }
333 | 
334 |     .nav-panel a {
335 |       display: block;
336 |       /* to clear these floats we'll need to add
337 |          the clear: property to the next element.
338 |          We can't use methods that rely on adding
339 |          pseudo elements; it will disrupt the icon */
340 |       float: left;
341 |       border-right: 2px solid #eee;
342 |       border-bottom: 2px solid #ddd;
343 |       margin: 0 0 .5em;
344 |       padding: .25em;
345 |       padding-bottom: .3em;
346 |       background: #fafafa; }
347 | 
348 |     .nav-panel a:hover, .nav-panel a:focus {
349 |       border-right: 2px solid #e0e0e0;
350 |       border-bottom: 2px solid #d0d0d0;
351 |       background: #fefefe; }
352 | 
353 |     .nav-panel a:active {
354 |       border-left: 1px solid #e0e0e0;
355 |       border-top: 1px solid #d0d0d0;
356 |       border-right: 1px solid #fafafa;
357 |       border-bottom: 1px solid #fafafa;
358 |       background: #efefef; }
359 | 
360 |     .nav-panel a:before {
361 |       text-shadow: 0px -1px 1px rgba(255,255,255,0.75), 0px 1px 1px rgba(0,0,0,0.35); }
362 | 
363 |     .panel {
364 |       margin: 2em 0;
365 |       padding: .75em 2em 1.125em 1.5em;
366 |       background: #fafafa;
367 |       border: 1px solid #eee;
368 |       border-left: 3px solid #f5aa00; }
369 | 
370 |     .st-sample dd {
371 |       font-size: 85%;
372 |       margin-left: 2.5em;
373 |       color: #999; }
374 | 
375 |     .st-sample span {
376 |       position: relative;
377 |       top: .4em;
378 |       font-family: 'Stackicons-Social';
379 |       font-style: normal !important;
380 |       font-weight: 400 !important;
381 |       font-size: 150%;
382 |       margin-right: .25em;
383 |       -webkit-font-smoothing: antialiased;
384 |       -moz-osx-font-smoothing: grayscale;
385 |       font-smoothing: antialiased;
386 |       speak: none; }
387 | 
388 |     .st-demo {
389 |       margin: -.125em 0 0 -.18em;
390 |       font-family: 'Stackicons-Social';
391 |       font-style: normal !important;
392 |       font-weight: 400 !important;
393 |       font-size: 350%;
394 |        -webkit-font-smoothing: antialiased;
395 |       -moz-osx-font-smoothing: grayscale;
396 |                font-smoothing: antialiased;
397 |       speak: none; }
398 | 
399 |     .st-demo .st-icon {
400 |       margin: -.25em 0 0 -.5em;
401 |       font-size: 125%; }
402 | 
403 |     .st-demo b {
404 |       position:relative;
405 |       top: -.5em;
406 |       left: -.75em;
407 |       font-size: 50%;
408 |       color: #ffd200;
409 |       font-family: 'Stackicons-Social', sans-serif; }
410 | 
411 |     .dribbble-1 {
412 |       color: rgb(240, 119, 160);
413 |       /* to show overlapping "multi-color" elements */
414 |       margin-left: 0; }
415 |     .dribbble-2 {
416 |       color: rgb(250, 156, 190);
417 |       margin-left: -.75em; }
418 |     .dribbble-3 {
419 |       color: rgb(197, 55, 109);
420 |       margin-left: -.75em; }
421 |     .dribbble-4 {
422 |       color: rgb(204, 204, 204);
423 |       color: rgba(0, 0, 0, 0.198);
424 |       margin-left: -.85em; }
425 | 
426 |     .github-1 {
427 |       color: rgb(21, 21, 21);
428 |       margin-left: 0em; }
429 |     .github-2 { color: rgb(243, 202, 178);
430 |       margin-left: -.65em; }
431 |     .github-3 {
432 |       color: rgb(177, 66, 58);
433 |       margin-left: -.7em; }
434 |     .github-4 {
435 |       color: rgb(156, 230, 254);
436 |       color: rgba(131, 224, 254, 0.8);
437 |       margin-left: -.9em; }
438 | 
439 |     .icons-panel1 { margin: -.25em 0 .75em;}
440 |     /* you can override with a single-color in CSS */
441 |     .icons-panel1 a:before { color: #fabe00 !important; }
442 | 
443 |     .icons-panel1 a:hover:before,
444 |     .icons-panel1 a:focus:before { color: #fff !important; }
445 |     .icons-panel1 a:active:before { color: #ffdd3d !important; }
446 | 
447 |     .hero {
448 |       margin: 0;
449 |       background: #f4f4f4; }
450 | 
451 |     .hero-icons {
452 |       width: 100%;
453 |       font-size: 300%;
454 |       min-width: 320px;
455 |       text-align: center; }
456 | 
457 |     .hero-icons .st-shape-icon {
458 |       margin: 0 -.25em; }
459 | 
460 |     .twitter-row {
461 |       font-size: 38%; }
462 | 
463 |     .twitter-row a:before {
464 |       text-shadow: 0px 2px 3px #ccc !important;
465 |       text-shadow: 0px 2px 3px rgba(0,0,0,.25) !important; }
466 | 
467 |     .twitter-row a.st-icon-only:after {
468 |       text-shadow: 0px 2px 3px #ccc !important;
469 |       text-shadow: 0px 2px 3px rgba(0,0,0,.2) !important; }
470 | 
471 |     .intro {
472 |       padding: 0;
473 |       background: #555;
474 |       color: #fff; }
475 | 
476 |     .intro p {
477 |       padding: 1em .75em 0 1em;
478 |       font-size: 96%;}
479 | 
480 |     .button.github {
481 |       display: none; }
482 | 
483 |     .callout-panels {
484 |       font-size: 96%;
485 |       line-height: 1.25; }
486 | 
487 |     .callout-panels h2 {
488 |       padding-top: .125em;
489 |       color: #fff;
490 |       font-size: 1.75em; }
491 | 
492 |     .callout-panels p {
493 |       margin-top: .75em;}
494 | 
495 |     .callout-panels a {
496 |       font-weight: bold;
497 |       color: #fff;
498 |       color: rgba(255,255,255,.85); }
499 | 
500 |     .callout-panels a:hover {
501 |       color: #fff; }
502 | 
503 |     .callout-panels .st-icon-codepen:before {
504 |       color: #fff;
505 |       font-size: 125%;
506 |       top: -.08em;
507 |       left: 0; }
508 | 
509 |     .callout-panel-group {
510 |       display: table;
511 |       width: 100%; }
512 | 
513 |     .callout-panel {
514 |       padding: .75em 1em .5em;
515 |       background: #fc7113;
516 |       color: #fff; }
517 | 
518 |     .callout-panel.panel2 {
519 |       background: #ff8b19; }
520 | 
521 |     .callout-panel.panel3 {
522 |       background: #f5aa00; }
523 | 
524 |     .callout-panel.panel4 {
525 |       background: #f9bb00;
526 |       padding-bottom: 1em}
527 | 
528 |     .callout-panels small {
529 |       display: block;
530 |       margin-top: 1em;
531 |       font-size: 81.25%;
532 |       color: #402f00;
533 |       color: rgba(0,0,0,.75); }
534 | 
535 |     .callout-panels small a {
536 |       color: #402f00;
537 |       color: rgba(0,0,0,.75); }
538 | 
539 |     .callout-panels small a:hover,
540 |     .callout-panels small a:focus {
541 |       color: #fa580d; }
542 | 
543 |     .button-contribute {
544 |       position: absolute;
545 |       bottom: 0;
546 |       left: 0;
547 |       right: 0;
548 |       margin: .75em auto 0; }
549 | 
550 |     .news {
551 |       min-height: 3em;
552 |       font-size: 85%; }
553 | 
554 |     .news h2 { margin: 0;
555 |       padding: 9px 0 3px;
556 |       color: #999;
557 |       font-size: 18px; }
558 | 
559 |     .news-content {
560 |       padding: .5em 1.12em 0; }
561 | 
562 |     p.lede { margin-top: 0; }
563 | 
564 |     .signup {
565 |       padding: 0 1.12em; }
566 | 
567 |     #mc_embed_signup {margin: 0; padding: 0;}
568 |     #mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
569 |     #mc_embed_signup input:focus {border-color:#333;}
570 |     #mc_embed_signup .button { position: relative; top: -33px; width: 40%; right: -60%; margin: 0;  background-color: #f5aa00; border: 0 none; border-radius:0; color: #fff; cursor: pointer; display: block; font-size:16px; height: 32px; line-height: 32px; margin: 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; }
571 |     #mc_embed_signup .button:hover, #mc_embed_signup .button:focus {background-color:#fa580d;}
572 |     #mc_embed_signup .button:active {background-color:#dc002a;}
573 |     #mc_embed_signup .small-meta {font-size: 11px;}
574 |     #mc_embed_signup .clear {clear:none; display:inline;}
575 |     #mc_embed_signup label {display:block; margin: 0; padding: 15px 0 3px;font-size: 18px; color: #999;}
576 |     #mc_embed_signup input.email {display:block; padding:8px 41% 8px 0; margin:0; text-indent:5px; width:100%; min-width:130px; border-radius: 0 !important;}
577 |     /* #mc_embed_signup input.button {display:block; width:50%; margin:0 0 10px 0; min-width:90px;} */
578 |     #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
579 |     #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
580 |     #mc_embed_signup #mce-error-response {display:none;}
581 |     #mc_embed_signup #mce-success-response {color:#529214; display:none;}
582 |     #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
583 | 
584 |     .font-sample {
585 |       margin: 1.5em auto .75em;
586 |       padding: 0;
587 |       border: 1px solid #bbb;}
588 | 
589 |     .font-sample h2 {
590 |       text-align: center;
591 |       padding: .135em 0 .165em;
592 |       color: #fff;
593 |       background: #bbb; }
594 | 
595 |     .stackicons-font-sample {
596 |       padding: 0 1.4em 0 1.1em;;
597 |       font-size: 125%;
598 |       text-align: center; }
599 | 
600 |     .control-font {
601 |       margin-bottom: 1em;
602 |       padding: 0;
603 |       background: #f4f4f4;
604 |       font-size: 85%; }
605 | 
606 |     .toggle-color {
607 |       float: right;
608 |       padding: 0 1em;
609 |       height: 2.125em;
610 |       line-height: 2.125em;
611 |       text-align: right;
612 |   -webkit-transition: color .2s ease,
613 |                  background .2s ease;
614 |      -moz-transition: color .2s ease,
615 |                  background .2s ease;
616 |        -o-transition: color .2s ease,
617 |                  background .2s ease;
618 |       -ms-transition: color .2s ease,
619 |                  background .2s ease;
620 |           transition: color .2s ease,
621 |                  background .2s ease;
622 |       color: #bbb; }
623 | 
624 |     .toggle-color:hover, .toggle-color:focus {
625 |       color: #555;
626 |       background: #eaeaea; }
627 | 
628 |     .toggle-color:active,
629 |     .toggle-color.active {
630 |       color: #fa580d; }
631 | 
632 |     .toggle-color:after {
633 |       content: " off"; }
634 | 
635 |     .toggle-color.active:after {
636 |       content: " on"; }
637 | 
638 |     .control-shape {
639 |       padding: 0 0 0 .5em; }
640 | 
641 |     .control-shape a {
642 |       float: left;
643 |       padding: 0 .5em;
644 |       height: 2.125em;
645 |       line-height: 2.125em; }
646 | 
647 |     .control-shape a:hover, .control-shape a:focus {
648 |        background: #eaeaea; }
649 | 
650 |     .control-shape a:active, .control-shape a.active {
651 |       color: #fa580d; }
652 | 
653 |     .toggle-ssmin {
654 |       display: block;
655 |       margin-top: .5em;
656 |       padding: 0 1em;
657 |       height: 2em;
658 |       line-height: 2em;
659 |       text-align: right;
660 |       font-size: 85%;
661 |       color: #bbb; }
662 | 
663 |     .toggle-ssmin.active {
664 |       color: #f5aa00; }
665 | 
666 |     .toggle-ssmin:after {
667 |       content: "-Minimal*"; }
668 | 
669 |     .toggle-ssmin.active:after {
670 |        content: "";  }
671 | 
672 |     .font-sample-name.active:after {
673 |       content: "-Minimal"; }
674 | 
675 |     .usage { margin-top: 1.5em; }
676 | 
677 |     .copyright {
678 |       float: left;
679 |       margin: .0 0 1em;
680 |       font-size: 80%; }
681 | 
682 |     .copyright p {margin: 0; }
683 | 
684 |     .link-color { color: #f5aa00; }
685 | 
686 |     footer a, footer .link-color { opacity: .85; }
687 | 
688 |     footer a:hover, footer a:focus, footer a:active {
689 |       opacity: 1;
690 |       color: #ffd200; }
691 | 
692 | 
693 |     @media only screen
694 |       and (min-width : 480px) {
695 | 
696 |       body { font-size: 100%;}
697 | 
698 |       .stackicons-logo {
699 |         margin-top: .65em;
700 |         font-size: 150%; }
701 | 
702 |       .intro {
703 |         padding: 0 1em 1em; }
704 | 
705 |       .intro p {
706 |         padding: 1em .75em 0 1em;
707 |         font-size: 100%;}
708 | 
709 |       .button.download {
710 |         width: 10.5em;
711 |         margin: 0 auto;
712 |         font-size: 1.1em; }
713 | 
714 |       #mc_embed_signup .button { top: -34px; height: 33px; line-height: 33px; }
715 | 
716 |       .callout-panel {
717 |         display: table-cell;
718 |         width: 50%; }
719 | 
720 |       .callout-panels h2 {
721 |         font-size: 1.6em; }
722 | 
723 |       .panel4 { padding-bottom: 2.25em; }
724 | 
725 |       .contribute-button {
726 |         position: absolute;
727 |         bottom: 0;
728 |         left: 50%;
729 |         right: 0;
730 |         margin-bottom: 0; }
731 | 
732 |       .st-demo {
733 |         width: 35%;
734 |         white-space: nowrap; }
735 | 
736 |       .left-wide { float: left; }
737 | 
738 |       .indent-half { margin-left: 50%; }
739 | 
740 |       .nav-top {
741 |         right: .4em; }
742 | 
743 |       .icons-panel1 {
744 |         font-size: 85%; }
745 | 
746 |       .news-content, .signup {
747 |         float: left;
748 |         width: 50%; }
749 | 
750 |       .news-content { padding-bottom: .5em; }
751 | 
752 |       .toggle-color { padding: 0 1.5em; }
753 | 
754 |       .signup { padding: 0 1em; }
755 | 
756 |       .button-small {
757 |         display: inline-block; }
758 | 
759 |     }
760 | 
761 |     @media only screen
762 |       and (min-width : 640px) {
763 | 
764 |       .nobr-wide { white-space: nowrap; }
765 | 
766 |       .stackicons-logo {
767 |         margin-top: .54em;
768 |         font-size: 166.67%; }
769 | 
770 |       .nav-top {
771 |         font-size: 133%;
772 |         position: absolute;
773 |         margin-top: 0;
774 |         padding: 2.4em .5em 0; }
775 | 
776 |       .hero-icons {
777 |         width: 50%;
778 |         padding-top: .375em;
779 |         padding-right: 4%;
780 |         float: right; }
781 | 
782 |       .intro {
783 |         float: left;
784 |         width: 304px; }
785 | 
786 |       .intro p {
787 |         padding: .5em .75em 0; }
788 | 
789 |       .callout-panels h2 {
790 |         font-size: 1.75em; }
791 | 
792 |       .button.download {
793 |         width: 100%;
794 |         margin: 0 auto;
795 |         font-size: 1.1em; }
796 | 
797 |       .button.github {
798 |         /* unhide */
799 |         display: block;
800 |         position: absolute;
801 |         top: 0;
802 |         left: 0;
803 |         right: 0;
804 |         width: auto;
805 |         padding: .5em 0 .25em;
806 |         font-size: .75em; }
807 | 
808 |       .icons-panel1 {
809 |         font-size: 100% }
810 | 
811 |       .contribute-button {
812 |         left: 75%; }
813 | 
814 |       .control-shape {
815 |         padding: 0 0 0 1em; }
816 | 
817 |       .copyright { width: 60% }
818 | 
819 |     }
820 | 
821 |     @media only screen
822 |       and (min-width : 768px) {
823 | 
824 |       .hero-icons {
825 |         width: 60%;
826 |         padding: 0 2% 0 0;
827 |         font-size: 360%; }
828 | 
829 |       .callout-panel { padding: .75em 1.5em .25em 1.8em; }
830 | 
831 |       .news-content { padding: .5em 2em; }
832 | 
833 |       .signup { padding: 0 2em; }
834 | 
835 |     }
836 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/favicon.ico


--------------------------------------------------------------------------------
/fonts/Stackicons/Desktop Fonts/FONTLOG.txt:
--------------------------------------------------------------------------------
 1 | FONTLOG
 2 | Stackicons-Social font family
 3 | =============================
 4 | 
 5 | This file provides detailed information on the Stackicons-Social 
 6 | family of fonts. This information should be distributed along with 
 7 | the Stackicons-Social fonts and any derivative works.
 8 | 
 9 | Basic Font Information
10 | ----------------------
11 | 
12 | Stackicons-Social is an icon font with up-to-date branding for over 
13 | 60 online social brands -- from App.net to Zerply. (Copyrights and 
14 | trademarks for these brands are the property of their respective 
15 | owners.)
16 | 
17 | Stackicons (http://stackicons.com) are icon fonts designed for added 
18 | flexibility, with multiple button shapes, plus "stackable" elements, 
19 | which can create icons with multiple colors using CSS.
20 | 
21 | Stackicons-Social includes:
22 | addthis, adn (alt.net), amazon, android, apple, behance, blogger, 
23 | codepen, delicious, deviantart, digg, dribbble, dropbox, ebay, email, 
24 | evernote, facebook, facebook-alt (centered f), flattr, flickr, forrst, 
25 | foursquare, github, github-alt (silhouette), gittip, gmail, google, 
26 | googleplus, imdb, instagram, kickstarter, lastfm, linkedin, microsoft, 
27 | myspace, pandora, paypal, picasa, pinboard, pinterest, rdio, reddit, 
28 | rss, sharethis, skype, slideshare, soundcloud, spotify, stackoverflow, 
29 | stumbleupon, tumblr, twitter, vimeo, vine, windows, windows7, wordpress, 
30 | xing, yahoo, yelp, youtube (symbol), youtube-alt ("YouTube"), zerply, 
31 | menu, more (...), search, and triangle-down, along with some variations.
32 | 
33 | Stackicons-Social-Minimal is a subset of more commonly used icons:
34 | dribbble, codepen, email, facebook, facebook-alt, flickr, github, 
35 | github-alt, instagram, linkedin, pinterest, rss, tumblr, twitter, 
36 | vimeo, youtube, youtube-alt, menu, search, and triangle-down.
37 | 
38 | Stackicons-Social-Complete includes some additional variants, plus:
39 | email-alt, email-alt2, podcast, and shopping cart. It is offered  
40 | as a small “thank you" to those who contribute to the project:
41 | http://stackicons.com/contribute (thank you).
42 | 
43 | 
44 | ChangeLog
45 | ---------
46 | 
47 | 2014 February 20 (Parker Bennett) Version 1.0
48 |     
49 |     * First public release.
50 |         
51 | Acknowledgements
52 | ----------------
53 | Thanks to Chris Coyier and the team at CodePen (http://codepen.com). 
54 | Thanks to Tish and Carter and Reeve.
55 | 
56 | N: Parker Bennett
57 | E: parker@stackicons.com
58 | W: http:/stackicons.com
59 | D: Creative Director, Developer
60 | 
61 | For more information please visit http://stackicons.com.
62 | 
63 | You can also send an email to <parker at parkerbennett.com>


--------------------------------------------------------------------------------
/fonts/Stackicons/Desktop Fonts/Stackicons-Branding.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Desktop Fonts/Stackicons-Branding.otf


--------------------------------------------------------------------------------
/fonts/Stackicons/Desktop Fonts/Stackicons-Social-Minimal.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Desktop Fonts/Stackicons-Social-Minimal.otf


--------------------------------------------------------------------------------
/fonts/Stackicons/Desktop Fonts/Stackicons-Social.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Desktop Fonts/Stackicons-Social.otf


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Branding.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Branding.eot


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Branding.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Branding.ttf


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Branding.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Branding.woff


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Social-Minimal.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Social-Minimal.eot


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Social-Minimal.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Social-Minimal.ttf


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Social-Minimal.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Social-Minimal.woff


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Social.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Social.eot


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Social.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Social.ttf


--------------------------------------------------------------------------------
/fonts/Stackicons/Stackicons-Social.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/fonts/Stackicons/Stackicons-Social.woff


--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/icon.png


--------------------------------------------------------------------------------
/img/logo-stackicons_340x40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/img/logo-stackicons_340x40.png


--------------------------------------------------------------------------------
/img/logo-stackicons_t_340x40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/img/logo-stackicons_t_340x40.png


--------------------------------------------------------------------------------
/img/logo-stackicons_t_850x100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/img/logo-stackicons_t_850x100.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
  3 | <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  4 | 
  5 | <head>
  6 | 
  7 |   <meta charset="UTF-8">
  8 | 
  9 |   <title>Stackicons - Icon Fonts for Web Designers</title>
 10 | 
 11 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 12 | 
 13 |   <meta name="description" content="Stackicons are icon fonts for web designers with added flexibility, including multiple button shapes and a unique multi-color option. Free and open source, Stackicons-Social includes finely-crafted icons for over 60 social brands. The Stackicons project is by Parker Bennett, a web designer and front-end developer based in Los Angeles.">
 14 | 
 15 |   <meta name="viewport" content="width=device-width,initial-scale=1">
 16 |   <meta name="apple-mobile-web-app-capable" content="yes" />
 17 |   <meta name="apple-mobile-web-app-title" content="Stackicons">
 18 |   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 19 |   
 20 |   <meta property="og:title" content="Stackicons">
 21 |   <meta property="og:site_name" content="Stackicons">
 22 |   <meta property="og:image" content="http://stackicons.com/og-image.png">
 23 |   <meta property="og:image:type" content="image/png">
 24 | 
 25 | 	<link rel="SHORTCUT ICON" href="favicon.ico">
 26 |   <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png">
 27 |   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png">
 28 |   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png">
 29 |   <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57.png">
 30 | 
 31 |   <!--[if lt IE 9]>
 32 |   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 33 |   <![endif]-->
 34 | 
 35 |   <link rel="stylesheet" href="css/stackicons-min.css" media="screen" type="text/css" />
 36 |   <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
 37 | 
 38 |   <style>
 39 | 
 40 |   </style>
 41 | 
 42 | </head>
 43 | 
 44 | <body>
 45 |   <!--[if lt IE 7]>
 46 |     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
 47 |   <![endif]-->
 48 | 
 49 |   <div class="page-wrap">
 50 |   <header>
 51 |     <div class="wrap">
 52 |       <h1><a class="stackicons-logo text-left" href="http://stackicons.com"><span></span>Stackicons</a></h1>
 53 |       <h2 class="nobr">Doing More with Icon Fonts</h2>
 54 |       <nav class="nav-top st-shape-icon st-single-color-brand">
 55 |         <ul>
 56 |           <li><a title="Twitter" class="st-icon-twitter" href="https://twitter.com/stackicons">Twitter</a></li>
 57 |           <li><a title="Facebook" class="st-icon-facebook-alt" href="https://facebook.com/stackicons">Facebook</a></li>
 58 |           <li><a title="Github" class="st-icon-github-alt" href="http://github.com/parkerbennett">Github</a></li>
 59 |        <li><a title="Email" class="st-icon-email" href="mailto:&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;"><span></span>&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;</a></li>
 60 |        <li><a class="button github">Fork Me on GitHub</a></li>
 61 |         </ul>
 62 |       </nav>
 63 | 
 64 |     </div> <!-- end .wrap -->
 65 |   </header>
 66 | 
 67 |   <section class="hero">
 68 |     <div class="wrap clearfix">
 69 | 
 70 |       <div class="hero-icons">
 71 |   <a class="st-icon-dribbble st-multi-color st-shape-icon" href="http://dribbble.com/parkerbennett"><span></span>Dribbble</a>
 72 |   <a class="st-icon-github st-multi-color st-shape-icon" href="http://github.com/parkerbennett"><span></span>Github</a>
 73 |   <a class="st-icon-gmail st-multi-color st-shape-icon" href="mailto:&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;"><span></span>Email</a>
 74 |       <nav class="twitter-row st-multi-color">
 75 |         <a class="st-icon-twitter st-shape-square" href="https://twitter.com/stackicons">Twitter</a>
 76 |         <a class="st-icon-twitter st-shape-rounded1" href="https://twitter.com/stackicons">Twitter</a>
 77 |         <a class="st-icon-twitter st-shape-rounded2" href="https://twitter.com/stackicons">Twitter</a>
 78 |         <a class="st-icon-twitter st-shape-rounded3" href="https://twitter.com/stackicons">Twitter</a>
 79 |         <a class="st-icon-twitter st-shape-circle" href="https://twitter.com/stackicons">Twitter</a>
 80 |         <a class="st-icon-twitter st-shape-icon" href="https://twitter.com/stackicons">Twitter</a>
 81 |     </nav>
 82 |       </div> <!-- end .hero-icons -->
 83 | 
 84 |       <div class="intro">
 85 |       <p><strong>Stackicons</strong> are icon fonts for the web, designed to do <span class="nobr">more &#8212;</span> <span class="nobr-wide">with multiple</span> button shapes and <span class="nobr">a unique</span> <span class="nobr">&ldquo;multi-color&rdquo;</span> option. <span class="nobr-wide">The <strong>Stackicons-Social</strong></span> font and <span class="nobr-wide">Sass-based</span> construction kit are free and open source, created by <a href="http://parkerbennett.com" class="nobr">Parker Bennett</a>.</p>
 86 |      <a  class="button download">Download it Free</a>
 87 |       </div> <!-- end .intro -->
 88 | 
 89 |     </div> <!-- end .wrap -->
 90 |   </section> <!-- end .hero -->
 91 | 
 92 |   <section class="news">
 93 |     <div class="wrap clearfix">
 94 |       <section class="news-content">
 95 | 
 96 |         <h2>News</h2>
 97 |         <p class="lede">To kick off the site launch, I wrote an article about Stackicons for <a  target="_blank"><strong class="nobr">CSS-Tricks.</strong> <span class="nobr">Check it out!</span></a></p>
 98 | 
 99 |         </section>
100 | 
101 |         <section class="signup">
102 |         <!-- Begin MailChimp Signup Form -->
103 |           <div id="mc_embed_signup">
104 |             <form action="http://stackicons.us3.list-manage1.com/subscribe/post?u=a1d9b151d29974948b4cdcff9&amp;id=7b1b8c2871" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
105 |               <label for="mce-EMAIL">Updates?</label>
106 |               <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
107 |       <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
108 |               <div style="position: absolute; left: -5000px;">
109 |                 <input type="text" name="b_a1d9b151d29974948b4cdcff9_7b1b8c2871" value="">
110 |               </div>
111 |               <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
112 |             </form>
113 |           </div>
114 |           <!--End mc_embed_signup-->
115 |         </section><!-- end .signup -->
116 | 
117 |       </section><!-- end .news-content -->
118 |     </div> <!-- end .wrap -->
119 |   </section> <!-- end .news -->
120 | 
121 |   <section class="callout-panels clearfix">
122 |     <div class="wrap">
123 | 
124 |       <div class="callout-panel-group">
125 | 
126 |         <div class="callout-panel panel1">
127 |           <h2>Finely Crafted</h2>
128 |       <p><strong>Stackicons-Social</strong> includes over 60 up-to-date icons for modern social brands &#8212; <span class="nobr">from App.net</span> to Zerply. Each icon was meticulously crafted to look great at multiple sizes, with five different button shapes, from square to circle, or <span class="nobr">icon-only.</span></p>
129 |           <nav class="nav-social icons-panel1">
130 |             <ul>
131 |               <li><a class="st-icon-twitter st-shape-r0"></a></li>
132 |               <li><a class="st-icon-facebook st-shape-r1"></a></li>
133 |               <li><a class="st-icon-googleplus st-shape-r2"></a></li>
134 |               <li><a class="st-icon-youtube st-shape-r3"></a></li>
135 |               <li><a class="st-icon-pinterest st-shape-r4"></a></li>
136 |               <li><a class="st-icon-instagram st-shape-r5"></a></li>
137 |             </ul>
138 |           </nav>
139 |         </div> <!-- end .panel1 -->
140 | 
141 |         <div class="callout-panel panel2">
142 |           <h2 class="nobr">Easy to Customize</h2>
143 |           <p>Want to change the default button shape and color style, adjust colors or more? Just change the variables in the Sass construction kit files. <span class="nobr">You can</span> also override with built-in styles. <a class="nobr" href="examples.html" target="_blank">See some examples</a>.</p><p class="nav-list st-shape-icon"><a class="st-icon-codepen">Try it on CodePen</a></p>
144 |         </div>
145 | 
146 |       </div><!-- end .callout-panel-group -->
147 | 
148 |       <div class="callout-panel-group">
149 | 
150 |         <div class="callout-panel panel3">
151 |           <h2>Colorful</h2>
152 |           <p>Stackicons <span class="nobr">stack &#8212;</span> using overlapping colors to create &ldquo;multi-color&rdquo; icons with a contemporary <span class="nobr">flat look.</span> (Think of two-color or screen printing.)
153 |           <!-- dribbble -->
154 |   <div class="st-demo"><span class="dribbble-1">&#xe127;</span><span class="dribbble-2">&#xe128;</span><span class="dribbble-3">&#xe126;</span><span class="dribbble-4">&#xe129;</span><b>&rarr;</b><a class="st-icon st-multi-color st-icon-dribbble-alt st-shape-icon"><span></span>Dribbble</a></div>
155 | 
156 |         </div>
157 | 
158 |         <div class="callout-panel panel4">
159 |           <h2>Free</h2>
160 |           <p>
161 |           <strong>Stackicons-Social</strong> is open source and <strong class="nobr">100% free</strong> for any use. <a class="nobr">Give it a try!</a></p>
162 |           <small><a href="https://spb.io/AY3rLlt5aG">Want to support the project?</a> Any amount would be a big help. <span class="nobr">As a</span> small thank you, I&rsquo;ll send you <strong>Stackicons-Social-Complete</strong>, with a few more of my own <span class="nobr">custom icons.</small>
163 |           <a class="button darker contribute-button" href="https://spb.io/AY3rLlt5aG">Contribute</a>
164 |         </div>
165 | 
166 |       </div><!-- end .callout-panel-group -->
167 | 
168 |     </div> <!-- end .wrap -->
169 |   </section>
170 | 
171 |   <section class="font-sample wrap">
172 |     <h2 class="font-sample-name">Stackicons-Social</h2>
173 |     <div class="control-font clearfix">
174 |       <div class="control-shape">
175 |         <a class="make-icon-only nobr active">icon-only</a><a class="make-square">square</a><a class="make-r1">rounded1</a><a class="make-r2">rounded2</a><a class="make-r3">rounded3</a><a class="make-circle">circle</a>
176 |       </div>
177 |       <div class="control-color"><a class="toggle-color active">multi-color</a>
178 |       </div>
179 |     </div>
180 |     <nav class="stackicons-font-sample st-multi-color st-shape-r5">
181 |       <!-- inline-block: comment-out white space
182 |            or don't close tags, or -5px margin-right -->
183 |       <a title="AddThis" class="st-icon-addthis">Add This</a>
184 |       <a title="App.net" class="st-icon-adn">App.net</a>
185 |       <a title="Amazon" class="st-icon-amazon"><span></span>Amazon</a>
186 |       <a title="Android" class="st-icon-android"><span></span>Android</a>
187 |       <a title="Apple" class="st-icon-apple">Apple</a>
188 |       <a title="Behance" class="st-icon-behance">Behance</a>
189 |       <a title="Blogger" class="st-icon-blogger">Blogger</a>
190 |       <a title="CodePen" class="st-icon-codepen">Codepen</a>
191 |       <a title="Delicious" class="st-icon-delicious"><span></span>Delicious</a>
192 |       <a title="deviantART" class="st-icon-deviantart"><span></span>Deviant Art</a>
193 |       <a title="Digg" class="st-icon-digg">Digg</a>
194 |       <a title="Dribbble" class="st-icon-dribbble"><span></span>Dribbble</a>
195 |       <a title="Dribbble" class="st-icon-dribbble-alt"><span></span>Dribbble</a>
196 |       <a title="Dropbox" class="st-icon-dropbox">Dropbox</a>
197 |       <a title="Ebay" class="st-icon-ebay"><span></span>Ebay</a>
198 |       <a title="Email" class="st-icon-email"><span></span>Email</a>
199 |       <a class="st-icon-email2">Email</a>
200 |       <a title="Evernote" class="st-icon-evernote">Evernote</a>
201 |       <a title="Facebook" class="st-icon-facebook">Facebook</a>
202 |       <a title="Facebook" class="st-icon-facebook-alt">Facebook</a>
203 |       <a title="Flattr" class="st-icon-flattr"><span></span>Flattr</a>
204 |       <a title="Flickr" class="st-icon-flickr"><span></span>Flickr</a>
205 |       <a title="Forrst" class="st-icon-forrst"><span></span>Forrst</a>
206 |       <a title="Foursquare" class="st-icon-foursquare"><span></span>Foursquare</a>
207 |       <a title="GitHub" class="st-icon-github"><span></span>Github</a>
208 |       <a title="GitHub" class="st-icon-github-alt"><span></span>Github</a>
209 |       <a title="Gittip" class="st-icon-gittip">Gittip</a>
210 |       <a title="Gmail" class="st-icon-gmail"><span></span>Gmail</a>
211 |       <a title="Gmail" class="st-icon-gmail-alt"><span></span>Gmail</a>
212 |       <a title="Google" class="st-icon-google">Google</a>
213 |       <a title="Google+" class="st-icon-googleplus">Google+</a>
214 |       <a title="IMDb" class="st-icon-imdb"><span></span>IMDb</a>
215 |       <a title="Instagram" class="st-icon-instagram"><span></span>Instagram</a>
216 |       <a title="Kickstarter" class="st-icon-kickstarter">Kickstarter</a>
217 |       <a title="Last.fm" class="st-icon-lastfm">last.fm</a>
218 |       <a title="LinkedIn" class="st-icon-linkedin">LinkedIn</a>
219 |       <a title="Microsoft" class="st-icon-microsoft"><span></span>Microsoft</a>
220 |       <a title="Myspace" class="st-icon-myspace">Myspace</a>
221 |       <a title="Pandora" class="st-icon-pandora">Pandora</a>
222 |       <a title="PayPal" class="st-icon-paypal"><span></span>Paypal</a>
223 |       <a title="PayPal" class="st-icon-paypal2"><span></span>Paypal</a>
224 |       <a title="Picasa" class="st-icon-picasa"><span></span>Picasa</a>
225 |       <a title="Pinboard" class="st-icon-pinboard">Pinboard</a>
226 |       <a title="Pinterest" class="st-icon-pinterest"><span></span>Pinterest</a>
227 |       <a title="Rdio" class="st-icon-rdio">Rdio</a>
228 |       <a title="Reddit" class="st-icon-reddit"><span></span>Reddit</a>
229 |       <a title="RSS" class="st-icon-rss">RSS</a>
230 |       <a title="ShareThis" class="st-icon-sharethis">ShareThis</a>
231 |       <a title="Skype" class="st-icon-skype"><span></span>Skype</a>
232 |       <a title="SlideShare" class="st-icon-slideshare"><span></span>Slideshare</a>
233 |       <a title="SoundCloud" class="st-icon-soundcloud">Soundcloud</a>
234 |       <a title="Spotify" class="st-icon-spotify"><span></span>Spotify</a>
235 |       <a title="StumbleUpon" class="st-icon-stumbleupon">Stumbleupon</a>
236 |       <a title="Stack Overflow" class="st-icon-stackoverflow"><span></span>Stack Overflow</a>
237 |       <a title="Tumblr" class="st-icon-tumblr">Tumblr</a>
238 |       <a title="Twitter" class="st-icon-twitter">Twitter</a>
239 |       <a title="Vimeo" class="st-icon-vimeo">Vimeo</a>
240 |       <a title="Vine" class="st-icon-vine">Vine</a>
241 |       <a title="Windows" class="st-icon-windows">Windows</a>
242 |       <a title="Windows 7" class="st-icon-windows7"><span></span>Windows 7</a>
243 |       <a title="Wordpress" class="st-icon-wordpress">Wordpress</a>
244 |       <a title="Xing" class="st-icon-xing"><span></span>Xing</a>
245 |       <a title="Yahoo" class="st-icon-yahoo"><span></span>Yahoo</a>
246 |       <a title="Yelp" class="st-icon-yelp"><span></span>Yelp</a>
247 |       <a title="YouTube" class="st-icon-youtube"><span></span>YouTube</a>
248 |       <a title="YouTube" class="st-icon-youtube2"><span></span>YouTube</a>
249 |       <a title="YouTube" class="st-icon-youtube-alt"><span></span>YouTube</a>
250 |       <a title="Zerply" class="st-icon-zerply">Zerply</a>
251 |       <a title="Search" class="st-icon-search">Search</a>
252 |       <a class="st-icon-search-alt"><span></span>Search</a>
253 |       <a title="Menu" class="st-icon-menu">Menu</a>
254 |       <a title="Menu" class="st-icon-menu-alt">Menu</a>
255 |       <a title="Menu" class="st-icon-menu-alt2">Menu</a>
256 |       <a title="More..." class="st-icon-more">More&#8230;</a>
257 |       <a title="Submenu" class="st-icon-triangle-down">More</a>
258 |     </nav>
259 |     <a class="toggle-ssmin">View Stackicons-Social</a>
260 |   </section> <!-- end .font-sample wrap -->
261 |   <p class="wrap"><small>*A smaller font, Stackicons-Social-Minimal, provides a subset of more commonly used icons.</small></p>
262 |   <section class="usage wrap">
263 |     <h2>Using Stackicons</h2>
264 |     <p><strong>Stackicons-Social</strong> comes with default CSS that you can link to or @import. There&rsquo;s a usage guide to get you started, along with <a href="examples.html">some examples</a>.</p>
265 |     <p>If you&rsquo;re comfortable using Sass, you can customize things extensively just by changing variables in the Sass construction kit files: brand colors, default size, shape and spacing, hover effects and more.<p>
266 |     <p>Questions? Suggestions? Need a custom icon font for your own project? <span class="nobr"><a href="mailto:&#x70;&#x61;&#x72;&#x6B;&#x65;&#x72;&#x40;&#x73;&#x74;&#x61;&#x63;&#x6B;&#x69;&#x63;&#x6F;&#x6E;&#x73;&#x2E;&#x63;&#x6F;&#x6D;">Email me</a>.</span></p>
267 | <a class="button button-small">Download it Free</a><a class="button darker button-small" href="https://spb.io/AY3rLlt5aG">&nbsp;Contribute Now&nbsp;</a>
268 |   </section
269 | </div> <!-- end .wrap -->
270 | 
271 | <footer>
272 | 	  <div class="wrap clearfix">
273 |       <div class="copyright">
274 |         <p>Copyright &#169; <script language="JavaScript" type="text/javascript">document.write((new Date()).getFullYear());</script><noscript>2014</noscript> Parker Bennett.</p>
275 |         <p>Stackicons-Social is <a href="http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web" target="_blank">SIL Open Font</a> <span class="link-color">and</span> <a class="nobr"href="http://opensource.org/licenses/MIT" target="_blank">MIT licensed</a>.</p>
276 |         <p>All copyrights and trademarks are the property <span class="nobr">of their respective owners.</span></p>
277 |       </div>
278 |     <small class="right text-right">Hosting by <a href="http://mdtm.pl/1lTyAWF" target="_blank">Media Temple</a>.</small>
279 | </footer>
280 | 
281 | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
282 | <script>window.jQuery || document.write('<script src="js/vendor/jquery.js"><\/script>')</script>
283 | 
284 | <script>
285 |     $('.toggle-color').click(function () {
286 |       $(this).toggleClass('active');
287 |       $('.stackicons-font-sample').toggleClass('st-multi-color');
288 |     });
289 | 
290 |     $('.make-square').click(function () {
291 |       $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
292 |       $(this).addClass('active');
293 |       $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r0');
294 |     });
295 | 
296 |     $('.make-r1').click(function () {
297 |       $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
298 |       $(this).addClass('active');
299 |       $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r1');
300 |     });
301 | 
302 |     $('.make-r2').click(function () {
303 |       $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
304 |       $(this).addClass('active');
305 |       $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r2');
306 |     });
307 | 
308 |     $('.make-r3').click(function () {
309 |       $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
310 |       $(this).addClass('active');
311 | $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r3');
312 |     });
313 | 
314 |     $('.make-circle').click(function () {
315 |       $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
316 |       $(this).addClass('active');
317 |       $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r4');
318 |     });
319 | 
320 |     $('.make-icon-only').click(function () {
321 |       $('.make-square, .make-r1, .make-r2, .make-r3, .make-circle, .make-icon-only').removeClass('active')
322 |       $(this).addClass('active');
323 |       $('.stackicons-font-sample').removeClass('st-shape-r0 st-shape-r1 st-shape-r2 st-shape-r3 st-shape-r4 st-shape-r5').addClass('st-shape-r5');
324 |     });
325 | 
326 |     $('.toggle-ssmin').click(function () {
327 |       $(this).toggleClass('active');
328 |       $('.font-sample-name').toggleClass('active');
329 |       $('.stackicons-font-sample .st-icon-addthis, .stackicons-font-sample .st-icon-amazon, .stackicons-font-sample .st-icon-android, .stackicons-font-sample .st-icon-apple, .stackicons-font-sample .st-icon-behance, .stackicons-font-sample .st-icon-blogger, .stackicons-font-sample .st-icon-delicious, .stackicons-font-sample .st-icon-deviantart, .stackicons-font-sample .st-icon-digg, .stackicons-font-sample .st-icon-dropbox, .stackicons-font-sample .st-icon-ebay, .stackicons-font-sample .st-icon-evernote, .stackicons-font-sample .st-icon-flattr, .stackicons-font-sample .st-icon-forrst, .stackicons-font-sample .st-icon-foursquare, .stackicons-font-sample .st-icon-gittip, .stackicons-font-sample .st-icon-google, .stackicons-font-sample .st-icon-imdb, .stackicons-font-sample .st-icon-kickstarter, .stackicons-font-sample .st-icon-lastfm, .stackicons-font-sample .st-icon-microsoft, .stackicons-font-sample .st-icon-myspace, .stackicons-font-sample .st-icon-pandora, .stackicons-font-sample .st-icon-paypal, .stackicons-font-sample .st-icon-paypal2, .stackicons-font-sample .st-icon-picasa, .stackicons-font-sample .st-icon-rdio, .stackicons-font-sample .st-icon-reddit, .stackicons-font-sample .st-icon-sharethis, .stackicons-font-sample .st-icon-skype, .stackicons-font-sample .st-icon-slideshare, .stackicons-font-sample .st-icon-soundcloud, .stackicons-font-sample .st-icon-spotify, .stackicons-font-sample .st-icon-stumbleupon, .stackicons-font-sample .st-icon-stackoverflow, .stackicons-font-sample .st-icon-vine, .stackicons-font-sample .st-icon-windows, .stackicons-font-sample .st-icon-windows7, .stackicons-font-sample .st-icon-wordpress, .stackicons-font-sample .st-icon-xing, .stackicons-font-sample .st-icon-yahoo, .stackicons-font-sample .st-icon-yelp, .stackicons-font-sample .st-icon-zerply, .stackicons-font-sample .st-icon-search-alt, .stackicons-font-sample .st-icon-menu-alt, .stackicons-font-sample .st-icon-menu-alt2, .stackicons-font-sample .st-icon-more').toggleClass('hide');
330 |     });
331 | 
332 | </script>
333 | 
334 | <script>
335 |   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
336 |   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
337 |   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
338 |   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
339 | 
340 |   ga('create', 'UA-47890813-1', 'stackicons.com');
341 |   ga('send', 'pageview');
342 | 
343 | </script>
344 | </body>
345 | 
346 | </html>
347 | 


--------------------------------------------------------------------------------
/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/parkerbennett/stackicons/cd4a7f89f94785f60986545800a3a3fc921dacb2/og-image.png


--------------------------------------------------------------------------------
/scss/_construction-kit-stackicons-social.scss:
--------------------------------------------------------------------------------
  1 | //  ****************************************
  2 | // |                                        |
  3 | // |  STACKICONS-SOCIAL "CONSTRUCTION KIT"  |
  4 | // |  VARIABLES & MIXINS                    |
  5 | // |                                        |
  6 | //  ****************************************
  7 | 
  8 | // This is the SCSS "Construction Kit" that will 
  9 | // generate default CSS for Stackicons-Social,
 10 | // an icon font designed for added flexibility.
 11 | 
 12 | // Modify the $variables and @mixins below to
 13 | // change default colors and shapes for icons, 
 14 | // formulate variants for brand-colors, etc.
 15 | 
 16 | // This file is @imported into 
 17 | // _css-defaults-stackicons-social (as well as
 18 | // stackicons.scss).
 19 | 
 20 | 
 21 | // **** CONSTRUCTION KIT VARIABLES ****
 22 | 
 23 | // ---- BUTTON SIZE & SHAPE DEFAULTS ---- /
 24 | 
 25 | // The values set below determine the default 
 26 | // button shape (or icon-only) of the individual 
 27 | // .st-icon-(brand) classes generated below.
 28 | 
 29 | 
 30 | // **** CHOOSE DEFAULT BUTTON SHAPE & SIZE ****
 31 | 
 32 | // sq = square, r1 = slightly rounded (Android), 
 33 | // r2 = rounded, r3 = more rounded (iOS 7), 
 34 | // cir = circle, icon = icon only 
 35 | 
 36 | $btn-shape-default: r1 !default;  // Choices: sq, r1, r2, r3, cir, icon
 37 | 
 38 | // referenced in _multi-color-stackicons-social,
 39 | // but may be overridden in that file
 40 | 
 41 | $btn-size-default: 1.815em; // (1.7em = 32px, 1.815em = 34px, 1.92em = 36px, 2.135em = 40px)
 42 | 
 43 | // Padding gives users a bigger touch-target.  
 44 | // (We actually create "fake" padding with this value 
 45 | // since "stacked" elements use position: absolute.)
 46 | 
 47 | $btn-padding: .143em; // 4px (.214 = 6px)
 48 | 
 49 | 
 50 | // ---- COLORS & SHADOWS ---- /
 51 | 
 52 | // DROPSHADOW DEFAULT COLORS:
 53 | 
 54 | // non-rgba fallback
 55 | $color-shadow: $grey-light !default; // #999
 56 | 
 57 | $color-shadow-rgba: $grey-light-rgba !default; // rgba(0,0,0, 0.395)
 58 | 
 59 | $color-glowshadow: $grey-alt2 !default; // #777
 60 | 
 61 | $color-glowshadow-rgba: $grey-alt2-rgba !default; // rgba(0,0,0, 0.528)
 62 | 
 63 | 
 64 | // **** CHOOSE DEFAULT COLOR & COLOR-HOVER STYLES **** /
 65 | 
 66 | // (Brand colors are @imported from _colors-social-2014.
 67 | // Button and icon colors can be different, e.g., in 
 68 | // evernote the button is green, elephant icon is grey.)
 69 | 
 70 | // There are 4 "color style" choices for buttons:
 71 | 
 72 | // 1) single-color:         all buttons & icons the same color
 73 | // 2) brand-color:          buttons & icons are the brand color
 74 | // 3) brand-color-variant:  brand-color is adjusted by @mixin (below)
 75 | // 4) embossed-only:        darkened background-color, embossed
 76 | 
 77 | $btn-color-style-default: brand-color !default; 
 78 | 
 79 | 
 80 | // There are 3 "hover style" choices:
 81 | 
 82 | // single-color-hover:  all buttons & icons same hover color
 83 | // brand-color:         brand color on hover
 84 | // brand-color-hover:   brand-color is adjusted by @mixin (below)
 85 | 
 86 | $btn-color-hover-default: brand-color-hover !default;
 87 | 
 88 | 
 89 | 
 90 | // DEFINE "SINGLE-COLOR" (icons same color):
 91 | 
 92 | $btn-single-color-default: $grey-lighter !default;
 93 | 
 94 | // if no rgba, set to false or null
 95 | $btn-single-color-default-rgba: $grey-lighter-rgba !default;
 96 | 
 97 | 
 98 | 
 99 | // DEFINE "SINGLE-COLOR-HOVER" (hover color all the same):
100 | 
101 | $btn-single-color-default-hover: $grey !default;
102 | 
103 | // if no rgba, set to false or null
104 | $btn-single-color-default-rgba-hover: $grey-rgba !default;
105 | 
106 | 
107 | 
108 | // DEFINE "EMBOSSED-ONLY" (darkened bg color):
109 | 
110 | // background behind icons
111 | 
112 | $color-background: $white !default;
113 | 
114 | $emboss-darken-background-by: 7.5;
115 | 
116 | $color-background-embossed: darken($color-background, $emboss-darken-background-by);
117 | 
118 | // shadows & highlights
119 | 
120 | // non-rgba fallback
121 | $emboss-shadow: $grey-light-alt2 !default; // #bbb
122 | 
123 | $emboss-shadow-rgba: $grey-light-alt2-rgba !default; // rgba(0, 0, 0, 0.263);
124 | 
125 | // non-rgba fallback
126 | $emboss-highlight: white !default;
127 | 
128 | $emboss-highlight-rgba: rgba($emboss-highlight, 0.5) !default;
129 | 
130 | 
131 | .st-embossed {
132 |   // non-rgba fallback
133 |   text-shadow: 0 -1px 0 $emboss-shadow, 
134 |     0 1px 0 $emboss-highlight;
135 |   text-shadow: 0 -1px $emboss-shadow-rgba,
136 |     // softens slightly
137 |     0 -1px 1px rgba(0, 0, 0, 0.05),
138 |     0 1px 0 $emboss-highlight-rgba;
139 | }
140 | 
141 | .st-raised {
142 |   // non-rgba fallback
143 |   text-shadow: 0 1px 0 $emboss-shadow, 
144 |     0 -1px 0 $emboss-highlight;
145 |   text-shadow: 0 1px $emboss-shadow-rgba,
146 |     // softens slightly
147 |     0 1px 1px rgba(0, 0, 0, 0.05),
148 |     0 -1px 0 $emboss-highlight-rgba;
149 | }
150 | 
151 | 
152 | // DEFINE "BRAND-COLOR-VARIANT":
153 | //   lighten or darken, saturate or desaturate, change alpha
154 | //   percentage variables required for "scale-color" function:
155 | 
156 | $brand-color-lighten-by: 60%;  // (-100 to 0 to 100%) negative darkens
157 | 
158 | $brand-color-saturate-by: -30%;  // (-100 to 0 to 100%) negative desaturates
159 | 
160 | $brand-color-alpha: 50%;  // (0 to 100%) 0 is completely transparent
161 | 
162 | 
163 | // DEFINE "BRAND-COLOR-HOVER":
164 | //   lighten or darken, saturate or desaturate, change alpha
165 | //   percentage variables required for "scale-color" function:
166 | 
167 | $brand-color-hover-lighten-by: 50%;  // (-100 to 0 to 100%) negative darkens
168 | 
169 | $brand-color-hover-saturate-by: 5%;  // (-100 to 0 to 100%) negative desaturates
170 | 
171 | $brand-color-hover-alpha: 100%;  // (0 to 100%) 0 is completely transparent
172 | 
173 | 
174 | // ---- MIXINS ---- /
175 | 
176 | // brand-color-variant - btn or icon, @include for each
177 | 
178 | // if the $brand-color lightness is low (<25)
179 | // we don't pump up the saturation...
180 | 
181 | @mixin adjust-brand-color ($brand-color:$grey-lighter-alt, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha) {
182 |   // dark color, and we're lightening and saturating
183 |   @if lightness($brand-color) < 25 and $lightness > 0 and $saturation > 0 {
184 |     // non-rgba fallback
185 |     color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by*1.1);
186 |     @if $brand-color-alpha < 100 {
187 |       color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by*1.1, $alpha:$brand-color-alpha);
188 |     }
189 |   }
190 |   // dark color, and we're lightening but either not saturating or desaturating
191 |   @else if lightness($brand-color) < 25 and $lightness > 0 {
192 |     // non-rgba fallback
193 |     color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by*1.1);
194 |     @if $brand-color-alpha < 100 {
195 |       color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by*1.1, $alpha:$brand-color-alpha);
196 |     }
197 |   }
198 |   // very desaturated color and we're saturating
199 |   @else if saturation($brand-color) < 5 and $saturation > 0 {
200 |     // non-rgba fallback
201 |     color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by);
202 |     @if $brand-color-alpha < 100 {
203 |       color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha);
204 |     }
205 |   }
206 |   @else if saturation($brand-color) < 5 {
207 |     // non-rgba fallback
208 |     color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by);
209 |     @if $brand-color-alpha < 100 {
210 |       color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha);
211 |     }
212 |   }
213 |   @else {
214 |     // non-rgba fallback
215 |     color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by);
216 |     @if $brand-color-alpha < 100 {
217 |       color: scale-color($brand-color, $saturation:$brand-color-saturate-by, $lightness:$brand-color-lighten-by, $alpha:$brand-color-alpha);
218 |     }
219 |   }
220 | }
221 | 
222 | // brand-color-hover - btn or icon, @include for each
223 | 
224 | @mixin adjust-brand-color-hover ($brand-color:$grey-lighter-alt, $saturation:$brand-color-hover-saturate-by, $lightness:$brand-color-hover-lighten-by, $alpha:$brand-color-hover-alpha) {
225 |   @if lightness($brand-color) < 25 and $lightness > 0 {
226 |     // non-rgba fallback
227 |     color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-hover-lighten-by*1.1);
228 |     @if $brand-color-alpha < 100 {
229 |       color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-hover-lighten-by*1.1, $alpha:$brand-color-hover-alpha);
230 |     }
231 |   }
232 |   @else if saturation($brand-color) < 5 {
233 |     // non-rgba fallback
234 |     color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-hover-lighten-by);
235 |     @if $brand-color-alpha < 100 {
236 |       color: scale-color($brand-color, $saturation:0%, $lightness:$brand-color-hover-lighten-by, $alpha:$brand-color-hover-alpha);
237 |     }
238 |   }
239 |   @else {
240 |     // non-rgba fallback
241 |     color: scale-color($brand-color, $saturation:$brand-color-hover-saturate-by, $lightness:$brand-color-hover-lighten-by);
242 |     @if $brand-color-alpha < 100 {
243 |       color: scale-color($brand-color, $saturation:$brand-color-hover-saturate-by, $lightness:$brand-color-hover-lighten-by, $alpha:$brand-color-hover-alpha);
244 |     }
245 |   }
246 | }
247 | 
248 | 
249 | // (mixin for "multi-color" is in separate _partial file)
250 | 
251 | 
252 | // MIXINS FOR TEXT-SHADOWS
253 | 
254 | // Stackicons create shapes using font characters not CSS, 
255 | // so we use text-shadows not box-shadows. IMPORTANT NOTE:
256 | // There's no text-shadow support in IE 8 or 9, and some 
257 | // other issues: http://caniuse.com/#search=text-shadow.
258 | 
259 | // Workaround if you want shadows on buttons in IE8 or 9: 
260 | // use the icon-only version of the icons and margins  
261 | // instead of padding, then style the containing element.
262 | 
263 | $shadow-size: 1px;
264 | $shadow-blur: 1px;
265 | $color-glow: white;
266 | $color-glow-rgba: rgba($white, 0.67);
267 | 
268 | @mixin dropshadow ($shadow-size: 1px, $shadow-blur: 1px, $color-shadow: $color-shadow, $color-shadow-rgba:$color-shadow-rgba) {
269 |   // non-rgba fallback
270 |   text-shadow:      0 $shadow-size $shadow-blur $color-shadow;
271 |   text-shadow:      0 $shadow-size $shadow-blur $color-shadow-rgba; }
272 | 
273 | // and in class form:
274 | .st-dropshadow {
275 |   // non-rgba fallback
276 |   text-shadow:      0 $shadow-size $shadow-blur $color-shadow;
277 |   text-shadow:      0 $shadow-size $shadow-blur $color-shadow-rgba;   
278 | }
279 | 
280 | @mixin glow ($shadow-blur: 6px, $color-glow: white, $color-glow-rgba:rgba(white, 0.67)) {
281 |   // non-rgba fallback
282 |   text-shadow:      0 0 $shadow-blur $color-glow;
283 |   text-shadow:      0 0 $shadow-blur $color-glow-rgba; }
284 | 
285 | // and in class form:
286 | .st-glow {
287 |   // non-rgba fallback
288 |   text-shadow:      0 0 $shadow-blur $color-glow;
289 |   text-shadow:      0 0 $shadow-blur $color-glow-rgba; 
290 | }
291 | 
292 | @mixin glowshadow ($shadow-blur: 6px, $color-glow:$color-glowshadow, $color-glow-rgba:$color-glowshadow-rgba) {
293 |   // non-rgba fallback
294 |   text-shadow:      0 0 $shadow-blur $color-glow;
295 |   text-shadow:      0 0 $shadow-blur $color-glow-rgba; }
296 | 
297 | // and in class form:
298 | .st-glowshadow {
299 |   // non-rgba fallback
300 |   text-shadow:      0 0 $shadow-blur $color-glowshadow;
301 |   text-shadow:      0 0 $shadow-blur $color-glowshadow-rgba; 
302 | }
303 | 
304 | // .st-embossed and .st-raised are classes we can extend, here in @mixin form...
305 | 
306 | @mixin embossed ($emboss-shadow, $emboss-shadow-rgba, $emboss-highlight-rgba) {
307 |   // non-rgba fallback
308 |   text-shadow:      0 -1px 0 $emboss-shadow, 
309 |                     0 1px 0 $emboss-highlight;
310 |   text-shadow:      0 -1px $emboss-shadow-rgba,
311 |                     // softens slightly
312 |                     0 -1px 1px rgba(0, 0, 0, 0.05),
313 |                     0 1px 0 emboss-highlight-rgba;
314 | }
315 | 
316 | // .st-embossed and .st-raised are classes we can extend, here in @mixin form...
317 | 
318 | @mixin embossed ($emboss-shadow:$grey-light-alt2, $emboss-shadow-rgba:$grey-light-alt2-rgba, $emboss-highlight-rgba:rgba(white,0.5)) {
319 |   // non-rgba fallback
320 |   text-shadow:      0 -1px 0 $emboss-shadow, 
321 |                     0 1px 0 $emboss-highlight;
322 |   text-shadow:      0 -1px $emboss-shadow-rgba,
323 |                     // softens slightly
324 |                     0 -1px 1px rgba(0, 0, 0, 0.05),
325 |                     0 1px 0 emboss-highlight-rgba;
326 | }
327 | 
328 | @mixin raised ($emboss-shadow:$grey-light-alt2, $emboss-shadow-rgba:$grey-light-alt2-rgba, $emboss-highlight-rgba:rgba(white,0.5)) {
329 |   // non-rgba fallback
330 |   text-shadow:      0 1px 0 $emboss-shadow, 
331 |                     0 -1px 0 $emboss-highlight;
332 |   text-shadow:      0 1px $emboss-shadow-rgba,
333 |                     // softens slightly
334 |                     0 1px 1px rgba(0, 0, 0, 0.05),
335 |                     0 -1px 0 $emboss-highlight-rgba;
336 | }
337 | 
338 | @mixin threedeetext ($color) {
339 |   color: $color;
340 |   text-shadow:      0 2px 0 darken($color, 14%),
341 |                     0 4px 0 darken($color, 16%),
342 |                     0 6px 0 darken($color, 18%),
343 |                     0 8px 0 darken($color, 20%),
344 |                     3px 8px 15px rgba(0,0,0,0.1),
345 |                     3px 8px 5px rgba(0,0,0,0.3);
346 | }
347 | 
348 | // box-shadows if you need them...
349 | 
350 | @mixin dropshadow-box ($shadow-size: 1px, $shadow-blur: 1px, $color-shadow: $color-shadow, $color-shadow-rgba:$color-shadow-rgba) {
351 |    -moz-box-shadow:    0 $shadow-size $shadow-blur $color-shadow;
352 |    -webkit-box-shadow: 0 $shadow-size $shadow-blur $color-shadow;
353 |    box-shadow:         0 $shadow-size $shadow-blur $color-shadow;
354 |    -moz-box-shadow:    0 $shadow-size $shadow-blur $color-shadow-rgba;
355 |    -webkit-box-shadow: 0 $shadow-size $shadow-blur $color-shadow-rgba;
356 |    box-shadow:         0 $shadow-size $shadow-blur $color-shadow-rgba; }
357 | 
358 | @mixin glow-box ($shadow-blur: 6px, $color-glow: $white, $color-glow-rgba:rgba($white, 0.67)) {
359 |    -moz-box-shadow:    0 0 $shadow-blur $color-glow;
360 |    -webkit-box-shadow: 0 0 $shadow-blur $color-glow;
361 |    box-shadow:         0 0 $shadow-blur $color-glow;
362 |    -moz-box-shadow:    0 0 $shadow-blur $color-glow-rgba;
363 |    -webkit-box-shadow: 0 0 $shadow-blur $color-glow-rgba;
364 |    box-shadow:         0 0 $shadow-blur $color-glow-rgba; }
365 | 
366 | @mixin glowshadow-box ($shadow-blur: 6px, $color-glow:$color-shadow, $color-glow-rgba:$color-shadow-rgba) {
367 |    -moz-box-shadow:    0 0 $shadow-blur $color-glow;
368 |    -webkit-box-shadow: 0 0 $shadow-blur $color-glow;
369 |    box-shadow:         0 0 $shadow-blur $color-glow;
370 |    -moz-box-shadow:    0 0 $shadow-blur $color-glow-rgba;
371 |    -webkit-box-shadow: 0 0 $shadow-blur $color-glow-rgba;
372 |    box-shadow:         0 0 $shadow-blur $color-glow-rgba; }
373 | 
374 | 
375 | // MIXINS FOR TRANSITIONS...
376 | 
377 | $transition-dur: .2s; // 0 for no transition duration
378 | 
379 | $transition-ease: ease-out; 
380 | // transition-timing-function - choices: 
381 | //     ease, linear, ease-in, ease-out, 
382 | //     ease-in-out, step-start. step-end
383 | 
384 | @mixin transition-color {
385 |   -webkit-transition: color $transition-dur $transition-ease,
386 |                  background $transition-dur $transition-ease;
387 |      -moz-transition: color $transition-dur $transition-ease,
388 |                  background $transition-dur $transition-ease;
389 |        -o-transition: color $transition-dur $transition-ease,
390 |                  background $transition-dur $transition-ease;
391 |       -ms-transition: color $transition-dur $transition-ease,
392 |                  background $transition-dur $transition-ease;
393 |           transition: color $transition-dur $transition-ease,
394 |                  background $transition-dur $transition-ease;
395 | }
396 | 
397 | @mixin transition-color-shadow {
398 |   -webkit-transition: color $transition-dur $transition-ease,
399 |                  background $transition-dur $transition-ease,
400 |                 text-shadow $transition-dur $transition-ease;
401 |      -moz-transition: color $transition-dur $transition-ease,
402 |                  background $transition-dur $transition-ease,
403 |                 text-shadow $transition-dur $transition-ease;
404 |        -o-transition: color $transition-dur $transition-ease,
405 |                  background $transition-dur $transition-ease,
406 |                 text-shadow $transition-dur $transition-ease;
407 |       -ms-transition: color $transition-dur $transition-ease,
408 |                  background $transition-dur $transition-ease,
409 |                 text-shadow $transition-dur $transition-ease;
410 |           transition: color $transition-dur $transition-ease,
411 |                  background $transition-dur $transition-ease,
412 |                 text-shadow $transition-dur $transition-ease;
413 | }
414 | 
415 | @mixin transition-all {
416 |   -webkit-transition: all $transition-dur $transition-ease;
417 |      -moz-transition: all $transition-dur $transition-ease;
418 |        -o-transition: all $transition-dur $transition-ease;
419 |       -ms-transition: all $transition-dur $transition-ease;
420 |           transition: all $transition-dur $transition-ease;
421 | }
422 | 
423 | 
424 | 


--------------------------------------------------------------------------------
/scss/_fonts-stackicons-social.scss:
--------------------------------------------------------------------------------
 1 | /* FONTS */
 2 | 
 3 | /* Stackicons-Social (Standard) */
 4 | // If you need only the usual suspects for icons
 5 | // you might consider using stackicons-social-minimal
 6 | 
 7 | @font-face {
 8 |   font-family: 'Stackicons-Social';
 9 |   src: url("../fonts/Stackicons/Stackicons-Social.eot");
10 |   /* IE9 Compat Modes */
11 |   src: url("../fonts/Stackicons/Stackicons-Social.eot?#iefix") format("embedded-opentype"), url("../fonts/Stackicons/Stackicons-Social.woff") format("woff"), url("../fonts/Stackicons/Stackicons-Social.ttf") format("truetype"), url("../fonts/Stackicons/Stackicons-Social.svg#76cc4077294aa89eeb6c5fa684bb9048") format("svg");
12 |   /* Legacy iOS */
13 |   font-style: normal !important;
14 |   font-weight: 400 !important;
15 |   -webkit-font-smoothing: antialiased;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   font-smoothing: antialiased;
18 |   speak: none;
19 | }
20 | 
21 | 


--------------------------------------------------------------------------------
/scss/_multi-color-kit-stackicons-social.scss:
--------------------------------------------------------------------------------
  1 | /* STACKICONS-SOCIAL "MULTI-COLOR" CLASSES
  2 | 
  3 | Using absolute positioning, we stack multiple 
  4 | font characters to create "multi-color" icons, 
  5 | e.g., the blue & pink dots in the Flickr logo. 
  6 | 
  7 | Often, the .st-multi-color version is simply 
  8 | a solid button b.g. shape with a white icon.
  9 | This allows us to use text-shadow effects on 
 10 | the button and logo separately (in the single 
 11 | color version the logo is "cut out" of b.g.).
 12 | 
 13 | There is a default button shape for multi-color 
 14 | icons, $btn-shape-c0-default, that is set in 
 15 | _unicodes-stackicons-social.scss. It mirrors 
 16 | the $btn-shape-default set for single color icons 
 17 | in _construction-kit-stackicons-social.scss */
 18 | 
 19 | 
 20 | // **** VARIABLES **** /
 21 | 
 22 | // **** CHOOSE "MULTI-COLOR" COLOR-STYLE... **** /
 23 | 
 24 | // For .st-multi-color icons there are two "color-style" choices:
 25 | 
 26 | // brand-color:         brand color (_colors-social-2014.scss)
 27 | // brand-color-variant: brand-color is adjusted by mixin
 28 | //                      (no rgba, use opacity on parent instead)
 29 | 
 30 | // For .st-multi-color icons, there are 2 "hover style" choices:
 31 | 
 32 | // brand-color:         brand color on hover
 33 | // brand-color-hover:   brand-color is adjusted by mixin
 34 | 
 35 | 
 36 | $multi-color-default: brand-color !default;
 37 | 
 38 | $multi-color-hover-default: brand-color-hover !default;
 39 | 
 40 | 
 41 | // **** CHOOSE DEFAULT COLORS **** /
 42 | 
 43 | // default color for "generic" multi-color icon -- 
 44 | // usually white, e.g., white "f" on facebook blue bg. 
 45 | 
 46 | $color-multi-color-icon-default: $white !default;
 47 | 
 48 | $color-multi-color-bg-default: $grey-lightest-alt2 !default; // veerrry light grey #f1f1f1
 49 | 
 50 | 
 51 | // **** CHOOSE DEFAULT EFFECTS **** /
 52 | 
 53 | // button and icon effects - glow, dropshadow, etc. (@mixins in _construction-kit)
 54 | 
 55 | // choices: dropshadow, glow, glowshadow, false
 56 | 
 57 | $multi-color-bg-effect: false; 
 58 | 
 59 | $multi-color-bg-effect-hover: false;
 60 | 
 61 | $multi-color-icon-effect: false;
 62 | 
 63 | $multi-color-icon-effect-hover: dropshadow;
 64 | 
 65 | // when there's no button background, just the icon...
 66 | 
 67 | $multi-color-icon-only-effect: false;
 68 | 
 69 | $multi-color-icon-only-effect-hover: dropshadow;
 70 | 
 71 | 
 72 | @mixin shadow-effect($target:bg) {
 73 |   @if $target == bg {
 74 |     @if $multi-color-bg-effect == dropshadow {
 75 |       @include dropshadow;
 76 |     }
 77 |     @else if $multi-color-bg-effect == glow {
 78 |       @include glow;
 79 |     }
 80 |     @else if $multi-color-bg-effect == glowshadow {
 81 |       @include glowshadow;
 82 |     }
 83 |     @else if $multi-color-bg-effect == embossed {
 84 |       @include embossed;
 85 |     }
 86 |     @else if $multi-color-bg-effect == raised {
 87 |       @include raised;
 88 |     }
 89 |     @else {
 90 |       text-shadow: none;
 91 |     }
 92 |   }
 93 |   @else if $target == bg-hover {
 94 |     @if $multi-color-bg-effect-hover == dropshadow {
 95 |       @include dropshadow;
 96 |     }
 97 |     @else if $multi-color-bg-effect-hover == glow {
 98 |       @include glow;
 99 |     }
100 |     @else if $multi-color-bg-effect-hover == glowshadow {
101 |       @include glowshadow;
102 |     }
103 |     @else if $multi-color-bg-effect-hover == embossed {
104 |       @include embossed;
105 |     }
106 |     @else if $multi-color-bg-effect-hover == raised {
107 |       @include raised;
108 |     }
109 |     @else {
110 |       text-shadow: none;
111 |     }
112 |   }
113 |   @else if $target == icon {
114 |     @if $multi-color-icon-effect == dropshadow {
115 |       @include dropshadow;
116 |     }
117 |     @else if $multi-color-icon-effect == glow {
118 |       @include glow;
119 |     }
120 |     @else if $multi-color-icon-effect == glowshadow {
121 |       @include glowshadow;
122 |     }
123 |     @else if $multi-color-icon-effect == embossed {
124 |       @include embossed;
125 |     }
126 |     @else if $multi-color-icon-effect == raised {
127 |       @include raised;
128 |     }
129 |     @else {
130 |       text-shadow: none;
131 |     }
132 |   }
133 |   @else if $target == icon-hover {
134 |       @if $multi-color-icon-effect-hover == dropshadow {
135 |       @include dropshadow;
136 |     }
137 |     @else if $multi-color-icon-effect-hover == glow {
138 |       @include glow;
139 |     }
140 |     @else if $multi-color-icon-effect-hover == glowshadow {
141 |       @include glowshadow;
142 |     }
143 |     @else if $multi-color-icon-effect-hover == embossed {
144 |       @include embossed;
145 |     }
146 |     @else if $multi-color-icon-effect-hover == raised {
147 |       @include raised;
148 |     }
149 |     @else {
150 |       text-shadow: none;
151 |     }
152 |   }
153 |   @else if $target == icon-only {
154 |     @if $multi-color-icon-only-effect == dropshadow {
155 |       @include dropshadow;
156 |     }
157 |     @else if $multi-color-icon-only-effect == glow {
158 |       @include glow;
159 |     }
160 |     @else if $multi-color-icon-only-effect == glowshadow {
161 |       @include glowshadow;
162 |     }
163 |     @else if $multi-color-icon-only-effect == embossed {
164 |       @include embossed;
165 |     }
166 |     @else if $multi-color-icon-only-effect == raised {
167 |       @include raised;
168 |     }
169 |     @else {
170 |       text-shadow: none;
171 |     }
172 |   }
173 |   @else if $target == icon-only-hover {
174 |     @if $multi-color-icon-only-effect-hover == dropshadow {
175 |       @include dropshadow;
176 |     }
177 |     @else if $multi-color-icon-only-effect-hover == glow {
178 |       @include glow;
179 |     }
180 |     @else if $multi-color-icon-only-effect-hover == glowshadow {
181 |       @include glowshadow;
182 |     }
183 |     @else if $multi-color-icon-only-effect-hover == embossed {
184 |       @include embossed;
185 |     }
186 |     @else if $multi-color-icon-only-effect-hover == raised {
187 |       @include raised;
188 |     }
189 |     @else {
190 |       text-shadow: none;
191 |     }
192 |   }
193 | } // end @shadow-effect
194 | 
195 | 
196 | // **** DEFINE "BRAND-COLOR-VARIANT"... **** /
197 | 
198 | //   lighten or darken, saturate or desaturate, change alpha
199 | //   percentage variables required for "scale-color" function:
200 | 
201 | $multi-color-lighten-by: 40%;  // (-100 to 0 to 100%) negative darkens
202 | 
203 | $multi-color-saturate-by: -25%;  // (-100 to 0 to 100%) negative desaturates
204 | 
205 | $multi-color-alpha: 50%;  // (0 to 100%) 0 is completely transparent
206 | 
207 | 
208 | // **** DEFINE "BRAND-COLOR-HOVER"... **** /
209 | 
210 | //   lighten or darken, saturate or desaturate, change alpha
211 | //   percentage variables required for "scale-color" function:
212 | 
213 | $multi-color-hover-lighten-by: 35%;  // (-100 to 0 to 100%) negative darkens
214 | 
215 | $multi-color-hover-saturate-by: 4%;  // (-100 to 0 to 100%) negative desaturates
216 | 
217 | $multi-color-hover-alpha: 100%;  // (0 to 100%) 0 is completely transparent
218 | 
219 | 
220 | // ---- MIXINS ---- /
221 | 
222 | // brand-color-variant - btn or icon, @include for each
223 | 
224 | // If the $brand-color lightness is low (<25) and saturation 
225 | // isn't super-high (<90) we lighten more and don't change the 
226 | // saturation. If saturation is very low (<5) we don't change it.
227 | // We don't change alpha here, as stacked rgba colors will mix.
228 | // Instead, we change opacity on the parent element down below...
229 | 
230 | @mixin adjust-multi-color ($brand-color:$grey-lighter-alt, $saturation:$multi-color-saturate-by, $lightness:$multi-color-lighten-by, $alpha:$multi-color-alpha) {
231 |   @if lightness($brand-color) < 25 and saturation($brand-color) < 95 and $lightness > 0 {
232 |     color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-lighten-by*1.1);
233 |   }
234 |   @else if saturation($brand-color) < 5 or saturation($brand-color) > 95 {
235 |     color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-lighten-by);
236 |   }
237 |   @else {
238 |     color: scale-color($brand-color, $saturation:$multi-color-saturate-by, $lightness:$multi-color-lighten-by);
239 |   }
240 | }
241 | 
242 | // brand-color-hover - btn or icon, @include for each
243 | 
244 | @mixin adjust-multi-color-hover ($brand-color:$grey-lighter-alt, $saturation:$multi-color-hover-saturate-by, $lightness:$multi-color-hover-lighten-by, $alpha:$multi-color-hover-alpha) {
245 |   @if lightness($brand-color) < 25 and saturation($brand-color) < 95 and $lightness > 0 {
246 |     // non-rgba fallback
247 |     color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-hover-lighten-by*1.1);
248 |   }
249 |   @else if saturation($brand-color) < 5 or saturation($brand-color) > 95 {
250 |     color: scale-color($brand-color, $saturation:0%, $lightness:$multi-color-hover-lighten-by);
251 |   }
252 |   @else {
253 |     // non-rgba fallback
254 |     color: scale-color($brand-color, $saturation:$multi-color-hover-saturate-by, $lightness:$multi-color-hover-lighten-by);
255 |   }
256 | }
257 | 
258 | // **** MULTI-COLOR CUSTOMIZING - UNIVERSAL FOR ALL BRANDS **** /
259 | 
260 | // For all brands... to give the brand-variant color-style 
261 | // transparency, specify opacity here instead of using rgba.
262 | 
263 | .st-multi-color .st-icon,
264 | .st-multi-color.st-icon,
265 | .st-multi-color [class^="st-icon-"],
266 | [class^="st-icon-"].st-multi-color { 
267 |   @if $multi-color-default == brand-color-variant {
268 |     opacity: $multi-color-opacity;
269 |   }
270 |   // plus anything else you want to add...
271 | }
272 | 
273 | .st-multi-color .st-icon:hover,
274 | .st-multi-color.st-icon:hover,
275 | .st-multi-color [class^="st-icon-"]:hover,
276 | [class^="st-icon-"].st-multi-color:hover,
277 | .st-multi-color .st-icon:active,
278 | .st-multi-color.st-icon:active,
279 | .st-multi-color [class^="st-icon-"]:active,
280 | [class^="st-icon-"].st-multi-color:active,
281 | .st-multi-color .st-icon:focus,
282 | .st-multi-color.st-icon:focus,
283 | .st-multi-color [class^="st-icon-"]:focus,
284 | [class^="st-icon-"].st-multi-color:focus {
285 |   @if $multi-color-hover-default == brand-color-hover {
286 |     opacity: 1*$multi-color-hover-alpha;
287 |   }
288 |   // plus anything else you want to add...
289 | }
290 | 
291 | 
292 | 


--------------------------------------------------------------------------------
/scss/_multi-color-override-shapes-stackicons-social.scss:
--------------------------------------------------------------------------------
  1 | //  *********************************************
  2 | // |                                             |
  3 | // |   STACKICONS-SOCIAL "MULTI-COLOR"           |
  4 | // |   OVERIDE CLASSES - SHAPES                  |
  5 | // |                                             |
  6 | //  *********************************************
  7 | 
  8 | // If you want to be able to override icon shapes
  9 | // on the fly via CSS classes, then @import this
 10 | // _partial file into stackicons.scss.
 11 | 
 12 | // If you're happy with the defaults generated 
 13 | // by _construction-kit-stackicons-social.scss 
 14 | // and _multi-color-stackicons-social.scss then 
 15 | // comment-out the @import of this file in 
 16 | // stackicons.scss to cut the extraneous CSS.
 17 | 
 18 | /* There are 6 button classes (parent or icon)
 19 | 
 20 |   - .st-shape-square:      square button shape
 21 |   also:   
 22 |     .st-shape-sq
 23 |     .st-shape-r0
 24 | 
 25 |   - .st-shape-rounded1:    slightly rounded button (Android)
 26 |   also:
 27 |     .st-shape-r1
 28 | 
 29 |   - .st-shape-rounded2:    rounded button
 30 |   also:
 31 |     .st-shape-rounded
 32 |     .st-shape-r2
 33 | 
 34 |   - .st-shape-rounded3:    more rounded button (iOS 7)
 35 |   also:
 36 |     .st-shape-r3
 37 | 
 38 |   - .st-shape-circle:      circle button
 39 |   also:
 40 |     .st-shape-cir
 41 |     .st-shape-rounded4
 42 |     .st-shape-r4
 43 | 
 44 |   - .st-shape-icon:        no button, icon only
 45 |   also:
 46 |     .st-shape-rounded5 (yes, it's not actually rounded)
 47 |     .st-shape-r5
 48 | */
 49 | 
 50 | // BUTTON SHAPE OVERRIDE CLASSES...
 51 | 
 52 | // pretty straightforward, we're just changing the button-shape at c0.
 53 | 
 54 | // Stackicons-Social-Minimal:
 55 | // @each $brand in adn, codepen, dribbble, dribbble-alt, email, email2, facebook, facebook-alt, flickr, github, github-alt, gmail, gmail-alt, googleplus, instagram, linkedin, pinboard, pinterest, rss, tumblr, twitter, vimeo, youtube, youtube2, youtube-alt, youtube-alt-sm, menu, menu-alt, menu-alt2, search, triangle-down {
 56 | 
 57 | // Standard:
 58 | @each $brand in addthis, adn, amazon, android, apple, behance, blogger, codepen, delicious, deviantart, digg, dribbble, dribbble-alt, dropbox, ebay, email, email2, evernote, facebook, facebook-alt, flattr, flickr, forrst, foursquare, github, github-alt, gittip, gmail, gmail-alt, google, googleplus, imdb, instagram, kickstarter, lastfm, linkedin, microsoft, myspace, pandora, paypal, paypal2, picasa, pinboard, pinterest, rdio, reddit, rss, sharethis, skype, slideshare, soundcloud, spotify, stackoverflow, stumbleupon, tumblr, twitter, vimeo, vine, windows, windows7, wordpress, xing, yahoo, yelp, youtube, youtube2, youtube-alt, youtube-alt-sm, zerply, menu, menu-alt, menu-alt2, more, search, search-alt, triangle-down {
 59 | 
 60 | // * Stackicons-Social-Complete
 61 | // adding email-alt, email-alt2, gmail-lg, gmail-lg-alt, 
 62 | // instagram-alt, instagram-alt2, pinterest-alt, podcast, 
 63 | // yahoo-alt, yelp-alt, youtube-alt2, more triangles...
 64 | 
 65 | // @each $brand in addthis, adn, amazon, android, apple, behance, blogger, codepen, delicious, deviantart, deviantart-alt, digg, dribbble, dribbble-alt, dropbox, ebay, email, email2, email-alt, email-alt2, evernote, facebook, facebook-alt, flattr, flickr, forrst, foursquare, github, github-alt, gittip, gmail, gmail-alt, gmail-lg, gmail-lg-alt, google, googleplus, imdb, instagram, instagram-alt, instagram-alt2, kickstarter, lastfm, linkedin, microsoft, myspace, pandora, paypal, paypal2, picasa, pinboard, pinterest, pinterest-alt, podcast, rdio, reddit, rss, sharethis, skype, slideshare, soundcloud, spotify, stackoverflow, stumbleupon, tumblr, twitter, vimeo, vine, windows, windows7, wordpress, xing, yahoo, yahoo-alt, yelp, yelp-alt, youtube, youtube2, youtube-alt, youtube-alt-sm, youtube-alt2, zerply, cart, menu, menu-alt, menu-alt2, more, search, search-alt, triangle-down, triangle-left, triangle-right, triangle-up {
 66 | 
 67 |   // square
 68 |   .st-shape-square.st-multi-color .st-icon-#{$brand}:before,
 69 |   .st-shape-square.st-multi-color.st-icon-#{$brand}:before,
 70 |   .st-shape-square .st-multi-color.st-icon-#{$brand}:before,
 71 |   .st-shape-sq.st-multi-color .st-icon-#{$brand}:before,
 72 |   .st-shape-sq.st-multi-color.st-icon-#{$brand}:before,
 73 |   .st-shape-sq .st-multi-color.st-icon-#{$brand}:before,
 74 |   .st-shape-r0.st-multi-color .st-icon-#{$brand}:before,
 75 |   .st-shape-r0.st-multi-color.st-icon-#{$brand}:before,
 76 |   .st-shape-r0 .st-multi-color.st-icon-#{$brand}:before,
 77 |   .st-multi-color .st-shape-square.st-icon-#{$brand}:before,
 78 |   .st-multi-color .st-shape-sq.st-icon-#{$brand}:before,
 79 |   .st-multi-color .st-shape-r0.st-icon-#{$brand}:before { 
 80 |   
 81 |     content: $btn-shape-sq;
 82 | 
 83 |     // * in stackicons-social-complete
 84 |     @if $brand == instagram-alt {
 85 |       content: $instagram-alt-c1-alt0;
 86 |     }
 87 | 
 88 |     // * in stackicons-social-complete
 89 |     @if $brand == yahoo-alt {
 90 |       content: $yahoo-alt-c0-alt;
 91 |     }
 92 | 
 93 |   } // end square
 94 | 
 95 | 
 96 |   // rounded1 (r1) - slightly rounded (Android)
 97 |   .st-shape-rounded1.st-multi-color .st-icon-#{$brand}:before,
 98 |   .st-shape-rounded1.st-multi-color.st-icon-#{$brand}:before,
 99 |   .st-shape-rounded1 .st-multi-color.st-icon-#{$brand}:before,
100 |   .st-shape-r1.st-multi-color .st-icon-#{$brand}:before,
101 |   .st-shape-r1.st-multi-color.st-icon-#{$brand}:before,
102 |   .st-shape-r1 .st-multi-color.st-icon-#{$brand}:before,
103 |   .st-multi-color .st-shape-rounded1.st-icon-#{$brand}:before,
104 |   .st-multi-color .st-shape-r1.st-icon-#{$brand}:before { 
105 |   
106 |     content: $btn-shape-r1;
107 | 
108 |     // * in stackicons-social-complete
109 |     @if $brand == instagram-alt {
110 |       content: $instagram-alt-c1-alt1;
111 |     }
112 | 
113 |   } // end rounded1 (r1)
114 | 
115 | 
116 |   // rounded2 (r2) - rounded 
117 |   .st-shape-rounded.st-multi-color .st-icon-#{$brand}:before,
118 |   .st-shape-rounded.st-multi-color.st-icon-#{$brand}:before,
119 |   .st-shape-rounded .st-multi-color.st-icon-#{$brand}:before,
120 |   .st-shape-rounded2.st-multi-color .st-icon-#{$brand}:before,
121 |   .st-shape-rounded2.st-multi-color.st-icon-#{$brand}:before,
122 |   .st-shape-rounded2 .st-multi-color.st-icon-#{$brand}:before,
123 |   .st-shape-r2.st-multi-color .st-icon-#{$brand}:before,
124 |   .st-shape-r2.st-multi-color.st-icon-#{$brand}:before,
125 |   .st-shape-r2 .st-multi-color.st-icon-#{$brand}:before,
126 |   .st-multi-color .st-shape-rounded.st-icon-#{$brand}:before,
127 |   .st-multi-color .st-shape-rounded2.st-icon-#{$brand}:before,
128 |   .st-multi-color .st-shape-r2.st-icon-#{$brand}:before { 
129 |   
130 |     content: $btn-shape-r2;
131 | 
132 |     // * in stackicons-social-complete
133 |     @if $brand == instagram-alt {
134 |       content: $instagram-alt-c1-alt2;
135 |     }
136 | 
137 |   } // end rounded2 (r2)
138 | 
139 | 
140 |   // rounded3 (r3) - more rounded (iOS 7)
141 |   .st-shape-rounded3.st-multi-color .st-icon-#{$brand}:before,
142 |   .st-shape-rounded3.st-multi-color.st-icon-#{$brand}:before,
143 |   .st-shape-rounded3 .st-multi-color.st-icon-#{$brand}:before,
144 |   .st-shape-r3.st-multi-color .st-icon-#{$brand}:before,
145 |   .st-shape-r3.st-multi-color.st-icon-#{$brand}:before,
146 |   .st-shape-r3 .st-multi-color.st-icon-#{$brand}:before,
147 |   .st-multi-color .st-shape-rounded3.st-icon-#{$brand}:before,
148 |   .st-multi-color .st-shape-r3.st-icon-#{$brand}:before { 
149 | 
150 |     content: $btn-shape-r3;
151 |   
152 |     // * in stackicons-social-complete
153 |     @if $brand == instagram-alt {
154 |       content: $instagram-alt-c1-alt3;
155 |     }
156 | 
157 |   } // end rounded3 (r3)
158 | 
159 | 
160 |   // circle (cir)
161 |   .st-shape-circle.st-multi-color .st-icon-#{$brand}:before,
162 |   .st-shape-circle.st-multi-color.st-icon-#{$brand}:before,
163 |   .st-shape-circle .st-multi-color.st-icon-#{$brand}:before,
164 |   .st-shape-cir.st-multi-color .st-icon-#{$brand}:before,
165 |   .st-shape-cir.st-multi-color.st-icon-#{$brand}:before,
166 |   .st-shape-cir .st-multi-color.st-icon-#{$brand}:before,
167 |   .st-shape-rounded4.st-multi-color .st-icon-#{$brand}:before,
168 |   .st-shape-rounded4.st-multi-color.st-icon-#{$brand}:before,
169 |   .st-shape-rounded4 .st-multi-color.st-icon-#{$brand}:before,
170 |   .st-shape-r4.st-multi-color .st-icon-#{$brand}:before,
171 |   .st-shape-r4.st-multi-color.st-icon-#{$brand}:before,
172 |   .st-shape-r4 .st-multi-color.st-icon-#{$brand}:before,
173 |   .st-multi-color .st-shape-circle.st-icon-#{$brand}:before,
174 |   .st-multi-color .st-shape-cir.st-icon-#{$brand}:before,
175 |   .st-multi-color .st-shape-rounded4.st-icon-#{$brand}:before,
176 |   .st-multi-color .st-shape-r4.st-icon-#{$brand}:before { 
177 | 
178 |     content: $btn-shape-cir;
179 | 
180 |     // * in stackicons-social-complete
181 |     @if $brand == instagram-alt {
182 |       content: $instagram-alt-c1-alt4;
183 |     }
184 | 
185 |   } // end circle
186 | 
187 | } // end @each
188 | 
189 | 
190 | // These multi-color icons vary elements based on shape: 
191 | // deviantart, deviantart-alt, email-alt, email-alt2, 
192 | // facebook, foursquare, imdb, instagram-alt, youtube-alt2
193 | 
194 | // * in stackicons-social-complete
195 | // deviantart-alt
196 | .st-shape-circle.st-multi-color .st-icon-deviantart-alt span:before,
197 | .st-shape-circle.st-multi-color.st-icon-deviantart-alt span:before,
198 | .st-shape-circle .st-multi-color.st-icon-deviantart-alt span:before,
199 | .st-shape-cir.st-multi-color .st-icon-deviantart-alt span:before,
200 | .st-shape-cir.st-multi-color.st-icon-deviantart-alt span:before,
201 | .st-shape-cir .st-multi-color.st-icon-deviantart-alt span:before,
202 | .st-shape-rounded4.st-multi-color .st-icon-deviantart-alt span:before,
203 | .st-shape-rounded4.st-multi-color.st-icon-deviantart-alt span:before,
204 | .st-shape-rounded4 .st-multi-color.st-icon-deviantart-alt span:before,
205 | .st-shape-r4.st-multi-color .st-icon-deviantart-alt span:before,
206 | .st-shape-r4.st-multi-color.st-icon-deviantart-alt span:before,
207 | .st-shape-r4 .st-multi-color.st-icon-deviantart-alt span:before,
208 | .st-multi-color .st-shape-circle.st-icon-deviantart-alt span:before,
209 | .st-multi-color .st-shape-cir.st-icon-deviantart-alt span:before,
210 | .st-multi-color .st-shape-rounded4.st-icon-deviantart-alt span:before,
211 | .st-multi-color .st-shape-r4.st-icon-deviantart-alt span:before { 
212 |   content: $deviantart-alt-c1-alt2; // cropped for circle
213 | }
214 | 
215 | // * in stackicons-social-complete
216 | // email-alt2
217 | .st-shape-circle.st-multi-color .st-icon-email-alt2 span:before,
218 | .st-shape-circle.st-multi-color.st-icon-email-alt2 span:before,
219 | .st-shape-circle .st-multi-color.st-icon-email-alt2 span:before,
220 | .st-shape-cir.st-multi-color .st-icon-email-alt2 span:before,
221 | .st-shape-cir.st-multi-color.st-icon-email-alt2 span:before,
222 | .st-shape-cir .st-multi-color.st-icon-email-alt2 span:before,
223 | .st-shape-rounded4.st-multi-color .st-icon-email-alt2 span:before,
224 | .st-shape-rounded4.st-multi-color.st-icon-email-alt2 span:before,
225 | .st-shape-rounded4 .st-multi-color.st-icon-email-alt2 span:before,
226 | .st-shape-r4.st-multi-color .st-icon-email-alt2 span:before,
227 | .st-shape-r4.st-multi-color.st-icon-email-alt2 span:before,
228 | .st-shape-r4 .st-multi-color.st-icon-email-alt2 span:before,
229 | .st-multi-color .st-shape-circle.st-icon-email-alt2 span:before,
230 | .st-multi-color .st-shape-cir.st-icon-email-alt2 span:before,
231 | .st-multi-color .st-shape-rounded4.st-icon-email-alt2 span:before,
232 | .st-multi-color .st-shape-r4.st-icon-email-alt2 span:before { 
233 |   content: $email-alt2-c2-cir; // cropped for circle
234 | }
235 | 
236 | // * in stackicons-social-complete
237 | // imdb
238 | .st-shape-square.st-multi-color .st-icon-imdb span:before,
239 | .st-shape-square.st-multi-color.st-icon-imdb span:before,
240 | .st-shape-square .st-multi-color.st-icon-imdb span:before,
241 | .st-shape-sq.st-multi-color .st-icon-imdb span:before,
242 | .st-shape-sq.st-multi-color.st-icon-imdb span:before,
243 | .st-shape-sq .st-multi-color.st-icon-imdb span:before,
244 | .st-shape-r0.st-multi-color .st-icon-imdb span:before,
245 | .st-shape-r0.st-multi-color.st-icon-imdb span:before,
246 | .st-shape-r0 .st-multi-color.st-icon-imdb span:before,
247 | .st-s0.st-multi-color .st-icon-imdb span:before,
248 | .st-s0.st-multi-color.st-icon-imdb span:before,
249 | .st-s0 .st-multi-color.st-icon-imdb span:before,
250 | .st-multi-color .st-shape-square.st-icon-imdb span:before,
251 | .st-multi-color .st-shape-sq.st-icon-imdb span:before,
252 | .st-multi-color .st-shape-r0.st-icon-imdb span:before,
253 | .st-multi-color .st-s0.st-icon-imdb span:before { 
254 |   content: $imdb-c1-alt0;
255 | }
256 | .st-shape-rounded1.st-multi-color .st-icon-imdb span:before,
257 | .st-shape-rounded1.st-multi-color.st-icon-imdb span:before,
258 | .st-shape-rounded1 .st-multi-color.st-icon-imdb span:before,
259 | .st-shape-r1.st-multi-color .st-icon-imdb span:before,
260 | .st-shape-r1.st-multi-color.st-icon-imdb span:before,
261 | .st-shape-r1 .st-multi-color.st-icon-imdb span:before,
262 | .st-multi-color .st-shape-rounded1.st-icon-imdb span:before,
263 | .st-multi-color .st-shape-r1.st-icon-imdb span:before { 
264 |   content: $imdb-c1-alt1;
265 | }
266 | .st-shape-rounded.st-multi-color .st-icon-imdb span:before,
267 | .st-shape-rounded.st-multi-color.st-icon-imdb span:before,
268 | .st-shape-rounded .st-multi-color.st-icon-imdb span:before,
269 | .st-shape-rounded2.st-multi-color .st-icon-imdb span:before,
270 | .st-shape-rounded2.st-multi-color.st-icon-imdb span:before,
271 | .st-shape-rounded2 .st-multi-color.st-icon-imdb span:before,
272 | .st-shape-r2.st-multi-color .st-icon-imdb span:before,
273 | .st-shape-r2.st-multi-color.st-icon-imdb span:before,
274 | .st-shape-r2 .st-multi-color.st-icon-imdb span:before,
275 | .st-multi-color .st-shape-rounded.st-icon-imdb span:before,
276 | .st-multi-color .st-shape-rounded2.st-icon-imdb span:before,
277 | .st-multi-color .st-shape-r2.st-icon-imdb span:before { 
278 |   content: $imdb-c1-alt2;
279 | }
280 | .st-shape-rounded3.st-multi-color .st-icon-imdb span:before,
281 | .st-shape-rounded3.st-multi-color.st-icon-imdb span:before,
282 | .st-shape-rounded3 .st-multi-color.st-icon-imdb span:before,
283 | .st-shape-r3.st-multi-color .st-icon-imdb span:before,
284 | .st-shape-r3.st-multi-color.st-icon-imdb span:before,
285 | .st-shape-r3 .st-multi-color.st-icon-imdb span:before,
286 | .st-multi-color .st-shape-rounded3.st-icon-imdb span:before,
287 | .st-multi-color .st-shape-r3.st-icon-imdb span:before { 
288 |   content: $imdb-c1-alt3;
289 | }
290 | .st-shape-circle.st-multi-color .st-icon-imdb span:before,
291 | .st-shape-circle.st-multi-color.st-icon-imdb span:before,
292 | .st-shape-circle .st-multi-color.st-icon-imdb span:before,
293 | .st-shape-cir.st-multi-color .st-icon-imdb span:before,
294 | .st-shape-cir.st-multi-color.st-icon-imdb span:before,
295 | .st-shape-cir .st-multi-color.st-icon-imdb span:before,
296 | .st-shape-rounded4.st-multi-color .st-icon-imdb span:before,
297 | .st-shape-rounded4.st-multi-color.st-icon-imdb span:before,
298 | .st-shape-rounded4 .st-multi-color.st-icon-imdb span:before,
299 | .st-shape-r4.st-multi-color .st-icon-imdb span:before,
300 | .st-shape-r4.st-multi-color.st-icon-imdb span:before,
301 | .st-shape-r4 .st-multi-color.st-icon-imdb span:before,
302 | .st-multi-color .st-shape-circle.st-icon-imdb span:before,
303 | .st-multi-color .st-shape-cir.st-icon-imdb span:before,
304 | .st-multi-color .st-shape-rounded4.st-icon-imdb span:before,
305 | .st-multi-color .st-shape-r4.st-icon-imdb span:before { 
306 |   content: $imdb-c1-alt4;
307 | }
308 | .st-shape-square.st-multi-color .st-icon-imdb span:after,
309 | .st-shape-square.st-multi-color.st-icon-imdb span:after,
310 | .st-shape-square .st-multi-color.st-icon-imdb span:after,
311 | .st-shape-sq.st-multi-color .st-icon-imdb span:after,
312 | .st-shape-sq.st-multi-color.st-icon-imdb span:after,
313 | .st-shape-sq .st-multi-color.st-icon-imdb span:after,
314 | .st-shape-r0.st-multi-color .st-icon-imdb span:after,
315 | .st-shape-r0.st-multi-color.st-icon-imdb span:after,
316 | .st-shape-r0 .st-multi-color.st-icon-imdb span:after,
317 | .st-s0.st-multi-color .st-icon-imdb span:after,
318 | .st-s0.st-multi-color.st-icon-imdb span:after,
319 | .st-s0 .st-multi-color.st-icon-imdb span:after,
320 | .st-multi-color .st-shape-square.st-icon-imdb span:after,
321 | .st-multi-color .st-shape-sq.st-icon-imdb span:after,
322 | .st-multi-color .st-shape-r0.st-icon-imdb span:after,
323 | .st-multi-color .st-s0.st-icon-imdb span:after { 
324 |   content: $imdb-c2-alt0;
325 | }
326 | .st-shape-rounded1.st-multi-color .st-icon-imdb span:after,
327 | .st-shape-rounded1.st-multi-color.st-icon-imdb span:after,
328 | .st-shape-rounded1 .st-multi-color.st-icon-imdb span:after,
329 | .st-shape-r1.st-multi-color .st-icon-imdb span:after,
330 | .st-shape-r1.st-multi-color.st-icon-imdb span:after,
331 | .st-shape-r1 .st-multi-color.st-icon-imdb span:after,
332 | .st-multi-color .st-shape-rounded1.st-icon-imdb span:after,
333 | .st-multi-color .st-shape-r1.st-icon-imdb span:after { 
334 |   content: $imdb-c2-alt1;
335 | }
336 | .st-shape-rounded.st-multi-color .st-icon-imdb span:after,
337 | .st-shape-rounded.st-multi-color.st-icon-imdb span:after,
338 | .st-shape-rounded .st-multi-color.st-icon-imdb span:after,
339 | .st-shape-rounded2.st-multi-color .st-icon-imdb span:after,
340 | .st-shape-rounded2.st-multi-color.st-icon-imdb span:after,
341 | .st-shape-rounded2 .st-multi-color.st-icon-imdb span:after,
342 | .st-shape-r2.st-multi-color .st-icon-imdb span:after,
343 | .st-shape-r2.st-multi-color.st-icon-imdb span:after,
344 | .st-shape-r2 .st-multi-color.st-icon-imdb span:after,
345 | .st-multi-color .st-shape-rounded.st-icon-imdb span:after,
346 | .st-multi-color .st-shape-rounded2.st-icon-imdb span:after,
347 | .st-multi-color .st-shape-r2.st-icon-imdb span:after { 
348 |   content: $imdb-c2-alt2;
349 | }
350 | .st-shape-rounded3.st-multi-color .st-icon-imdb span:after,
351 | .st-shape-rounded3.st-multi-color.st-icon-imdb span:after,
352 | .st-shape-rounded3 .st-multi-color.st-icon-imdb span:after,
353 | .st-shape-r3.st-multi-color .st-icon-imdb span:after,
354 | .st-shape-r3.st-multi-color.st-icon-imdb span:after,
355 | .st-shape-r3 .st-multi-color.st-icon-imdb span:after,
356 | .st-multi-color .st-shape-rounded3.st-icon-imdb span:after,
357 | .st-multi-color .st-shape-r3.st-icon-imdb span:after { 
358 |   content: $imdb-c2-alt3;
359 | }
360 | .st-shape-circle.st-multi-color .st-icon-imdb span:after,
361 | .st-shape-circle.st-multi-color.st-icon-imdb span:after,
362 | .st-shape-circle .st-multi-color.st-icon-imdb span:after,
363 | .st-shape-cir.st-multi-color .st-icon-imdb span:after,
364 | .st-shape-cir.st-multi-color.st-icon-imdb span:after,
365 | .st-shape-cir .st-multi-color.st-icon-imdb span:after,
366 | .st-shape-rounded4.st-multi-color .st-icon-imdb span:after,
367 | .st-shape-rounded4.st-multi-color.st-icon-imdb span:after,
368 | .st-shape-rounded4 .st-multi-color.st-icon-imdb span:after,
369 | .st-shape-r4.st-multi-color .st-icon-imdb span:after,
370 | .st-shape-r4.st-multi-color.st-icon-imdb span:after,
371 | .st-shape-r4 .st-multi-color.st-icon-imdb span:after,
372 | .st-multi-color .st-shape-circle.st-icon-imdb span:after,
373 | .st-multi-color .st-shape-cir.st-icon-imdb span:after,
374 | .st-multi-color .st-shape-rounded4.st-icon-imdb span:after,
375 | .st-multi-color .st-shape-r4.st-icon-imdb span:after { 
376 |   content: $imdb-c2-alt4;
377 | }
378 | 
379 | // Minimal:
380 | // @each $brand in facebook {
381 | 
382 | // Stamdard:
383 | @each $brand in deviantart, facebook, foursquare {
384 | 
385 | // *stackicons-social-complete:
386 | // @each $brand in deviantart, deviantart-alt, email-alt, email-alt2, facebook, foursquare, instagram-alt, youtube-alt2 {
387 |   
388 |   .st-shape-square.st-multi-color .st-icon-#{$brand}:after,
389 |   .st-shape-square.st-multi-color.st-icon-#{$brand}:after,
390 |   .st-shape-sq.st-multi-color .st-icon-#{$brand}:after,
391 |   .st-shape-sq.st-multi-color.st-icon-#{$brand}:after,
392 |   .st-shape-r0.st-multi-color .st-icon-#{$brand}:after,
393 |   .st-shape-r0.st-multi-color.st-icon-#{$brand}:after,
394 |   .st-s0.st-multi-color .st-icon-#{$brand}:after,
395 |   .st-s0.st-multi-color.st-icon-#{$brand}:after,
396 |   .st-shape-square .st-multi-color.st-icon-#{$brand}:after,
397 |   .st-shape-sq .st-multi-color.st-icon-#{$brand}:after,
398 |   .st-shape-r0 .st-multi-color.st-icon-#{$brand}:after,
399 |   .st-s0 .st-multi-color.st-icon-#{$brand}:after,
400 |   .st-multi-color .st-shape-square.st-icon-#{$brand}:after,
401 |   .st-multi-color .st-shape-sq.st-icon-#{$brand}:after,
402 |   .st-multi-color .st-shape-r0.st-icon-#{$brand}:after,
403 |   .st-multi-color .st-s0.st-icon-#{$brand}:after { 
404 |   
405 |     @if $brand == deviantart {
406 |       content: $deviantart-c1-alt0; // bordered logo
407 |     }
408 | 
409 |     // * in stackicons-social-complete
410 |     @else if $brand == deviantart-alt {
411 |       content: $deviantart-alt-c2-alt0; // border
412 |     }
413 | 
414 |     // * in stackicons-social-complete
415 |     @if $brand == email-alt {
416 |       content: $email-alt-sq;
417 |     }
418 | 
419 |     // * in stackicons-social-complete
420 |     @if $brand == email-alt2 {
421 |       content: $email-alt2-sq;
422 |     }
423 | 
424 |     @else if $brand == facebook {
425 |       content: $facebook-c1; // "f"
426 |     }
427 | 
428 |     @else if $brand == foursquare {
429 |       content: $foursquare-c3-alt0; // white whoosh
430 |     }
431 | 
432 |     // * in stackicons-social-complete
433 |     @else if $brand == instagram-alt {
434 |       content: $instagram-alt-c2-alt0 // tan bottom
435 |     }
436 | 
437 |     // * in stackicons-social-complete
438 |     @else if $brand == youtube-alt2 {
439 |       content: $youtube-alt2-sq;
440 |     }
441 | 
442 |   } // end sq
443 | 
444 |   // rounded1 (r1) - slightly rounded (Android)
445 |   .st-shape-rounded1.st-multi-color .st-icon-#{$brand}:after,
446 |   .st-shape-rounded1.st-multi-color.st-icon-#{$brand}:after,
447 |   .st-shape-r1.st-multi-color .st-icon-#{$brand}:after,
448 |   .st-shape-r1.st-multi-color.st-icon-#{$brand}:after,
449 |   .st-shape-rounded1 .st-multi-color.st-icon-#{$brand}:after,
450 |   .st-shape-r1 .st-multi-color.st-icon-#{$brand}:after,
451 |   .st-multi-color .st-shape-rounded1.st-icon-#{$brand}:after,
452 |   .st-multi-color .st-shape-r1.st-icon-#{$brand}:after { 
453 |   
454 |     @if $brand == deviantart {
455 |       content: $deviantart-c1-alt1; // bordered logo
456 |     }
457 | 
458 |     // * in stackicons-social-complete
459 |     @else if $brand == deviantart-alt {
460 |       content: $deviantart-alt-c2-alt1; // border
461 |     }
462 | 
463 |     // * in stackicons-social-complete
464 |     @if $brand == email-alt {
465 |       content: $email-alt-r1;
466 |     }
467 | 
468 |     // * in stackicons-social-complete
469 |     @if $brand == email-alt2 {
470 |       content: $email-alt2-r1;
471 |     }
472 | 
473 |     @else if $brand == facebook {
474 |       content: $facebook-c1; // "f"
475 |     }
476 | 
477 |     @else if $brand == foursquare {
478 |       content: $foursquare-c3-alt1; // white whoosh
479 |     }
480 | 
481 |     // * in stackicons-social-complete
482 |     @else if $brand == instagram-alt {
483 |       content: $instagram-alt-c2-alt1 // tan bottom
484 |     }
485 | 
486 |     // * in stackicons-social-complete
487 |     @else if $brand == youtube-alt2 {
488 |       content: $youtube-alt2-r1;
489 |     }
490 | 
491 |   } // end rounded1 (r1)
492 | 
493 |   // rounded2 (r2) - rounded 
494 |   .st-shape-rounded.st-multi-color .st-icon-#{$brand}:after,
495 |   .st-shape-rounded.st-multi-color.st-icon-#{$brand}:after,
496 |   .st-shape-rounded2.st-multi-color .st-icon-#{$brand}:after,
497 |   .st-shape-rounded2.st-multi-color.st-icon-#{$brand}:after,
498 |   .st-shape-r2.st-multi-color .st-icon-#{$brand}:after,
499 |   .st-shape-r2.st-multi-color.st-icon-#{$brand}:after,
500 |   .st-shape-rounded .st-multi-color.st-icon-#{$brand}:after,
501 |   .st-shape-rounded2 .st-multi-color.st-icon-#{$brand}:after,
502 |   .st-shape-r2 .st-multi-color.st-icon-#{$brand}:after,
503 |   .st-multi-color .st-shape-rounded.st-icon-#{$brand}:after,
504 |   .st-multi-color .st-shape-rounded2.st-icon-#{$brand}:after,
505 |   .st-multi-color .st-shape-r2.st-icon-#{$brand}:after { 
506 |   
507 |     @if $brand == deviantart {
508 |       content: $deviantart-c1-alt2; // bordered logo
509 |     }
510 | 
511 |     // * in stackicons-social-complete
512 |     @else if $brand == deviantart-alt {
513 |       content: $deviantart-alt-c2-alt2; // border
514 |     }
515 | 
516 |     // * in stackicons-social-complete
517 |     @if $brand == email-alt {
518 |       content: $email-alt-r2;
519 |     }
520 | 
521 |     // * in stackicons-social-complete
522 |     @if $brand == email-alt2 {
523 |       content: $email-alt2-r2;
524 |     }
525 | 
526 |     @else if $brand == facebook {
527 |       content: $facebook-c1; // "f"
528 |     }
529 | 
530 |     @else if $brand == foursquare {
531 |       content: $foursquare-c3-alt2; // white whoosh
532 |     }
533 | 
534 |     // * in stackicons-social-complete
535 |     @else if $brand == instagram-alt {
536 |       content: $instagram-alt-c2-alt2 // tan bottom
537 |     }
538 | 
539 |     // * in stackicons-social-complete
540 |     @else if $brand == youtube-alt2 {
541 |       content: $youtube-alt2-r2;
542 |     }
543 |   } // end rounded2 (r2)
544 | 
545 |   // rounded3 (r3) - more rounded (iOS 7)
546 |   .st-shape-rounded3.st-multi-color .st-icon-#{$brand}:after,
547 |   .st-shape-rounded3.st-multi-color.st-icon-#{$brand}:after,
548 |   .st-shape-r3.st-multi-color .st-icon-#{$brand}:after,
549 |   .st-shape-r3.st-multi-color.st-icon-#{$brand}:after,
550 |   .st-shape-rounded3 .st-multi-color.st-icon-#{$brand}:after,
551 |   .st-shape-r3 .st-multi-color.st-icon-#{$brand}:after,
552 |   .st-multi-color .st-shape-rounded3.st-icon-#{$brand}:after,
553 |   .st-multi-color .st-shape-r3.st-icon-#{$brand}:after { 
554 | 
555 |     @if $brand == deviantart {
556 |       content: $deviantart-c1-alt3; // bordered logo
557 |     }
558 | 
559 |     // * in stackicons-social-complete
560 |     @else if $brand == deviantart-alt {
561 |       content: $deviantart-alt-c2-alt3; // border
562 |     }
563 | 
564 |     // * in stackicons-social-complete
565 |     @if $brand == email-alt {
566 |       content: $email-alt-r3;
567 |     }
568 | 
569 |     // * in stackicons-social-complete
570 |     @if $brand == email-alt2 {
571 |       content: $email-alt2-r3;
572 |     }
573 | 
574 |     @else if $brand == facebook {
575 |       content: $facebook-c1; // "f"
576 |     }
577 | 
578 |     @else if $brand == foursquare {
579 |       content: $foursquare-c3-alt3; // white whoosh
580 |     }
581 | 
582 |     // * in stackicons-social-complete
583 |     @else if $brand == instagram-alt {
584 |       content: $instagram-alt-c2-alt3 // tan bottom
585 |     }
586 | 
587 |     // * in stackicons-social-complete
588 |     @else if $brand == youtube-alt2 {
589 |       content: $youtube-alt2-r3;
590 |     }
591 | 
592 |   } // end rounded3 (r3)
593 | 
594 |   // circle (cir)
595 |   .st-shape-circle.st-multi-color .st-icon-#{$brand}:after,
596 |   .st-shape-circle.st-multi-color.st-icon-#{$brand}:after,
597 |   .st-shape-cir.st-multi-color .st-icon-#{$brand}:after,
598 |   .st-shape-cir.st-multi-color.st-icon-#{$brand}:after,
599 |   .st-shape-rounded4.st-multi-color .st-icon-#{$brand}:after,
600 |   .st-shape-rounded4.st-multi-color.st-icon-#{$brand}:after,
601 |   .st-shape-r4.st-multi-color .st-icon-#{$brand}:after,
602 |   .st-shape-r4.st-multi-color.st-icon-#{$brand}:after,
603 |   .st-shape-circle .st-multi-color.st-icon-#{$brand}:after,
604 |   .st-shape-cir .st-multi-color.st-icon-#{$brand}:after,
605 |   .st-shape-rounded4 .st-multi-color.st-icon-#{$brand}:after,
606 |   .st-shape-r4 .st-multi-color.st-icon-#{$brand}:after,
607 |   .st-multi-color .st-shape-circle.st-icon-#{$brand}:after,
608 |   .st-multi-color .st-shape-cir.st-icon-#{$brand}:after,
609 |   .st-multi-color .st-shape-rounded4.st-icon-#{$brand}:after,
610 |   .st-multi-color .st-shape-r4.st-icon-#{$brand}:after { 
611 |   
612 |     @if $brand == deviantart {
613 |       content: $deviantart-c1-alt4; // bordered logo
614 |     }
615 | 
616 |     // * in stackicons-social-complete
617 |     @else if $brand == deviantart-alt {
618 |       content: $deviantart-alt-c2-alt4; // border
619 |     }
620 | 
621 |     // * in stackicons-social-complete
622 |     @if $brand == email-alt {
623 |       content: $email-alt-cir;
624 |     }
625 |     
626 |     // * in stackicons-social-complete
627 |     @if $brand == email-alt2 {
628 |       content: $email-alt2-cir;
629 |     }
630 | 
631 |     @else if $brand == facebook {
632 |       content: $facebook-c1-alt; // "f" cropped for circle
633 |     }
634 | 
635 |     @else if $brand == foursquare {
636 |       content: $foursquare-c3-alt4; // white whoosh
637 |     }
638 | 
639 |     // * in stackicons-social-complete
640 |     @else if $brand == instagram-alt {
641 |       content: $instagram-alt-c2-alt4 // tan bottom
642 |     }
643 | 
644 |     // * in stackicons-social-complete
645 |     @else if $brand == youtube-alt2 {
646 |       content: $youtube-alt2-cir;
647 |     }
648 |   } // end circle
649 | 
650 | } // end @each
651 | 
652 | // END MULTI-COLOR BUTTON-SHAPE OVERRIDES
653 | 
654 | 


--------------------------------------------------------------------------------
/scss/stackicons-social-minimal.scss:
--------------------------------------------------------------------------------
 1 | // Make sure the charset is set appropriately
 2 | @charset "UTF-8";
 3 | 
 4 | @import "stackicons-social-minimal/fonts-stackicons-social-minimal"; // make sure the font path in this file is right
 5 | 
 6 | // variables
 7 | @import "colors-social-2014"; // brand colors as variables (tweak as desired)
 8 | @import "unicodes-stackicons-social"; // font characters (don't change this)
 9 | 
10 | // *** variables used in default css ***
11 | @import "construction-kit-stackicons-social"; // *** change values here to tweak css defaults ***
12 | 
13 | @import "stackicons-social-minimal/css-defaults-stackicons-social-minimal"; // @each statement here lists brands - trim as needed
14 | 
15 | // optional - comment-out if you're happy with the defaults, and don't need to override shapes per icon...
16 | @import "stackicons-social-minimal/override-button-shapes-stackicons-social-minimal"; // @each statement here lists brands - trim as needed
17 | 
18 | // you might still want icon-only (e.g., for dropdown nav-list)
19 | @import "stackicons-social-minimal/override-icon-only-stackicons-social-minimal"; // @each statement here lists all brands (trim as needed)
20 | 
21 | // this one is really more for demo purposes. It's commented-out by default...
22 | // @import "stackicons-social-minimal/override-colors-stackicons-social-minimal"; // @each statement here lists brands - trim as needed
23 | 
24 | // *** variables used in default css ***
25 | @import "multi-color-kit-stackicons-social"; // *** change values here to tweak css defaults ***
26 | 
27 | @import "stackicons-social-minimal/multi-color-css-stackicons-social-minimal"; // @each statements here list brands - trim as needed
28 | 
29 | // optional - comment-out if you don't need to override button shapes per icon. 
30 | // ("st.icon-only" class is generated separately by the file above.)
31 | @import "stackicons-social-minimal/multi-color-override-shapes-stackicons-social-minimal"; // @each statement here lists brands - trim as needed


--------------------------------------------------------------------------------
/scss/stackicons-social-minimal/_fonts-stackicons-social-minimal.scss:
--------------------------------------------------------------------------------
 1 | /* FONTS */
 2 | 
 3 | /* Stackicons-Social-Minimal (subset)
 4 |    Includes codepen, dribbble, email, facebook, flickr,
 5 |    github, instagram, linkedin, pinboard, pinterest, 
 6 |    rss, tumblr, twitter, vimeo, youtube, menu, search,  
 7 |    and triangle-down (along with some variants). 
 8 | */
 9 | 
10 | @font-face {
11 |   font-family: 'Stackicons-Social';
12 |   /* make sure this is the correct relative path */
13 |   src: url("../fonts/Stackicons/Stackicons-Social-Minimal.eot");
14 |   /* IE9 Compat Modes */
15 |   src: url("../fonts/Stackicons/Stackicons-Social-Minimal.eot?#iefix") format("embedded-opentype"), url("../fonts/Stackicons/Stackicons-Social-Minimal.woff") format("woff"), url("../fonts/Stackicons/Stackicons-Social-Minimal.ttf") format("truetype"), url("../fonts/Stackicons/Stackicons-Social-Minimal.svg#76cc4077294aa89eeb6c5fa684bb9048") format("svg");
16 |   /* Legacy iOS */
17 |   font-style: normal !important;
18 |   font-weight: 400 !important;
19 |   /* copy below to styles using this font */
20 |   -webkit-font-smoothing: antialiased;
21 |   -moz-osx-font-smoothing: grayscale;
22 |   font-smoothing: antialiased;
23 |   speak: none;
24 | }


--------------------------------------------------------------------------------
/scss/stackicons-social-minimal/_multi-color-override-shapes-stackicons-social-minimal.scss:
--------------------------------------------------------------------------------
  1 | //  *********************************************
  2 | // |                                             |
  3 | // |   STACKICONS-SOCIAL "MULTI-COLOR"           |
  4 | // |   OVERIDE CLASSES - SHAPES                  |
  5 | // |                                             |
  6 | //  *********************************************
  7 | 
  8 | // If you want to be able to override icon shapes
  9 | // on the fly via CSS classes, then @import this
 10 | // _partial file into stackicons.scss.
 11 | 
 12 | // If you're happy with the defaults generated 
 13 | // by _construction-kit-stackicons-social.scss 
 14 | // and _multi-color-stackicons-social.scss then 
 15 | // comment-out the @import of this file in 
 16 | // stackicons.scss to cut the extraneous CSS.
 17 | 
 18 | /* There are 6 button classes (parent or icon)
 19 | 
 20 |   - .st-shape-square:      square button shape
 21 |   also:   
 22 |     .st-shape-sq
 23 |     .st-shape-r0
 24 | 
 25 |   - .st-shape-rounded1:    slightly rounded button (Android)
 26 |   also:
 27 |     .st-shape-r1
 28 | 
 29 |   - .st-shape-rounded2:    rounded button
 30 |   also:
 31 |     .st-shape-rounded
 32 |     .st-shape-r2
 33 | 
 34 |   - .st-shape-rounded3:    more rounded button (iOS 7)
 35 |   also:
 36 |     .st-shape-r3
 37 | 
 38 |   - .st-shape-circle:      circle button
 39 |   also:
 40 |     .st-shape-cir
 41 |     .st-shape-rounded4
 42 |     .st-shape-r4
 43 | 
 44 |   - .st-shape-icon:        no button, icon only
 45 |   also:
 46 |     .st-shape-rounded5 (yes, it's not actually rounded)
 47 |     .st-shape-r5
 48 | */
 49 | 
 50 | // BUTTON SHAPE OVERRIDE CLASSES...
 51 | 
 52 | // pretty straightforward, we're just changing the button-shape at c0.
 53 | 
 54 | // Stackicons-Social-Minimal:
 55 | @each $brand in adn, codepen, dribbble, dribbble-alt, email, email2, facebook, facebook-alt, flickr, github, github-alt, gmail, gmail-alt, googleplus, instagram, linkedin, pinboard, pinterest, rss, tumblr, twitter, vimeo, youtube, youtube2, youtube-alt, youtube-alt-sm, menu, menu-alt, menu-alt2, search, triangle-down {
 56 | 
 57 | // Standard:
 58 | // @each $brand in addthis, adn, amazon, android, apple, behance, blogger, codepen, delicious, deviantart, digg, dribbble, dribbble-alt, dropbox, ebay, email, email2, evernote, facebook, facebook-alt, flattr, flickr, forrst, foursquare, github, github-alt, gittip, gmail, gmail-alt, google, googleplus, imdb, instagram, kickstarter, lastfm, linkedin, microsoft, myspace, pandora, paypal, paypal2, picasa, pinboard, pinterest, rdio, reddit, rss, sharethis, skype, slideshare, soundcloud, spotify, stackoverflow, stumbleupon, tumblr, twitter, vimeo, vine, windows, windows7, wordpress, xing, yahoo, yelp, youtube, youtube2, youtube-alt, youtube-alt-sm, zerply, menu, menu-alt, menu-alt2, more, search, search-alt, triangle-down {
 59 | 
 60 | // * Stackicons-Social-Complete
 61 | // adding email-alt, email-alt2, gmail-lg, gmail-lg-alt, 
 62 | // instagram-alt, instagram-alt2, pinterest-alt, podcast, 
 63 | // yahoo-alt, yelp-alt, youtube-alt2, more triangles...
 64 | 
 65 | // @each $brand in addthis, adn, amazon, android, apple, behance, blogger, codepen, delicious, deviantart, deviantart-alt, digg, dribbble, dribbble-alt, dropbox, ebay, email, email2, email-alt, email-alt2, evernote, facebook, facebook-alt, flattr, flickr, forrst, foursquare, github, github-alt, gittip, gmail, gmail-alt, gmail-lg, gmail-lg-alt, google, googleplus, imdb, instagram, instagram-alt, instagram-alt2, kickstarter, lastfm, linkedin, microsoft, myspace, pandora, paypal, paypal2, picasa, pinboard, pinterest, pinterest-alt, podcast, rdio, reddit, rss, sharethis, skype, slideshare, soundcloud, spotify, stackoverflow, stumbleupon, tumblr, twitter, vimeo, vine, windows, windows7, wordpress, xing, yahoo, yahoo-alt, yelp, yelp-alt, youtube, youtube2, youtube-alt, youtube-alt-sm, youtube-alt2, zerply, cart, menu, menu-alt, menu-alt2, more, search, search-alt, triangle-down, triangle-left, triangle-right, triangle-up {
 66 | 
 67 |   // square
 68 |   .st-shape-square.st-multi-color .st-icon-#{$brand}:before,
 69 |   .st-shape-square.st-multi-color.st-icon-#{$brand}:before,
 70 |   .st-shape-square .st-multi-color.st-icon-#{$brand}:before,
 71 |   .st-shape-sq.st-multi-color .st-icon-#{$brand}:before,
 72 |   .st-shape-sq.st-multi-color.st-icon-#{$brand}:before,
 73 |   .st-shape-sq .st-multi-color.st-icon-#{$brand}:before,
 74 |   .st-shape-r0.st-multi-color .st-icon-#{$brand}:before,
 75 |   .st-shape-r0.st-multi-color.st-icon-#{$brand}:before,
 76 |   .st-shape-r0 .st-multi-color.st-icon-#{$brand}:before,
 77 |   .st-multi-color .st-shape-square.st-icon-#{$brand}:before,
 78 |   .st-multi-color .st-shape-sq.st-icon-#{$brand}:before,
 79 |   .st-multi-color .st-shape-r0.st-icon-#{$brand}:before { 
 80 |   
 81 |     content: $btn-shape-sq;
 82 | 
 83 |     // * in stackicons-social-complete
 84 |     @if $brand == instagram-alt {
 85 |       content: $instagram-alt-c1-alt0;
 86 |     }
 87 | 
 88 |     // * in stackicons-social-complete
 89 |     @if $brand == yahoo-alt {
 90 |       content: $yahoo-alt-c0-alt;
 91 |     }
 92 | 
 93 |   } // end square
 94 | 
 95 | 
 96 |   // rounded1 (r1) - slightly rounded (Android)
 97 |   .st-shape-rounded1.st-multi-color .st-icon-#{$brand}:before,
 98 |   .st-shape-rounded1.st-multi-color.st-icon-#{$brand}:before,
 99 |   .st-shape-rounded1 .st-multi-color.st-icon-#{$brand}:before,
100 |   .st-shape-r1.st-multi-color .st-icon-#{$brand}:before,
101 |   .st-shape-r1.st-multi-color.st-icon-#{$brand}:before,
102 |   .st-shape-r1 .st-multi-color.st-icon-#{$brand}:before,
103 |   .st-multi-color .st-shape-rounded1.st-icon-#{$brand}:before,
104 |   .st-multi-color .st-shape-r1.st-icon-#{$brand}:before { 
105 |   
106 |     content: $btn-shape-r1;
107 | 
108 |     // * in stackicons-social-complete
109 |     @if $brand == instagram-alt {
110 |       content: $instagram-alt-c1-alt1;
111 |     }
112 | 
113 |   } // end rounded1 (r1)
114 | 
115 | 
116 |   // rounded2 (r2) - rounded 
117 |   .st-shape-rounded.st-multi-color .st-icon-#{$brand}:before,
118 |   .st-shape-rounded.st-multi-color.st-icon-#{$brand}:before,
119 |   .st-shape-rounded .st-multi-color.st-icon-#{$brand}:before,
120 |   .st-shape-rounded2.st-multi-color .st-icon-#{$brand}:before,
121 |   .st-shape-rounded2.st-multi-color.st-icon-#{$brand}:before,
122 |   .st-shape-rounded2 .st-multi-color.st-icon-#{$brand}:before,
123 |   .st-shape-r2.st-multi-color .st-icon-#{$brand}:before,
124 |   .st-shape-r2.st-multi-color.st-icon-#{$brand}:before,
125 |   .st-shape-r2 .st-multi-color.st-icon-#{$brand}:before,
126 |   .st-multi-color .st-shape-rounded.st-icon-#{$brand}:before,
127 |   .st-multi-color .st-shape-rounded2.st-icon-#{$brand}:before,
128 |   .st-multi-color .st-shape-r2.st-icon-#{$brand}:before { 
129 |   
130 |     content: $btn-shape-r2;
131 | 
132 |     // * in stackicons-social-complete
133 |     @if $brand == instagram-alt {
134 |       content: $instagram-alt-c1-alt2;
135 |     }
136 | 
137 |   } // end rounded2 (r2)
138 | 
139 | 
140 |   // rounded3 (r3) - more rounded (iOS 7)
141 |   .st-shape-rounded3.st-multi-color .st-icon-#{$brand}:before,
142 |   .st-shape-rounded3.st-multi-color.st-icon-#{$brand}:before,
143 |   .st-shape-rounded3 .st-multi-color.st-icon-#{$brand}:before,
144 |   .st-shape-r3.st-multi-color .st-icon-#{$brand}:before,
145 |   .st-shape-r3.st-multi-color.st-icon-#{$brand}:before,
146 |   .st-shape-r3 .st-multi-color.st-icon-#{$brand}:before,
147 |   .st-multi-color .st-shape-rounded3.st-icon-#{$brand}:before,
148 |   .st-multi-color .st-shape-r3.st-icon-#{$brand}:before { 
149 | 
150 |     content: $btn-shape-r3;
151 |   
152 |     // * in stackicons-social-complete
153 |     @if $brand == instagram-alt {
154 |       content: $instagram-alt-c1-alt3;
155 |     }
156 | 
157 |   } // end rounded3 (r3)
158 | 
159 | 
160 |   // circle (cir)
161 |   .st-shape-circle.st-multi-color .st-icon-#{$brand}:before,
162 |   .st-shape-circle.st-multi-color.st-icon-#{$brand}:before,
163 |   .st-shape-circle .st-multi-color.st-icon-#{$brand}:before,
164 |   .st-shape-cir.st-multi-color .st-icon-#{$brand}:before,
165 |   .st-shape-cir.st-multi-color.st-icon-#{$brand}:before,
166 |   .st-shape-cir .st-multi-color.st-icon-#{$brand}:before,
167 |   .st-shape-rounded4.st-multi-color .st-icon-#{$brand}:before,
168 |   .st-shape-rounded4.st-multi-color.st-icon-#{$brand}:before,
169 |   .st-shape-rounded4 .st-multi-color.st-icon-#{$brand}:before,
170 |   .st-shape-r4.st-multi-color .st-icon-#{$brand}:before,
171 |   .st-shape-r4.st-multi-color.st-icon-#{$brand}:before,
172 |   .st-shape-r4 .st-multi-color.st-icon-#{$brand}:before,
173 |   .st-multi-color .st-shape-circle.st-icon-#{$brand}:before,
174 |   .st-multi-color .st-shape-cir.st-icon-#{$brand}:before,
175 |   .st-multi-color .st-shape-rounded4.st-icon-#{$brand}:before,
176 |   .st-multi-color .st-shape-r4.st-icon-#{$brand}:before { 
177 | 
178 |     content: $btn-shape-cir;
179 | 
180 |     // * in stackicons-social-complete
181 |     @if $brand == instagram-alt {
182 |       content: $instagram-alt-c1-alt4;
183 |     }
184 | 
185 |   } // end circle
186 | 
187 | } // end @each
188 | 
189 | 
190 | // These multi-color icons vary elements based on shape: 
191 | // deviantart, deviantart-alt, email-alt, email-alt2, 
192 | // facebook, foursquare, imdb, instagram-alt, youtube-alt2
193 | 
194 | // * in stackicons-social-complete
195 | // deviantart-alt
196 | .st-shape-circle.st-multi-color .st-icon-deviantart-alt span:before,
197 | .st-shape-circle.st-multi-color.st-icon-deviantart-alt span:before,
198 | .st-shape-circle .st-multi-color.st-icon-deviantart-alt span:before,
199 | .st-shape-cir.st-multi-color .st-icon-deviantart-alt span:before,
200 | .st-shape-cir.st-multi-color.st-icon-deviantart-alt span:before,
201 | .st-shape-cir .st-multi-color.st-icon-deviantart-alt span:before,
202 | .st-shape-rounded4.st-multi-color .st-icon-deviantart-alt span:before,
203 | .st-shape-rounded4.st-multi-color.st-icon-deviantart-alt span:before,
204 | .st-shape-rounded4 .st-multi-color.st-icon-deviantart-alt span:before,
205 | .st-shape-r4.st-multi-color .st-icon-deviantart-alt span:before,
206 | .st-shape-r4.st-multi-color.st-icon-deviantart-alt span:before,
207 | .st-shape-r4 .st-multi-color.st-icon-deviantart-alt span:before,
208 | .st-multi-color .st-shape-circle.st-icon-deviantart-alt span:before,
209 | .st-multi-color .st-shape-cir.st-icon-deviantart-alt span:before,
210 | .st-multi-color .st-shape-rounded4.st-icon-deviantart-alt span:before,
211 | .st-multi-color .st-shape-r4.st-icon-deviantart-alt span:before { 
212 |   content: $deviantart-alt-c1-alt2; // cropped for circle
213 | }
214 | 
215 | // * in stackicons-social-complete
216 | // email-alt2
217 | .st-shape-circle.st-multi-color .st-icon-email-alt2 span:before,
218 | .st-shape-circle.st-multi-color.st-icon-email-alt2 span:before,
219 | .st-shape-circle .st-multi-color.st-icon-email-alt2 span:before,
220 | .st-shape-cir.st-multi-color .st-icon-email-alt2 span:before,
221 | .st-shape-cir.st-multi-color.st-icon-email-alt2 span:before,
222 | .st-shape-cir .st-multi-color.st-icon-email-alt2 span:before,
223 | .st-shape-rounded4.st-multi-color .st-icon-email-alt2 span:before,
224 | .st-shape-rounded4.st-multi-color.st-icon-email-alt2 span:before,
225 | .st-shape-rounded4 .st-multi-color.st-icon-email-alt2 span:before,
226 | .st-shape-r4.st-multi-color .st-icon-email-alt2 span:before,
227 | .st-shape-r4.st-multi-color.st-icon-email-alt2 span:before,
228 | .st-shape-r4 .st-multi-color.st-icon-email-alt2 span:before,
229 | .st-multi-color .st-shape-circle.st-icon-email-alt2 span:before,
230 | .st-multi-color .st-shape-cir.st-icon-email-alt2 span:before,
231 | .st-multi-color .st-shape-rounded4.st-icon-email-alt2 span:before,
232 | .st-multi-color .st-shape-r4.st-icon-email-alt2 span:before { 
233 |   content: $email-alt2-c2-cir; // cropped for circle
234 | }
235 | 
236 | // * in stackicons-social-complete
237 | // imdb
238 | .st-shape-square.st-multi-color .st-icon-imdb span:before,
239 | .st-shape-square.st-multi-color.st-icon-imdb span:before,
240 | .st-shape-square .st-multi-color.st-icon-imdb span:before,
241 | .st-shape-sq.st-multi-color .st-icon-imdb span:before,
242 | .st-shape-sq.st-multi-color.st-icon-imdb span:before,
243 | .st-shape-sq .st-multi-color.st-icon-imdb span:before,
244 | .st-shape-r0.st-multi-color .st-icon-imdb span:before,
245 | .st-shape-r0.st-multi-color.st-icon-imdb span:before,
246 | .st-shape-r0 .st-multi-color.st-icon-imdb span:before,
247 | .st-s0.st-multi-color .st-icon-imdb span:before,
248 | .st-s0.st-multi-color.st-icon-imdb span:before,
249 | .st-s0 .st-multi-color.st-icon-imdb span:before,
250 | .st-multi-color .st-shape-square.st-icon-imdb span:before,
251 | .st-multi-color .st-shape-sq.st-icon-imdb span:before,
252 | .st-multi-color .st-shape-r0.st-icon-imdb span:before,
253 | .st-multi-color .st-s0.st-icon-imdb span:before { 
254 |   content: $imdb-c1-alt0;
255 | }
256 | .st-shape-rounded1.st-multi-color .st-icon-imdb span:before,
257 | .st-shape-rounded1.st-multi-color.st-icon-imdb span:before,
258 | .st-shape-rounded1 .st-multi-color.st-icon-imdb span:before,
259 | .st-shape-r1.st-multi-color .st-icon-imdb span:before,
260 | .st-shape-r1.st-multi-color.st-icon-imdb span:before,
261 | .st-shape-r1 .st-multi-color.st-icon-imdb span:before,
262 | .st-multi-color .st-shape-rounded1.st-icon-imdb span:before,
263 | .st-multi-color .st-shape-r1.st-icon-imdb span:before { 
264 |   content: $imdb-c1-alt1;
265 | }
266 | .st-shape-rounded.st-multi-color .st-icon-imdb span:before,
267 | .st-shape-rounded.st-multi-color.st-icon-imdb span:before,
268 | .st-shape-rounded .st-multi-color.st-icon-imdb span:before,
269 | .st-shape-rounded2.st-multi-color .st-icon-imdb span:before,
270 | .st-shape-rounded2.st-multi-color.st-icon-imdb span:before,
271 | .st-shape-rounded2 .st-multi-color.st-icon-imdb span:before,
272 | .st-shape-r2.st-multi-color .st-icon-imdb span:before,
273 | .st-shape-r2.st-multi-color.st-icon-imdb span:before,
274 | .st-shape-r2 .st-multi-color.st-icon-imdb span:before,
275 | .st-multi-color .st-shape-rounded.st-icon-imdb span:before,
276 | .st-multi-color .st-shape-rounded2.st-icon-imdb span:before,
277 | .st-multi-color .st-shape-r2.st-icon-imdb span:before { 
278 |   content: $imdb-c1-alt2;
279 | }
280 | .st-shape-rounded3.st-multi-color .st-icon-imdb span:before,
281 | .st-shape-rounded3.st-multi-color.st-icon-imdb span:before,
282 | .st-shape-rounded3 .st-multi-color.st-icon-imdb span:before,
283 | .st-shape-r3.st-multi-color .st-icon-imdb span:before,
284 | .st-shape-r3.st-multi-color.st-icon-imdb span:before,
285 | .st-shape-r3 .st-multi-color.st-icon-imdb span:before,
286 | .st-multi-color .st-shape-rounded3.st-icon-imdb span:before,
287 | .st-multi-color .st-shape-r3.st-icon-imdb span:before { 
288 |   content: $imdb-c1-alt3;
289 | }
290 | .st-shape-circle.st-multi-color .st-icon-imdb span:before,
291 | .st-shape-circle.st-multi-color.st-icon-imdb span:before,
292 | .st-shape-circle .st-multi-color.st-icon-imdb span:before,
293 | .st-shape-cir.st-multi-color .st-icon-imdb span:before,
294 | .st-shape-cir.st-multi-color.st-icon-imdb span:before,
295 | .st-shape-cir .st-multi-color.st-icon-imdb span:before,
296 | .st-shape-rounded4.st-multi-color .st-icon-imdb span:before,
297 | .st-shape-rounded4.st-multi-color.st-icon-imdb span:before,
298 | .st-shape-rounded4 .st-multi-color.st-icon-imdb span:before,
299 | .st-shape-r4.st-multi-color .st-icon-imdb span:before,
300 | .st-shape-r4.st-multi-color.st-icon-imdb span:before,
301 | .st-shape-r4 .st-multi-color.st-icon-imdb span:before,
302 | .st-multi-color .st-shape-circle.st-icon-imdb span:before,
303 | .st-multi-color .st-shape-cir.st-icon-imdb span:before,
304 | .st-multi-color .st-shape-rounded4.st-icon-imdb span:before,
305 | .st-multi-color .st-shape-r4.st-icon-imdb span:before { 
306 |   content: $imdb-c1-alt4;
307 | }
308 | .st-shape-square.st-multi-color .st-icon-imdb span:after,
309 | .st-shape-square.st-multi-color.st-icon-imdb span:after,
310 | .st-shape-square .st-multi-color.st-icon-imdb span:after,
311 | .st-shape-sq.st-multi-color .st-icon-imdb span:after,
312 | .st-shape-sq.st-multi-color.st-icon-imdb span:after,
313 | .st-shape-sq .st-multi-color.st-icon-imdb span:after,
314 | .st-shape-r0.st-multi-color .st-icon-imdb span:after,
315 | .st-shape-r0.st-multi-color.st-icon-imdb span:after,
316 | .st-shape-r0 .st-multi-color.st-icon-imdb span:after,
317 | .st-s0.st-multi-color .st-icon-imdb span:after,
318 | .st-s0.st-multi-color.st-icon-imdb span:after,
319 | .st-s0 .st-multi-color.st-icon-imdb span:after,
320 | .st-multi-color .st-shape-square.st-icon-imdb span:after,
321 | .st-multi-color .st-shape-sq.st-icon-imdb span:after,
322 | .st-multi-color .st-shape-r0.st-icon-imdb span:after,
323 | .st-multi-color .st-s0.st-icon-imdb span:after { 
324 |   content: $imdb-c2-alt0;
325 | }
326 | .st-shape-rounded1.st-multi-color .st-icon-imdb span:after,
327 | .st-shape-rounded1.st-multi-color.st-icon-imdb span:after,
328 | .st-shape-rounded1 .st-multi-color.st-icon-imdb span:after,
329 | .st-shape-r1.st-multi-color .st-icon-imdb span:after,
330 | .st-shape-r1.st-multi-color.st-icon-imdb span:after,
331 | .st-shape-r1 .st-multi-color.st-icon-imdb span:after,
332 | .st-multi-color .st-shape-rounded1.st-icon-imdb span:after,
333 | .st-multi-color .st-shape-r1.st-icon-imdb span:after { 
334 |   content: $imdb-c2-alt1;
335 | }
336 | .st-shape-rounded.st-multi-color .st-icon-imdb span:after,
337 | .st-shape-rounded.st-multi-color.st-icon-imdb span:after,
338 | .st-shape-rounded .st-multi-color.st-icon-imdb span:after,
339 | .st-shape-rounded2.st-multi-color .st-icon-imdb span:after,
340 | .st-shape-rounded2.st-multi-color.st-icon-imdb span:after,
341 | .st-shape-rounded2 .st-multi-color.st-icon-imdb span:after,
342 | .st-shape-r2.st-multi-color .st-icon-imdb span:after,
343 | .st-shape-r2.st-multi-color.st-icon-imdb span:after,
344 | .st-shape-r2 .st-multi-color.st-icon-imdb span:after,
345 | .st-multi-color .st-shape-rounded.st-icon-imdb span:after,
346 | .st-multi-color .st-shape-rounded2.st-icon-imdb span:after,
347 | .st-multi-color .st-shape-r2.st-icon-imdb span:after { 
348 |   content: $imdb-c2-alt2;
349 | }
350 | .st-shape-rounded3.st-multi-color .st-icon-imdb span:after,
351 | .st-shape-rounded3.st-multi-color.st-icon-imdb span:after,
352 | .st-shape-rounded3 .st-multi-color.st-icon-imdb span:after,
353 | .st-shape-r3.st-multi-color .st-icon-imdb span:after,
354 | .st-shape-r3.st-multi-color.st-icon-imdb span:after,
355 | .st-shape-r3 .st-multi-color.st-icon-imdb span:after,
356 | .st-multi-color .st-shape-rounded3.st-icon-imdb span:after,
357 | .st-multi-color .st-shape-r3.st-icon-imdb span:after { 
358 |   content: $imdb-c2-alt3;
359 | }
360 | .st-shape-circle.st-multi-color .st-icon-imdb span:after,
361 | .st-shape-circle.st-multi-color.st-icon-imdb span:after,
362 | .st-shape-circle .st-multi-color.st-icon-imdb span:after,
363 | .st-shape-cir.st-multi-color .st-icon-imdb span:after,
364 | .st-shape-cir.st-multi-color.st-icon-imdb span:after,
365 | .st-shape-cir .st-multi-color.st-icon-imdb span:after,
366 | .st-shape-rounded4.st-multi-color .st-icon-imdb span:after,
367 | .st-shape-rounded4.st-multi-color.st-icon-imdb span:after,
368 | .st-shape-rounded4 .st-multi-color.st-icon-imdb span:after,
369 | .st-shape-r4.st-multi-color .st-icon-imdb span:after,
370 | .st-shape-r4.st-multi-color.st-icon-imdb span:after,
371 | .st-shape-r4 .st-multi-color.st-icon-imdb span:after,
372 | .st-multi-color .st-shape-circle.st-icon-imdb span:after,
373 | .st-multi-color .st-shape-cir.st-icon-imdb span:after,
374 | .st-multi-color .st-shape-rounded4.st-icon-imdb span:after,
375 | .st-multi-color .st-shape-r4.st-icon-imdb span:after { 
376 |   content: $imdb-c2-alt4;
377 | }
378 | 
379 | // Minimal:
380 | @each $brand in facebook {
381 | 
382 | // Stamdard:
383 | // @each $brand in deviantart, facebook, foursquare {
384 | 
385 | // *stackicons-social-complete:
386 | // @each $brand in deviantart, deviantart-alt, email-alt, email-alt2, facebook, foursquare, instagram-alt, youtube-alt2 {
387 |   
388 |   .st-shape-square.st-multi-color .st-icon-#{$brand}:after,
389 |   .st-shape-square.st-multi-color.st-icon-#{$brand}:after,
390 |   .st-shape-sq.st-multi-color .st-icon-#{$brand}:after,
391 |   .st-shape-sq.st-multi-color.st-icon-#{$brand}:after,
392 |   .st-shape-r0.st-multi-color .st-icon-#{$brand}:after,
393 |   .st-shape-r0.st-multi-color.st-icon-#{$brand}:after,
394 |   .st-s0.st-multi-color .st-icon-#{$brand}:after,
395 |   .st-s0.st-multi-color.st-icon-#{$brand}:after,
396 |   .st-shape-square .st-multi-color.st-icon-#{$brand}:after,
397 |   .st-shape-sq .st-multi-color.st-icon-#{$brand}:after,
398 |   .st-shape-r0 .st-multi-color.st-icon-#{$brand}:after,
399 |   .st-s0 .st-multi-color.st-icon-#{$brand}:after,
400 |   .st-multi-color .st-shape-square.st-icon-#{$brand}:after,
401 |   .st-multi-color .st-shape-sq.st-icon-#{$brand}:after,
402 |   .st-multi-color .st-shape-r0.st-icon-#{$brand}:after,
403 |   .st-multi-color .st-s0.st-icon-#{$brand}:after { 
404 |   
405 |     @if $brand == deviantart {
406 |       content: $deviantart-c1-alt0; // bordered logo
407 |     }
408 | 
409 |     // * in stackicons-social-complete
410 |     @else if $brand == deviantart-alt {
411 |       content: $deviantart-alt-c2-alt0; // border
412 |     }
413 | 
414 |     // * in stackicons-social-complete
415 |     @if $brand == email-alt {
416 |       content: $email-alt-sq;
417 |     }
418 | 
419 |     // * in stackicons-social-complete
420 |     @if $brand == email-alt2 {
421 |       content: $email-alt2-sq;
422 |     }
423 | 
424 |     @else if $brand == facebook {
425 |       content: $facebook-c1; // "f"
426 |     }
427 | 
428 |     @else if $brand == foursquare {
429 |       content: $foursquare-c3-alt0; // white whoosh
430 |     }
431 | 
432 |     // * in stackicons-social-complete
433 |     @else if $brand == instagram-alt {
434 |       content: $instagram-alt-c2-alt0 // tan bottom
435 |     }
436 | 
437 |     // * in stackicons-social-complete
438 |     @else if $brand == youtube-alt2 {
439 |       content: $youtube-alt2-sq;
440 |     }
441 | 
442 |   } // end sq
443 | 
444 |   // rounded1 (r1) - slightly rounded (Android)
445 |   .st-shape-rounded1.st-multi-color .st-icon-#{$brand}:after,
446 |   .st-shape-rounded1.st-multi-color.st-icon-#{$brand}:after,
447 |   .st-shape-r1.st-multi-color .st-icon-#{$brand}:after,
448 |   .st-shape-r1.st-multi-color.st-icon-#{$brand}:after,
449 |   .st-shape-rounded1 .st-multi-color.st-icon-#{$brand}:after,
450 |   .st-shape-r1 .st-multi-color.st-icon-#{$brand}:after,
451 |   .st-multi-color .st-shape-rounded1.st-icon-#{$brand}:after,
452 |   .st-multi-color .st-shape-r1.st-icon-#{$brand}:after { 
453 |   
454 |     @if $brand == deviantart {
455 |       content: $deviantart-c1-alt1; // bordered logo
456 |     }
457 | 
458 |     // * in stackicons-social-complete
459 |     @else if $brand == deviantart-alt {
460 |       content: $deviantart-alt-c2-alt1; // border
461 |     }
462 | 
463 |     // * in stackicons-social-complete
464 |     @if $brand == email-alt {
465 |       content: $email-alt-r1;
466 |     }
467 | 
468 |     // * in stackicons-social-complete
469 |     @if $brand == email-alt2 {
470 |       content: $email-alt2-r1;
471 |     }
472 | 
473 |     @else if $brand == facebook {
474 |       content: $facebook-c1; // "f"
475 |     }
476 | 
477 |     @else if $brand == foursquare {
478 |       content: $foursquare-c3-alt1; // white whoosh
479 |     }
480 | 
481 |     // * in stackicons-social-complete
482 |     @else if $brand == instagram-alt {
483 |       content: $instagram-alt-c2-alt1 // tan bottom
484 |     }
485 | 
486 |     // * in stackicons-social-complete
487 |     @else if $brand == youtube-alt2 {
488 |       content: $youtube-alt2-r1;
489 |     }
490 | 
491 |   } // end rounded1 (r1)
492 | 
493 |   // rounded2 (r2) - rounded 
494 |   .st-shape-rounded.st-multi-color .st-icon-#{$brand}:after,
495 |   .st-shape-rounded.st-multi-color.st-icon-#{$brand}:after,
496 |   .st-shape-rounded2.st-multi-color .st-icon-#{$brand}:after,
497 |   .st-shape-rounded2.st-multi-color.st-icon-#{$brand}:after,
498 |   .st-shape-r2.st-multi-color .st-icon-#{$brand}:after,
499 |   .st-shape-r2.st-multi-color.st-icon-#{$brand}:after,
500 |   .st-shape-rounded .st-multi-color.st-icon-#{$brand}:after,
501 |   .st-shape-rounded2 .st-multi-color.st-icon-#{$brand}:after,
502 |   .st-shape-r2 .st-multi-color.st-icon-#{$brand}:after,
503 |   .st-multi-color .st-shape-rounded.st-icon-#{$brand}:after,
504 |   .st-multi-color .st-shape-rounded2.st-icon-#{$brand}:after,
505 |   .st-multi-color .st-shape-r2.st-icon-#{$brand}:after { 
506 |   
507 |     @if $brand == deviantart {
508 |       content: $deviantart-c1-alt2; // bordered logo
509 |     }
510 | 
511 |     // * in stackicons-social-complete
512 |     @else if $brand == deviantart-alt {
513 |       content: $deviantart-alt-c2-alt2; // border
514 |     }
515 | 
516 |     // * in stackicons-social-complete
517 |     @if $brand == email-alt {
518 |       content: $email-alt-r2;
519 |     }
520 | 
521 |     // * in stackicons-social-complete
522 |     @if $brand == email-alt2 {
523 |       content: $email-alt2-r2;
524 |     }
525 | 
526 |     @else if $brand == facebook {
527 |       content: $facebook-c1; // "f"
528 |     }
529 | 
530 |     @else if $brand == foursquare {
531 |       content: $foursquare-c3-alt2; // white whoosh
532 |     }
533 | 
534 |     // * in stackicons-social-complete
535 |     @else if $brand == instagram-alt {
536 |       content: $instagram-alt-c2-alt2 // tan bottom
537 |     }
538 | 
539 |     // * in stackicons-social-complete
540 |     @else if $brand == youtube-alt2 {
541 |       content: $youtube-alt2-r2;
542 |     }
543 |   } // end rounded2 (r2)
544 | 
545 |   // rounded3 (r3) - more rounded (iOS 7)
546 |   .st-shape-rounded3.st-multi-color .st-icon-#{$brand}:after,
547 |   .st-shape-rounded3.st-multi-color.st-icon-#{$brand}:after,
548 |   .st-shape-r3.st-multi-color .st-icon-#{$brand}:after,
549 |   .st-shape-r3.st-multi-color.st-icon-#{$brand}:after,
550 |   .st-shape-rounded3 .st-multi-color.st-icon-#{$brand}:after,
551 |   .st-shape-r3 .st-multi-color.st-icon-#{$brand}:after,
552 |   .st-multi-color .st-shape-rounded3.st-icon-#{$brand}:after,
553 |   .st-multi-color .st-shape-r3.st-icon-#{$brand}:after { 
554 | 
555 |     @if $brand == deviantart {
556 |       content: $deviantart-c1-alt3; // bordered logo
557 |     }
558 | 
559 |     // * in stackicons-social-complete
560 |     @else if $brand == deviantart-alt {
561 |       content: $deviantart-alt-c2-alt3; // border
562 |     }
563 | 
564 |     // * in stackicons-social-complete
565 |     @if $brand == email-alt {
566 |       content: $email-alt-r3;
567 |     }
568 | 
569 |     // * in stackicons-social-complete
570 |     @if $brand == email-alt2 {
571 |       content: $email-alt2-r3;
572 |     }
573 | 
574 |     @else if $brand == facebook {
575 |       content: $facebook-c1; // "f"
576 |     }
577 | 
578 |     @else if $brand == foursquare {
579 |       content: $foursquare-c3-alt3; // white whoosh
580 |     }
581 | 
582 |     // * in stackicons-social-complete
583 |     @else if $brand == instagram-alt {
584 |       content: $instagram-alt-c2-alt3 // tan bottom
585 |     }
586 | 
587 |     // * in stackicons-social-complete
588 |     @else if $brand == youtube-alt2 {
589 |       content: $youtube-alt2-r3;
590 |     }
591 | 
592 |   } // end rounded3 (r3)
593 | 
594 |   // circle (cir)
595 |   .st-shape-circle.st-multi-color .st-icon-#{$brand}:after,
596 |   .st-shape-circle.st-multi-color.st-icon-#{$brand}:after,
597 |   .st-shape-cir.st-multi-color .st-icon-#{$brand}:after,
598 |   .st-shape-cir.st-multi-color.st-icon-#{$brand}:after,
599 |   .st-shape-rounded4.st-multi-color .st-icon-#{$brand}:after,
600 |   .st-shape-rounded4.st-multi-color.st-icon-#{$brand}:after,
601 |   .st-shape-r4.st-multi-color .st-icon-#{$brand}:after,
602 |   .st-shape-r4.st-multi-color.st-icon-#{$brand}:after,
603 |   .st-shape-circle .st-multi-color.st-icon-#{$brand}:after,
604 |   .st-shape-cir .st-multi-color.st-icon-#{$brand}:after,
605 |   .st-shape-rounded4 .st-multi-color.st-icon-#{$brand}:after,
606 |   .st-shape-r4 .st-multi-color.st-icon-#{$brand}:after,
607 |   .st-multi-color .st-shape-circle.st-icon-#{$brand}:after,
608 |   .st-multi-color .st-shape-cir.st-icon-#{$brand}:after,
609 |   .st-multi-color .st-shape-rounded4.st-icon-#{$brand}:after,
610 |   .st-multi-color .st-shape-r4.st-icon-#{$brand}:after { 
611 |   
612 |     @if $brand == deviantart {
613 |       content: $deviantart-c1-alt4; // bordered logo
614 |     }
615 | 
616 |     // * in stackicons-social-complete
617 |     @else if $brand == deviantart-alt {
618 |       content: $deviantart-alt-c2-alt4; // border
619 |     }
620 | 
621 |     // * in stackicons-social-complete
622 |     @if $brand == email-alt {
623 |       content: $email-alt-cir;
624 |     }
625 |     
626 |     // * in stackicons-social-complete
627 |     @if $brand == email-alt2 {
628 |       content: $email-alt2-cir;
629 |     }
630 | 
631 |     @else if $brand == facebook {
632 |       content: $facebook-c1-alt; // "f" cropped for circle
633 |     }
634 | 
635 |     @else if $brand == foursquare {
636 |       content: $foursquare-c3-alt4; // white whoosh
637 |     }
638 | 
639 |     // * in stackicons-social-complete
640 |     @else if $brand == instagram-alt {
641 |       content: $instagram-alt-c2-alt4 // tan bottom
642 |     }
643 | 
644 |     // * in stackicons-social-complete
645 |     @else if $brand == youtube-alt2 {
646 |       content: $youtube-alt2-cir;
647 |     }
648 |   } // end circle
649 | 
650 | } // end @each
651 | 
652 | // END MULTI-COLOR BUTTON-SHAPE OVERRIDES
653 | 
654 | 


--------------------------------------------------------------------------------
/scss/stackicons-social.scss:
--------------------------------------------------------------------------------
 1 | /* Stackicons-Social CSS Construction Kit v1.0 | MIT License | <http://stackicons.com> 
 2 |    Copyright (c) 2014 by Parker Bennett @parkerbennett @stackicons */
 3 | 
 4 | // Make sure the charset is set appropriately
 5 | @charset "UTF-8";
 6 | 
 7 | // font
 8 | @import "fonts-stackicons-social"; // make sure the font path in this file is right
 9 | 
10 | // variables
11 | @import "colors-social-2014"; // brand colors as variables (tweak as desired)
12 | @import "unicodes-stackicons-social"; // font characters (don't change this)
13 | 
14 | // *** variables used in default css ***
15 | @import "construction-kit-stackicons-social"; // *** change values here to tweak css defaults ***
16 | 
17 | @import "css-defaults-stackicons-social"; // @each statement here lists all brands (trim as needed)
18 | 
19 | // optional - comment-out if you're happy with the defaults, and don't need to override shapes per icon...
20 | @import "override-button-shapes-stackicons-social"; // @each statement here lists all brands (trim as needed)
21 | 
22 | // you might still want icon-only (e.g., for dropdown nav-list)
23 | @import "override-icon-only-stackicons-social"; // @each statement here lists all brands (trim as needed)
24 | 
25 | // this one is really more for demo purposes. It's commented-out by default...
26 | // @import "override-colors-stackicons-social"; // @each statement here lists all brands (trim as needed)
27 | 
28 | // *** variables used in default css ***
29 | @import "multi-color-kit-stackicons-social"; // *** change values here to tweak css defaults ***
30 | 
31 | @import "multi-color-css-stackicons-social"; // @each statements here list all brands (trim as needed)
32 | 
33 | // optional - comment-out if you don't need to override button shapes per icon... 
34 | // ("st.icon-only" class is generated separately by the file above.)
35 | @import "multi-color-override-shapes-stackicons-social"; // @each statement here lists brands (trim as needed)
36 | 


--------------------------------------------------------------------------------
/stackicons-social-characters.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <head>
  3 |   <meta charset='utf-8'>
  4 | <link href='/images/favicon.ico' rel='shortcut icon'>
  5 | <title>Stackicons-Social Complete Character Set</title>
  6 | <link href='css/fontviewer.css' media='all' rel='stylesheet'>
  7 | <style>
  8 | 
  9 | @font-face {
 10 |   font-family: 'Stackicons-Social';
 11 |   src: url("fonts/Stackicons/Stackicons-Social.eot");
 12 |   /* IE9 Compat Modes */
 13 |   src: url("fonts/Stackicons/Stackicons-Social.eot?#iefix") format("embedded-opentype"), url("../fonts/Stackicons/Stackicons-Social.woff") format("woff"), url("fonts/Stackicons/Stackicons-Social.ttf") format("truetype"), url("fonts/Stackicons/Stackicons-Social.svg#76cc4077294aa89eeb6c5fa684bb9048") format("svg");
 14 |   /* Legacy iOS */
 15 |   font-style: normal !important;
 16 |   font-weight: 400 !important;
 17 |   -webkit-font-smoothing: antialiased;
 18 |   -moz-osx-font-smoothing: grayscale;
 19 |   font-smoothing: antialiased;
 20 |   speak: none;
 21 | }
 22 | 
 23 | h1 {color: #f5aa00; font-weight: 200; margin-top: 1em;}
 24 | 
 25 | .text {
 26 |   font-family: 'Stackicons-Social' !important;
 27 |   -webkit-font-smoothing: antialiased;
 28 |   -moz-osx-font-smoothing: grayscale;
 29 |   font-smoothing: antialiased;
 30 | }
 31 | 
 32 | a { color: inherit; text-decoration: none; font-weight: bold;}
 33 | 
 34 | </style>
 35 | 
 36 | </head>
 37 | <body class='view iytfjjnpys'>
 38 |   <div class='container' role='main'>
 39 |     <header>
 40 |       <div class='controls'>
 41 |         <span class='font-size'>
 42 |           <input max='300' min='6' type='range'>
 43 |           <div class='indicator'>
 44 |             12px
 45 |           </div>
 46 |         </span>
 47 |         <input class='text-color' name='color' type='color'>
 48 |         <input class='background-color' name='color' type='color'>
 49 |       </div>
 50 |     </header>
 51 |     <h1>
 52 |       Stackicons-Social-Regular
 53 |     </h1>
 54 |     <p class='text' contentEditable>
 55 |       &#13;
 56 |       &#32;
 57 |       &#43;
 58 |       &#60;
 59 |       &#62;
 60 |       &#65;
 61 |       &#103;
 62 |       &#215;
 63 |       &#8201;
 64 |       &#8202;
 65 |       &#8230;
 66 |       &#8249;
 67 |       &#8250;
 68 |       &#8592;
 69 |       &#8593;
 70 |       &#8594;
 71 |       &#8595;
 72 |       &#9650;
 73 |       &#9652;
 74 |       &#9654;
 75 |       &#9658;
 76 |       &#9660;
 77 |       &#9662;
 78 |       &#9664;
 79 |       &#9668;
 80 |       &#9776;
 81 |       &#9993;
 82 |       &#57345;
 83 |       &#57346;
 84 |       &#57347;
 85 |       &#57348;
 86 |       &#57349;
 87 |       &#57376;
 88 |       &#57377;
 89 |       &#57378;
 90 |       &#57379;
 91 |       &#57380;
 92 |       &#57381;
 93 |       &#57382;
 94 |       &#57383;
 95 |       &#57384;
 96 |       &#57386;
 97 |       &#57387;
 98 |       &#57388;
 99 |       &#57389;
100 |       &#57390;
101 |       &#57391;
102 |       &#57393;
103 |       &#57394;
104 |       &#57395;
105 |       &#57396;
106 |       &#57397;
107 |       &#57398;
108 |       &#57399;
109 |       &#57402;
110 |       &#57403;
111 |       &#57404;
112 |       &#57405;
113 |       &#57406;
114 |       &#57407;
115 |       &#57409;
116 |       &#57410;
117 |       &#57411;
118 |       &#57412;
119 |       &#57413;
120 |       &#57414;
121 |       &#57416;
122 |       &#57417;
123 |       &#57418;
124 |       &#57419;
125 |       &#57420;
126 |       &#57421;
127 |       &#57422;
128 |       &#57423;
129 |       &#57424;
130 |       &#57441;
131 |       &#57442;
132 |       &#57443;
133 |       &#57444;
134 |       &#57445;
135 |       &#57446;
136 |       &#57447;
137 |       &#57448;
138 |       &#57449;
139 |       &#57450;
140 |       &#57451;
141 |       &#57452;
142 |       &#57453;
143 |       &#57454;
144 |       &#57455;
145 |       &#57457;
146 |       &#57458;
147 |       &#57459;
148 |       &#57460;
149 |       &#57461;
150 |       &#57462;
151 |       &#57464;
152 |       &#57465;
153 |       &#57466;
154 |       &#57467;
155 |       &#57468;
156 |       &#57469;
157 |       &#57470;
158 |       &#57471;
159 |       &#57472;
160 |       &#57473;
161 |       &#57474;
162 |       &#57475;
163 |       &#57476;
164 |       &#57477;
165 |       &#57478;
166 |       &#57479;
167 |       &#57480;
168 |       &#57481;
169 |       &#57482;
170 |       &#57483;
171 |       &#57484;
172 |       &#57485;
173 |       &#57486;
174 |       &#57487;
175 |       &#57489;
176 |       &#57490;
177 |       &#57491;
178 |       &#57492;
179 |       &#57493;
180 |       &#57494;
181 |       &#57497;
182 |       &#57498;
183 |       &#57499;
184 |       &#57500;
185 |       &#57501;
186 |       &#57502;
187 |       &#57503;
188 |       &#57600;
189 |       &#57601;
190 |       &#57602;
191 |       &#57603;
192 |       &#57604;
193 |       &#57605;
194 |       &#57606;
195 |       &#57607;
196 |       &#57608;
197 |       &#57609;
198 |       &#57610;
199 |       &#57611;
200 |       &#57612;
201 |       &#57613;
202 |       &#57614;
203 |       &#57615;
204 |       &#57616;
205 |       &#57617;
206 |       &#57618;
207 |       &#57619;
208 |       &#57620;
209 |       &#57621;
210 |       &#57622;
211 |       &#57623;
212 |       &#57624;
213 |       &#57625;
214 |       &#57626;
215 |       &#57627;
216 |       &#57628;
217 |       &#57629;
218 |       &#57630;
219 |       &#57631;
220 |       &#57632;
221 |       &#57633;
222 |       &#57634;
223 |       &#57635;
224 |       &#57636;
225 |       &#57637;
226 |       &#57638;
227 |       &#57639;
228 |       &#57640;
229 |       &#57641;
230 |       &#57642;
231 |       &#57643;
232 |       &#57644;
233 |       &#57645;
234 |       &#57646;
235 |       &#57647;
236 |       &#57649;
237 |       &#57650;
238 |       &#57651;
239 |       &#57652;
240 |       &#57653;
241 |       &#57654;
242 |       &#57655;
243 |       &#57656;
244 |       &#57657;
245 |       &#57658;
246 |       &#57659;
247 |       &#57660;
248 |       &#57661;
249 |       &#57662;
250 |       &#57663;
251 |       &#57664;
252 |       &#57665;
253 |       &#57666;
254 |       &#57667;
255 |       &#57668;
256 |       &#57669;
257 |       &#57670;
258 |       &#57671;
259 |       &#57672;
260 |       &#57673;
261 |       &#57674;
262 |       &#57675;
263 |       &#57676;
264 |       &#57677;
265 |       &#57678;
266 |       &#57679;
267 |       &#57681;
268 |       &#57682;
269 |       &#57683;
270 |       &#57684;
271 |       &#57685;
272 |       &#57686;
273 |       &#57687;
274 |       &#57688;
275 |       &#57689;
276 |       &#57690;
277 |       &#57691;
278 |       &#57692;
279 |       &#57693;
280 |       &#57694;
281 |       &#57695;
282 |       &#57696;
283 |       &#57697;
284 |       &#57698;
285 |       &#57699;
286 |       &#57700;
287 |       &#57701;
288 |       &#57702;
289 |       &#57703;
290 |       &#57704;
291 |       &#57706;
292 |       &#57707;
293 |       &#57708;
294 |       &#57709;
295 |       &#57710;
296 |       &#57711;
297 |       &#57712;
298 |       &#57715;
299 |       &#57716;
300 |       &#57717;
301 |       &#57718;
302 |       &#57719;
303 |       &#57720;
304 |       &#57721;
305 |       &#57722;
306 |       &#57723;
307 |       &#57724;
308 |       &#57725;
309 |       &#57726;
310 |       &#57727;
311 |       &#57728;
312 |       &#57729;
313 |       &#57730;
314 |       &#57731;
315 |       &#57732;
316 |       &#57733;
317 |       &#57734;
318 |       &#57735;
319 |       &#57736;
320 |       &#57737;
321 |       &#57738;
322 |       &#57739;
323 |       &#57740;
324 |       &#57741;
325 |       &#57742;
326 |       &#57743;
327 |       &#57744;
328 |       &#57745;
329 |       &#57746;
330 |       &#57747;
331 |       &#57748;
332 |       &#57749;
333 |       &#57750;
334 |       &#57751;
335 |       &#57752;
336 |       &#57753;
337 |       &#57754;
338 |       &#57755;
339 |       &#57756;
340 |       &#57757;
341 |       &#57758;
342 |       &#57759;
343 |       &#57866;
344 |       &#57867;
345 |       &#57868;
346 |       &#57869;
347 |       &#57870;
348 |       &#57871;
349 |       &#57873;
350 |       &#57874;
351 |       &#57875;
352 |       &#57876;
353 |       &#57877;
354 |       &#57878;
355 |       &#57879;
356 |       &#57880;
357 |       &#57881;
358 |       &#57882;
359 |       &#57883;
360 |       &#57884;
361 |       &#57885;
362 |       &#57886;
363 |       &#57887;
364 |       &#57888;
365 |       &#57889;
366 |       &#57890;
367 |       &#57891;
368 |       &#57892;
369 |       &#57893;
370 |       &#57894;
371 |       &#57895;
372 |       &#57896;
373 |       &#57897;
374 |       &#57916;
375 |       &#57917;
376 |       &#57918;
377 |       &#57919;
378 |       &#57930;
379 |       &#57931;
380 |       &#57932;
381 |       &#57933;
382 |       &#57934;
383 |       &#57935;
384 |       &#57936;
385 |       &#57937;
386 |       &#57938;
387 |       &#57939;
388 |       &#57940;
389 |       &#57941;
390 |       &#57942;
391 |       &#57946;
392 |       &#57947;
393 |       &#57948;
394 |       &#57949;
395 |       &#57950;
396 |       &#57951;
397 |       &#57953;
398 |       &#57954;
399 |       &#57955;
400 |       &#57956;
401 |       &#57957;
402 |       &#57958;
403 |       &#57959;
404 |       &#57960;
405 |       &#57962;
406 |       &#57963;
407 |       &#57964;
408 |       &#57965;
409 |       &#57966;
410 |       &#57967;
411 |       &#57969;
412 |       &#57970;
413 |       &#57971;
414 |       &#57972;
415 |       &#57973;
416 |       &#57974;
417 |       &#57975;
418 |       &#57976;
419 |       &#57978;
420 |       &#57979;
421 |       &#57980;
422 |       &#57981;
423 |       &#57982;
424 |       &#57983;
425 |       &#57984;
426 |       &#57985;
427 |       &#57986;
428 |       &#57987;
429 |       &#57988;
430 |       &#57989;
431 |       &#57990;
432 |       &#57991;
433 |       &#57992;
434 |       &#57994;
435 |       &#57995;
436 |       &#57996;
437 |       &#57997;
438 |       &#57998;
439 |       &#57999;
440 |       &#58001;
441 |       &#58002;
442 |       &#58003;
443 |       &#58004;
444 |       &#58005;
445 |       &#58006;
446 |       &#58007;
447 |       &#58008;
448 |       &#58009;
449 |       &#58015;
450 |       &#58122;
451 |       &#58123;
452 |       &#58124;
453 |       &#58125;
454 |       &#58126;
455 |       &#58127;
456 |       &#58129;
457 |       &#58130;
458 |       &#58131;
459 |       &#58132;
460 |       &#58133;
461 |       &#58134;
462 |       &#58135;
463 |       &#58136;
464 |       &#58137;
465 |       &#58138;
466 |       &#58139;
467 |       &#58140;
468 |       &#58141;
469 |       &#58142;
470 |       &#58143;
471 |       &#58144;
472 |       &#58145;
473 |       &#58146;
474 |       &#58147;
475 |       &#58148;
476 |       &#58149;
477 |       &#58150;
478 |       &#58151;
479 |       &#58152;
480 |       &#58153;
481 |       &#58154;
482 |       &#58155;
483 |       &#58156;
484 |       &#58157;
485 |       &#58158;
486 |       &#58159;
487 |       &#58160;
488 |       &#58161;
489 |       &#58162;
490 |       &#58163;
491 |       &#58164;
492 |       &#58165;
493 |       &#58166;
494 |       &#58167;
495 |       &#58170;
496 |       &#58171;
497 |       &#58172;
498 |       &#58173;
499 |       &#58174;
500 |       &#58175;
501 |       &#58176;
502 |       &#58177;
503 |       &#58178;
504 |       &#58179;
505 |       &#58180;
506 |       &#58181;
507 |       &#58182;
508 |       &#58183;
509 |       &#58184;
510 |       &#58185;
511 |       &#58186;
512 |       &#58187;
513 |       &#58188;
514 |       &#58193;
515 |       &#58194;
516 |       &#58195;
517 |       &#58196;
518 |       &#58197;
519 |       &#58198;
520 |       &#58199;
521 |       &#58200;
522 |       &#58201;
523 |       &#58202;
524 |       &#58203;
525 |       &#58204;
526 |       &#58205;
527 |       &#58206;
528 |       &#58207;
529 |       &#58209;
530 |       &#58210;
531 |       &#58211;
532 |       &#58212;
533 |       &#58213;
534 |       &#58214;
535 |       &#58215;
536 |       &#58216;
537 |       &#58217;
538 |       &#58218;
539 |       &#58219;
540 |       &#58220;
541 |       &#58221;
542 |       &#58222;
543 |       &#58223;
544 |       &#58225;
545 |       &#58226;
546 |       &#58227;
547 |       &#58228;
548 |       &#58229;
549 |       &#58230;
550 |       &#58231;
551 |       &#58232;
552 |       &#58233;
553 |       &#58234;
554 |       &#58235;
555 |       &#58236;
556 |       &#58237;
557 |       &#58238;
558 |       &#58239;
559 |       &#58240;
560 |       &#58241;
561 |       &#58242;
562 |       &#58243;
563 |       &#58244;
564 |       &#58245;
565 |       &#58246;
566 |       &#58247;
567 |       &#58248;
568 |       &#58249;
569 |       &#58250;
570 |       &#58251;
571 |       &#58252;
572 |       &#58253;
573 |       &#58254;
574 |       &#58255;
575 |       &#58256;
576 |       &#58257;
577 |       &#58258;
578 |       &#58259;
579 |       &#58260;
580 |       &#58261;
581 |       &#58262;
582 |       &#58263;
583 |       &#58264;
584 |       &#58265;
585 |       &#58266;
586 |       &#58267;
587 |       &#58268;
588 |       &#58269;
589 |       &#58270;
590 |       &#58271;
591 |       &#58368;
592 |       &#58369;
593 |       &#58370;
594 |       &#58371;
595 |       &#58372;
596 |       &#58373;
597 |       &#58374;
598 |       &#58375;
599 |       &#58376;
600 |       &#58384;
601 |       &#58385;
602 |       &#58386;
603 |       &#58387;
604 |       &#58388;
605 |       &#58389;
606 |       &#58390;
607 |       &#58391;
608 |       &#58392;
609 |       &#58393;
610 |       &#58401;
611 |       &#58402;
612 |       &#58403;
613 |       &#58404;
614 |       &#58405;
615 |       &#58406;
616 |       &#58407;
617 |       &#58408;
618 |       &#58409;
619 |       &#58410;
620 |       &#58411;
621 |       &#58412;
622 |       &#58413;
623 |       &#58414;
624 |       &#58416;
625 |       &#58417;
626 |       &#58418;
627 |       &#58419;
628 |       &#58420;
629 |       &#58421;
630 |       &#58422;
631 |       &#58433;
632 |       &#58434;
633 |       &#58435;
634 |       &#58436;
635 |       &#58437;
636 |       &#58438;
637 |       &#58465;
638 |       &#58466;
639 |       &#58467;
640 |       &#58468;
641 |       &#58469;
642 |       &#58470;
643 |       &#58753;
644 |       &#58754;
645 |       &#58755;
646 |       &#58756;
647 |       &#58757;
648 |       &#58758;
649 |       &#58762;
650 |       &#58763;
651 |       &#58764;
652 |       &#58765;
653 |       &#58766;
654 |       &#58767;
655 |       &#58769;
656 |       &#58770;
657 |       &#58771;
658 |       &#58772;
659 |       &#58773;
660 |       &#58774;
661 |       &#58881;
662 |       &#58882;
663 |       &#58883;
664 |       &#58884;
665 |       &#58885;
666 |       &#58890;
667 |       &#58891;
668 |       &#58892;
669 |       &#58893;
670 |       &#58894;
671 |       &#58897;
672 |       &#58898;
673 |       &#58899;
674 |       &#58900;
675 |       &#58901;
676 |       &#59025;
677 |       &#59026;
678 |       &#59027;
679 |       &#59028;
680 |       &#59029;
681 |       &#59030;
682 |       &#59031;
683 |       &#59032;
684 |       &#59033;
685 |       &#59034;
686 |       &#59035;
687 |       &#59036;
688 |       &#59037;
689 |       &#59038;
690 |       &#59039;
691 |     </p>
692 |   <small style="display:block;">Output by <a href="http://fontprep.com" target="_blank">FontPrep</a>. Thanks to Brian Gonzales.</small>
693 | 
694 |     <script>
695 |       var FP            = FP || {};
696 |       FP.currentFontID  = "iytfjjnpys"
697 |     </script>
698 |   </div>
699 |   <script>
700 |     var FP    = FP || {};
701 |     FP.licensed  = true
702 |   </script>
703 |   <script src='js/vendor/jquery.js'></script>
704 |   <script src='js/vendor/fontviewer.js'></script>
705 | </body>
706 | 


--------------------------------------------------------------------------------
/stackicons-social_class_list.txt:
--------------------------------------------------------------------------------
 1 | st-icon-addthis
 2 | st-icon-adn
 3 | st-icon-amazon
 4 | st-icon-android
 5 | st-icon-apple
 6 | st-icon-behance
 7 | st-icon-blogger
 8 | st-icon-codepen
 9 | st-icon-delicious
10 | st-icon-deviantart
11 | st-icon-digg
12 | st-icon-dribbble
13 | st-icon-dribbble-alt (with shadow)
14 | st-icon-dropbox
15 | st-icon-ebay
16 | st-icon-email
17 | st-icon-email2 (darker)
18 | st-icon-evernote
19 | st-icon-facebook
20 | st-icon-facebook-alt (centered "f")
21 | st-icon-flattr
22 | st-icon-flickr
23 | st-icon-forrst
24 | st-icon-foursquare
25 | st-icon-github
26 | st-icon-github-alt (silhouette)
27 | st-icon-gittip
28 | st-icon-gmail
29 | st-icon-gmail-alt (iOS icon)
30 | st-icon-google
31 | st-icon-googleplus
32 | st-icon-imdb
33 | st-icon-instagram
34 | st-icon-kickstarter
35 | st-icon-lastfm
36 | st-icon-linkedin
37 | st-icon-microsoft
38 | st-icon-myspace
39 | st-icon-pandora
40 | st-icon-paypal
41 | st-icon-paypal2 (iOS icon)
42 | st-icon-picasa
43 | st-icon-pinboard
44 | st-icon-pinterest
45 | st-icon-rdio
46 | st-icon-reddit
47 | st-icon-rss
48 | st-icon-sharethis
49 | st-icon-skype
50 | st-icon-slideshare
51 | st-icon-soundcloud
52 | st-icon-spotify
53 | st-icon-stumbleupon
54 | st-icon-stackoverflow
55 | st-icon-tumblr
56 | st-icon-twitter
57 | st-icon-vimeo
58 | st-icon-vine
59 | st-icon-windows
60 | st-icon-windows7
61 | st-icon-wordpress
62 | st-icon-xing
63 | st-icon-yahoo
64 | st-icon-yelp
65 | st-icon-youtube
66 | st-icon-youtube2 (colors inverted)
67 | st-icon-youtube-alt ("YouTube")
68 | st-icon-zerply
69 | st-icon-search
70 | st-icon-search-alt (multi-color)
71 | st-icon-menu
72 | st-icon-menu-alt (square)
73 | st-icon-menu-alt2 (fully rounded)
74 | st-icon-more (ellipsis)
75 | st-icon-triangle-down


--------------------------------------------------------------------------------