fix color overflow
All checks were successful
/ test (push) Successful in 4s

This commit is contained in:
violette 2024-05-21 13:25:48 -04:00
parent d31161087e
commit 012aac1464
2 changed files with 77 additions and 86 deletions

View file

@ -15,8 +15,8 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg:black; --bg: black;
--text:white; --text: white;
--text-pink: var(--text-pink-dark); --text-pink: var(--text-pink-dark);
--text-mauve: var(--text-mauve-dark); --text-mauve: var(--text-mauve-dark);
} }
@ -44,12 +44,14 @@
color:var(--text); color:var(--text);
height: 100%; height: 100%;
width: 100%; width: 100%;
scrollbar-color: var(--bg);
} }
.margin { .margin {
min-height: 100vh; min-height: 100vh;
padding-left: 20px; padding-left: 5%;
padding-right: 20px; padding-right: 5%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -66,7 +68,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow-y:scroll;
} }
header { header {
@ -123,70 +125,59 @@ footer {
.nav { .nav {
list-style-type: none; list-style-type: none;
margin: 5pt; margin: 5pt;
display: inline-flex; display: flex;
padding-left: 5pt;
align-items: center; padding-right: 5pt;
} }
.nav-right { .nav-right {
list-style-type: none; list-style-type: none;
width: 100%;
display: flex; display: flex;
width: 50%;
justify-content: flex-end; justify-content: flex-end;
} }
@media only screen and (max-width: 300pt) { .nav-left {
.nav { list-style-type: none;
flex-direction: column;
align-items: flex-start;
}
.nav-right {
flex-direction: column;
display: flex; display: flex;
} width: 50%;
justify-content: flex-start;
} }
@media only screen and (max-width: 300pt) {
.nav {
flex-direction: column;
align-items: flex-start;
}
.nav-right {
flex-direction: column;
display: flex;
}
.nav-left {
flex-direction: column;
}
}
li { li {
padding-left: 5pt; padding-left: 5pt;
padding-right: 5pt; padding-right: 5pt;
} }
ul {
padding-right: 5pt;
padding-left: 5pt;
margin-left: 5pt;
width: 100%;
}
a, label { a, label {
color: var(--text-mauve); color: var(--text-mauve);
text-decoration: none; text-decoration: none;
} }
.toggle-dark {
width: auto;
padding-right: 20pt;
}
.toggle-dark label {
width: 100%;
display: block;
}
/* resize image that are in main, and center them */ /* resize image that are in main, and center them */
main img { main img {
max-width: 70%; max-width: 70%;
min-width: 0; min-width: 0;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
display: flex; display: flex;
float:none; float:none;
} }

View file

@ -11,53 +11,53 @@ Renders a menu for the given menu ID.
{{- $menuID := .menuID }} {{- $menuID := .menuID }}
{{- with index site.Menus $menuID }} {{- with index site.Menus $menuID }}
<nav> <nav>
<ul class="nav"> <ul class="nav">
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul> </ul>
</nav> </nav>
{{- end }} {{- end }}
{{- define "partials/inline/menu/walk.html" }} {{- define "partials/inline/menu/walk.html" }}
{{- $page := .page }} <span class="nav-left">
{{- range .menuEntries }} {{- $page := .page }}
{{- $href := relLangURL .URL }} {{- range .menuEntries }}
{{- $attrs := dict "href" $href }} {{- $href := relLangURL .URL }}
{{- if $page.IsMenuCurrent .Menu . }} {{- $attrs := dict "href" $href }}
{{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} {{- if $page.IsMenuCurrent .Menu . }}
{{- else if $page.HasMenuCurrent .Menu .}} {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
{{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} {{- else if $page.HasMenuCurrent .Menu .}}
{{- end }} {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
{{- $name := .Name }} {{- end }}
{{- with .Identifier }} {{- $name := .Name }}
{{- with T . }} {{- with .Identifier }}
{{- $name = . }} {{- with T . }}
{{- end }} {{- $name = . }}
{{- end }} {{- end }}
<li class="nav-left"> {{- end }}
<a <li>
{{- range $k, $v := $attrs }} <a
{{- with $v }} {{- range $k, $v := $attrs }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }} {{- with $v }}
{{- end }} {{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end -}} {{- end }}
>{{ $name }}</a> {{- end -}}
{{- with .Children }} >{{ $name }}</a>
<ul> </li>
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
</ul>
{{- end }}
</li>
{{- end }} {{- end }}
<li class="nav-right"> </span>
<span class="toggle-dark"> <span class="nav-right">
<label for="color-mode"> {{ i18n "dark-mode" }}</label> <li>
</span> <span class="toggle-dark">
<span class="toggle-language"> <label for="color-mode"> {{ i18n "dark-mode" }}</label>
<a href={{ i18n "language-switch" }}> {{ i18n "language" }}</a> </span>
</span> </li>
<span class="empty-space-menu"></span> <li>
</li> <span class="toggle-language">
<a href={{ i18n "language-switch" }}> {{ i18n "language" }}</a>
</span>
</li>
</span>
{{- end }} {{- end }}