Replace some JPG images with svg.

froala · Oct 12, 2017 · 1868b5c · 1868b5c
1 parent cc54290
commit 1868b5c
Show file tree

Hide file tree

Showing 104 changed files with 2,388 additions and 388 deletions.
diff --git a/dist/call_to_action.html b/dist/call_to_action.html
@@ -139,14 +139,14 @@ <h1>Call to action</h1>
       </div>
       <div class="row text-center pt-4 pt-md-5">
         <div class="col-12 col-sm-10 col-md-6 col-lg-4 m-sm-auto">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
           <h3>First Action</h3>
           <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
           <p class="mt-3"><a class="btn" href="https://www.froala.com">Button</a></p>
         </div>
 
         <div class="col-12 col-sm-10 col-md-6 col-lg-4 ml-sm-auto mr-sm-auto mt-5 mt-md-0">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
           <h3>Second Action</h3>
           <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
           <p class="mt-3"><a class="btn" href="https://www.froala.com">Button</a></p>
@@ -155,7 +155,7 @@ <h3>Second Action</h3>
     </div>
   </section>
 
-  <section class="fdb-block" style="background-image: url(../imgs/bg_c_3.jpg)">
+  <section class="fdb-block" style="background-image: url(../imgs/bg_c_1.svg)">
     <div class="container">
       <div class="row justify-content-center">
         <div class="col-12 col-md-10 col-lg-8 text-center">
@@ -186,7 +186,7 @@ <h2>Use Froala Design Blocks for free in your project</h2>
     </div>
   </section>
 
-  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_1.jpg)">
+  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_1.svg)">
     <div class="container">
       <div class="row justify-content-end">
         <div class="col-12 col-md-8 col-lg-6 text-center">
@@ -218,7 +218,7 @@ <h2>Use Froala Design Blocks for free in your project</h2>
     </div>
   </section>
 
-  <section class="fdb-block" style="background-image: url(../imgs/alt_wide_2.jpg)">
+  <section class="fdb-block" style="background-image: url(../imgs/alt_wide_2.svg)">
     <div class="container">
       <div class="row">
         <div class="col-12 col-sm-10 col-md-8 col-lg-6 text-left">
@@ -247,7 +247,7 @@ <h1>Froala Design Blocks</h1>
 
       <div class="row justify-content-center align-items-center pt-5">
         <div class="col-8 col-sm-3">
-          <img alt="image" class="img-fluid" src="../imgs/img_square_2.jpg">
+          <img alt="image" class="img-fluid" src="../imgs/img_square_2.svg">
         </div>
         <div class="col-12 col-sm-6 m-auto pt-4 pt-sm-0">
           <h2><strong>Bootstrap</strong></h2>
@@ -281,7 +281,7 @@ <h2>Call to action</h2>
         </div>
 
         <div class="col-8 col-md-4 m-auto m-md-0 ml-md-auto pt-5">
-          <img alt="image" class="img-fluid" src="../imgs/img_square_1.jpg">
+          <img alt="image" class="img-fluid" src="../imgs/img_square_1.svg">
         </div>
       </div>
     </div>
@@ -291,7 +291,7 @@ <h2>Call to action</h2>
     <div class="container">
       <div class="row align-items-center">
         <div class="col-10 col-sm-6 col-md-4 col-lg-3 m-auto m-md-0">
-          <img alt="image" class="img-fluid" src="../imgs/img_square_4.jpg">
+          <img alt="image" class="img-fluid" src="../imgs/img_square_4.svg">
         </div>
 
         <div class="col-12 col-md-8 ml-auto pt-5 pt-md-0">
@@ -303,7 +303,7 @@ <h2>Call to action</h2>
     </div>
   </section>
 
-  <section class="fdb-block bg-dark fdb-viewport" style="background-image: url(../imgs/bg_c_1.jpg);">
+  <section class="fdb-block bg-dark fdb-viewport" style="background-image: url(../imgs/bg_c_1.svg);">
     <div class="container align-items-center justify-content-center d-flex">
       <div class="row justify-content-center text-center">
         <div class="col-12 col-md-10 col-lg-8">
@@ -314,11 +314,11 @@ <h1>Froala Design Blocks is Open Source and free to use in your apps</h1>
     </div>
   </section>
 
