improve libossia download page

Author: jcelerier

_pages/download-libossia.markdown

@@ -17,9 +17,10 @@ The license for the library itself is LGPLv3.
 
 
 <div>
-  <h2 class="feature-title">Native C++ library</h2>
+  <h2 class="binding-title"><img src="/assets/logo/cpp.png" height="60" width="auto"/>Native C++ library</h2>
   <div class="features-list">
-    This is the main C++ library. It is useful if you plan to integrate libossia to a C++ software.
+    This is the main C++ library on which everything is built upon. It is useful if you plan to integrate libossia to a C++ software or write a new
+    OSCQuery-enabled software for instance.
     Releases are built for Windows (with Visual Studio 2019 16.6), macOS (targeting 10.14+ with Intel CPUs), and Ubuntu Linux (with gcc-9).
     The library is also known to build under iOS, Android, WASM, as well as ARM Linux.
     </div><br/>
@@ -32,9 +33,9 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">C binding</h2>
+  <h2 class="binding-title"><img src="/assets/logo/c.png" height="60" width="auto"/>C binding</h2>
   <div class="features-list">
-    libossia provides a C header which wraps the most important functionality.
+    libossia provides a clean C89 header which wraps the most important functionality.
   </div><br/>
   <div>  
     <ul>
@@ -46,7 +47,7 @@ The license for the library itself is LGPLv3.
   </div>
 
 <!--
-  <h2 class="feature-title">Unreal Engine integration</h2>
+  <h2 class="binding-title">Unreal Engine integration</h2>
   <div class="features-list">
     libossia provides a C header which wraps the most important functionality. 
   </div><br/>
@@ -59,7 +60,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 -->
-  <h2 class="feature-title">Max/MSP externals</h2>
+  <h2 class="binding-title"><img src="/assets/logo/max.jpg" height="70" width="auto"/>Max/MSP</h2>
   <div class="features-list">
     libossia is available as a set of Max objects.
     </div><br/>
@@ -71,7 +72,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">PureData externals</h2>
+  <h2 class="binding-title"><img src="/assets/logo/pd.png" height="60" width="auto" />PureData</h2>
   <div class="features-list">
     libossia is available as a set of PureData objects. It is also supported for PurrData.
     </div><br/>
@@ -83,7 +84,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">C# & Unity3D bindings</h2>
+  <h2 class="binding-title"><img src="/assets/logo/unity.png" height="60" width="auto"/>C#, Unity3D</h2>
   <div class="features-list">
     libossia provides a C# binding. An additional Unity3D GameObject integration layer is available.
     The library ships as an asset that can be copied into your project. 
@@ -96,7 +97,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">Java, Processing, OpenRNDR bindings</h2>
+  <h2 class="binding-title"><img src="/assets/logo/processing.jpg" height="60" width="auto"/>Java, Kotlin, Processing, OpenRNDR</h2>
   <div class="features-list">
     libossia provides JVM bindings, which allows it to be used with Processing, etc.  
     </div><br/>
@@ -108,7 +109,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">OpenFrameworks addon</h2>
+  <h2 class="binding-title"><img src="/assets/logo/of.png" height="40" width="auto"/>OpenFrameworks</h2>
   <div class="features-list">
     libossia is available as an OpenFrameworks extension. 
     </div><br/>
@@ -120,7 +121,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">SuperCollider integration</h2>
+  <h2 class="binding-title"><img src="/assets/logo/supercollider-logo.png" height="60" width="auto"/>SuperCollider</h2>
   <div class="features-list">
     libossia is available for SuperCollider. 
     </div><br/>
@@ -132,7 +133,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">Qt / QML integration</h2>
+  <h2 class="binding-title"><img src="/assets/logo/qt-logo.png" height="60" width="auto"/>Qt / QML</h2>
   <div class="features-list">
     libossia integrates with the QML markup language, to easily build performant user interfaces.
     </div><br/>
@@ -144,7 +145,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">Python integration</h2>
+  <h2 class="binding-title"><img src="/assets/logo/python-logo.png" height="60" width="auto"/>Python</h2>
   <div class="features-list">
     libossia is useable from Python. 
     </div><br/>
@@ -156,7 +157,7 @@ The license for the library itself is LGPLv3.
     </ul>
   </div>
 
-  <h2 class="feature-title">Faust architecture</h2>
+  <h2 class="binding-title"><img src="/assets/logo/faust.png" height="50" width="auto"/>Faust architecture</h2>
   <div class="features-list">
     libossia provides a Faust architecture file.  
     </div><br/>

_pages/libossia.markdown

@@ -21,9 +21,10 @@ libossia offers bindings and implementations for several environments such as:
     <a href="https://openframeworks.cc/" class="tooltip"><img src="/assets/logo/of.png" height="40" width="auto"/><span class="tooltiptext">openFrameworks</span></a>
     <a href="https://faust.grame.fr/" class="tooltip"><img src="/assets/logo/faust.png" height="50" width="auto"/><span class="tooltiptext">Faust</span></a>
     <a href="https://unity.com/" class="tooltip"><img src="/assets/logo/unity.png" height="60" width="auto"/><span class="tooltiptext">Unity</span></a>
+    <a href="https://processing.org/" class="tooltip"><img src="/assets/logo/processing.jpg" height="60" width="auto"/><span class="tooltiptext">Processing</span></a>
     <a href="https://www.unrealengine.com/" class="tooltip"><img src="/assets/logo/unreal_engine.png" width="80" height="auto"/><span class="tooltiptext">Unreal Engine</span></a>
     <a href="https://www.qt.io/" class="tooltip"><img src="/assets/logo/qt-logo.png" height="60" width="auto"/><span class="tooltiptext">Qt QML</span></a>
-   <a href="https://supercollider.github.io/" class="tooltip"><img src="/assets/logo/supercollider-logo.png" height="60" width="auto"/><span class="tooltiptext">SuperCollider</span></a>
+    <a href="https://supercollider.github.io/" class="tooltip"><img src="/assets/logo/supercollider-logo.png" height="60" width="auto"/><span class="tooltiptext">SuperCollider</span></a>
     <a href="https://www.python.org/"  class="tooltip"><img src="/assets/logo/python-logo.png" height="60" width="auto"/><span class="tooltiptext">Python</span></a>
 </div>
 

assets/logo/c.png

@@ -1112,6 +1112,33 @@ h2.feature-title:before {
     flex-wrap: wrap;
 }
 
+/* libossia bindings page */
+h2.binding-title{
+    position: relative;
+    z-index: 1;
+    overflow: hidden;
+    text-align: left;
+    margin-top: 2em;
+    margin-bottom: 0.5em;
+    font-weight: 500;
+}
+h2.binding-title img {
+    float: left;
+    margin-right: 3%;
+}
+
+h2.binding-title:after {
+    position: absolute;
+    top: 51%;
+    overflow: hidden;
+    width:100%;
+    height: 2px;
+    margin-left: 5%;
+    content: '\a0';
+    background-color: var(--pale-blue);
+}
+
+
 /* Index page section */
 #index {
     width: 100%;