Refactor styles

Author: sdelquin

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

@@ -1,5 +1,3 @@
 @import 'apps/commons/static/commons/css/base';
 
-@import './about-us';
 @import './allies';
-@import './faq';

apps/about/static/about/css/faq.scss

@@ -7,21 +7,20 @@
 {% block body_class %}faq-index{% endblock %}
 
 {% block content %}
-<h1 class="title">FAQ</h1>
-<div class="intro">
-  <p>Bienvenido a nuestra sección de respuestas a preguntas frecuentes</p>
-</div>
 
-{% for faq in faqs %}
-    <article class="anchor" id="{{ faq.question|slugify }}">
-        <div class="message-header dyn-anchor-heading">
-            {{ faq.question }}
-            <a class="dyn-anchor-link" href="#{{ faq.question|slugify }}"><i class="fas fa-link"></i></a>
-        </div>
-        <div class="faq-answer">
-            <p>{{ faq.answer|as_markdown }}</p>
-        </div>
-    </article>
-{% endfor %}
+<div class="content box">
+    <h1 class="title">FAQ</h1>
+    {% for faq in faqs %}
+        <article class="anchor" id="{{ faq.question|slugify }}">
+            <div class="message-header dyn-anchor-heading">
+                {{ faq.question }}
+                <a class="dyn-anchor-link" href="#{{ faq.question|slugify }}"><i class="fas fa-link"></i></a>
+            </div>
+            <div class="message-body">
+                {{ faq.answer|as_markdown }}
+            </div>
+        </article>
+    {% endfor %}
+</div>
 
 {% endblock content %}

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

@@ -14,8 +14,7 @@
   <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" id="intro">
-  <a id="intro"></a>
+<article class="anchor" id="intro">
   <div class="message-header dyn-anchor-heading">
     Introducción 
     <a class="dyn-anchor-link" href="#intro"><i class="fas fa-link"></i></a>
@@ -31,8 +30,7 @@
   </div>
 </article>
 
-<article class="message" id="whypython">
-  <a id="whypython"></a>
+<article class="anchor" id="whypython">
   <div class="message-header dyn-anchor-heading">
     ¿Por qué Python?
     <a class="dyn-anchor-link" href="#whypython"><i class="fas fa-link"></i></a>
@@ -42,8 +40,7 @@
   </div>
 </article>
 
-<article class="message" id="fiscal">
-  <a id="fiscal"></a>
+<article class="anchor" id="fiscal">
   <div class="message-header dyn-anchor-heading">
     Datos fiscales
     <a class="dyn-anchor-link" href="#fiscal"><i class="fas fa-link"></i></a>
@@ -63,8 +60,7 @@
   </div>
 </article>
 
-<article class="message" id="board">
-  <a id="board"></a>
+<article class="anchor" id="board">
   <div class="message-header dyn-anchor-heading">
     Junta directiva
     <a class="dyn-anchor-link" href="#board"><i class="fas fa-link"></i></a>
@@ -82,8 +78,7 @@
   </div>
 </article>
 
-<article class="message" id="docs">
-  <a id="docs"></a>
+<article class="anchor" id="docs">
   <div class="message-header dyn-anchor-heading">
     Documentación
     <a class="dyn-anchor-link" href="#docs"><i class="fas fa-link"></i></a>

apps/about/templates/about/faq_list.html

@@ -40,7 +40,7 @@ body {
     }
   }
 
-  @include from($desktop){
+  @include from($desktop) {
     padding: 2rem 0rem 5rem 0rem;
   }
 
@@ -53,7 +53,6 @@ body {
   }
 }
 
- 
 .footer-page {
   background-color: $footer-bg;
   position: relative;
@@ -71,14 +70,12 @@ body {
   .footer-column {
     color: #ebebeb;
     padding-top: 2rem;
-  
   }
 
   h1,
   h2 {
     color: whitesmoke;
   }
-
 }
 
 /* Error class for Django Forms https://bit.ly/3vidyK2 */
@@ -96,7 +93,6 @@ body {
   width: 100%;
   z-index: 1;
 
-
   & .notification {
     width: $notification-width;
     margin-left: auto;
@@ -106,7 +102,7 @@ body {
   }
 }
 .message {
-  scroll-margin-top:  $header-height + 1rem;
+  scroll-margin-top: $header-height + 1rem;
 }
 
 .container {

apps/about/templates/about/index.html

@@ -13,6 +13,13 @@
     }
   }
 }
+
 .anchor {
-  scroll-margin-top:  $header-height + 1rem;
+  scroll-margin-top: $header-height + 1rem;
+}
+
+.message-header {
+  .dyn-anchor-link i:hover {
+    color: tomato;
+  }
 }

apps/commons/static/commons/css/base.scss

@@ -20,7 +20,6 @@ hr {
   }
 }
 
-
 .message.is-info .message-body {
   border-color: #c8dfec;
 }
@@ -29,31 +28,30 @@ hr {
   background-color: #f3f3f7;
 }
 
-.collapsable--close{
+.collapsable--close {
   display: none;
 }
 
-.nav-menu{
- display:flex;
+.nav-menu {
+  display: flex;
   justify-content: center;
-  align-items: center; 
-} 
+  align-items: center;
+}
 
-.navbar-dropdown{
+.navbar-dropdown {
   background-color: $header-bg;
 }
 
-.navbar-burger{
+.navbar-burger {
   color: $header-fg;
 }
 
 .navbar {
-  
   .navbar-brand {
     background: $header-bg;
     .navbar-item {
       padding: 0.35rem 1rem;
-      
+
       .logo {
         margin-top: 2px; // offset logo
         max-height: $header-height;
@@ -113,3 +111,15 @@ hr {
   }
 }
 
+.message-body {
+  p {
+    text-align: justify;
+  }
+  p:not(:last-child) {
+    padding-bottom: 0.5rem;
+  }
+}
+
+article {
+  margin-bottom: 1rem;
+}

apps/commons/static/commons/css/dyn-anchors.scss

@@ -19,7 +19,7 @@ <h1 class="title">Ofertas de empleo</h1>
     </div>
   </div>
   {% for job in jobs %}
-  <div class="card" id="job{{ job.id }}">
+  <div class="card anchor" id="job{{ job.id }}">
     <div class="card-header job-title">
       <a href="#job{{ job.id }}" class="subtitle card-header-title is-centered has-text-white">
         {{ job }} ({{ job.created|date:"d/m/Y" }})