separate layout for mandel

some text updates
zelding · Feb 6, 2024 · 4d3c5ed · 4d3c5ed
1 parent 98697e3
commit 4d3c5ed
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 10 deletions.
diff --git a/content/en/mandel/_index.md b/content/en/mandel/_index.md
@@ -1,8 +1,5 @@
 ---
-layout: single
-type: single
-
-title: Test page
+title: Poor mans compute shader
 description: Test page, please ignore
 header_text: Mandelbrot
 subtitle:

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -73,15 +73,10 @@ <h1 class="f1 mt3 mb1 pb2">
             {{ end }}
         </header>
 
-        <div class="w-100 w-third-l nested-copy-line-height lh-copy f4 nested-links bg-white-80 {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr4-l" "pl4-l" }}">
+        <div class="w-100 nested-copy-line-height lh-copy f4 nested-links bg-white-80 {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr4-l" "pl4-l" }}">
             {{- .Content -}}
         </div>
 
-        <div class="w-two-thirds-l w-100 pl2-l">
-            <canvas id="mandel" width="512" height="512"
-                    class="w-100 bg-black white"></canvas>
-        </div>
-
         <aside class="w-30-l mt6-l">
             {{- partial "menu-contextual.html" . -}}
         </aside>

diff --git a/layouts/mandel/mandel.html b/layouts/mandel/mandel.html
@@ -0,0 +1,62 @@
+{{ define "javascripts" }}
+<script src="https://unpkg.com/[email protected]/lib/browser/math.js"></script>
+
+{{ $fract := resources.Get "js/fract.js" | resources.Minify | resources.Fingerprint }}
+<script src="{{ $fract.RelPermalink }}" type="application/javascript"></script>
+{{ end }}
+
+{{ define "header" }}
+<header>
+    <div class="pb3-m {{ .Site.Params.background_color_class | default "bg-black" }}">
+    {{ partial "site-navigation.html" . }}
+    <div class="tc-l pv3 ph3 ph4-ns">
+        <h1 class="f2 f-subheadline-l fw2 light-silver mb0 lh-title {{ with .Params.bzz.h1 }}{{ range $i := . }}{{ $i }}{{ end }}{{ end }}">
+            {{ .Params.header_text | default .Site.Title }}
+        </h1>
+        {{ with .Params.subtitle }}
+        <h2 class="fw1 f5 f3-l white-80 measure-wide-l center lh-copy mt3 mb4 {{ with $.Params.bzz.h2 }}{{ range $i := . }}{{ $i }} {{ end }}{{ end }}">
+            <span>{{ .first }}</span><br class="dn-m">
+            <span class="c">{{ .second }}</span><br class="dn-m">
+            <span class="cc">{{ .third }}</span>
+        </h2>
+        {{ end }}
+    </div>
+    </div>
+</header>
+{{ end }}
+
+{{ define "main" }}
+{{ $section := .Site.GetPage "section" .Section }}
+
+<article class="flex-l flex-wrap justify-between mw8 center ph3">
+    <header class="mv4 w-100">
+        <aside class="b tracked white-40 ttu">
+            {{/*
+            CurrentSection allows us to use the section title instead of inferring from the folder.
+            https://gohugo.io/variables/page/#section-variables-and-methods
+            */}}
+            {{ .CurrentSection.Title }}
+        </aside>
+    </header>
+
+    <div class="w-100 w-third-l nested-copy-line-height lh-copy f4 nested-links bg-white-80 {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pr4-l" "pl4-l" }}">
+        {{- .Content -}}
+    </div>
+
+    <div class="w-two-thirds-l w-100 pl2-l">
+        <canvas id="mandel"
+                width="512" height="512"
+                class="w-100 bg-black white"></canvas>
+    </div>
+
+    <aside class="w-30-l mt6-l">
+        {{- partial "menu-contextual.html" . -}}
+    </aside>
+</article>
+{{ end }}
+
+{{ define "the_button" }}{{ end }}
+
+{{ define "almost_buton" }}{{ end }}
+
+{{ define "footer"  }}{{ end }}