mirror of
https://github.com/softinio/softinio.com.git
synced 2025-09-05 11:16:41 -07:00
Switched to SPF13 theme
This commit is contained in:
parent
dc8f68529f
commit
6425fec733
286 changed files with 3612 additions and 6951 deletions
45
static/static/css/ZGS.scss
Normal file
45
static/static/css/ZGS.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
*
|
||||
* Zombie Responsive System (1.0) <http://zombiegridsystem.spf13.com/>
|
||||
* by Steve Francia <http://spf13.com/>
|
||||
* licensed under MIT <http://opensource.org/licenses/mit-license.php>
|
||||
*
|
||||
*/
|
||||
|
||||
@import "mydefines";
|
||||
|
||||
@import "zombie/defines";
|
||||
@import "zombie/functions";
|
||||
@import "zombie/mixins";
|
||||
@import "zombie/normalize";
|
||||
@import "zombie/font-sizes";
|
||||
@import "zombie/base";
|
||||
|
||||
//@import "media/main";
|
||||
|
||||
@import "mycolors";
|
||||
@import "myfonts";
|
||||
@import "mystyles";
|
||||
|
||||
// Choose to create all, any or just one (lowest) per media
|
||||
|
||||
// No media queries should be in this file
|
||||
@import "media/default";
|
||||
|
||||
// 3 or 4 columns
|
||||
/* min-width: 320px (1st gen), 480px (2nd gen), 640px (landscape) */
|
||||
@import "media/phone";
|
||||
|
||||
// 6 columns
|
||||
/* min-width: 720px (ipad), 768px (other tabs), 900px (landscape) */
|
||||
@import "media/tablet";
|
||||
|
||||
// 8 or 12 columns
|
||||
/* min-width: 1024px (xga), 1200px (wxga), 1600px (uxga) */
|
||||
@import "media/desktop";
|
||||
|
||||
// 12 columns
|
||||
/* min-width: 1920px (hd 1080), 2048px (2k), 2560px (wqhd) */
|
||||
@import "media/widescreen";
|
||||
|
||||
@import "spf13-1"
|
||||
56
static/static/css/_mycolors.scss
Normal file
56
static/static/css/_mycolors.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
$litebg: #FAFAF9;
|
||||
$light: #EEE;
|
||||
$aqua: #00DFFC;
|
||||
$she: #00B4CC;
|
||||
$deep: #008C9E;
|
||||
$lion: #005F6B;
|
||||
$dark: #343838;
|
||||
$mygrey: #575757;
|
||||
$shade: #CCC;
|
||||
|
||||
|
||||
$rss: #ffaa31;
|
||||
$twitter:#07beed;
|
||||
$facebook: #314d91;
|
||||
$github: #2d2d2d;
|
||||
$googleplus: #d14836;
|
||||
$stumbleupon: #3ea642;
|
||||
$linkedin: #0dc5ef;
|
||||
$subscribemail: #ffaa31;
|
||||
$slideshare: #00a69c;
|
||||
$reddit: #cee3f8;
|
||||
$delicious: #285da7;
|
||||
|
||||
$turquoise:#1ABC9C;
|
||||
$green-sea:#16A085;
|
||||
$emerland:#2ECC71;
|
||||
$nephritis:#27AE60;
|
||||
$peter-river:#3498DB;
|
||||
$belize-hole:#2980B9;
|
||||
$amethyst:#9B59B6;
|
||||
$wisteria:#8E44AD;
|
||||
$wet-asphalt:#34495E;
|
||||
$midnight-blue:#2C3E50;
|
||||
$sun-flower:#F1C40F;
|
||||
$orange:#F39C12;
|
||||
$carrot:#E67E22;
|
||||
$pumpkin:#D35400;
|
||||
$alizarin:#E74C3C;
|
||||
$pomegranate:#C0392B;
|
||||
$clouds:#ECF0F1;
|
||||
$silver:#BDC3C7;
|
||||
$concrete:#95A5A6;
|
||||
$asbestos:#7F8C8D;
|
||||
$lite-sky:#ECF0F5;
|
||||
$slate:#95A5B4;
|
||||
$near-white:#FAFAFA;
|
||||
|
||||
|
||||
/*$header_color : $alizarin;*/
|
||||
/*$header_color : $pomegranate;*/
|
||||
$header_color : $midnight-blue;
|
||||
$main_link_color : $peter-river;
|
||||
$main_link_hover_bg : $near-white;
|
||||
/*$body_bg_color : $lite-sky;*/
|
||||
$body_bg_color : #FFF;
|
||||
$em_color : $slate - 10;
|
||||
12
static/static/css/_mydefines.scss
Normal file
12
static/static/css/_mydefines.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
$margin_cols: 2;
|
||||
$content_cols: 12;
|
||||
$font-size: 16; // in pixels
|
||||
$line-height: 1.5; // in line height
|
||||
$fixed_column: 2.8; // in ems
|
||||
$emSteps: 8;
|
||||
|
||||
$column-notation: "col";
|
||||
$row-notation: "row";
|
||||
|
||||
$linktime: .25;
|
||||
|
||||
42
static/static/css/_myfonts.scss
Normal file
42
static/static/css/_myfonts.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
@font-face {
|
||||
font-family: 'kvwp';
|
||||
src: url('../fonts/KievitWebPro.eot');
|
||||
src: local('☺'),
|
||||
url("../fonts/KievitWebPro.woff") format("woff"),
|
||||
url("../fonts/KievitOT-Regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'kvwp';
|
||||
src: url('../fonts/KievitWebPro-Bold.eot');
|
||||
src: local('☺'),
|
||||
url("../fonts/KievitWebPro-Bold.woff") format("woff"),
|
||||
url("../fonts/KievitOT-Bold.otf") format("opentype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
*@font-face {
|
||||
* font-family: 'kvwp';
|
||||
* src: url('../fonts/KievitWebPro-BoldIta.eot');
|
||||
* src: local('☺'),
|
||||
* url("../fonts/KievitWebPro-BoldIta.woff") format("woff"),
|
||||
* url("../fonts/KievitOT-BoldItalic.otf") format("opentype");
|
||||
* font-weight: bold;
|
||||
* font-style: italic;
|
||||
*}
|
||||
*
|
||||
*@font-face {
|
||||
* font-family: 'kvwp';
|
||||
* src: url('../fonts/KievitWebPro-Ita.eot');
|
||||
* src: local('☺'),
|
||||
* url("../fonts/KievitWebPro-Ita.woff") format("woff"),
|
||||
* url("../fonts/KievitOT-Italic.otf") format("opentype");
|
||||
* font-weight: normal;
|
||||
* font-style: italic;
|
||||
*}
|
||||
*/
|
||||
|
||||
476
static/static/css/_mystyles.scss
Normal file
476
static/static/css/_mystyles.scss
Normal file
|
|
@ -0,0 +1,476 @@
|
|||
body {
|
||||
font-weight: 200;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
/*font-family: 'Carrois Gothic', sans-serif;*/
|
||||
background-color: $body_bg_color;
|
||||
}
|
||||
|
||||
|
||||
div.highlight {
|
||||
padding:1em;
|
||||
}
|
||||
|
||||
// BASE STYLING
|
||||
|
||||
img {
|
||||
border:0;
|
||||
max-width:100%;
|
||||
}
|
||||
|
||||
section a, footer a {
|
||||
color: $main_link_color;
|
||||
text-decoration: none;
|
||||
@include easein($linktime);
|
||||
border-radius: 7px;
|
||||
padding: 1px 3px 3px 3px;
|
||||
/*margin-left: -5px;*/
|
||||
|
||||
&:hover {
|
||||
background: $main_link_hover_bg;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
article > footer {
|
||||
text-align: right;
|
||||
line-height: 3em;
|
||||
}
|
||||
|
||||
#logolink {
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
@include easein(1.3);
|
||||
|
||||
&:hover {
|
||||
color: $peter-river;
|
||||
}
|
||||
}
|
||||
|
||||
#outer_ribbon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.smaller {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.pure-button {
|
||||
font-size: 100%;
|
||||
padding: 0.5em 1.5em;
|
||||
color: white;
|
||||
border: 0px none transparent;
|
||||
background-color: rgb(0, 120, 231);
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
transition: box-shadow 0.1s linear 0s;
|
||||
}
|
||||
.pure-button {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#projectmeta {
|
||||
padding-bottom:2em;
|
||||
}
|
||||
|
||||
#software_date {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.pure-button:hover, .pure-button:focus {
|
||||
background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
|
||||
color: white;
|
||||
}
|
||||
|
||||
#ribbon {
|
||||
background-color: #a00;
|
||||
overflow: hidden;
|
||||
/* top left corner */
|
||||
position: fixed;
|
||||
right: -3.2em;
|
||||
top: 2.5em;
|
||||
/* 45 deg ccw rotation */
|
||||
-moz-transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
/* shadow */
|
||||
-moz-box-shadow: 0 0 1em #888;
|
||||
-webkit-box-shadow: 0 0 1em #888;
|
||||
}
|
||||
|
||||
#ribbon a {
|
||||
border: 1px solid #faa;
|
||||
color: #fff;
|
||||
display: block;
|
||||
font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
|
||||
margin: 0.05em 0 0.075em 0;
|
||||
padding: 0.5em 3.5em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
/* shadow */
|
||||
text-shadow: 0 0 0.5em #444;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
float:none;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $em_color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $header_color;
|
||||
font-family: 'Fjalla One', serif;
|
||||
text-transform: capitalize;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
h1#title {
|
||||
@include huge;
|
||||
margin: emStep(0) 0 emStep(4);
|
||||
text-transform: capitalize;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
@include large;
|
||||
margin: emStep(8) 0 emStep(2);
|
||||
text-shadow: 2px 2px 0px #FFF;
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: emStep(12) 0 emStep(12);
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
text-shadow: 1px 1px 0px #FFF;
|
||||
}
|
||||
|
||||
#list {
|
||||
list-style: none;
|
||||
|
||||
&>li {
|
||||
vertical-align: top;
|
||||
margin-bottom: .5em;
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0 0;
|
||||
|
||||
&>a {
|
||||
display: table-cell;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
|
||||
&>.meta {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tags li {
|
||||
border-radius: 3px;
|
||||
background: $concrete;
|
||||
display: inline-block;
|
||||
margin: 0 0px 0 5px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
font-size: 15px;
|
||||
@include easein($linktime);
|
||||
|
||||
&:hover {
|
||||
background: $peter-river;
|
||||
}
|
||||
}
|
||||
|
||||
#tags li a {
|
||||
color: #FFF;
|
||||
|
||||
&:before {
|
||||
content: "#";
|
||||
}
|
||||
|
||||
}
|
||||
.amp {
|
||||
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
&>figure.left {
|
||||
float:left;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
&>figure.right {
|
||||
float:right;
|
||||
margin-right: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hid:hover figcaption {
|
||||
opacity: 100;
|
||||
}
|
||||
|
||||
.hid figcaption {
|
||||
opacity: 0;
|
||||
transition:opacity 0.5s;
|
||||
}
|
||||
|
||||
#categories li {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#categories, #meta h5 {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
aside ul {
|
||||
@include bulletless;
|
||||
}
|
||||
|
||||
#explore > ul > li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#explore > ul > li:after {
|
||||
content: " /";
|
||||
}
|
||||
|
||||
#explore > ul > li:last-child:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
aside a {
|
||||
text-decoration: none;
|
||||
color: $asbestos;
|
||||
@include easein($linktime);
|
||||
|
||||
&:hover {
|
||||
color: $peter-river;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
font-family: Georgia, serif;
|
||||
font-style: italic;
|
||||
width: 80%;
|
||||
margin: 0.25em auto;
|
||||
padding: 0.25em 1em;
|
||||
line-height: 1.45; position: relative;
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
blockquote:before {
|
||||
display: block;
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
font-size: 1000%;
|
||||
left: -.24em;
|
||||
top: -.4em;
|
||||
opacity: .3;
|
||||
width: 100%;
|
||||
font-family: 'arial';
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
blockquote cite {
|
||||
color: #999;
|
||||
font-size: 90%;
|
||||
display: block;
|
||||
/*margin: .2em 1em 0 0;*/
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
blockquote cite:before {
|
||||
content: "\2014 \2009";
|
||||
}
|
||||
|
||||
// SOCIAL SIDEBAR STUFF
|
||||
|
||||
a.rss { color:$rss; background:#fff;}
|
||||
a.twitter { color:$twitter; background: #fff;}
|
||||
a.facebook { color:$facebook; background: #fff;}
|
||||
a.github { color:$github; background: #fff; }
|
||||
a.googleplus { color:$googleplus; background: #fff; }
|
||||
a.stumbleupon { color:$stumbleupon; background: #fff;}
|
||||
a.linkedin { color:$linkedin; background: #fff; }
|
||||
a.subscribemail { color:$subscribemail;background: #fff;}
|
||||
a.slideshare { color:$slideshare; background: #fff; }
|
||||
a.reddit { color:$reddit - 40; background: #fff; }
|
||||
a.delicious { color:$delicious; background: #fff; }
|
||||
|
||||
|
||||
a.rss:hover { background:$rss; color:#fff;}
|
||||
a.twitter:hover { background:$twitter; color:#fff;}
|
||||
a.facebook:hover { background:$facebook; color:#fff;}
|
||||
a.github:hover { background:$github; color:#fff;}
|
||||
a.googleplus:hover { background:$googleplus; color: #fff; }
|
||||
a.stumbleupon:hover { background:$stumbleupon;color:#fff; }
|
||||
a.linkedin:hover { background:$linkedin; color: #fff; }
|
||||
a.subscribemail:hover { background:$subscribemail;color:#fff;}
|
||||
a.slideshare:hover { background:$slideshare; color: #fff; }
|
||||
a.reddit:hover { background:$reddit; color: #fff; }
|
||||
a.delicious:hover { background:$delicious; color: #fff; }
|
||||
|
||||
.social li a:hover span {margin-left:0px; padding-left:6px;}
|
||||
.social li a:hover .icon {font-size:100%;}
|
||||
|
||||
#social > li > .icon {
|
||||
padding: .2em .2em .4em 1em;
|
||||
color: $clouds;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.share .icon, .follow .icon {
|
||||
padding-left: 1em;
|
||||
font-size: .8em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
|
||||
span.title {
|
||||
text-align: left;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
span.subcount, span.title {
|
||||
color: $clouds;
|
||||
}
|
||||
|
||||
span.subcount {
|
||||
@include tiny;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#social span {
|
||||
text-align: left;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#header {
|
||||
#social > .dropdown {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#social li {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: $slate;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#social > li {
|
||||
margin-top: 1em;
|
||||
margin-bottom: .35em;
|
||||
}
|
||||
|
||||
#social > li > span {
|
||||
font-size: 1.2em;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: .2em;
|
||||
}
|
||||
|
||||
.social {
|
||||
padding: .3em 0 .3em 0;
|
||||
background: $near-white;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.social > li > a {
|
||||
text-align: left;
|
||||
padding: .1em 0 .1em .5em;
|
||||
background: $near-white;
|
||||
font-size: 90%;
|
||||
line-height: 1.35;
|
||||
@include easein($linktime);
|
||||
}
|
||||
|
||||
.post h2 {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#main > div > article.post {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#main > div > article.post:nth-child(2n+1), #list li:nth-child(2n+1) {
|
||||
background: $body_bg_color+5;
|
||||
border-radius: 9px;
|
||||
box-shadow: 0 0 14px 9px $body_bg_color+5;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
color: $wet-asphalt;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.slideshare {
|
||||
padding: #{(487/599) * 100}% 0 0 0;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
padding: #{(385/640) * 100}% 0 0 0;
|
||||
}
|
||||
|
||||
.embed {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.embed > iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 1em;
|
||||
background-color: ghostwhite;
|
||||
padding: 1em;
|
||||
line-height: 1.4;
|
||||
font-size: larger;
|
||||
}
|
||||
42
static/static/css/ligature.css
Executable file
42
static/static/css/ligature.css
Executable file
|
|
@ -0,0 +1,42 @@
|
|||
@font-face {
|
||||
font-family: 'LigatureSymbols';
|
||||
src: url('../fonts/LigatureSymbols-2.09.eot');
|
||||
src: url('../fonts/LigatureSymbols-2.09.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/LigatureSymbols-2.09.woff') format('woff'),
|
||||
url('../fonts/LigatureSymbols-2.09.ttf') format('truetype'),
|
||||
url('../fonts/LigatureSymbols-2.09.svg#LigatureSymbols') format('svg');
|
||||
src: url('../fonts/LigatureSymbols-2.09.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.lsf {
|
||||
font-family: 'LigatureSymbols';
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
-ms-text-rendering: optimizeLegibility;
|
||||
-o-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.lsf-icon:before {
|
||||
content:attr(title);
|
||||
margin-right:0.3em;
|
||||
font-size:130%;
|
||||
font-family: 'LigatureSymbols';
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
-ms-text-rendering: optimizeLegibility;
|
||||
-o-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-ms-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
240
static/static/css/media/_default.scss
Normal file
240
static/static/css/media/_default.scss
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
// Phone is default so no min-width actually set for lowest setting.
|
||||
|
||||
/* min-width: 320px (1st gen), 480px (2nd gen), 640px (landscape) */
|
||||
// Should put the lowest one you want to support here without media restrictions.
|
||||
// Others in _phone.scss
|
||||
|
||||
header, section, footer, aside, .content {
|
||||
margin: 0 0;
|
||||
}
|
||||
|
||||
body > footer {
|
||||
margin-top: 2em;
|
||||
|
||||
}
|
||||
|
||||
#main > div, footer > div, #meta > div, #content, #comments > div {
|
||||
position:relative;
|
||||
text-align: left;
|
||||
margin: 0 auto;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
&>figure {
|
||||
min-width: 178px;
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
max-width: 100%;
|
||||
|
||||
&>img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&>figcaption {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
background: rgba(0,0,0,.56);
|
||||
color: white;
|
||||
font-family: Helvetica;
|
||||
font-size: 14px;
|
||||
|
||||
&>h4 {
|
||||
margin: 0 0 8px;
|
||||
padding: 0 0 5px;
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255,.35);
|
||||
text-shadow: none;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
}
|
||||
&>p {
|
||||
margin: 0;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
@include center;
|
||||
@include clearfix;
|
||||
display:block;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
|
||||
&>img {
|
||||
display:inline !important;
|
||||
}
|
||||
}
|
||||
|
||||
#header {
|
||||
position: relative;
|
||||
padding-top: emStep(8);
|
||||
transition: opacity .7s;
|
||||
/*@include easeout(.7);*/
|
||||
|
||||
figure {
|
||||
@include colwidth(6);
|
||||
@include colmargin(3);
|
||||
padding-bottom: emStep(8);
|
||||
|
||||
& > img {
|
||||
width: 8em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 8em;
|
||||
line-height: .7em;
|
||||
text-align:center;
|
||||
margin:.2em 0 .2em 0;
|
||||
}
|
||||
|
||||
#byline {
|
||||
@include hidden;
|
||||
}
|
||||
|
||||
#nav {
|
||||
text-align: center;
|
||||
@include colwidth(12);
|
||||
|
||||
& > ul {
|
||||
padding: 0;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style: none outside none;
|
||||
padding-bottom: emStep(8);
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#mainnav {
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
|
||||
span {
|
||||
vertical-align: middle;
|
||||
display:block;
|
||||
font-size:75%;
|
||||
}
|
||||
|
||||
|
||||
span.icon {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #444;
|
||||
transition: color 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: $peter-river;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
& > li > a:hover i {
|
||||
box-shadow: 0 0 0 0 RGBA(87, 161, 222, .15);
|
||||
-webkit-transition: box-shadow .4s ease-in-out;
|
||||
-moz-transition: box-shadow .4s ease-in-out;
|
||||
-o-transition: box-shadow .4s ease-in-out;
|
||||
-ms-transition: box-shadow .4s ease-in-out;
|
||||
transition: box-shadow .4s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.icon > i {
|
||||
display: inline-block;
|
||||
padding: 0.33em;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 30px transparent;
|
||||
background: rgba(255,255,255, .8);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-transition: box-shadow .6s ease-in-out;
|
||||
-moz-transition: box-shadow .6s ease-in-out;
|
||||
-o-transition: box-shadow .6s ease-in-out;
|
||||
-ms-transition: box-shadow .6s ease-in-out;
|
||||
transition: box-shadow .6s ease-in-out;
|
||||
}
|
||||
|
||||
aside#tail {
|
||||
|
||||
&> #search, &> #explore {
|
||||
text-align: center;
|
||||
@include colwidth(12);
|
||||
@include cellpad;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
@include hidden;
|
||||
}
|
||||
|
||||
article {
|
||||
min-height: 1px;
|
||||
@include colwidth(12);
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
body > footer > div {
|
||||
border-top: 1px solid $silver;
|
||||
padding-bottom: 1em;
|
||||
margin-bottom:0;
|
||||
padding-top: .7em;
|
||||
}
|
||||
|
||||
body > footer p {
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size:80%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#social, .dropdown {
|
||||
@include hidden;
|
||||
}
|
||||
|
||||
#tags {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
#author {
|
||||
width:100% !important;
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
#next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#next, #prev {
|
||||
width: 100% !important;
|
||||
padding-top: 2em;
|
||||
}
|
||||
242
static/static/css/media/_desktop.scss
Normal file
242
static/static/css/media/_desktop.scss
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
/* min-width: 1024px (xga), 1200px (wxga), 1600px (uxga) */
|
||||
|
||||
@media screen and (min-width: #{1024/$em}em) {
|
||||
#tags {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#main > div, footer > div, #meta > div, #meta > section, #content, #comments > div {
|
||||
max-width:38em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: emStep(4);
|
||||
}
|
||||
|
||||
body > section, body > aside, body > footer, body > .content {
|
||||
@include fontsize(3);
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 12em;
|
||||
line-height: .5em;
|
||||
text-align:center;
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
#header {
|
||||
figure > img {
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding-top: 2.5em;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
#mainnav {
|
||||
span.icon {
|
||||
margin-bottom: emStep(1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: #{1200/$em}em) {
|
||||
|
||||
#tags {
|
||||
line-height: 1.7;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: emStep(4) 0 emStep(4);
|
||||
}
|
||||
|
||||
#social, .dropdown {
|
||||
@include visible;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
#social {
|
||||
position: absolute;
|
||||
bottom: 2em;
|
||||
width:90%;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
#header:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#mainnav {
|
||||
span.icon {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 4em;
|
||||
line-height: .7em;
|
||||
text-align:center;
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
|
||||
#header {
|
||||
position: fixed;
|
||||
left:0;
|
||||
margin: 0;
|
||||
@include colwidth(2.5);
|
||||
// background: $silver;
|
||||
color: $wet-asphalt;
|
||||
height: 100%;
|
||||
opacity: .5;
|
||||
@include easeout(.7);
|
||||
|
||||
|
||||
& > figure {
|
||||
display: inline-block;
|
||||
@include colwidth(3);
|
||||
@include colmargin(1);
|
||||
float: left;
|
||||
margin-left: 4%;
|
||||
margin-right: 1.2em;
|
||||
|
||||
& > img {
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
@include colwidth(12);
|
||||
margin-left: 0;
|
||||
font-size: 100%;
|
||||
padding-top: emStep(8);
|
||||
|
||||
&> ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.social li {
|
||||
/*display:block;*/
|
||||
margin:0 -2px 0 -2px;
|
||||
width: 49% !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
body > section, body > aside, body > .content, body > footer, #comments {
|
||||
margin: 1em ($column * ($margin_cols/2)) 0 ($column * 4);
|
||||
@include fontsize(3);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
#byline {
|
||||
@include visible;
|
||||
@include colwidth(7);
|
||||
text-align: center;
|
||||
@include fontsize(3);
|
||||
padding-top: .95em;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding-top: 0em;
|
||||
@include colmargin(1);
|
||||
@include colwidth(6);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: #{1440/$em}em) {
|
||||
#logo {
|
||||
font-size: 5em;
|
||||
line-height: .4em;
|
||||
}
|
||||
|
||||
#mainnav li {
|
||||
font-size: 115%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: #{1600/$em}em) {
|
||||
|
||||
#mainnav li {
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
#byline {
|
||||
@include fontsize(6);
|
||||
padding-top: .7em;
|
||||
}
|
||||
|
||||
#meta {
|
||||
right:0;
|
||||
/*top: 7.1em;*/
|
||||
top: 0;
|
||||
margin-right:1em;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
@include colwidth(2.5);
|
||||
@include colmargin(0);
|
||||
padding: 1em;
|
||||
/*opacity: .5;*/
|
||||
@include fontsize(1);
|
||||
// background: $midnight-blue;
|
||||
@include easeout(.7);
|
||||
// color: $clouds;
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 6em;
|
||||
line-height: .4em;
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
#meta > div {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
#meta > div > section, #meta > div > ul {
|
||||
@include colwidth(12);
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
#date {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#meta:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body > section, body > aside, body > .content, body > footer, #comments {
|
||||
margin: 1em ($column * 3) 0 ($column * 3);
|
||||
@include fontsize(4);
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding-top: 2.3em;
|
||||
@include colmargin(1);
|
||||
@include colwidth(5);
|
||||
}
|
||||
|
||||
#header {
|
||||
@include colwidth(2.5);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
73
static/static/css/media/_phone.scss
Normal file
73
static/static/css/media/_phone.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
// Phone is default so no min-width actually set for lowest setting.
|
||||
|
||||
/* min-width: 320px (1st gen), 480px (2nd gen), 640px (landscape) */
|
||||
@media screen and (min-width: #{480/$em}em) {
|
||||
|
||||
.half, .third, .twothirds { max-width: 100% !important; }
|
||||
|
||||
#mainnav {
|
||||
span.icon {
|
||||
/*font-size: 2em;*/
|
||||
}
|
||||
}
|
||||
|
||||
#meta > section, #meta > ul {
|
||||
@include colwidth(6);
|
||||
}
|
||||
|
||||
#popular, #new {
|
||||
@include colwidth(6);
|
||||
@include cellpad;
|
||||
}
|
||||
}
|
||||
|
||||
//as an example of a mix & max slice
|
||||
/*@media screen and (min-width: #{640/$em}em) and (max-width: #{720/$em}em) {*/
|
||||
@media screen and (min-width: #{640/$em}em) {
|
||||
|
||||
body {
|
||||
@include fontsize(1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#meta > div > section, #meta > div > ul {
|
||||
@include colwidth(4);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#next, #prev {
|
||||
width: 50% !important;
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.half { max-width: 14em !important; }
|
||||
.third { max-width: 10em !important; }
|
||||
.twothirds { max-width: 20em !important; }
|
||||
|
||||
#header {
|
||||
figure {
|
||||
@include colwidth(3);
|
||||
margin: 0;
|
||||
|
||||
& > img {
|
||||
width: 8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding-top: 2.3em;
|
||||
@include colmargin(1);
|
||||
@include colwidth(8);
|
||||
}
|
||||
|
||||
#mainnav {
|
||||
span.icon {
|
||||
/*font-size: 2em;*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
38
static/static/css/media/_tablet.scss
Normal file
38
static/static/css/media/_tablet.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/* min-width: 720px (ipad), 768px (other tabs), 900px (landscape) */
|
||||
|
||||
@media screen and (min-width: #{720/$em}em) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: #{768/$em}em) {
|
||||
|
||||
h1#title {
|
||||
margin: emStep(2) 0 emStep(4);
|
||||
}
|
||||
|
||||
#logo {
|
||||
font-size: 10em;
|
||||
line-height: .5em;
|
||||
text-align:center;
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding-top: 2.7em;
|
||||
@include colmargin(2);
|
||||
@include colwidth(7);
|
||||
}
|
||||
|
||||
.half { max-width: 19em !important; }
|
||||
.third { max-width: 13em !important; }
|
||||
.twothirds { max-width: 26em !important; }
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: #{900/$em}em) {
|
||||
|
||||
}
|
||||
23
static/static/css/media/_widescreen.scss
Normal file
23
static/static/css/media/_widescreen.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
/* min-width: 1920px (hd 1080), 2048px (2k), 2560px (wqhd) */
|
||||
|
||||
@media screen and (min-width: #{1920/$em}em) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: #{2048/$em}em) {
|
||||
|
||||
body {
|
||||
@include fontsize(3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: #{2560/$em}em) {
|
||||
|
||||
body {
|
||||
@include fontsize(3);
|
||||
}
|
||||
|
||||
}
|
||||
447
static/static/css/spf13-1.css
Normal file
447
static/static/css/spf13-1.css
Normal file
|
|
@ -0,0 +1,447 @@
|
|||
@font-face {
|
||||
font-family: 'spf13-1';
|
||||
src:url('../fonts/spf13-1.eot');
|
||||
src:url('../fonts/spf13-1.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/spf13-1.woff') format('woff'),
|
||||
url('../fonts/spf13-1.ttf') format('truetype'),
|
||||
url('../fonts/spf13-1.svg#spf13-1') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Use the following CSS code if you want to use data attributes for inserting your icons */
|
||||
[data-icon]:before {
|
||||
font-family: 'spf13-1';
|
||||
content: attr(data-icon);
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Use the following CSS code if you want to have a class per icon */
|
||||
/*
|
||||
Instead of a list of all class selectors,
|
||||
you can use the generic selector below, but it's slower:
|
||||
[class*="icon-"] {
|
||||
*/
|
||||
.icon-warning, .icon-home, .icon-home-2, .icon-images, .icon-image, .icon-quill, .icon-pencil, .icon-quotes-left, .icon-bubbles, .icon-user, .icon-clock, .icon-smiley, .icon-github, .icon-linkedin, .icon-reddit, .icon-delicious, .icon-windows8, .icon-apple, .icon-tux, .icon-android, .icon-foursquare, .icon-stackoverflow, .icon-html5, .icon-css3, .icon-twitter, .icon-facebook, .icon-console, .icon-share, .icon-google-plus, .icon-google-plus-2, .icon-feed, .icon-feed-2, .icon-attachment, .icon-star, .icon-console-2, .icon-comment, .icon-mic, .icon-stats, .icon-target, .icon-atom, .icon-disk, .icon-github-2, .icon-github-3, .icon-steam, .icon-logo, .icon-pinterest, .icon-link, .icon-stumbleupon, .icon-reddit-2, .icon-slideshare, .icon-airplane, .icon-switch, .icon-fire, .icon-check-alt, .icon-x-altx-alt, .icon-arrow-down-alt1, .icon-circlestar, .icon-file-xml, .icon-file-css, .icon-foursquare-2, .icon-happy, .icon-bubbles-2, .icon-bubbles-3, .icon-bubble, .icon-search, .icon-map, .icon-pacman, .icon-location, .icon-location-2, .icon-stack, .icon-info, .icon-meter2, .icon-meter, .icon-spf, .icon-radio-checked, .icon-mail, .icon-embed, .icon-code, .icon-graduation, .icon-cc, .icon-cc-by, .icon-cc-nc, .icon-cc-nc-eu, .icon-cc-nc-jp, .icon-cc-sa, .icon-cc-nd, .icon-cc-pd, .icon-pencil-2, .icon-cloud-download, .icon-quote-left, .icon-quote-right, .icon-beaker-alt, .icon-beaker, .icon-pinterest-2, .icon-map-2, .icon-leaf, .icon-tag, .icon-download, .icon-info-2, .icon-cool, .icon-happy-2, .icon-left-quote, .icon-right-quote, .icon-rocket, .icon-heart, .icon-dashboard, .icon-twitter-2, .icon-feed-3, .icon-stumbleupon-2, .icon-star-2, .icon-octocat, .icon-spf13, .icon-spf13-2, .icon-w3c, .icon-foursquare-3, .icon-cc-2, .icon-stumbleupon-3, .icon-idea, .icon-gear, .icon-gears, .icon-discuss, .icon-screen, .icon-play, .icon-idea-2, .icon-edit, .icon-heart-2, .icon-home-3, .icon-13, .icon-spf13-3, .icon-arrow-left, .icon-arrow-right, .icon-arrow-right-2, .icon-arrow-left-2, .icon-arrow-right-3, .icon-arrow-left-3, .icon-headphones {
|
||||
font-family: 'spf13-1';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.icon-warning:before {
|
||||
content: "\21";
|
||||
}
|
||||
.icon-home:before {
|
||||
content: "\22";
|
||||
}
|
||||
.icon-home-2:before {
|
||||
content: "\23";
|
||||
}
|
||||
.icon-images:before {
|
||||
content: "\24";
|
||||
}
|
||||
.icon-image:before {
|
||||
content: "\25";
|
||||
}
|
||||
.icon-quill:before {
|
||||
content: "\26";
|
||||
}
|
||||
.icon-pencil:before {
|
||||
content: "\27";
|
||||
}
|
||||
.icon-quotes-left:before {
|
||||
content: "\28";
|
||||
}
|
||||
.icon-bubbles:before {
|
||||
content: "\29";
|
||||
}
|
||||
.icon-user:before {
|
||||
content: "\2a";
|
||||
}
|
||||
.icon-clock:before {
|
||||
content: "\2b";
|
||||
}
|
||||
.icon-smiley:before {
|
||||
content: "\2c";
|
||||
}
|
||||
.icon-github:before {
|
||||
content: "\2d";
|
||||
}
|
||||
.icon-linkedin:before {
|
||||
content: "\2e";
|
||||
}
|
||||
.icon-reddit:before {
|
||||
content: "\2f";
|
||||
}
|
||||
.icon-delicious:before {
|
||||
content: "\30";
|
||||
}
|
||||
.icon-windows8:before {
|
||||
content: "\31";
|
||||
}
|
||||
.icon-apple:before {
|
||||
content: "\32";
|
||||
}
|
||||
.icon-tux:before {
|
||||
content: "\33";
|
||||
}
|
||||
.icon-android:before {
|
||||
content: "\34";
|
||||
}
|
||||
.icon-foursquare:before {
|
||||
content: "\35";
|
||||
}
|
||||
.icon-stackoverflow:before {
|
||||
content: "\36";
|
||||
}
|
||||
.icon-html5:before {
|
||||
content: "\37";
|
||||
}
|
||||
.icon-css3:before {
|
||||
content: "\38";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
content: "\39";
|
||||
}
|
||||
.icon-facebook:before {
|
||||
content: "\3a";
|
||||
}
|
||||
.icon-console:before {
|
||||
content: "\3b";
|
||||
}
|
||||
.icon-share:before {
|
||||
content: "\3c";
|
||||
}
|
||||
.icon-google-plus:before {
|
||||
content: "\3d";
|
||||
}
|
||||
.icon-google-plus-2:before {
|
||||
content: "\3e";
|
||||
}
|
||||
.icon-feed:before {
|
||||
content: "\3f";
|
||||
}
|
||||
.icon-feed-2:before {
|
||||
content: "\40";
|
||||
}
|
||||
.icon-attachment:before {
|
||||
content: "\41";
|
||||
}
|
||||
.icon-star:before {
|
||||
content: "\42";
|
||||
}
|
||||
.icon-console-2:before {
|
||||
content: "\43";
|
||||
}
|
||||
.icon-comment:before {
|
||||
content: "\44";
|
||||
}
|
||||
.icon-mic:before {
|
||||
content: "\45";
|
||||
}
|
||||
.icon-stats:before {
|
||||
content: "\46";
|
||||
}
|
||||
.icon-target:before {
|
||||
content: "\47";
|
||||
}
|
||||
.icon-atom:before {
|
||||
content: "\48";
|
||||
}
|
||||
.icon-disk:before {
|
||||
content: "\49";
|
||||
}
|
||||
.icon-github-2:before {
|
||||
content: "\4a";
|
||||
}
|
||||
.icon-github-3:before {
|
||||
content: "\4b";
|
||||
}
|
||||
.icon-steam:before {
|
||||
content: "\4c";
|
||||
}
|
||||
.icon-logo:before {
|
||||
content: "\4d";
|
||||
}
|
||||
.icon-pinterest:before {
|
||||
content: "\4f";
|
||||
}
|
||||
.icon-link:before {
|
||||
content: "\50";
|
||||
}
|
||||
.icon-stumbleupon:before {
|
||||
content: "\51";
|
||||
}
|
||||
.icon-reddit-2:before {
|
||||
content: "\52";
|
||||
}
|
||||
.icon-slideshare:before {
|
||||
content: "\53";
|
||||
}
|
||||
.icon-airplane:before {
|
||||
content: "\54";
|
||||
}
|
||||
.icon-switch:before {
|
||||
content: "\55";
|
||||
}
|
||||
.icon-fire:before {
|
||||
content: "\56";
|
||||
}
|
||||
.icon-check-alt:before {
|
||||
content: "\57";
|
||||
}
|
||||
.icon-x-altx-alt:before {
|
||||
content: "\58";
|
||||
}
|
||||
.icon-arrow-down-alt1:before {
|
||||
content: "\59";
|
||||
}
|
||||
.icon-circlestar:before {
|
||||
content: "\5a";
|
||||
}
|
||||
.icon-file-xml:before {
|
||||
content: "\5b";
|
||||
}
|
||||
.icon-file-css:before {
|
||||
content: "\5c";
|
||||
}
|
||||
.icon-foursquare-2:before {
|
||||
content: "\5d";
|
||||
}
|
||||
.icon-happy:before {
|
||||
content: "\5e";
|
||||
}
|
||||
.icon-bubbles-2:before {
|
||||
content: "\5f";
|
||||
}
|
||||
.icon-bubbles-3:before {
|
||||
content: "\60";
|
||||
}
|
||||
.icon-bubble:before {
|
||||
content: "\61";
|
||||
}
|
||||
.icon-search:before {
|
||||
content: "\62";
|
||||
}
|
||||
.icon-map:before {
|
||||
content: "\64";
|
||||
}
|
||||
.icon-pacman:before {
|
||||
content: "\65";
|
||||
}
|
||||
.icon-location:before {
|
||||
content: "\66";
|
||||
}
|
||||
.icon-location-2:before {
|
||||
content: "\67";
|
||||
}
|
||||
.icon-stack:before {
|
||||
content: "\68";
|
||||
}
|
||||
.icon-info:before {
|
||||
content: "\69";
|
||||
}
|
||||
.icon-meter2:before {
|
||||
content: "\6a";
|
||||
}
|
||||
.icon-meter:before {
|
||||
content: "\6b";
|
||||
}
|
||||
.icon-spf:before {
|
||||
content: "\6c";
|
||||
}
|
||||
.icon-radio-checked:before {
|
||||
content: "\6e";
|
||||
}
|
||||
.icon-mail:before {
|
||||
content: "\6f";
|
||||
}
|
||||
.icon-embed:before {
|
||||
content: "\70";
|
||||
}
|
||||
.icon-code:before {
|
||||
content: "\71";
|
||||
}
|
||||
.icon-graduation:before {
|
||||
content: "\73";
|
||||
}
|
||||
.icon-cc:before {
|
||||
content: "\74";
|
||||
}
|
||||
.icon-cc-by:before {
|
||||
content: "\75";
|
||||
}
|
||||
.icon-cc-nc:before {
|
||||
content: "\76";
|
||||
}
|
||||
.icon-cc-nc-eu:before {
|
||||
content: "\77";
|
||||
}
|
||||
.icon-cc-nc-jp:before {
|
||||
content: "\78";
|
||||
}
|
||||
.icon-cc-sa:before {
|
||||
content: "\79";
|
||||
}
|
||||
.icon-cc-nd:before {
|
||||
content: "\7a";
|
||||
}
|
||||
.icon-cc-pd:before {
|
||||
content: "\7b";
|
||||
}
|
||||
.icon-pencil-2:before {
|
||||
content: "\7c";
|
||||
}
|
||||
.icon-cloud-download:before {
|
||||
content: "\7d";
|
||||
}
|
||||
.icon-quote-left:before {
|
||||
content: "\7e";
|
||||
}
|
||||
.icon-quote-right:before {
|
||||
content: "\e003";
|
||||
}
|
||||
.icon-beaker-alt:before {
|
||||
content: "\e004";
|
||||
}
|
||||
.icon-beaker:before {
|
||||
content: "\e005";
|
||||
}
|
||||
.icon-pinterest-2:before {
|
||||
content: "\e00e";
|
||||
}
|
||||
.icon-map-2:before {
|
||||
content: "\e011";
|
||||
}
|
||||
.icon-leaf:before {
|
||||
content: "\e016";
|
||||
}
|
||||
.icon-tag:before {
|
||||
content: "\e017";
|
||||
}
|
||||
.icon-download:before {
|
||||
content: "\e018";
|
||||
}
|
||||
.icon-info-2:before {
|
||||
content: "\e019";
|
||||
}
|
||||
.icon-cool:before {
|
||||
content: "\e01a";
|
||||
}
|
||||
.icon-happy-2:before {
|
||||
content: "\e01b";
|
||||
}
|
||||
.icon-left-quote:before {
|
||||
content: "\e01c";
|
||||
}
|
||||
.icon-right-quote:before {
|
||||
content: "\e01d";
|
||||
}
|
||||
.icon-rocket:before {
|
||||
content: "\e01e";
|
||||
}
|
||||
.icon-heart:before {
|
||||
content: "\e01f";
|
||||
}
|
||||
.icon-dashboard:before {
|
||||
content: "\e020";
|
||||
}
|
||||
.icon-twitter-2:before {
|
||||
content: "\6d";
|
||||
}
|
||||
.icon-feed-3:before {
|
||||
content: "\e036";
|
||||
}
|
||||
.icon-stumbleupon-2:before {
|
||||
content: "\e050";
|
||||
}
|
||||
.icon-star-2:before {
|
||||
content: "\e030";
|
||||
}
|
||||
.icon-octocat:before {
|
||||
content: "\e0b6";
|
||||
}
|
||||
.icon-spf13:before {
|
||||
content: "\e021";
|
||||
}
|
||||
.icon-spf13-2:before {
|
||||
content: "\e022";
|
||||
}
|
||||
.icon-w3c:before {
|
||||
content: "\e000";
|
||||
}
|
||||
.icon-foursquare-3:before {
|
||||
content: "\e001";
|
||||
}
|
||||
.icon-cc-2:before {
|
||||
content: "\e002";
|
||||
}
|
||||
.icon-stumbleupon-3:before {
|
||||
content: "\e024";
|
||||
}
|
||||
.icon-idea:before {
|
||||
content: "\e025";
|
||||
}
|
||||
.icon-gear:before {
|
||||
content: "\e026";
|
||||
}
|
||||
.icon-gears:before {
|
||||
content: "\e027";
|
||||
}
|
||||
.icon-discuss:before {
|
||||
content: "\e028";
|
||||
}
|
||||
.icon-screen:before {
|
||||
content: "\e029";
|
||||
}
|
||||
.icon-play:before {
|
||||
content: "\e02a";
|
||||
}
|
||||
.icon-idea-2:before {
|
||||
content: "\e006";
|
||||
}
|
||||
.icon-edit:before {
|
||||
content: "\e007";
|
||||
}
|
||||
.icon-heart-2:before {
|
||||
content: "\e010";
|
||||
}
|
||||
.icon-home-3:before {
|
||||
content: "\e008";
|
||||
}
|
||||
.icon-13:before {
|
||||
content: "\e009";
|
||||
}
|
||||
.icon-spf13-3:before {
|
||||
content: "\e00a";
|
||||
}
|
||||
.icon-arrow-left:before {
|
||||
content: "\e00b";
|
||||
}
|
||||
.icon-arrow-right:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
.icon-arrow-right-2:before {
|
||||
content: "\e00d";
|
||||
}
|
||||
.icon-arrow-left-2:before {
|
||||
content: "\e00f";
|
||||
}
|
||||
.icon-arrow-right-3:before {
|
||||
content: "\e012";
|
||||
}
|
||||
.icon-arrow-left-3:before {
|
||||
content: "\e013";
|
||||
}
|
||||
.icon-headphones:before {
|
||||
content: "\e014";
|
||||
}
|
||||
447
static/static/css/spf13-1.scss
Normal file
447
static/static/css/spf13-1.scss
Normal file
|
|
@ -0,0 +1,447 @@
|
|||
@font-face {
|
||||
font-family: 'spf13-1';
|
||||
src:url('../fonts/spf13-1.eot');
|
||||
src:url('../fonts/spf13-1.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/spf13-1.woff') format('woff'),
|
||||
url('../fonts/spf13-1.ttf') format('truetype'),
|
||||
url('../fonts/spf13-1.svg#spf13-1') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Use the following CSS code if you want to use data attributes for inserting your icons */
|
||||
[data-icon]:before {
|
||||
font-family: 'spf13-1';
|
||||
content: attr(data-icon);
|
||||
speak: none;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Use the following CSS code if you want to have a class per icon */
|
||||
/*
|
||||
Instead of a list of all class selectors,
|
||||
you can use the generic selector below, but it's slower:
|
||||
[class*="icon-"] {
|
||||
*/
|
||||
.icon-warning, .icon-home, .icon-home-2, .icon-images, .icon-image, .icon-quill, .icon-pencil, .icon-quotes-left, .icon-bubbles, .icon-user, .icon-clock, .icon-smiley, .icon-github, .icon-linkedin, .icon-reddit, .icon-delicious, .icon-windows8, .icon-apple, .icon-tux, .icon-android, .icon-foursquare, .icon-stackoverflow, .icon-html5, .icon-css3, .icon-twitter, .icon-facebook, .icon-console, .icon-share, .icon-google-plus, .icon-google-plus-2, .icon-feed, .icon-feed-2, .icon-attachment, .icon-star, .icon-console-2, .icon-comment, .icon-mic, .icon-stats, .icon-target, .icon-atom, .icon-disk, .icon-github-2, .icon-github-3, .icon-steam, .icon-logo, .icon-pinterest, .icon-link, .icon-stumbleupon, .icon-reddit-2, .icon-slideshare, .icon-airplane, .icon-switch, .icon-fire, .icon-check-alt, .icon-x-altx-alt, .icon-arrow-down-alt1, .icon-circlestar, .icon-file-xml, .icon-file-css, .icon-foursquare-2, .icon-happy, .icon-bubbles-2, .icon-bubbles-3, .icon-bubble, .icon-search, .icon-map, .icon-pacman, .icon-location, .icon-location-2, .icon-stack, .icon-info, .icon-meter2, .icon-meter, .icon-spf, .icon-radio-checked, .icon-mail, .icon-embed, .icon-code, .icon-graduation, .icon-cc, .icon-cc-by, .icon-cc-nc, .icon-cc-nc-eu, .icon-cc-nc-jp, .icon-cc-sa, .icon-cc-nd, .icon-cc-pd, .icon-pencil-2, .icon-cloud-download, .icon-quote-left, .icon-quote-right, .icon-beaker-alt, .icon-beaker, .icon-pinterest-2, .icon-map-2, .icon-leaf, .icon-tag, .icon-download, .icon-info-2, .icon-cool, .icon-happy-2, .icon-left-quote, .icon-right-quote, .icon-rocket, .icon-heart, .icon-dashboard, .icon-twitter-2, .icon-feed-3, .icon-stumbleupon-2, .icon-star-2, .icon-octocat, .icon-spf13, .icon-spf13-2, .icon-w3c, .icon-foursquare-3, .icon-cc-2, .icon-stumbleupon-3, .icon-idea, .icon-gear, .icon-gears, .icon-discuss, .icon-screen, .icon-play, .icon-idea-2, .icon-edit, .icon-heart-2, .icon-home-3, .icon-13, .icon-spf13-3, .icon-arrow-left, .icon-arrow-right, .icon-arrow-right-2, .icon-arrow-left-2, .icon-arrow-right-3, .icon-arrow-left-3, .icon-headphones {
|
||||
font-family: 'spf13-1';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.icon-warning:before {
|
||||
content: "\21";
|
||||
}
|
||||
.icon-home:before {
|
||||
content: "\22";
|
||||
}
|
||||
.icon-home-2:before {
|
||||
content: "\23";
|
||||
}
|
||||
.icon-images:before {
|
||||
content: "\24";
|
||||
}
|
||||
.icon-image:before {
|
||||
content: "\25";
|
||||
}
|
||||
.icon-quill:before {
|
||||
content: "\26";
|
||||
}
|
||||
.icon-pencil:before {
|
||||
content: "\27";
|
||||
}
|
||||
.icon-quotes-left:before {
|
||||
content: "\28";
|
||||
}
|
||||
.icon-bubbles:before {
|
||||
content: "\29";
|
||||
}
|
||||
.icon-user:before {
|
||||
content: "\2a";
|
||||
}
|
||||
.icon-clock:before {
|
||||
content: "\2b";
|
||||
}
|
||||
.icon-smiley:before {
|
||||
content: "\2c";
|
||||
}
|
||||
.icon-github:before {
|
||||
content: "\2d";
|
||||
}
|
||||
.icon-linkedin:before {
|
||||
content: "\2e";
|
||||
}
|
||||
.icon-reddit:before {
|
||||
content: "\2f";
|
||||
}
|
||||
.icon-delicious:before {
|
||||
content: "\30";
|
||||
}
|
||||
.icon-windows8:before {
|
||||
content: "\31";
|
||||
}
|
||||
.icon-apple:before {
|
||||
content: "\32";
|
||||
}
|
||||
.icon-tux:before {
|
||||
content: "\33";
|
||||
}
|
||||
.icon-android:before {
|
||||
content: "\34";
|
||||
}
|
||||
.icon-foursquare:before {
|
||||
content: "\35";
|
||||
}
|
||||
.icon-stackoverflow:before {
|
||||
content: "\36";
|
||||
}
|
||||
.icon-html5:before {
|
||||
content: "\37";
|
||||
}
|
||||
.icon-css3:before {
|
||||
content: "\38";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
content: "\39";
|
||||
}
|
||||
.icon-facebook:before {
|
||||
content: "\3a";
|
||||
}
|
||||
.icon-console:before {
|
||||
content: "\3b";
|
||||
}
|
||||
.icon-share:before {
|
||||
content: "\3c";
|
||||
}
|
||||
.icon-google-plus:before {
|
||||
content: "\3d";
|
||||
}
|
||||
.icon-google-plus-2:before {
|
||||
content: "\3e";
|
||||
}
|
||||
.icon-feed:before {
|
||||
content: "\3f";
|
||||
}
|
||||
.icon-feed-2:before {
|
||||
content: "\40";
|
||||
}
|
||||
.icon-attachment:before {
|
||||
content: "\41";
|
||||
}
|
||||
.icon-star:before {
|
||||
content: "\42";
|
||||
}
|
||||
.icon-console-2:before {
|
||||
content: "\43";
|
||||
}
|
||||
.icon-comment:before {
|
||||
content: "\44";
|
||||
}
|
||||
.icon-mic:before {
|
||||
content: "\45";
|
||||
}
|
||||
.icon-stats:before {
|
||||
content: "\46";
|
||||
}
|
||||
.icon-target:before {
|
||||
content: "\47";
|
||||
}
|
||||
.icon-atom:before {
|
||||
content: "\48";
|
||||
}
|
||||
.icon-disk:before {
|
||||
content: "\49";
|
||||
}
|
||||
.icon-github-2:before {
|
||||
content: "\4a";
|
||||
}
|
||||
.icon-github-3:before {
|
||||
content: "\4b";
|
||||
}
|
||||
.icon-steam:before {
|
||||
content: "\4c";
|
||||
}
|
||||
.icon-logo:before {
|
||||
content: "\4d";
|
||||
}
|
||||
.icon-pinterest:before {
|
||||
content: "\4f";
|
||||
}
|
||||
.icon-link:before {
|
||||
content: "\50";
|
||||
}
|
||||
.icon-stumbleupon:before {
|
||||
content: "\51";
|
||||
}
|
||||
.icon-reddit-2:before {
|
||||
content: "\52";
|
||||
}
|
||||
.icon-slideshare:before {
|
||||
content: "\53";
|
||||
}
|
||||
.icon-airplane:before {
|
||||
content: "\54";
|
||||
}
|
||||
.icon-switch:before {
|
||||
content: "\55";
|
||||
}
|
||||
.icon-fire:before {
|
||||
content: "\56";
|
||||
}
|
||||
.icon-check-alt:before {
|
||||
content: "\57";
|
||||
}
|
||||
.icon-x-altx-alt:before {
|
||||
content: "\58";
|
||||
}
|
||||
.icon-arrow-down-alt1:before {
|
||||
content: "\59";
|
||||
}
|
||||
.icon-circlestar:before {
|
||||
content: "\5a";
|
||||
}
|
||||
.icon-file-xml:before {
|
||||
content: "\5b";
|
||||
}
|
||||
.icon-file-css:before {
|
||||
content: "\5c";
|
||||
}
|
||||
.icon-foursquare-2:before {
|
||||
content: "\5d";
|
||||
}
|
||||
.icon-happy:before {
|
||||
content: "\5e";
|
||||
}
|
||||
.icon-bubbles-2:before {
|
||||
content: "\5f";
|
||||
}
|
||||
.icon-bubbles-3:before {
|
||||
content: "\60";
|
||||
}
|
||||
.icon-bubble:before {
|
||||
content: "\61";
|
||||
}
|
||||
.icon-search:before {
|
||||
content: "\62";
|
||||
}
|
||||
.icon-map:before {
|
||||
content: "\64";
|
||||
}
|
||||
.icon-pacman:before {
|
||||
content: "\65";
|
||||
}
|
||||
.icon-location:before {
|
||||
content: "\66";
|
||||
}
|
||||
.icon-location-2:before {
|
||||
content: "\67";
|
||||
}
|
||||
.icon-stack:before {
|
||||
content: "\68";
|
||||
}
|
||||
.icon-info:before {
|
||||
content: "\69";
|
||||
}
|
||||
.icon-meter2:before {
|
||||
content: "\6a";
|
||||
}
|
||||
.icon-meter:before {
|
||||
content: "\6b";
|
||||
}
|
||||
.icon-spf:before {
|
||||
content: "\6c";
|
||||
}
|
||||
.icon-radio-checked:before {
|
||||
content: "\6e";
|
||||
}
|
||||
.icon-mail:before {
|
||||
content: "\6f";
|
||||
}
|
||||
.icon-embed:before {
|
||||
content: "\70";
|
||||
}
|
||||
.icon-code:before {
|
||||
content: "\71";
|
||||
}
|
||||
.icon-graduation:before {
|
||||
content: "\73";
|
||||
}
|
||||
.icon-cc:before {
|
||||
content: "\74";
|
||||
}
|
||||
.icon-cc-by:before {
|
||||
content: "\75";
|
||||
}
|
||||
.icon-cc-nc:before {
|
||||
content: "\76";
|
||||
}
|
||||
.icon-cc-nc-eu:before {
|
||||
content: "\77";
|
||||
}
|
||||
.icon-cc-nc-jp:before {
|
||||
content: "\78";
|
||||
}
|
||||
.icon-cc-sa:before {
|
||||
content: "\79";
|
||||
}
|
||||
.icon-cc-nd:before {
|
||||
content: "\7a";
|
||||
}
|
||||
.icon-cc-pd:before {
|
||||
content: "\7b";
|
||||
}
|
||||
.icon-pencil-2:before {
|
||||
content: "\7c";
|
||||
}
|
||||
.icon-cloud-download:before {
|
||||
content: "\7d";
|
||||
}
|
||||
.icon-quote-left:before {
|
||||
content: "\7e";
|
||||
}
|
||||
.icon-quote-right:before {
|
||||
content: "\e003";
|
||||
}
|
||||
.icon-beaker-alt:before {
|
||||
content: "\e004";
|
||||
}
|
||||
.icon-beaker:before {
|
||||
content: "\e005";
|
||||
}
|
||||
.icon-pinterest-2:before {
|
||||
content: "\e00e";
|
||||
}
|
||||
.icon-map-2:before {
|
||||
content: "\e011";
|
||||
}
|
||||
.icon-leaf:before {
|
||||
content: "\e016";
|
||||
}
|
||||
.icon-tag:before {
|
||||
content: "\e017";
|
||||
}
|
||||
.icon-download:before {
|
||||
content: "\e018";
|
||||
}
|
||||
.icon-info-2:before {
|
||||
content: "\e019";
|
||||
}
|
||||
.icon-cool:before {
|
||||
content: "\e01a";
|
||||
}
|
||||
.icon-happy-2:before {
|
||||
content: "\e01b";
|
||||
}
|
||||
.icon-left-quote:before {
|
||||
content: "\e01c";
|
||||
}
|
||||
.icon-right-quote:before {
|
||||
content: "\e01d";
|
||||
}
|
||||
.icon-rocket:before {
|
||||
content: "\e01e";
|
||||
}
|
||||
.icon-heart:before {
|
||||
content: "\e01f";
|
||||
}
|
||||
.icon-dashboard:before {
|
||||
content: "\e020";
|
||||
}
|
||||
.icon-twitter-2:before {
|
||||
content: "\6d";
|
||||
}
|
||||
.icon-feed-3:before {
|
||||
content: "\e036";
|
||||
}
|
||||
.icon-stumbleupon-2:before {
|
||||
content: "\e050";
|
||||
}
|
||||
.icon-star-2:before {
|
||||
content: "\e030";
|
||||
}
|
||||
.icon-octocat:before {
|
||||
content: "\e0b6";
|
||||
}
|
||||
.icon-spf13:before {
|
||||
content: "\e021";
|
||||
}
|
||||
.icon-spf13-2:before {
|
||||
content: "\e022";
|
||||
}
|
||||
.icon-w3c:before {
|
||||
content: "\e000";
|
||||
}
|
||||
.icon-foursquare-3:before {
|
||||
content: "\e001";
|
||||
}
|
||||
.icon-cc-2:before {
|
||||
content: "\e002";
|
||||
}
|
||||
.icon-stumbleupon-3:before {
|
||||
content: "\e024";
|
||||
}
|
||||
.icon-idea:before {
|
||||
content: "\e025";
|
||||
}
|
||||
.icon-gear:before {
|
||||
content: "\e026";
|
||||
}
|
||||
.icon-gears:before {
|
||||
content: "\e027";
|
||||
}
|
||||
.icon-discuss:before {
|
||||
content: "\e028";
|
||||
}
|
||||
.icon-screen:before {
|
||||
content: "\e029";
|
||||
}
|
||||
.icon-play:before {
|
||||
content: "\e02a";
|
||||
}
|
||||
.icon-idea-2:before {
|
||||
content: "\e006";
|
||||
}
|
||||
.icon-edit:before {
|
||||
content: "\e007";
|
||||
}
|
||||
.icon-heart-2:before {
|
||||
content: "\e010";
|
||||
}
|
||||
.icon-home-3:before {
|
||||
content: "\e008";
|
||||
}
|
||||
.icon-13:before {
|
||||
content: "\e009";
|
||||
}
|
||||
.icon-spf13-3:before {
|
||||
content: "\e00a";
|
||||
}
|
||||
.icon-arrow-left:before {
|
||||
content: "\e00b";
|
||||
}
|
||||
.icon-arrow-right:before {
|
||||
content: "\e00c";
|
||||
}
|
||||
.icon-arrow-right-2:before {
|
||||
content: "\e00d";
|
||||
}
|
||||
.icon-arrow-left-2:before {
|
||||
content: "\e00f";
|
||||
}
|
||||
.icon-arrow-right-3:before {
|
||||
content: "\e012";
|
||||
}
|
||||
.icon-arrow-left-3:before {
|
||||
content: "\e013";
|
||||
}
|
||||
.icon-headphones:before {
|
||||
content: "\e014";
|
||||
}
|
||||
1
static/static/css/style.css
Normal file
1
static/static/css/style.css
Normal file
File diff suppressed because one or more lines are too long
43
static/static/css/zombie/_base.scss
Normal file
43
static/static/css/zombie/_base.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
// Simple fluid media
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
}
|
||||
figure img, figure object, figure embed, figure video {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
img {
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
body {
|
||||
@include normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include huge;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include large;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include normal;
|
||||
}
|
||||
|
||||
// May want to do the clearfix by intent rather than default
|
||||
body > header, body > section, body > aside, body > footer, body > .content {
|
||||
@include body-container;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: emStep(8);
|
||||
}
|
||||
|
||||
article ul, article ol {
|
||||
margin-bottom: emStep(8);
|
||||
margin-left: emStep(8);
|
||||
}
|
||||
53
static/static/css/zombie/_font-sizes.scss
Normal file
53
static/static/css/zombie/_font-sizes.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@mixin micro {
|
||||
/* 8px / 11px */
|
||||
font-size: #{($font-size*0.5) / $em}em;
|
||||
line-height: ($line*0.458) / ($font-size*0.5) * 1em;
|
||||
}
|
||||
|
||||
@mixin mini {
|
||||
/* 10px / 15px */
|
||||
font-size: #{($font-size*0.625) / $em}em;
|
||||
line-height: ($line*0.625) / ($font-size*0.625) * 1em;
|
||||
}
|
||||
|
||||
@mixin tiny {
|
||||
/* 11px / 16px */
|
||||
font-size: #{($font-size*0.6875) / $em}em;
|
||||
line-height: ($line*0.666) / ($font-size*0.6875) * 1em;
|
||||
}
|
||||
|
||||
@mixin small {
|
||||
/* 13px / 18px */
|
||||
font-size: #{($font-size*0.8125) / $em}em;
|
||||
line-height: ($line*0.75) / ($font-size*0.8125) * 1em;
|
||||
}
|
||||
|
||||
@mixin normal {
|
||||
/* 16px / 24px */
|
||||
font-size: #{$font-size / $em}em;
|
||||
line-height: #{$line / $em}em; /* 24 */
|
||||
}
|
||||
|
||||
@mixin large {
|
||||
/* 26 / 36px */
|
||||
font-size: #{26 / $em}em;
|
||||
line-height: ($line*1.5) / 26 * 1em;
|
||||
}
|
||||
|
||||
@mixin huge {
|
||||
/* 42px / 48px */
|
||||
font-size: #{42 / $em}em;
|
||||
line-height: ($line*2) / 42 * 1em;
|
||||
}
|
||||
|
||||
@mixin massive {
|
||||
/* 68px / 72px */
|
||||
font-size: #{68 / $em}em;
|
||||
line-height: ($line*3) / 68 * 1em;
|
||||
}
|
||||
|
||||
@mixin gigantic {
|
||||
/* 110px / 120px */
|
||||
font-size: #{110 / $em}em;
|
||||
line-height: ($line*5) / 110 * 1em;
|
||||
}
|
||||
76
static/static/css/zombie/_normalize.scss
Normal file
76
static/static/css/zombie/_normalize.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
// Margin, padding, and border resets
|
||||
// except for form elements
|
||||
|
||||
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, nav, section, menu, time, mark, audio, video, canvas {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Consistency fixes
|
||||
// adopted from http://necolas.github.com/normalize.css/
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
min-height: 100%;
|
||||
font-size: 100%;
|
||||
}
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, nav, section, audio, canvas, video {
|
||||
display: block;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
input, textarea, button, select {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
line-height: normal;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
button,
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
@include bb;
|
||||
}
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
@include bb;
|
||||
}
|
||||
6
static/static/css/zombie/defines.scss
Normal file
6
static/static/css/zombie/defines.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
$em: $font-size * 1; // pixel value of an em
|
||||
$total_cols: $margin_cols + $content_cols; // total cols 12 + 2 margins
|
||||
$line: $font-size * $line_height; // in pixels
|
||||
$column: 100% / $total_cols; // width of a column
|
||||
$fat_col: 100% / $content_cols;
|
||||
|
||||
22
static/static/css/zombie/functions.scss
Normal file
22
static/static/css/zombie/functions.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
@function gutter() {
|
||||
@return #{($line/$em)/4}em;
|
||||
}
|
||||
|
||||
@function oneCol() {
|
||||
@return 100% / $content_cols;
|
||||
}
|
||||
|
||||
@function emStep($step) {
|
||||
@return #{($step / $emSteps)}em;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// @for $i from 1 through $max_cols {
|
||||
// #{$row-notation} #{$column-notation}#{$i} { @include row-col($i, 4); }
|
||||
// }
|
||||
//
|
||||
// @for $i from 1 through $max_cols {
|
||||
// #{$row-notation} #{$column-notation}#{$i} { @include row-col($i, 8); }
|
||||
// }
|
||||
//
|
||||
139
static/static/css/zombie/mixins.scss
Normal file
139
static/static/css/zombie/mixins.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
// First cross browser stuff
|
||||
@mixin bb {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@mixin scale($amount){
|
||||
-webkit-transform: scale($amount);
|
||||
-moz-transform: scale($amount);
|
||||
-ms-transform: scale($amount);
|
||||
transform: scale($amount);
|
||||
}
|
||||
|
||||
@mixin easeout($time){
|
||||
-webkit-transition: all #{$time}s ease-out;
|
||||
-moz-transition: all #{$time}s ease-out;
|
||||
-ms-transition: all #{$time}s ease-out;
|
||||
transition: all #{$time}s ease-out;
|
||||
}
|
||||
|
||||
@mixin easein($time){
|
||||
-webkit-transition: all #{$time}s ease-in;
|
||||
-moz-transition: all #{$time}s ease-in;
|
||||
-ms-transition: all #{$time}s ease-in;
|
||||
transition: all #{$time}s ease-in;
|
||||
}
|
||||
|
||||
@mixin transform-origin($hor, $vert){
|
||||
-webkit-transform-origin: $hor $vert;
|
||||
-moz-transform-origin: $hor $vert;
|
||||
-ms-transform-origin: $hor $vert;
|
||||
transform-origin: $hor $vert;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
// Gently borrowed from bootstrap
|
||||
// For clearing floats like a boss h5bp.com/q
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
// Fixes Opera/contenteditable bug:
|
||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
||||
line-height: 0;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bulletless {
|
||||
list-style: none outside none;
|
||||
}
|
||||
|
||||
@mixin center {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@mixin visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
@mixin visible-inline {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
@mixin hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@mixin body-container {
|
||||
margin: 0 ($column * ($margin_cols/2));
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
@mixin fontsize($step) {
|
||||
font-size: #{($font-size + $step ) / $em}em;
|
||||
line-height: ($line*1.5) / ($font-size + $step ) * 1em;
|
||||
}
|
||||
|
||||
@mixin cellpad() {
|
||||
padding: 0 gutter();
|
||||
}
|
||||
|
||||
@mixin oldpad() {
|
||||
padding: 0 #{($line/2)/$em}em;
|
||||
}
|
||||
|
||||
// probably easier to just create a fraction inline
|
||||
// completely ignores content cols and simply divides the space into the fraction provided
|
||||
@mixin abswidth($cols, $num_cols) {
|
||||
width: percentage(min(1, (1 / $num_cols) * $cols )) ;
|
||||
}
|
||||
|
||||
// works within the content column system
|
||||
@mixin colwidth($cols) {
|
||||
width: (oneCol() * $cols);
|
||||
@include bb;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// works within the content column system
|
||||
// num_cols needs to be a factor of content_cols
|
||||
@mixin colmargin($cols) {
|
||||
margin-left: oneCol() * $cols;
|
||||
}
|
||||
|
||||
@mixin setColWidths($num_cols, $min_resolution) {
|
||||
// @media screen and( max-width: $min_resolution) {
|
||||
.#{$row-notation} {
|
||||
@for $i from 1 through $total_cols {
|
||||
.#{$column-notation}#{$i} {
|
||||
float: left;
|
||||
min-height: 1px;
|
||||
// .transition-all(@transition-time);
|
||||
@include bb;
|
||||
@include colwidth($i, $num_cols);
|
||||
@include cellpad;
|
||||
}
|
||||
}
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
// @mixin setMargins($num_cols, $min_resolution) {
|
||||
// @media screen and( max-width: $min_resolution) {
|
||||
// .#{$row-notation} {
|
||||
// @for $i from 1 through $total_cols {
|
||||
// .#{$column-notation}#{$i} { @include colwidth($i, $num_cols); }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
BIN
static/static/fonts/spf13-1.eot
Normal file
BIN
static/static/fonts/spf13-1.eot
Normal file
Binary file not shown.
571
static/static/fonts/spf13-1.svg
Normal file
571
static/static/fonts/spf13-1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 137 KiB |
BIN
static/static/fonts/spf13-1.ttf
Normal file
BIN
static/static/fonts/spf13-1.ttf
Normal file
Binary file not shown.
BIN
static/static/fonts/spf13-1.woff
Normal file
BIN
static/static/fonts/spf13-1.woff
Normal file
Binary file not shown.
BIN
static/static/img/LeilaSalar.jpg
Normal file
BIN
static/static/img/LeilaSalar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
static/static/img/SirEdward.jpg
Normal file
BIN
static/static/img/SirEdward.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
static/static/img/family.jpg
Normal file
BIN
static/static/img/family.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 MiB |
BIN
static/static/img/familycollage.jpg
Normal file
BIN
static/static/img/familycollage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 MiB |
BIN
static/static/img/rahmanian.png
Normal file
BIN
static/static/img/rahmanian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 847 KiB |
BIN
static/static/img/softinio.jpg
Normal file
BIN
static/static/img/softinio.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
static/static/img/squairy_light.png
Normal file
BIN
static/static/img/squairy_light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
1
static/static/js/main.js
Executable file
1
static/static/js/main.js
Executable file
|
|
@ -0,0 +1 @@
|
|||
|
||||
2
static/static/js/vendor/jquery-1.8.3.min.js
vendored
Executable file
2
static/static/js/vendor/jquery-1.8.3.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
11
static/static/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js
vendored
Executable file
11
static/static/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue