LIL-512 teacher block styling

project/templates/blocks/teachers.html

@@ -17,15 +17,45 @@
         </div>
         <div class="teachers__wrap">
           <div class="teachers__title">{{ teacher.get_full_name }}
-            {% if teacher.instagram_hashtag %}
+            {% if teacher.instagram_hashtag %}, <a href='https://www.instagram.com/explore/tags/{{ teacher.instagram_hashtag }}/' target="_blank">
-            , <a href='https://www.instagram.com/explore/tags/{{ teacher.instagram_hashtag }}/' target="_blank">
                 #{{ teacher.instagram_hashtag }}
               </a>
             {% endif %}
           </div>
-          {% if teacher.instagram %}
+          <div class="teachers__social">
-          <div class="teachers__name">{{ teacher.instagram }}</div>
+            {% if teacher.facebook or True %}
-          {% endif %} {% if teacher.about %}
+            <a class="social__item" href="{{ teacher.facebook }}" target="_blank">
+              <svg class="icon icon-share-facebook">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-facebook"></use>
+              </svg>
+            </a>
+            {% endif %} {% if teacher.instagram or True %}
+            <a class="social__item" href="{{ teacher.instagram }}" target="_blank">
+              <svg class="icon icon-share-instagram">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-instagram"></use>
+              </svg>
+            </a>
+            {% endif %} {% if teacher.twitter or True %}
+            <a class="social__item" href="{{ teacher.twitter }}" target="_blank">
+              <svg class="icon icon-share-twitter">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-twitter"></use>
+              </svg>
+            </a>
+            {% endif %} {% if teacher.google %}
+            <a class="social__item" href="{{ teacher.google }}" target="_blank">
+              <svg class="icon icon-share-google">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-google"></use>
+              </svg>
+            </a>
+            {% endif %} {% if teacher.pinterest %}
+            <a class="social__item" href="{{ teacher.pinterest }}" target="_blank">
+              <svg class="icon icon-share-pinterest">
+                <use xlink:href="{% static 'img/sprite.svg' %}#icon-share-pinterest"></use>
+              </svg>
+            </a>
+            {% endif %}
+          </div>
+          {% if teacher.about %}
           <div class="teachers__content">
             {{ teacher.about }}
           </div>

project/templates/lilcity/index.html

@@ -30,7 +30,7 @@
     {% comment %} <meta property="fb:admins" content="Facebook numeric ID"> {% endcomment %}
 
     <meta name="csrf-token" content="{{ csrf_token }}">
-    <link rel="stylesheet" media="all" href={% static "app.css" %}?5>
+    <link rel="stylesheet" media="all" href={% static "app.css" %}?6>
     <link rel="shortcut icon" type="image/png" href="{% static 'img/favicon.png' %}"/>
     <script>
         var viewportmeta = document.querySelector('meta[name="viewport"]');

web/src/sass/_common.sass

@@ -1519,8 +1519,10 @@ a.grey-link
     +t
       font-size: 12px
       letter-spacing: 2px
-  &__name
+  &__social
-    margin-bottom: 20px
+    .social__item
+      margin-right: 3px
+      font-size: 25px
     +fb
   &__content
     font-size: 16px