From 2810499b57f4d2db357478c314d93953e4ff7d77 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Sat, 05 Feb 2022 13:31:36 +0000
Subject: [PATCH] refactor: language dropdown

---
 assets/scss/main.scss                                |    1 
 assets/css/style.css                                 |   98 +----------------------
 assets/scss/partials/components/_languageswitch.scss |   82 ++++++++++++++++++++
 3 files changed, 90 insertions(+), 91 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 700f26b..8fa7509 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -198,9 +198,11 @@
   margin: 0;
 } */
 
+/*
 main {
   width: var(--content-width);
 }
+*/
 /*
 .content {
   height: auto;
@@ -282,7 +284,6 @@
 
 /*
 Language Switch
-*/
 
 .sl-nav {
   margin: 0;
@@ -357,7 +358,7 @@
   float: left;
   display: block;
 }
-
+*/
 /*
 .sidebar {
   -webkit-background-size: cover;
@@ -659,6 +660,7 @@
   float: right;
 }
 */
+
 /*
 .footer {
   clear: both;
@@ -743,94 +745,6 @@
 }
 
 /* share */
-.share {
-  margin: 0px 30px;
-  display: inline-flex;
-}
-
-.evernote {
-  width: 32px;
-  height: 32px;
-  border-radius: 300px;
-  background-color: #3e3e3e;
-  margin-right: 5px;
-}
-
-.evernote a {
-  color: #fff;
-  padding: 11px;
-  font-size: 1.2rem;
-}
-
-.evernote a:hover {
-  color: #ed6243;
-  padding: 11px;
-}
-
-.weibo {
-  width: 32px;
-  height: 32px;
-  border-radius: 300px;
-  background-color: #ed6243;
-  margin-right: 5px;
-}
-
-.weibo a {
-  color: #fff;
-  padding: 9px;
-}
-
-.weibo a:hover {
-  color: #bd4226;
-}
-
-.twitter {
-  width: 32px;
-  height: 32px;
-  border-radius: 300px;
-  background-color: #59c0fd;
-  margin-right: 5px;
-}
-
-.twitter a {
-  color: #fff;
-  padding: 9px;
-}
-
-.twitter a:hover {
-  color: #4b9ece;
-}
-
-/* about */
-.about {
-  margin: 30px;
-}
-
-.about h3 {
-  font-size: 2.2rem;
-}
-
-/* links*/
-.links {
-  margin: 30px;
-}
-
-.links h3 {
-  font-size: 2.2rem;
-}
-
-.links a {
-  cursor: pointer;
-}
-
-/* Comments */
-.comment-count {
-  color: #666;
-}
-
-.tab-community {
-  color: #666;
-}
 
 .read_more {
   font-size: 1.4rem;
@@ -843,14 +757,16 @@
   float: left;
 }
 
-/* Facebook Comments */
+/*
 #fb_comments_container {
   margin: 30px;
 }
 
+
 .utterances {
   max-width: unset;
 }
+*/
 
 /* Buttons */
 a.btn {
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 1c13c97..fb6f9c9 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -16,5 +16,6 @@
 @import './partials/components/footer';
 @import './partials/components/pagination';
 @import './partials/components/comment';
+@import './partials/components/languageswitch';
 @import './partials/vendors/mediumzoom';
 @import './partials/vendors/contactform';
diff --git a/assets/scss/partials/components/_languageswitch.scss b/assets/scss/partials/components/_languageswitch.scss
new file mode 100644
index 0000000..008353f
--- /dev/null
+++ b/assets/scss/partials/components/_languageswitch.scss
@@ -0,0 +1,82 @@
+.languageswitch {
+
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: relative;
+    display: inline-block;
+    padding-right: 20px;
+    &__list {
+        list-style: none;
+        label {
+            cursor: pointer;
+        }
+
+        &-item {
+            .dropdown__list {
+                display: none;
+                position: absolute;
+                top: 29px;
+                right: -15px;
+                background: $accent;
+                border-color: $primary;
+                padding-left: 0;
+                padding-top: 0px;
+                z-index: 1;
+                border-radius: 5px;
+                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+
+                &-item {
+                    position: relative;
+                    text-align: left;
+                    background: transparent;
+                    padding: 12px;
+                    z-index: 2;
+                    color: $primary;
+                    display: block;
+                    white-space: nowrap;
+                  }
+
+              }
+
+            #languagepicker:checked ~ .dropdown {
+                display: block;
+              }
+        
+            #languagepicker:checked ~ .triangle {
+                position: absolute;
+                top: 15px;
+                right: -10px;
+                z-index: 10;
+                height: 14px;
+                overflow: hidden;
+                width: 30px;
+                background: transparent;
+              }
+              
+              #languagepicker:checked ~ .triangle:after {
+                content: '';
+                display: block;
+                z-index: 20;
+                width: 15px;
+                transform: rotate(45deg) translateY(0px) translatex(10px);
+                height: 15px;
+                background: $primary-light;
+                border-radius: 2px 0px 0px 0px;
+                border-color: $primary;
+                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+                float: left;
+                display: block;
+              } 
+        }
+    }  
+}
+
+
+  
+
+  
+
+  
+
+  

--
Gitblit v1.10.0