-  <section class="fdb-block fdb-viewport bg-dark" style="background-image: url(../imgs/bg_0.jpg)">
+  <section class="fdb-block fdb-viewport bg-dark" style="background-image: url(../imgs/bg_0.svg)">
     <div class="container justify-content-center align-items-center d-flex">
       <div class="row justify-content-center text-center">
         <div class="col-12 col-md-8">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
           <h1>Froala Design Blocks</h1>
           <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
           <p class="mt-5"><a href="https://www.froala.com" class="btn">Call to Action</a></p>
@@ -374,13 +374,13 @@ <h1>Froala Design Blocks</h1>
 
       <div class="row pt-5">
         <div class="col-12">
-          <img alt="image" class="img-fluid" src="../imgs/img_very_wide.jpg">
+          <img alt="image" class="img-fluid" src="../imgs/img_very_wide.svg">
         </div>
       </div>
     </div>
   </section>
 
-  <section class="fdb-block fdb-viewport" style="background-image: url(../imgs/alt_wide_1.jpg)">
+  <section class="fdb-block fdb-viewport" style="background-image: url(../imgs/alt_wide_1.svg)">
     <div class="container align-items-center justify-content-center d-flex">
       <div class="row align-items-center text-left">
         <div class="col-12 col-sm-10 col-md-8 col-lg-6">
@@ -404,30 +404,30 @@ <h1>Froala Design Blocks</h1>
 
       <div class="row text-center justify-content-center pt-5">
         <div class="col-12 col-sm-6 col-lg-3">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
 
           <h3><strong>Feature One</strong></h3>
 
           <p>Far far away, behind the word mountains, far from the countries</p>
         </div>
         <div class="col-12 col-sm-6 col-lg-3 pt-4 pt-sm-0">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
 
           <h3><strong>Feature Two</strong></h3>
 
           <p>Separated they live in Bookmarksgrove right at the coast</p>
         </div>
 
         <div class="col-12 col-sm-6 col-lg-3 pt-4 pt-lg-0">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
 
           <h3><strong>Feature Three</strong></h3>
 
           <p>A small river named Duden flows by their place and supplies it</p>
         </div>
 
         <div class="col-12 col-sm-6 col-lg-3 pt-4 pt-lg-0">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
 
           <h3><strong>Feature Four</strong></h3>
 

diff --git a/dist/contacts.html b/dist/contacts.html
@@ -82,7 +82,7 @@ <h2>Contact Us</h2>
     </div>
   </section>
 
-  <section class="fdb-block bg-dark" style="background-image: url(../imgs/bg_0.jpg)">
+  <section class="fdb-block bg-dark" style="background-image: url(../imgs/bg_0.svg)">
     <div class="container">
       <div class="row text-center justify-content-center">
         <div class="col-12 col-md-8 col-lg-7">
@@ -171,7 +171,7 @@ <h1>Contact Us</h1>
     </div>
   </section>
 
-  <section class="fdb-block" style="background-image: url(../imgs/bg_0.jpg)">
+  <section class="fdb-block" style="background-image: url(../imgs/bg_0.svg)">
     <div class="container">
       <div class="row">
         <div class="col">
@@ -266,17 +266,17 @@ <h1>Contact Us</h1>
         <div class="row-50"></div>
         <div class="row justify-content-center text-center">
           <div class="col-12 col-md mr-auto ml-auto">
-            <img alt="image" height="40" class="mb-2" src="../imgs/img_round.png">
+            <img alt="image" height="40" class="mb-2" src="../imgs/img_round.svg">
             <p class="text-h3">+44 (112) 123 752</p>
           </div>
 
           <div class="col-12 col-md pt-4 pt-md-0 mr-auto ml-auto">
-            <img alt="image" height="40" class="mb-2" src="../imgs/img_round.png">
+            <img alt="image" height="40" class="mb-2" src="../imgs/img_round.svg">
             <p class="text-h3">123 6th St.<br>Melbourne, FL 32904</p>
           </div>
 
           <div class="col-12 col-md pt-4 pt-md-0 mr-auto ml-auto">
-            <img alt="image" height="40" class="mb-2" src="../imgs/img_round.png">
+            <img alt="image" height="40" class="mb-2" src="../imgs/img_round.svg">
             <p class="text-h3">[email protected]</p>
           </div>
         </div>
@@ -349,7 +349,7 @@ <h1>Contact Us</h1>
     </div>
   </section>
 
-  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_3.jpg)">
+  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_3.svg)">
     <div class="container">
       <div class="row text-center justify-content-center">
         <div class="col-12 col-md-8 col-lg-7">

