From 9545fc7363089867636d1f2ff3aab135f2132491 Mon Sep 17 00:00:00 2001
From: dag7dev <dag7@protonmail.com>
Date: Sun, 5 Sep 2021 01:24:07 +0200
Subject: [PATCH] better layout we finally use a flexible space, unlike using
 table

---
 assets/scss/icon.scss              |  7 -----
 assets/scss/socialicons.scss       | 27 +++++++++++++++++
 layouts/partials/sidebar/left.html | 48 ++++++++++++++----------------
 3 files changed, 49 insertions(+), 33 deletions(-)
 delete mode 100644 assets/scss/icon.scss
 create mode 100644 assets/scss/socialicons.scss

diff --git a/assets/scss/icon.scss b/assets/scss/icon.scss
deleted file mode 100644
index 05bad67..0000000
--- a/assets/scss/icon.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.inline-svg {
-    display: inline-block;
-    height: 40px;
-    width: 40px;
-    top: 0.15rem;
-    position: relative;
-}
diff --git a/assets/scss/socialicons.scss b/assets/scss/socialicons.scss
new file mode 100644
index 0000000..a17ea5d
--- /dev/null
+++ b/assets/scss/socialicons.scss
@@ -0,0 +1,27 @@
+.inline-svg {
+    display: inline-block;
+    height: 40px;
+    width: 40px;
+    top: 0.15rem;
+    position: relative;
+}
+
+.social-icons {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row
+}
+
+@media screen {
+    .social-icons>* {
+        flex: 0 0 25%;
+        padding-left: 10px;
+    }
+}
+
+@media (max-width:960px) {
+    .social-icons>* {
+        flex: 0 0 5%;
+        padding-left: 10px;
+    }
+}
diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html
index 9a0f39a..4ba24b9 100644
--- a/layouts/partials/sidebar/left.html
+++ b/layouts/partials/sidebar/left.html
@@ -34,35 +34,31 @@
 
         {{ if (.Site.Params.socialmenu.enable) }}
             <div class="social-icons">
-                <table>
-                    <tr>
-                        {{ if (.Site.Params.socialmenu.email) }}
-                            <td><a href="mailto:{{.Site.Params.socialmenu.email}}"><span class="inline-svg" >{{ partial "fontawesome.html" "envelope" }}</span></a></td>
-                        {{ end }}
+                {{ if (.Site.Params.socialmenu.email) }}
+                    <div><a href="mailto:{{.Site.Params.socialmenu.email}}"><span class="inline-svg" >{{ partial "fontawesome.html" "envelope" }}</span></a></div>
+                {{ end }}
 
-                        {{ if (.Site.Params.socialmenu.github) }}
-                            <td><a href="https://github.com/{{.Site.Params.socialmenu.github}}"><span class="inline-svg" >{{ partial "fontawesome.html" "github" }}</span></a></td>
-                        {{ end }}
-                        
-                        {{ if (.Site.Params.socialmenu.instagram) }}
-                            <td><a href="https://instagram.com/{{.Site.Params.socialmenu.instagram}}"><span class="inline-svg" >{{ partial "fontawesome.html" "instagram" }}</span></a></td>
-                        {{ end }}
-                        
-                        {{ if (.Site.Params.socialmenu.facebook) }}
-                            <td><a href="https://facebook.com/{{.Site.Params.socialmenu.facebook}}"><span class="inline-svg" >{{ partial "fontawesome.html" "facebook-square" }}</span></a></td>
-                        {{ end }}
+                {{ if (.Site.Params.socialmenu.github) }}
+                    <div><a href="https://github.com/{{.Site.Params.socialmenu.github}}"><span class="inline-svg" >{{ partial "fontawesome.html" "github" }}</span></a></div>
+                {{ end }}
+                
+                {{ if (.Site.Params.socialmenu.instagram) }}
+                    <div><a href="https://instagram.com/{{.Site.Params.socialmenu.instagram}}"><span class="inline-svg" >{{ partial "fontawesome.html" "instagram" }}</span></a></div>
+                {{ end }}
+                
+                {{ if (.Site.Params.socialmenu.facebook) }}
+                    <div><a href="https://facebook.com/{{.Site.Params.socialmenu.facebook}}"><span class="inline-svg" >{{ partial "fontawesome.html" "facebook-square" }}</span></a></div>
+                {{ end }}
 
-                        {{ if (.Site.Params.socialmenu.linkedin) }}
-                            <td><a href="https://linkedin.com/in/{{.Site.Params.socialmenu.linkedin}}"><span class="inline-svg" >{{ partial "fontawesome.html" "linkedin" }}</span></a></td>
-                        {{ end }}
-                        
-                        {{ if (.Site.Params.socialmenu.twitter) }}
-                            <td><a href="https://twitter.com/{{.Site.Params.socialmenu.twitter}}"><span class="inline-svg" >{{ partial "fontawesome.html" "twitter" }}</span></a></td>
-                        {{ end }}
-                    </tr> 
-                </table>
+                {{ if (.Site.Params.socialmenu.linkedin) }}
+                    <div><a href="https://facebook.com/{{.Site.Params.socialmenu.linkedin}}"><span class="inline-svg" >{{ partial "fontawesome.html" "linkedin" }}</span></a></div>
+                {{ end }}
+                
+                {{ if (.Site.Params.socialmenu.twitter) }}
+                    <div><a href="https://twitter.com/{{.Site.Params.socialmenu.twitter}}"><span class="inline-svg" >{{ partial "fontawesome.html" "twitter" }}</span></a></div>
+                {{ end }}
             </div>
-        {{ end }}
+        {{ end }}    
 
     </header>