Add font resources from Respresso

README.MD

@@ -6,7 +6,6 @@ It allows you to simply import the latest assets into your workspace.
 You may store several versions of the same resource in the cloud and pick the ones you need to import.
 Respresso currently supports five types of resources:
 * Images
-* App icons
 * Localization
 * Fonts
 * Colors
@@ -29,7 +28,6 @@ In *respresso.json* you can customize:
 
 The currently accepted resource names are:
 * image
-* appIcon
 * color
 * localization
 * font
@@ -69,7 +67,7 @@ npm install respresso --dev
 2. Sync resource files   
 ```npm run sync```
 3. Start running the server  
-```npm run start```
+```npm start```
 
 ### Localization	
 
@@ -85,3 +83,4 @@ Just include your svg files as in *index.html*.
 
 ### Fonts	
 
+Find a sample use of fonts in *src/index.scss*.

package.json

@@ -4,7 +4,7 @@
 	"devDependencies": {
 		"cssnano": "^4.1.7",
 		"parcel-bundler": "^1.10.3",
-		"respresso": "^0.0.13",
+		"respresso": "^1.0.0",
 		"sass": "^1.15.2",
 		"typescript": "^3.2.2"
 	},

respresso.images.scss

@@ -0,0 +1,28 @@
+@function str-replace($string, $search, $replace: '') {
+    $index: str-index($string, $search);
+
+    @if $index {
+        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+@function uri-escape($str) {
+    $str: str-replace($str, "%", "%25");
+    $str: str-replace($str, ">", "%3E");
+    $str: str-replace($str, "<", "%3C");
+    $str: str-replace($str, "#", "%23");
+    $str: str-replace($str, '"', "%22");
+    $str: str-replace($str, "\\n", "%0A");
+    @return $str;
+}
+@function logo($color1: #434A54, $color2: #20D497, $color3: #007349) {
+    $color1: uri-escape(""+$color1);
+    $color2: uri-escape(""+$color2);
+    $color3: uri-escape(""+$color3);
+    @return 'data:image/svg+xml,%3C?xml%20version=%221.0%22%20encoding=%22UTF-8%22?%3E%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22none%22%20height=%2254%22%20viewBox=%220%200%2051%2054%22%20width=%2251%22%3E%0A%20%3Cpath%20d=%22M38.8724%2031.182C37.7339%2031.182%2036.758%2030.2887%2036.758%2029.0707C36.758%2028.8271%2036.758%2028.5835%2036.8394%2028.4211L30.7401%2022.3308V27.2842C31.472%2027.609%2031.8787%2028.3399%2031.8787%2029.1519C31.8787%2030.2887%2030.9841%2031.2632%2029.7643%2031.2632C28.6257%2031.2632%2027.6499%2030.3699%2027.6499%2029.1519C27.6499%2028.3399%2028.1378%2027.609%2028.7884%2027.2842V22.006C28.0565%2021.6812%2027.6499%2020.9504%2027.6499%2020.1383C27.6499%2019.8947%2027.6499%2019.6511%2027.7312%2019.4887L21.632%2013.3985V27.2842C22.3639%2027.609%2022.7705%2028.3399%2022.7705%2029.1519C22.7705%2030.2887%2021.8759%2031.2632%2020.6561%2031.2632C19.5175%2031.2632%2018.5417%2030.3699%2018.5417%2029.1519C18.5417%2028.9895%2018.5417%2028.8271%2018.623%2028.6647L12.1172%2023.2241C11.8732%2023.3053%2011.5479%2023.3865%2011.3039%2023.3865C10.9786%2023.3865%2010.7347%2023.3053%2010.4907%2023.2241L3.98484%2028.6647C4.06617%2028.8271%204.06617%2028.9895%204.06617%2029.1519C4.06617%2030.2887%203.17161%2031.2632%201.95177%2031.2632C0.73192%2031.2632%200.162659%2030.2075%200.162659%2029.0707C0.162659%2027.9338%201.05721%2026.9594%202.27706%2026.9594C2.60235%2026.9594%202.84632%2027.0406%203.09029%2027.1218L9.59614%2021.6812C9.51481%2021.5188%209.51481%2021.3564%209.51481%2021.194C9.51481%2020.382%2010.0028%2019.6511%2010.6533%2019.3263V12.9925C9.92143%2012.6677%209.51481%2011.9368%209.51481%2011.1248C9.51481%209.98797%2010.4094%209.01353%2011.6292%209.01353C11.8732%209.01353%2012.1172%209.09474%2012.3611%209.17594L19.0296%202.7609C18.9483%202.51729%2018.9483%202.35489%2018.9483%202.11128C18.9483%200.974436%2019.8428%200%2021.0627%200C22.2012%200%2023.1771%200.893233%2023.1771%202.11128C23.1771%202.92331%2022.6891%203.65413%2022.0386%203.97895V9.25714C22.7705%209.58195%2023.1771%2010.3128%2023.1771%2011.1248C23.1771%2011.3684%2023.1771%2011.612%2023.0958%2011.7744L29.439%2018.1083C29.6829%2018.0271%2029.9269%2018.0271%2030.0896%2018.0271C31.2281%2018.0271%2032.2039%2018.9203%2032.2039%2020.1383C32.2039%2020.382%2032.2039%2020.6256%2032.1226%2020.788L38.4658%2027.1218C38.7098%2027.0406%2038.9538%2027.0406%2039.1164%2027.0406C40.2549%2027.0406%2041.2308%2027.9338%2041.2308%2029.1519C40.9055%2030.2075%2040.011%2031.182%2038.8724%2031.182ZM20.0055%2027.1218V13.0737C19.2736%2012.7489%2018.867%2012.018%2018.867%2011.206C18.867%2010.394%2019.3549%209.66316%2020.0055%209.33835V4.38496L13.581%2010.5564C13.6623%2010.8%2013.6623%2010.9624%2013.6623%2011.206C13.6623%2012.018%2013.1744%2012.7489%2012.5238%2013.0737V19.4075C13.2557%2019.7323%2013.6623%2020.4632%2013.6623%2021.2752C13.6623%2021.4376%2013.6623%2021.6%2013.581%2021.7624L20.0055%2027.1218Z%22%20fill=%22#{$color1}%22/%3E%0A%20%3Cpath%20d=%22M49.4444%2034.0241C48.9565%2033.5368%2048.2246%2033.212%2047.4927%2033.212H1.0572C0.406615%2033.212%200%2033.6993%200%2034.3489C0%2034.9985%200.0813231%2035.6481%200.162646%2036.2977H12.6864C13.093%2036.2977%2013.337%2036.6226%2013.337%2036.9474C13.337%2037.1098%2013.2557%2037.2722%2013.1743%2037.4346C13.093%2037.5158%2012.849%2037.597%2012.6864%2037.597H0.406615C0.487938%2038.1654%200.650585%2038.6526%200.813231%2039.2211H13.337C13.7436%2039.2211%2013.9876%2039.5459%2013.9876%2039.8707C13.9876%2040.0331%2013.9062%2040.1955%2013.8249%2040.3579C13.7436%2040.5203%2013.4996%2040.6015%2013.337%2040.6015H1.30117C1.54514%2041.1699%201.70778%2041.6571%201.95175%2042.2256H14.4755C14.8821%2042.2256%2015.1261%2042.5504%2015.1261%2042.8752C15.1261%2043.0376%2015.0448%2043.2%2014.9634%2043.3624C14.8008%2043.4436%2014.6382%2043.5248%2014.4755%2043.5248H2.68366C3.00895%2044.0932%203.33425%2044.5805%203.65954%2045.1489H16.102C16.5086%2045.1489%2016.7526%2045.4737%2016.7526%2045.7985C16.7526%2045.9609%2016.6712%2046.1233%2016.5899%2046.2857C16.4273%2046.4481%2016.2646%2046.5293%2016.102%2046.5293H4.71674C5.12335%2047.0165%205.61129%2047.585%206.09923%2047.991C6.09923%2047.991%206.18055%2048.0722%206.26188%2048.0722H18.4603C18.867%2048.0722%2019.1109%2048.397%2019.1109%2048.7218C19.1109%2048.8842%2019.0296%2049.0466%2018.867%2049.209C18.7856%2049.3714%2018.5417%2049.3714%2018.379%2049.3714H7.72569C8.4576%2049.9398%209.18951%2050.5083%2010.0027%2050.9955H21.6319C22.0386%2050.9955%2022.2825%2051.3203%2022.2825%2051.6451C22.2825%2051.8075%2022.2012%2051.9699%2022.1199%2052.1323C21.9572%2052.2135%2021.7946%2052.2947%2021.6319%2052.2947H12.6864C15.2074%2053.3504%2018.0537%2054%2020.9814%2054C32.9358%2054%2043.5078%2047.7474%2049.5257%2038.409C49.6071%2038.3278%2049.6884%2038.1654%2049.7697%2038.0842C50.1763%2037.4346%2050.339%2036.7038%2050.339%2035.8917C50.2577%2035.2421%2049.9324%2034.5113%2049.4444%2034.0241ZM46.1915%2037.9218C43.9958%2041.0887%2041.3121%2043.7684%2038.1405%2045.7985C38.0592%2045.7985%2038.0592%2045.8797%2037.9779%2045.8797C37.8152%2045.8797%2037.6526%2045.6361%2037.8152%2045.4737C39.6043%2043.0376%2040.9055%2040.1955%2041.4748%2037.1098C41.5561%2036.6226%2042.044%2036.2165%2042.532%2036.2165H45.297C46.1915%2036.2978%2046.6794%2037.2722%2046.1915%2037.9218Z%22%20fill=%22url(%23paint0_linear)%22/%3E%0A%20%3Cdefs%3E%0A%20%20%3ClinearGradient%20gradientUnits=%22userSpaceOnUse%22%20id=%22paint0_linear%22%20x1=%220%22%20x2=%2250.263%22%20y1=%2243.606%22%20y2=%2243.606%22%3E%0A%20%20%20%3Cstop%20stop-color=%22#{$color2}%22/%3E%0A%20%20%20%3Cstop%20offset=%221%22%20stop-color=%22#{$color3}%22/%3E%0A%20%20%3C/linearGradient%3E%0A%20%3C/defs%3E%0A%3C/svg%3E';
+}
+@function github() {
+    @return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RERCMUIwOUY4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RERCMUIwOUU4NkNFMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJBOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJCOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jUqS1wAAApVJREFUeNq0l89rE1EQx3e3gVJoSPzZeNEWPKgHoa0HBak0iHiy/4C3WvDmoZ56qJ7txVsPQu8qlqqHIhRKJZceesmhioQEfxTEtsoSpdJg1u/ABJ7Pmc1m8zLwgWTmzcw3L+/te+tHUeQltONgCkyCi2AEDHLsJ6iBMlgHL8FeoqokoA2j4CloRMmtwTmj7erHBXPgCWhG6a3JNXKdCiDl1cidVbXZkJoXQRi5t5BrxwoY71FzU8S4JuAIqFkJ2+BFSlEh525b/hr3+k/AklDkNsf6wTT4yv46KIMNpsy+iMdMc47HNWxbsgVcUn7FmLAzzoFAWDsBx+wVP6bUpp5ewI+DOeUx0Wd9D8F70BTGNjkWtqnhmT1JQAHcUgZd8Lo3rQb1LAT8eJVUfgGvHQigGp+V2Z0iAUUl8QH47kAA1XioxIo+bRN8OG8F/oBjwv+Z1nJgX5jpdzQDw0LCjsPmrcW7I/iHScCAEDj03FtD8A0EyuChHgg4KTlJQF3wZ7WELppnBX+dBFSVpJsOBWi1qiRgSwnOgoyD5hmuJdkWCVhTgnTvW3AgYIFrSbZGh0UW/Io5Vp+DQoK7o80pztWMemZbgxeNwCNwDbw1fIfgGZjhU6xPaJgBV8BdsMw5cbZoHsenwYFxkZzl83xTSKTiviCAfCsJLysH3POfC8m8NegyGAGfLP/VmGmfSChgXroR0RSWjEFv2J/nG84cuKFMf4sTCZqXuJd4KaXFVjEG3+tw4eXbNK/YC9oXXs3O8NY8y99L4BXY5cvLY/Bb2VZ58EOJVcB18DHJq9lRsKr8inyKGVjlmh29mtHs3AHfuhCwy1vXT/Nu2GKQt+UHsGdctyX6eQyNvc+5sfX9Dl7Pe2J/BRgAl2CpwmrsHR0AAAAASUVORK5CYII=';
+}

respresso.json

@@ -24,7 +24,7 @@
 		},
 		{
 			"category": "font",
-			"group": "font",
+			"group": "simple",
 			"version": "1.0.0"
 		}
 	]

src/index.scss

@@ -3,6 +3,26 @@
 @import './bootstrap.css';
 @import './bootstrap-reboot.css';
 
+@font-face {
+	font-family: "OpenSans";
+	src: url("../respresso/font/open_sans_regular.ttf") format("truetype");
+	font-weight: 400;
+  }
+@font-face {
+	font-family: "OpenSans";
+	src: url("../respresso/font/open_sans_bold.ttf") format("truetype");
+	font-weight: 700;
+}
+
+body {
+	font-family: 'OpenSans', sans-serif;
+	font-weight:400;
+}
+
+h1, h2, h3, h4 {
+	font-weight: 700;
+}
+
 .hero {
 	display: flex;
 	flex-direction: column;