Improve 'Developer Guides' page

- Split page vertically and add new section: 'External resources'
- Add description for each resource
- Add pics to suggest where the content is located (web page, github, internal doc)

_i18n/en.yml

@@ -453,10 +453,19 @@ about:
 
 
 developer-guides:
-  outdated: "Please note: the guides below have been recently refreshed and are maintained almost up-to-date by the community. However, methods are often added / removed / updated and may not be accurately described here."
+  head: Collection of guides, documentation and useful resources for developers (in English).
+  outdated: "Methods are often added / removed / updated and may not be accurately described."
   rpc: RPC Documentation
-  daemonrpc: Daemon RPC Documentation
-  walletrpc: Wallet RPC Documentation
+  daemonrpc: Daemon RPC
+  daemonrpc_descr: RPC calls for the daemon. Including input, outputs and examples.
+  walletrpc: Wallet RPC
+  walletrpc_descr: monero-wallet-rpc calls. Including input, outputs and examples.
+  external: External resources
+  external_head: Useful docs and resources maintained by community members.
+  monerodocs: Comprehensive resource which aims to organize the technical knowledge about Monero. Some sections might be outdated.
+  moneroexamples: Rich list of examples and docs related to Monero development.
+  moneroecosystem: Community of Monero developers. Contains libraries and resources and guides of some Monero Workgroups, like the Localization Workgroup and the Outreach Workgroup.
+  monerose: One of the most complete resources for both users and developers.
 
 user-guides:
   general: General

css/custom.css

@@ -2963,6 +2963,30 @@ footer {
     margin-top: 0;
 }
 
+.guides span {
+  height: 2rem;
+  width: 2rem;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.guides span.icon-github {
+  background-image: url(../img/monero-spritesheet.png);
+  background-position: 0 -240px;
+  float: left;
+  margin-right: 0.5rem;
+}
+
+.guides span.icon-page:before {
+  content: "\01F4C4";
+  float: left;
+}
+
+.guides span.icon-globe:before {
+  content: "\01F310";
+  float: left;
+}
+
 /******************************DOWNLOADS STYLING***********************/
 
 .downloads h2.center {

resources/developer-guides/index.md

@@ -7,13 +7,42 @@ permalink: /resources/developer-guides/index.html
 {% t global.lang_tag %}
 <div class="guides">
     <div class="center-xs container description">
-        <p class="text-center">{% t developer-guides.outdated %}</p>
+        <p class="text-center">{% t developer-guides.head %}</p>
     </div>
     <section class="container full">
-        <div class="info-block">
-            <h2>{% t developer-guides.rpc %}</h2>
-            <p><a href="daemon-rpc.html">{% t developer-guides.daemonrpc %}</a></p>
-            <p><a href="wallet-rpc.html">{% t developer-guides.walletrpc %}</a></p>
+        <div class="row">
+            <div class="left half no-pad-sm col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="info-block">
+                    <div class="row center-xs">
+                        <div class="col">
+                            <h2>{% t developer-guides.rpc %}</h2>
+                        </div>
+                    </div>
+                    <p><i>{% t developer-guides.outdated %}</i></p>
+                    <h3><span class="icon-page"></span><a href="daemon-rpc.html">{% t developer-guides.daemonrpc %}</a></h3>
+                        <p>{% t developer-guides.daemonrpc_descr %}</p>
+                    <h3><span class="icon-page"></span><a href="wallet-rpc.html">{% t developer-guides.walletrpc %}</a></h3>
+                        <p>{% t developer-guides.walletrpc_descr %}</p>
+                </div>
+            </div>
+            <div class="left half no-pad-sm col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="info-block">
+                    <div class="row center-xs">
+                        <div class="col">
+                            <h2>{% t developer-guides.external %}</h2>
+                        </div>
+                    </div>
+                    <p><i>{% t developer-guides.external_head %}</i></p>
+                    <h3><span class="icon-globe"></span><a href="https://monerodocs.org/">Monerodocs.org</a></h3>
+                        <p>{% t developer-guides.monerodocs %}</p>
+                    <h3><a href="https://github.com/moneroexamples"><span class="icon-github"></span>Moneroexamples</a></h3>
+                        <p>{% t developer-guides.moneroexamples %}</p>
+                    <h3><a href="https://github.com/monero-ecosystem"><span class="icon-github"></span>Monero Ecosystem project</a></h3>
+                        <p>{% t developer-guides.moneroecosystem %}</p>
+                    <h3><span class="icon-globe"></span><a href="https://monero.stackexchange.com">Monero StackExchange</a></h3>
+                        <p>{% t developer-guides.monerose %}</p>
+                </div>
+            </div>
         </div>
     </section>
 </div>