cleaned up some css, renamed an article

DDP-Projekt · Jun 9, 2024 · 9402c56 · 9402c56
1 parent c2d4851
commit 9402c56
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 101 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,5 +1,5 @@
 :root {
-	--sidebar-size: 270px;
+	--sidebar-size: 280px;
 	--content-size: calc(100% - var(--sidebar-size));
 }
 
@@ -14,20 +14,13 @@
 	#hamburger {
 		display: none; /* eat hamburger */
 	}
-	#seitenleiste {
-		display: flex !important; /* make sidebar reappear */
-		padding: 10px !important;
-		max-width: var(--sidebar-size);
-		min-width: var(--sidebar-size);
-		box-shadow: unset !important;
-	}
 }
 
 /* screen width smaller than 830px (phone) */
 @media screen and (max-width: 830px) {
 	#hamburger {
 		position: absolute;
-		left: calc(var(--sidebar-size) - 10px);
+		left: 0;
 		font-size: 1.5em;
 		width: 30px;
 		height: 30px;
@@ -38,14 +31,18 @@
 		transition: left 350ms ease-in-out;
 	}
 	#hamburger.opened {
-		left: calc(var(--sidebar-size) - 10px);
-	}
-	#hamburger:not(.opened) {
-		left: 0;
+		left: calc(var(--sidebar-size) - 35px);
 	}
 	#seitenleiste {
 		position: absolute; /* make sidebar an overlay */
 		z-index: 1; /* make sidebar on top of content */
+		transition: width 350ms ease-in-out;
+	}
+	#seitenleiste:not(.opened) {
+		width: 0;
+	}
+	#seitenleiste.opened {
+		box-shadow: 0 0 0 100vmax rgba(16, 16, 16, 0.6);
 	}
 	:root{
 		--content-size: 100%;
@@ -81,25 +78,13 @@ html, body {
 
 #seitenleiste {
 	display: flex;
+	flex: 0 0 auto;
 	background-color: var(--sidebar-color);
 	width: var(--sidebar-size);
 	height: 100%;
-	padding: 10px;
 	flex-direction: column;
-	overflow: auto;
+	overflow: hidden auto;
 	text-wrap: nowrap;
-	transition: width 350ms ease-in-out, padding 350ms ease-in-out;
-}
-
-#seitenleiste.opened {
-	padding: 10px;
-	width: var(--sidebar-size);
-	box-shadow: 0 0 0 100vmax rgba(16, 16, 16, 0.6);
-}
-
-#seitenleiste:not(.opened) {
-	padding: 0;
-	width: 0;
 }
 
 /* Für 1.1, 1.2, 1.3, ect. Nummerierung in ol's*/

diff --git a/...stieg/Entwicklungs-umgebung einrichten.md → content/DE/Einstieg/Einrichten.md b/...stieg/Entwicklungs-umgebung einrichten.md → content/DE/Einstieg/Einrichten.md
@@ -1,5 +1,5 @@
 +++
-title = "Entwicklungsumgebung einrichten"
+title = "Einrichten"
 weight = 1
 type = "article"
 +++

diff --git a/content/DE/Einstieg/_index.md b/content/DE/Einstieg/_index.md
@@ -8,6 +8,6 @@ layout = "single"
 # Einstieg
 
 Die folgenden Artikel führen dich in die DDP-Entwicklung ein, indem sie dir zeigen wie du 
-* [eine Entwicklungsumgebung einrichtest](/Bedienungsanleitung/de/Einstieg/Entwicklungs-umgebung-einrichten/), 
+* [eine Entwicklungsumgebung einrichtest](/Bedienungsanleitung/de/Einstieg/Einrichten), 
 * [den DDP Kompilierer installierst](/Bedienungsanleitung/de/Einstieg/Installation) und
 * [dein erstes Programm schreibst](/Bedienungsanleitung/de/Einstieg/Erstes-Programm/).