diff --git a/dist/contents.html b/dist/contents.html
@@ -205,7 +205,7 @@ <h1>Design Blocks</h1>
     <div class="container">
       <div class="row justify-content-center">
         <div class="col col-md-8 text-center">
-          <img alt="image" class="fdb-icon mb-4" src="../imgs/img_square_1.jpg"/>
+          <img alt="image" class="fdb-icon mb-4" src="../imgs/img_square_1.svg"/>
           <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
         </div>
       </div>
@@ -231,7 +231,7 @@ <h1>Froala Blocks</h1>
     <div class="container">
       <div class="row align-items-center">
         <div class="col-12 col-md-6 col-lg-5">
-          <img alt="image" class="fdb-icon" src="../imgs/img_square_1.jpg"/>
+          <img alt="image" class="fdb-icon" src="../imgs/img_square_1.svg"/>
           <h1>Design Blocks</h1>
           <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
         </div>
@@ -247,9 +247,9 @@ <h1>Design Blocks</h1>
       <div class="row justify-content-center">
         <div class="col-12 col-md-8 text-center">
           <div class="row justify-content-center pb-4">
-            <div class="col-4 col-sm-3 col-md-2"><img alt="image" class="fdb-icon" src="../imgs/img_square_1.jpg"/></div>
-            <div class="col-4 col-sm-3 col-md-2"><img alt="image" class="fdb-icon" src="../imgs/img_square_2.jpg"/></div>
-            <div class="col-4 col-sm-3 col-md-2"><img alt="image" class="fdb-icon" src="../imgs/img_square_3.jpg"/></div>
+            <div class="col-4 col-sm-3 col-md-2"><img alt="image" class="fdb-icon" src="../imgs/img_square_1.svg"/></div>
+            <div class="col-4 col-sm-3 col-md-2"><img alt="image" class="fdb-icon" src="../imgs/img_square_2.svg"/></div>
+            <div class="col-4 col-sm-3 col-md-2"><img alt="image" class="fdb-icon" src="../imgs/img_square_3.svg"/></div>
           </div>
 
           <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
@@ -283,10 +283,10 @@ <h1>Design Blocks</h1>
 
           <p><strong>Works in every browser:</strong></p>
           <p>
-            <img alt="image" class="fdb-icon" src="../imgs/img_square_1.jpg"/>
-            <img alt="image" class="fdb-icon ml-2" src="../imgs/img_square_2.jpg"/>
-            <img alt="image" class="fdb-icon ml-2" src="../imgs/img_square_3.jpg"/>
-            <img alt="image" class="fdb-icon ml-2" src="../imgs/img_square_4.jpg"/></p>
+            <img alt="image" class="fdb-icon" src="../imgs/img_square_1.svg"/>
+            <img alt="image" class="fdb-icon ml-2" src="../imgs/img_square_2.svg"/>
+            <img alt="image" class="fdb-icon ml-2" src="../imgs/img_square_3.svg"/>
+            <img alt="image" class="fdb-icon ml-2" src="../imgs/img_square_4.svg"/></p>
         </div>
         <div class="col-12 col-md-8 m-auto ml-lg-auto mr-lg-0 col-lg-6 pt-5 pt-lg-0">
           <img alt="image" class="img-fluid" src="../imgs/colors_wide_1.jpg">
@@ -299,20 +299,20 @@ <h1>Design Blocks</h1>
     <div class="container">
       <div class="row text-left">
         <div class="col-12 col-md-6">
-          <img alt="image" class="fdb-icon" src="../imgs/img_square_1.jpg"/>
+          <img alt="image" class="fdb-icon" src="../imgs/img_square_1.svg"/>
           <h3><strong>Awesome Things</strong></h3>
           <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Far from the countries Vokalia and Consonantia.</p>
         </div>
         <div class="col-12 col-md-6 pt-5 pt-md-0">
-          <img alt="image" class="fdb-icon" src="../imgs/img_square_2.jpg"/>
+          <img alt="image" class="fdb-icon" src="../imgs/img_square_2.svg"/>
           <h3><strong>More Awesomeness</strong></h3>
           <p class="text-h3">Separated they live in Bookmarksgrove right at the coast of the Semantics, far far away, behind the word mountains, far from the countries <a href="https://www.froala.com">Vokalia and Consonantia</a>, there live the blind texts. </p>
         </div>
       </div>
     </div>
   </section>
 
-  <section class="fdb-block" style="background-image: url(../imgs/bg_c_1.jpg);">
+  <section class="fdb-block" style="background-image: url(../imgs/bg_c_1.svg);">
     <div class="container">
       <div class="row text-left">
         <div class="col-12 col-sm-10 m-auto m-md-0 col-md-8 col-lg-6">
