duplicate platform icons in the header

(but not on mobile as there's not enough space)

diff --git a/panikweb_studioneau/static/css/style.scss b/panikweb_studioneau/static/css/style.scss
index 2b5671be8e17541bdced7cfbef27ef761e1ce02b..f8bb6caf04514b59a27bb05fe3e8ee289fad0f27 100644 (file)
--- a/panikweb_studioneau/static/css/style.scss
+++ b/panikweb_studioneau/static/css/style.scss
@@ -97,6 +97,14 @@ p {
        nav {
                display: flex;
                line-height: 60px;
+               ul.platforms {
+                       line-height: 32px;
+                       margin-top: 2px;
+                       margin-right: 10px;
+                       @media screen and (max-width: 600px) {
+                               display: none;
+                       }
+               }
                ul#nav-language {
                        display: flex;
                        li {
@@ -503,22 +511,6 @@ h1 + .tags {
                        list-style: none;
                        margin: 0;
                        padding: 0;
-                       &.platforms {
-                               text-align: right;
-                               li a {
-                                       display: inline-block;
-                                       text-align: center;
-                                       border: 1px solid black;
-                                       width: 2rem;
-                                       height: 2rem;
-                                       &::before {
-                                               line-height: 2rem;
-                                       }
-                               }
-                               li:last-child {
-                                       margin-right: 0;
-                               }
-                       }
                }
                @media screen and (max-width: #{$inner-width + 30px}) {
                        margin-top: 1em;
@@ -539,6 +531,23 @@ h1 + .tags {
        }
 }
 
+ul.platforms {
+       text-align: right;
+       li a {
+               display: inline-block;
+               text-align: center;
+               border: 1px solid black;
+               width: 2rem;
+               height: 2rem;
+               &::before {
+                       line-height: 2rem;
+               }
+       }
+       li:last-child {
+               margin-right: 0;
+       }
+}
+
 
 @keyframes live-pulse {
        0% {opacity: 1;}

diff --git a/panikweb_studioneau/templates/includes/metaNav.html b/panikweb_studioneau/templates/includes/metaNav.html
index fc840e018b00e119935618b3d182e61ab7e3eea0..a4f3a0594c522c0059add930ff6323f0c75b46ff 100644 (file)
--- a/panikweb_studioneau/templates/includes/metaNav.html
+++ b/panikweb_studioneau/templates/includes/metaNav.html
@@ -1,6 +1,12 @@
 {% load i18n %}
 <nav class="contextual-menu">
 
+  <ul class="platforms">
+    <li class="soundcloud"><a href="https://soundcloud.com/studioneau"><span>Soundcloud</span></a></li>
+    <li class="facebook"><a href="https://www.facebook.com/StudioNeau4700"><span>Facebook</span></a></li>
+    <li class="instagram"><a href="https://www.instagram.com/studio_neau_/"><span>Instagram</span></a></li>
+  </ul>
+
  <button id="opener" onclick="$(this).toggleClass('toggled'); $('#extra-menu').toggle()" aria-label="{% trans "Menu" %}">
    <span class="sr-only">{% trans "Open Menu" %}</span>
    <span class="icon-bar icon-bar-1"></span>