fix color overflow

themes/violette/assets/css/main.css

@@ -44,12 +44,14 @@
 	color:var(--text);
 	height: 100%;
 	width: 100%;
+
+	scrollbar-color: var(--bg);
 }
 
 .margin {
 	min-height: 100vh;
-	padding-left: 20px;
-	padding-right: 20px;
+	padding-left: 5%;
+	padding-right: 5%;
 
 	display: flex;
 	flex-direction: column;
@@ -66,7 +68,7 @@ body {
 
 	display: flex;
 	flex-direction: column;
-	overflow: hidden;
+	overflow-y:scroll;
 }
 
 header {
@@ -123,19 +125,27 @@ footer {
 .nav {
 	list-style-type: none;
 	margin: 5pt;
-	display: inline-flex;
-
-	align-items: center;
+	display: flex;
+	padding-left: 5pt;
+	padding-right: 5pt;
 }
 
 .nav-right {
 	list-style-type: none;
-	width: 100%;
 
 	display: flex;
+	width: 50%;
 	justify-content: flex-end;
 }
 
+.nav-left {
+	list-style-type: none;
+
+	display: flex;
+	width: 50%;
+	justify-content: flex-start;
+}
+
  @media only screen and (max-width: 300pt) {
 	.nav {
 		flex-direction: column;
@@ -147,46 +157,27 @@ footer {
 		display: flex;
 	}
 
+	.nav-left {
+		flex-direction: column;
+	}
 }
-
 
 li {
 	padding-left: 5pt;
 	padding-right: 5pt;
 }
 
-ul {
-	padding-right: 5pt;
-	padding-left: 5pt;
-	margin-left: 5pt;
-	width: 100%;
-}
-
 a, label {
 	color: var(--text-mauve);
 	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 */
 main img {
 	max-width: 70%;
 	min-width: 0;
 	margin-left:auto;
 	margin-right:auto;
-
 	display: flex;
 	float:none;
-
 }
-
-

themes/violette/layouts/partials/menu.html

@@ -19,6 +19,7 @@ Renders a menu for the given menu ID.
 {{- end }}
 
 {{- define "partials/inline/menu/walk.html" }}
+	<span class="nav-left">
 	{{- $page := .page }}
 	{{- range .menuEntries }}
 	{{- $href := relLangURL .URL }}
@@ -34,7 +35,7 @@ Renders a menu for the given menu ID.
 				{{- $name = . }}
 			{{- end }}
 		{{- end }}
-    <li class="nav-left">
+		<li>
 			<a
 				{{- range $k, $v := $attrs }}
 					{{- with $v }}
@@ -42,22 +43,21 @@ Renders a menu for the given menu ID.
 					{{- end }}
 				{{- end -}}
 			>{{ $name }}</a>
-      {{- with .Children }}
-        <ul>
-          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
-        </ul>
-      {{- end }}
 		</li>
 
 	{{- end }}
-  <li class="nav-right">
+	</span>
+	<span class="nav-right">
+		<li>
 		<span class="toggle-dark">
 			<label for="color-mode"> {{ i18n "dark-mode" }}</label> 
 		 </span>
+		 </li>
+		 <li>
 		<span class="toggle-language">
 			<a href={{ i18n "language-switch" }}> {{ i18n "language" }}</a>
 		 </span>
-	  <span class="empty-space-menu"></span>
 		 </li>
+	 </span>
 {{- end }}