mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
🎨 Style: adjust some styles of mobile header
This commit is contained in:
Cell
@@ -82,7 +82,7 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
&.language,
|
||||
&.language-switch,
|
||||
&.theme-switch {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -221,7 +221,7 @@ header {
|
||||
display: block;
|
||||
@include transform(translateX(-0.5rem));
|
||||
}
|
||||
&.language:hover .sub-menu {
|
||||
&.language-switch:hover .sub-menu {
|
||||
@include transform(translateX(calc(1.75rem - 100%)));
|
||||
}
|
||||
}
|
||||
@@ -233,16 +233,12 @@ header {
|
||||
width: 0;
|
||||
margin: 0.125rem 0.25rem;
|
||||
padding: 0;
|
||||
border-left: 1px dashed lighten($global-font-secondary-color, 20%);
|
||||
border-left: 1px dashed lighten($global-font-secondary-color, 15%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-left-color: darken($global-font-secondary-color-dark, 20%);
|
||||
border-left-color: darken($global-font-secondary-color-dark, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&.language {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
@@ -369,6 +365,14 @@ header {
|
||||
box-sizing: border-box;
|
||||
padding: ($header-height - 2.5rem) / 2 1rem;
|
||||
line-height: 2.5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: $header-background-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
@@ -400,7 +404,7 @@ header {
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
&:hover {
|
||||
&:not(.menu-system):hover {
|
||||
background-color: lighten($global-font-secondary-color, 24%);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
@@ -425,29 +429,37 @@ header {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
&.theme-switch,
|
||||
&.language {
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
background-color: $header-background-color;
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
.menu-system {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
background-color: $header-background-color;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
background-color: $header-background-color-dark;
|
||||
}
|
||||
|
||||
.menu-system-item {
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
.language-switch {
|
||||
position: relative;
|
||||
|
||||
.language-select {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
bottom: 0;
|
||||
}
|
||||
&.theme-switch:has(+ .language) {
|
||||
bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.language-select {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
{{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}
|
||||
</li>
|
||||
{{- if .Site.IsMultiLingual -}}
|
||||
<li class="menu-item language">
|
||||
<li class="menu-item language-switch">
|
||||
<span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
|
||||
{{- dict "Class" "fa-solid fa-language fa-fw" | partial "plugin/icon.html" -}}
|
||||
</span>
|
||||
@@ -277,35 +277,35 @@
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<li class="menu-item theme-switch" title="{{ T "header.switchTheme" }}">
|
||||
{{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}
|
||||
</li>
|
||||
{{- if .Site.IsMultiLingual -}}
|
||||
<li class="menu-item language">
|
||||
<span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
|
||||
{{- .Language.LanguageName -}}
|
||||
{{ dict "Class" "dropdown-icon fa-solid fa-chevron-down" | partial "plugin/icon.html" }}
|
||||
<li class="menu-item menu-system">
|
||||
<span class="menu-system-item theme-switch" title="{{ T "header.switchTheme" }}">{{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}</span>
|
||||
{{- if .Site.IsMultiLingual -}}
|
||||
<span class="menu-system-item language-switch">
|
||||
<span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
|
||||
{{- .Language.LanguageName -}}
|
||||
{{- dict "Class" "dropdown-icon fa-solid fa-chevron-down" | partial "plugin/icon.html" -}}
|
||||
</span>
|
||||
<select class="language-select" onchange="location = this.value;">
|
||||
{{- if eq .Kind "404" -}}
|
||||
{{- range .Sites -}}
|
||||
{{- $link := printf "%v/404.html" .LanguagePrefix -}}
|
||||
<option value="{{ $link }}"{{ if eq . $.Site }} selected disabled{{ end }}>
|
||||
{{- .Language.LanguageName -}}
|
||||
</option>
|
||||
{{- end -}}
|
||||
{{- else if gt (len .AllTranslations) 1 -}}
|
||||
{{- range .AllTranslations -}}
|
||||
<option value="{{ .RelPermalink }}"{{ if eq .Lang $.Lang }} selected disabled{{ end }}>
|
||||
{{- .Language.LanguageName -}}
|
||||
</option>
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
<option disabled>{{- T "header.noMoretTranslations" -}}</option>
|
||||
{{- end -}}
|
||||
</select>
|
||||
</span>
|
||||
<select class="language-select" onchange="location = this.value;">
|
||||
{{- if eq .Kind "404" -}}
|
||||
{{- range .Sites -}}
|
||||
{{- $link := printf "%v/404.html" .LanguagePrefix -}}
|
||||
<option value="{{ $link }}"{{ if eq . $.Site }} selected disabled{{ end }}>
|
||||
{{- .Language.LanguageName -}}
|
||||
</option>
|
||||
{{- end -}}
|
||||
{{- else if gt (len .AllTranslations) 1 -}}
|
||||
{{- range .AllTranslations -}}
|
||||
<option value="{{ .RelPermalink }}"{{ if eq .Lang $.Lang }} selected disabled{{ end }}>
|
||||
{{- .Language.LanguageName -}}
|
||||
</option>
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
<option disabled>{{- T "header.noMoretTranslations" -}}</option>
|
||||
{{- end -}}
|
||||
</select>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user