@@ -331,7 +331,7 @@ <h1>Froala Design Blocks</h1>
     </div>
   </section>
 
-  <section class="fdb-block fdb-image-bg" style="background-image: url(../imgs/alt_wide_2.jpg);">
+  <section class="fdb-block fdb-image-bg" style="background-image: url(../imgs/alt_wide_2.svg);">
     <div class="container">
       <div class="row text-left">
         <div class="col-12 col-md-8 col-lg-6 ml-sm-auto">
@@ -373,7 +373,7 @@ <h1>Froala Design Blocks</h1>
         </div>
 
         <div class="col-12 ml-md-auto col-md-7 col-lg-5 pb-5 pb-md-0">
-          <img alt="image" class="fdb-icon" src="../imgs/img_square_1.jpg">
+          <img alt="image" class="fdb-icon" src="../imgs/img_square_1.svg">
           <h1>Design Blocks</h1>
           <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
           <p class="mt-4"><a class="btn" href="https://www.froala.com">Download</a><a class="btn" href="https://www.froala.com">Register</a></p>
@@ -420,7 +420,7 @@ <h1>Froala Design Blocks is Open Source and free to use</h1>
   </section>
 
   <section class="fdb-block">
-    <div class="col-fill-left" style="background-image: url(../imgs/bg_c_1.jpg)">
+    <div class="col-fill-left" style="background-image: url(../imgs/bg_c_1.svg)">
     </div>
 
     <div class="container">
@@ -436,7 +436,7 @@ <h1>Froala Blocks</h1>
   </section>
 
   <section class="fdb-block pt-0 pb-0">
-    <div class="col-fill-right" style="background-image: url(../imgs/bg_c_2.jpg)">
+    <div class="col-fill-right" style="background-image: url(../imgs/bg_c_2.svg)">
     </div>
 
     <div class="container pt-5 pb-5">
@@ -473,25 +473,25 @@ <h1>Made with <span class="heart">&#10084;</span> by Froala</h1>
     <div class="container">
       <div class="row text-center align-items-center">
         <div class="col-8 col-md-4">
-          <img alt="image" class="img-fluid" src="../imgs/img_square_2.jpg">
+          <img alt="image" class="img-fluid" src="../imgs/img_square_2.svg">
         </div>
 
         <div class="col-4 col-md-2">
           <div class="row">
             <div class="col-12">
-              <img alt="image" class="img-fluid" src="../imgs/img_square_3.jpg">
+              <img alt="image" class="img-fluid" src="../imgs/img_square_3.svg">
             </div>
           </div>
 
           <div class="row mt-4">
             <div class="col-12">
-              <img alt="image" class="img-fluid" src="../imgs/img_square_4.jpg">
+              <img alt="image" class="img-fluid" src="../imgs/img_square_4.svg">
             </div>
           </div>
         </div>
 
         <div class="col-12 col-md-6 col-lg-5 ml-auto pt-5 pt-md-0">
-          <img alt="image" class="fdb-icon" src="../imgs/img_round.png">
+          <img alt="image" class="fdb-icon" src="../imgs/img_round.svg">
           <h1>Design Blocks</h1>
           <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
         </div>
@@ -563,7 +563,7 @@ <h1>Froala Design Blocks</h1>
     </div>
   </section>
 
-  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_0.jpg);">
+  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_0.svg);">
     <div class="container">
       <div class="row text-left">
         <div class="col-12 col-md-8 col-lg-6">
@@ -577,7 +577,7 @@ <h2><strong>Design Blocks</strong></h2>
     </div>
   </section>
 
-  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_3.jpg);">
+  <section class="fdb-block pb-0" style="background-image: url(../imgs/bg_3.svg);">
     <div class="container">
       <div class="row text-left justify-content-end">
         <div class="col-12 col-md-6 col-xl-4">
@@ -596,7 +596,7 @@ <h2><strong>Design Blocks</strong></h2>
     <div class="container">
       <div class="row text-left align-items-center">
         <div class="col-10 col-sm-6 m-auto m-lg-0 col-lg-4">
-          <img alt="image" class="img-fluid" src="../imgs/img_square_1.jpg">
+          <img alt="image" class="img-fluid" src="../imgs/img_square_1.svg">
         </div>
 
         <div class="col-12 col-lg-8 pt-4 pt-lg-0">