0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00

add font collection structure

This commit is contained in:
elhombretecla 2016-03-01 19:22:22 +01:00
parent 5545739c81
commit 62588620a6
3 changed files with 99 additions and 0 deletions

View file

@ -0,0 +1,81 @@
// source sans pro
@include font-face-collection("sourcesanspro","sourcesanspro-extralight",100);
@include font-face-collection("sourcesanspro","sourcesanspro-extralightitalic",100,italic);
@include font-face-collection("sourcesanspro","sourcesanspro-light",200);
@include font-face-collection("sourcesanspro","sourcesanspro-lightitalic",200,italic);
@include font-face-collection("sourcesanspro","sourcesanspro-regular",normal);
@include font-face-collection("sourcesanspro","sourcesanspro-italic",normal,italic);
@include font-face-collection("sourcesanspro","sourcesanspro-semibold",500);
@include font-face-collection("sourcesanspro","sourcesanspro-semibolditalic",500,italic);
@include font-face-collection("sourcesanspro","sourcesanspro-bold",bold);
@include font-face-collection("sourcesanspro","sourcesanspro-bolditalic",bold,italic);
@include font-face-collection("sourcesanspro","sourcesanspro-black",900);
@include font-face-collection("sourcesanspro","sourcesanspro-blackitalic",900,italic);
// Open Sans
@include font-face-collection("opensans","opensans-extralight",100);
@include font-face-collection("opensans","opensans-extralightitalic",100,italic);
@include font-face-collection("opensans","opensans-light",200);
@include font-face-collection("opensans","opensans-lightitalic",200,italic);
@include font-face-collection("opensans","opensans-regular",normal);
@include font-face-collection("opensans","opensans-italic",normal,italic);
@include font-face-collection("opensans","opensans-semibold",500);
@include font-face-collection("opensans","opensans-semibolditalic",500,italic);
@include font-face-collection("opensans","opensans-bold",bold);
@include font-face-collection("opensans","opensans-bolditalic",bold,italic);
@include font-face-collection("opensans","opensans-black",900);
@include font-face-collection("opensans","opensans-blackitalic",900,italic);
// Bebas
@include font-face-collection("bebas","bebas",normal);
// Caviar Dreams
@include font-face-collection("caviardreams","caviardreams",normal);
@include font-face-collection("caviardreams","caviardreams-italic",normal,italic);
@include font-face-collection("caviardreams","caviardreams-bold",bold);
@include font-face-collection("caviardreams","caviardreams-bolditalic",bold,italic);
// Good Dog
@include font-face-collection("gooddog","gooddog",normal);
// PT Sans
@include font-face-collection("ptsans","ptsans",normal);
@include font-face-collection("ptsans","ptsans-italic",normal,italic);
@include font-face-collection("ptsans","ptsans-bold",bold);
@include font-face-collection("ptsans","ptsans-bolditalic",bold,italic);
// Roboto
@include font-face-collection("roboto","roboto-thin",100);
@include font-face-collection("roboto","roboto-thinitalic",100,italic);
@include font-face-collection("roboto","roboto-light",200);
@include font-face-collection("roboto","roboto-lightitalic",200,italic);
@include font-face-collection("roboto","roboto-regular",normal);
@include font-face-collection("roboto","roboto-italic",normal,italic);
@include font-face-collection("roboto","roboto-semibold",500);
@include font-face-collection("roboto","roboto-semibolditalic",500,italic);
@include font-face-collection("roboto","roboto-bold",bold);
@include font-face-collection("roboto","roboto-bolditalic",bold,italic);
@include font-face-collection("roboto","roboto-black",900);
@include font-face-collection("roboto","roboto-blackitalic",900,italic);
// Roboto Condensed
@include font-face-collection("robotocondensed","robotocondensed-thin",100);
@include font-face-collection("robotocondensed","robotocondensed-thinitalic",100,italic);
@include font-face-collection("robotocondensed","robotocondensed-light",200);
@include font-face-collection("robotocondensed","robotocondensed-lightitalic",200,italic);
@include font-face-collection("robotocondensed","robotocondensed-regular",normal);
@include font-face-collection("robotocondensed","robotocondensed-italic",normal,italic);
@include font-face-collection("robotocondensed","robotocondensed-semibold",500);
@include font-face-collection("robotocondensed","robotocondensed-semibolditalic",500,italic);
@include font-face-collection("robotocondensed","robotocondensed-bold",bold);
@include font-face-collection("robotocondensed","robotocondensed-bolditalic",bold,italic);
@include font-face-collection("robotocondensed","robotocondensed-black",900);
@include font-face-collection("robotocondensed","robotocondensed-blackitalic",900,italic);

View file

@ -105,6 +105,18 @@
}
}
// Collection fonts
@mixin font-face-collection($style-name, $file, $weight: unquote("normal"), $style: unquote("normal") ) {
$filepath: "/fonts/collection/" + $file;
@font-face {
font-family: "#{$style-name}";
src: url($filepath + ".eot");
src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
font-weight: unquote($weight);
font-style: unquote($style);
}
}
@mixin tooltipShow {
&:hover {

View file

@ -50,3 +50,9 @@
@import 'partials/color-palette';
@import 'partials/colorpicker';
@import 'partials/forms';
//#################################################
// Resources
//#################################################
@import 'collection/font-collection';