fix: switch hover to click (CSS only)

Alexander Bilz

22.01.2021 ba127958a99bf5c32c4bd4a083317f46b628a625

fix: switch hover to click (CSS only)

 assets/css/style.css

@@ -285,14 +285,12 @@
  cursor: pointer;
  padding-bottom: 10px;
}
.sl-nav li ul {

.sl-nav li .dropdown {
  display: none;
}
.sl-nav li:hover ul {
  position: absolute;
  top: 29px;
  right: -15px;
  display: block;
  background: #fff;
  padding-left: 0;
  padding-top: 0px;
@@ -300,6 +298,32 @@
  border-radius: 5px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

#languagepicker:checked ~ .dropdown {
  display: block;
}

.sl-nav li .dropdown li {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 15px 15px;
  padding-bottom: 0;
  z-index: 2;
  font-size: 15px;
  color: #3c3c3c;
  display: block;
}
.sl-nav li .dropdown li:last-of-type {
  padding-bottom: 15px;
}
.sl-nav li .dropdown li span {
  padding-left: 5px;
}
.sl-nav li .dropdown li span.active {
  color: var(--tag-color);
}

.sl-nav li:hover .triangle {
  position: absolute;
  top: 15px;
@@ -321,28 +345,6 @@
  border-radius: 2px 0px 0px 0px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
.sl-nav li ul li {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 15px 15px;
  padding-bottom: 0;
  z-index: 2;
  font-size: 15px;
  color: #3c3c3c;
  display: block;
}
.sl-nav li ul li:last-of-type {
  padding-bottom: 15px;
}
.sl-nav li ul li span {
  padding-left: 5px;
}
.sl-nav li ul li span:hover,
.sl-nav li ul li span.active {
  color: var(--tag-color);
}


.sidebar {
  -webkit-background-size: cover;
@@ -415,8 +417,6 @@
  color: #2660ab;
}



.post {
  background-color: var(--bg-color);
  margin: 30px;

 layouts/partials/navbar.html

@@ -38,10 +38,12 @@
        <li>
          {{ if and .Site.IsMultiLingual }}
            <ul class="sl-nav" aria-label="Language switcher">
             
              <li>
                <b>{{ .Site.Language.LanguageName }}</b> <i class="fa fa-angle-down" aria-hidden="true"></i>
                <div class="triangle"></div>
                <ul>
                <input type="checkbox" id="languagepicker" aria-label="switch language" hidden></input>
                <label for="languagepicker"><strong>{{ .Site.Language.LanguageName }}</strong></label> <i class="fa fa-angle-down" aria-hidden="true"></i>

                <ul class="dropdown">
                  {{ range $.Translations }}

                    <li>