From a22e9dfe00ed260f934243a602d7451ff8bae944 Mon Sep 17 00:00:00 2001
From: alexanderdavide <alexeble1998@gmail.com>
Date: Sun, 06 Feb 2022 17:57:29 +0000
Subject: [PATCH] refactor: nav, languageswitch
---
assets/css/style.rtl.css | 4
assets/scss/main.scss | 1
assets/scss/modules/_config.scss | 5 +
assets/scss/partials/layout/_nav.scss | 13 ++-
layouts/partials/navbar.html | 75 ++++++++++--------
assets/scss/partials/components/_languageswitch.scss | 134 ++++++++++++--------------------
6 files changed, 108 insertions(+), 124 deletions(-)
diff --git a/assets/css/style.rtl.css b/assets/css/style.rtl.css
index 9ab54b2..dca66a2 100644
--- a/assets/css/style.rtl.css
+++ b/assets/css/style.rtl.css
@@ -105,7 +105,7 @@
left: 0;
right: auto;
}
- header .nav__list li {
+ /* header .nav__list li {
padding-left: 20px;
}
header .nav__list li:not(:last-of-type) {
@@ -113,7 +113,7 @@
}
.triangle {
display: inline-block;
- }
+ } */
}
@media (min-width: 1921px) {
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 79eaec8..fd0d3cf 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,4 +1,5 @@
@import './modules/variables';
+@import './modules/config';
@import './partials/hugo';
@import './partials/base';
@import './partials/layout/html';
diff --git a/assets/scss/modules/_config.scss b/assets/scss/modules/_config.scss
new file mode 100644
index 0000000..25af85a
--- /dev/null
+++ b/assets/scss/modules/_config.scss
@@ -0,0 +1,5 @@
+@mixin desktop {
+ @media screen and (min-width: 961px) {
+ @content;
+ }
+}
diff --git a/assets/scss/partials/components/_languageswitch.scss b/assets/scss/partials/components/_languageswitch.scss
index 414e62a..71f6fd5 100644
--- a/assets/scss/partials/components/_languageswitch.scss
+++ b/assets/scss/partials/components/_languageswitch.scss
@@ -1,103 +1,71 @@
.languageswitch {
- margin: 0;
- padding: 0;
- list-style: none;
position: relative;
- display: inline-block;
- padding-right: 20px;
+
+ &__label {
+ cursor: pointer;
+ white-space: nowrap;
+ }
&__list {
+ display: none;
list-style: none;
- label {
- cursor: pointer;
+ padding: 0;
+ position: relative;
+
+ @include desktop {
+ background: $accent;
+ border-color: $primary;
+ border-radius: 5px;
+ box-shadow: $shadow;
+ position: absolute;
+ top: 40px;
}
&-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;
- }
- }
- }
- }
-
- &__picker:checked {
- ~ .dropdown__list {
- display: block;
- }
-
- ~ .triangle {
- position: absolute;
- top: 15px;
- right: -10px;
- z-index: 10;
- height: 14px;
- overflow: hidden;
- width: 30px;
background: transparent;
+ color: $primary;
+ display: block;
+ line-height: 1;
+ padding: 0.5rem 0.75rem 0.5rem 0;
+ text-align: center;
+ white-space: nowrap;
- &:after {
- content: '';
- z-index: 20;
- width: 15px;
- transform: rotate(45deg) translateY(0px) translatex(10px);
- height: 15px;
- background: $accent;
- border-radius: 2px 0px 0px 0px;
- border-color: $primary;
- box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
- float: left;
- display: block;
+ @include desktop {
+ padding: 1.2rem;
}
}
}
- @media screen and (max-width: 960px) {
- .languageswitch {
- &__list {
- padding-right: inherit;
+ &__triangle {
+ display: none;
- label {
- cursor: pointer;
+ &::before {
+ content: '';
+ background: $accent;
+ box-shadow: $shadow;
+ border-color: $primary;
+ border-radius: 2px 0px 0px 0px;
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
+ height: 14px;
+ bottom: 0px;
+ left: calc(50% / 2);
+ overflow: hidden;
+ position: absolute;
+ transform: rotate(45deg) translateY(0px) translatex(10px);
+ width: 14px;
+ }
+ }
+
+ &__picker {
+ &:checked {
+ ~ .languageswitch {
+ &__list {
+ display: block;
}
- .triangle {
- display: none;
- }
-
- &-item {
- .dropdown__list {
- right: inherit;
- position: relative;
- top: inherit;
- padding-right: 0px;
- background: none;
- border-color: inherit;
- box-shadow: none;
- &-item {
- text-align: center;
- padding: 0.5rem 0.75rem;
- padding-left: initial;
- }
+ &__triangle {
+ @include desktop {
+ display: block;
}
}
}
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
index 1f425da..4782ce7 100644
--- a/assets/scss/partials/layout/_nav.scss
+++ b/assets/scss/partials/layout/_nav.scss
@@ -5,7 +5,6 @@
&__list {
margin: 0;
list-style: none;
- padding: 20px 30px;
background-color: $primary-lighter;
width: 100%;
@@ -14,14 +13,19 @@
padding: 0.5rem 0.75rem;
text-transform: uppercase;
text-align: center;
- font-size: 1.3em;
+ }
+
+ @include desktop {
+ padding: 20px 30px;
}
}
&__link {
&--active {
- border-bottom: 1px solid $primary;
- padding-bottom: 22px;
+ @include desktop {
+ border-bottom: 1px solid $primary;
+ padding-bottom: 22px;
+ }
}
}
@@ -40,6 +44,7 @@
&__list {
display: flex;
background-color: $accent;
+
&-item {
&:not(:last-child) {
padding-right: 20px;
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index d45b176..1ae1dca 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -32,50 +32,55 @@
>{{ .Name }}</a
>
</li>
+
{{ end }}
- </ul>
- <ul class="nav__list nav__list--end">
- {{ if and .IsTranslated .Site.IsMultiLingual }}
- <li class="languageswitch">
- <ul class="languageswitch__list" aria-label="Language switcher">
- <li class="languageswitch__list-item">
- <input class="languageswitch__picker" type="checkbox" id="languagepicker" aria-label="switch language" hidden />
- <label for="languagepicker">{{ .Site.Language.LanguageName }}</label>
- <label for="languagepicker"><i class="fa fa-angle-down" aria-hidden="true"></i></label>
- <div class="triangle"></div>
+ </ul>
+ <ul class="nav__list nav__list--end">
+ {{ if and .IsTranslated .Site.IsMultiLingual }}
+ <li class="nav__list-item">
+ <div class="languageswitch">
+ <input
+ class="languageswitch__picker"
+ type="checkbox"
+ id="languagepicker"
+ aria-label="switch language"
+ hidden
+ />
+ <label class="languageswitch__label" for="languagepicker"
+ >{{ .Site.Language.LanguageName }} <i class="fa fa-angle-down" aria-hidden="true"></i
+ ></label>
+ <div class="languageswitch__triangle"></div>
+ <ul class="languageswitch__list">
+ {{ range $.Translations }}
+ <li class="languageswitch__list-item">
+ <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
+ ><span
+ {{ if eq . $.Site.Language }}
+ class="active"
- <ul class="dropdown__list">
- {{ range $.Translations }}
+ {{ end }}
+ aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}"
+ >{{ .Language.LanguageName }}</span
+ >
+ </a>
+ </li>
- <li class="dropdown__list-item">
- <a href="{{ .RelPermalink }}" title="{{ .Language.LanguageName }}"
- ><span
- {{ if eq . $.Site.Language }}
- class="active"
-
- {{ end }}
- aria-label="{{ i18n "ariaLanguage" }}{{ .Language.LanguageName }}"
- >{{ .Language.LanguageName }}</span
- ></a
- >
- </li>
-
- {{ end }}
- </ul>
- </li>
+ {{ end }}
</ul>
- </li>
+ </div>
+ </li>
- {{ end }}
- {{ if not .Site.Params.disableThemeSwitcher }}
- <li class="themeswitch">
+ {{ end }}
+ {{ if not .Site.Params.disableThemeSwitcher }}
+ <li class="nav__list-item">
+ <div class="themeswitch">
<a title="Switch Theme">
<i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
</a>
- </li>
+ </div>
+ </li>
- {{ end }}
- </ul>
+ {{ end }}
</ul>
</nav>
</div>
--
Gitblit v1.10.0