diff --git a/...stieg/Entwicklungs-umgebung einrichten.md → content/EN/Einstieg/Einrichten.md b/...stieg/Entwicklungs-umgebung einrichten.md → content/EN/Einstieg/Einrichten.md
@@ -1,5 +1,5 @@
 +++
-title = "Set up development environment"
+title = "Setup"
 weight = 1
 type = "article"
 +++

diff --git a/content/EN/Einstieg/_index.md b/content/EN/Einstieg/_index.md
@@ -9,5 +9,5 @@ layout = "single"
 
 The following articles will introduce you to DDP development by showing you how to
 * [install the DDP compiler](/Bedienungsanleitung/en/Einstieg/Installation), 
-* [set up a development environment](/Bedienungsanleitung/en/Einstieg/Entwicklungs-umgebung-einrichten) und 
+* [set up a development environment](/Bedienungsanleitung/en/Einstieg/Einrichten) und 
 * [write your first program](/Bedienungsanleitung/en/Einstieg/Erstes-Programm).
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,47 +7,8 @@
 			{{ partial "header.html" . }}
 
 			{{ block "main" . -}}{{ end }}
-			<div id="artikel-navigation">
-				<!-- Find next and previous page -->
 
-				{{ $root := .GetPage "/" }}
-
-				<!-- Next -->
-				{{ $next := .CurrentSection.Pages.Prev . }}
-				<!-- Section -> Child -->
-				{{ if or .IsSection (.Eq $root) }}
-					{{ $next = index .Pages 0 }}
-				{{ end }}
-				{{ if eq $next nil }}
-					{{ with .CurrentSection.Parent }}
-						<!-- Beispiele -> Kombinationen -->
-						{{ with .Pages.Prev $.CurrentSection }}
-							{{ $next = . }}
-						<!-- Zufall -> Beispielprogramme -->
-						{{ else }}
-							{{ $next = .Parent.Pages.Prev . }}
-						{{ end }}
-					{{ end }}
-				{{ end }}
-
-				<!-- Previous -->
-				{{ $prev := .CurrentSection.Pages.Next . }}
-				<!-- Funktionen -> Verzweigungen -->
-				{{ if .IsSection }}
-					{{ $prev = .Parent.Pages.Next . }}
-				{{ end }}
-
-				<!-- Datentypen -> Programmierung -->
-				{{ if .Eq (index .CurrentSection.Pages 0) }}
-					{{ $prev = .CurrentSection }}
-				<!-- Kombinationen -> Beispiele -->
-				{{ else if and $prev $prev.IsSection }}
-					{{ $prev = index ($prev.Pages | last 1) 0 }}
-				{{ end }}
-
-				<a href="{{ with or $prev $root }} {{ .RelPermalink }} {{ end }} " class="btn" title="{{ T "prev" }}">&lt;</a>
-				<a href="{{ with or $next $root }} {{ .RelPermalink }} {{ end }}" class="btn" title="{{ T "next" }}">&gt;</a>
-			</div>
+			{{ partial "navigation.html" . }}
 		</main>
 	</body>
 </html>
diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
@@ -0,0 +1,41 @@
+<nav id="artikel-navigation">
+    <!-- Find next and previous page -->
+
+    {{ $root := .GetPage "/" }}
+
+    <!-- Next -->
+    {{ $next := .CurrentSection.Pages.Prev . }}
+    <!-- Section -> Child -->
+    {{ if or .IsSection (.Eq $root) }}
+        {{ $next = index .Pages 0 }}
+    {{ end }}
+    {{ if eq $next nil }}
+        {{ with .CurrentSection.Parent }}
+            <!-- Beispiele -> Kombinationen -->
+            {{ with .Pages.Prev $.CurrentSection }}
+                {{ $next = . }}
+            <!-- Zufall -> Beispielprogramme -->
+            {{ else }}
+                {{ $next = .Parent.Pages.Prev . }}
+            {{ end }}
+        {{ end }}
+    {{ end }}
+
+    <!-- Previous -->
+    {{ $prev := .CurrentSection.Pages.Next . }}
+    <!-- Funktionen -> Verzweigungen -->
+    {{ if .IsSection }}
+        {{ $prev = .Parent.Pages.Next . }}
+    {{ end }}
+
+    <!-- Datentypen -> Programmierung -->
+    {{ if .Eq (index .CurrentSection.Pages 0) }}
+        {{ $prev = .CurrentSection }}
+    <!-- Kombinationen -> Beispiele -->
+    {{ else if and $prev $prev.IsSection }}
+        {{ $prev = index ($prev.Pages | last 1) 0 }}
+    {{ end }}
+
+    <a href="{{ with or $prev $root }} {{ .RelPermalink }} {{ end }} " class="btn" title="{{ T "prev" }}">&lt;</a>
+    <a href="{{ with or $next $root }} {{ .RelPermalink }} {{ end }}" class="btn" title="{{ T "next" }}">&gt;</a>
+</nav>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
@@ -1,41 +1,43 @@
 <span id="hamburger" class="btn" onclick="toggleNav()">≡</span>
 <nav id="seitenleiste">
-	<h2 id="überschrift">{{ T "toc" }}</h2>
+	<div style="margin: 10px;">
+		<h2 id="überschrift">{{ T "toc" }}</h2>
 
-	<a href="/Bedienungsanleitung">Die Deutsche<br>Programmiersprache</a>
+		<a href="/Bedienungsanleitung">Die Deutsche<br>Programmiersprache</a>
 
-	<ol id="artikel-links">
-		{{- define "links" -}}
-			{{- range .page.Pages -}}
-				{{- if .IsSection -}}
-					<li>
-						<details id="Section-{{ .Title }}" {{ if (in $.ancestors .) }} open {{ end }}>
-							<summary><a href="{{ .RelPermalink }}">{{ .Title }}</a></summary>
-							<ol>
-								{{- template "links" (dict "page" . "ancestors" $.ancestors) -}}
-							</ol>
-						</details>
-					</li>
-				{{- else -}}
-					<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+		<ol id="artikel-links">
+			{{- define "links" -}}
+				{{- range .page.Pages -}}
+					{{- if .IsSection -}}
+						<li>
+							<details id="Section-{{ .Title }}" {{ if (in $.ancestors .) }} open {{ end }}>
+								<summary><a href="{{ .RelPermalink }}">{{ .Title }}</a></summary>
+								<ol>
+									{{- template "links" (dict "page" . "ancestors" $.ancestors) -}}
+								</ol>
+							</details>
+						</li>
+					{{- else -}}
+						<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+					{{- end -}}
 				{{- end -}}
 			{{- end -}}
-		{{- end -}}
 
-		{{- template "links" (dict "page" (.GetPage "") "ancestors" .Ancestors) -}}
-		<script>
-			const details = document.querySelectorAll('#artikel-links details');
-			for (const detail of details) {
-				detail.addEventListener('toggle', (event) => {
-					window.localStorage.setItem(event.target.id, event.target.open);
-				})
-
-				if (window.localStorage.getItem(detail.id) === "true") {
-					detail.open = true;
+			{{- template "links" (dict "page" (.GetPage "") "ancestors" .Ancestors) -}}
+			<script>
+				const details = document.querySelectorAll('#artikel-links details');
+				for (const detail of details) {
+					detail.addEventListener('toggle', (event) => {
+						window.localStorage.setItem(event.target.id, event.target.open);
+					})
+
+					if (window.localStorage.getItem(detail.id) === "true") {
+						detail.open = true;
+					}
 				}
-			}
-		</script>
-	</ol>
+			</script>
+		</ol>
+	</div>
 </nav>
 <script>
 	const sb = document.getElementById("seitenleiste");