Add dynamic anchors to about us page

Author: sdelquin

apps/about/static/about/css/about-us.scss

@@ -0,0 +1,10 @@
+.about-index {
+  p {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .dyn-anchor-link i:hover {
+    color: tomato;
+  }
+}

apps/about/static/about/css/main.scss

@@ -1,15 +1,4 @@
 @import 'apps/commons/static/commons/css/base';
 
+@import './about-us';
 @import './allies';
-
-.about-index {
-  p {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .message a.headerlink {
-    color: cadetblue;
-    text-decoration: none;
-  }
-}

apps/about/templates/about/index.html

@@ -14,11 +14,11 @@
   <a href="{% url 'about:join' %}" class="link button is-link is-medium is-outlined">Forma parte de la asociación</a>
 </div>
 
-<article class="message">
+<article class="message" id="intro">
   <a id="intro"></a>
-  <div class="message-header">
-    Introducción
-    <a class="headerlink" href="#intro">¶</a>
+  <div class="message-header dyn-anchor-heading">
+    Introducción 
+    <a class="dyn-anchor-link" href="#intro"><i class="fas fa-link"></i></a>
   </div>
   <div class="message-body">
     <strong>{{ organization.name }}</strong> es una asociación sin ánimo de lucro cuyos objetivos, son, entre otros, promover el <strong>uso del lenguaje</strong> de programación Python, dar <strong>soporte</strong> a quienes deseen aprenderlo y promover la programación como una <strong>competencia educativa básica</strong>.</p>
@@ -31,22 +31,22 @@
   </div>
 </article>
 
-<article class="message">
+<article class="message" id="whypython">
   <a id="whypython"></a>
-  <div class="message-header">
+  <div class="message-header dyn-anchor-heading">
     ¿Por qué Python?
-    <a class="headerlink" href="#whypython">¶</a>
+    <a class="dyn-anchor-link" href="#whypython"><i class="fas fa-link"></i></a>
   </div>
   <div class="message-body">
     <p>Python es un lenguaje dinámico, de alto nivel y con una sintaxis clara. Es de propósito general lo que permite usarlo para cualquier tipo de programa o herramienta. Dispone de una inmensa cantidad de librerías, tanto internas como de terceras partes. Por si todo esto fuera poco, es software libre, multiplataforma (Unix, Windows u OS/X entre otras) y multiparadigma (orientación a objetos, funcional o imperativo). Python es utilizado hoy en día por empresas tan destacadas como Instagram, The New York Times, Google, Dropbox, NASA, Mercedes-Benz, Pinterest, National Geographic, The Washington Post, YouTube, Blender o Industrial Light & Magic.</p>
   </div>
 </article>
 
-<article class="message">
+<article class="message" id="fiscal">
   <a id="fiscal"></a>
-  <div class="message-header">
+  <div class="message-header dyn-anchor-heading">
     Datos fiscales
-    <a class="headerlink" href="#fiscal">¶</a>
+    <a class="dyn-anchor-link" href="#fiscal"><i class="fas fa-link"></i></a>
   </div>
   <div class="message-body">
     <p>
@@ -63,11 +63,11 @@
   </div>
 </article>
 
-<article class="message">
+<article class="message" id="board">
   <a id="board"></a>
-  <div class="message-header">
+  <div class="message-header dyn-anchor-heading">
     Junta directiva
-    <a class="headerlink" href="#board">¶</a>
+    <a class="dyn-anchor-link" href="#board"><i class="fas fa-link"></i></a>
   </div>
   <div class="message-body">
     <p>Actualmente la <strong>junta directiva</strong> de {{ organization.name }} está formada por:</p>
@@ -82,11 +82,11 @@
   </div>
 </article>
 
-<article class="message">
+<article class="message" id="docs">
   <a id="docs"></a>
-  <div class="message-header">
+  <div class="message-header dyn-anchor-heading">
     Documentación
-    <a class="headerlink" href="#docs">¶</a>
+    <a class="dyn-anchor-link" href="#docs"><i class="fas fa-link"></i></a>
   </div>
   <div class="content message-body">
     <ul>
@@ -100,11 +100,11 @@
   </div>
 </article>
 
-<article class="message">
+<article class="message" id="regulation">
   <a id="regulation"></a>
-  <div class="message-header">
+  <div class="message-header dyn-anchor-heading">
     Normativa de aplicación
-    <a class="headerlink" href="#regulation">¶</a>
+    <a class="dyn-anchor-link" href="#regulation"><i class="fas fa-link"></i></a>
   </div>
   <div class="content message-body">
     <ul>