From 4f32331b9030673d1ff4d2c3603d7e462d7f5559 Mon Sep 17 00:00:00 2001
From: samanpwbb <samanpwbb@gmail.com>
Date: Tue, 6 Aug 2024 12:59:15 -0700
Subject: [PATCH] add header, adjust colors

---
 static/logo.svg                           |  6 +++
 themes/paper/assets/main.css              | 49 ++++++++++++++---
 themes/paper/layouts/_default/baseof.html |  3 +-
 themes/paper/layouts/partials/header.html | 64 ++++++++++++-----------
 4 files changed, 82 insertions(+), 40 deletions(-)
 create mode 100644 static/logo.svg

diff --git a/static/logo.svg b/static/logo.svg
new file mode 100644
index 0000000..8069781
--- /dev/null
+++ b/static/logo.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 313 63">
+  <path fill="#FFE699" d="M46.43 38c-7.2 6.56-17.68 6.27-20.77 6.27-2.44 0-2.67 2.31-2.67 3.06 0 6.87-.1 8.73-3.46 8.73H4.36c-2.88 0-4.18-.7-4.18-6.87 0-5.85.5-37.58.19-42.53C.1 2.46 2.62.9 7.76.96c2.73.03 8.61 0 14.04 0 3.93 0 13.38-.47 21.52 4.68 4.96 3.18 9.83 8.23 10.02 16.46.3 7.3-3.25 12.53-6.9 15.9ZM25.2 19.1c-1.5.18-2.8-.18-2.8 2.62 0 3.28-.57 5.43 2.52 5.15 2.63-.18 7.12-.18 7.3-3.75.17-3.27-2.34-4.02-7.02-4.02Zm77.4 31.35c-.18 3.28-.18 5.34-4.11 5.52-4.03.28-7.96 0-10.58 0-2.53 0-3.93-.84-3.93-2.53 0-2.33-1.4 0-3.47 1.22a17.56 17.56 0 0 1-9.06 2.24c-8.24 0-15.92-3.64-15.63-17.86V18.26c-.1-4.68 1.13-7.01 6.27-7.01h10.48c2.34-.19 3.94.47 4.21 3.75.18 3.28 0 9.36 0 12.63 0 3.2.18 8.14 2.53 8.14 2.33 0 2.33-4.95 2.33-8.14V15.65c0-2.71-.18-4.59 3.55-4.59h13.3c2.24 0 4.4.48 4.4 6.93-.01 6.54-.01 29.19-.29 32.46Zm39.04 2.34c-.27 2.05-1.7 2.8-3.75 2.98-2.15.19-24.05 0-27.04 0-3.93 0-5.23-.86-5.4-4.68-.15-3.75.06-5.04.52-6.73.66-2.63 8.05-10.86 10.94-15.16h-5.9c-1.87 0-4.4-1.4-4.4-4.4 0-3.1-.1-3.64 0-6.83.1-2.8.27-6.74 5.33-6.74h23.77c3.1 0 5.43.47 5.43 5.34 0 4.95.65 7.25-1.4 10.29A914.37 914.37 0 0 0 133 37.15c0 1.58 3.64.65 5.33.93 0 0 3.46-.28 3.46 4.11.03 4.51.03 8.45-.15 10.6Zm37.8 0c-.28 2.05-1.7 2.8-3.75 2.98-2.15.19-24.06 0-27.04 0-3.94 0-5.23-.86-5.4-4.68-.15-3.75.06-5.04.52-6.73.65-2.63 8.05-10.86 10.94-15.16h-5.9c-1.87 0-4.4-1.4-4.4-4.4 0-3.1-.1-3.64 0-6.83.09-2.8.27-6.74 5.33-6.74h23.77c3.1 0 5.43.47 5.43 5.34 0 4.95.65 7.25-1.4 10.29a914.37 914.37 0 0 0-6.75 10.29c0 1.58 3.65.65 5.34.93 0 0 3.46-.28 3.46 4.11.03 4.51.03 8.45-.15 10.6Z"/>
+  <path fill="#FFC000" d="M247.46 55.79h-11.42c-1.69 0-4.68-.18-4.68-4.4v-14.7c0-1.7.2-4.47-2.33-4.5-2.15-.01-2.33 1.22-2.33 5.61v14.04c0 2.33-1.33 4.01-4.86 4.12l-11.51-.19c-1.88 0-3.19-1.87-3.19-6.08V37.8c0-2.06.47-5.84-2.8-5.8-2.76.02-1.88 3.74-2.15 5.8-.19 2.15.27 12.64 0 14.51-.19 1.88-1.13 3.46-3.75 3.46h-11.9c-2.32-.18-3.74-.18-3.93-4.2-.27-3.94 0-32.66 0-35 0-2.34.19-5.34 3.28-5.34 2.99 0 5.25.1 9.73 0 5.6-.09 5.42 2.8 5.42 2.8s5.81-3.74 10.67-3.74c6.83 0 11.42 4.4 11.42 4.4s4.2-4.4 11.24-4.4c9.83 0 17.02 7 17.22 18.9.38 13.95 0 19.37 0 22.18-.01 2.82-1.14 4.42-4.13 4.42Zm33.7-45.67c-11.89 0-27.32 6.46-27.04 23.3.18 17.5 13.95 23.77 27.97 23.77 13.95 0 25.46-11.42 25.46-23.1 0-15.83-12.64-24.06-26.39-23.97Z"/>
+  <path fill="#141620" d="M270.61 26.08a2.36 2.36 0 0 0-2.07-.05c-.64.3-1.11.9-1.28 1.64a3 3 0 0 0 1.55 3.3c.36.17.74.26 1.12.26.33 0 .65-.07.96-.21.64-.3 1.11-.9 1.28-1.63.13-.63.06-1.3-.23-1.9a2.9 2.9 0 0 0-1.33-1.41Zm15.79-5.18c-.64-1.37-2.16-2.01-3.4-1.44-1.21.58-1.69 2.17-1.05 3.54a3 3 0 0 0 1.33 1.39 2.32 2.32 0 0 0 2.07.06c.64-.3 1.12-.9 1.28-1.63.14-.64.06-1.33-.23-1.92Zm5.27 6.83c1.9.6 4.19 10.77-6.01 15.47-9.57 4.42-16.22-2.97-15.76-5.2.46-2.23 19.84-10.85 21.77-10.27Z"/>
+  <path fill="#FFC000" d="M303.68 28.3a21.87 21.87 0 0 0 5.91-4.7c1.8-2.08 3.45-4.69 2.29-7.49-.43-1.05-1.14-1.87-1.88-2.73-.59-.68-.79-1.22-.67-2.27a9.72 9.72 0 0 1 2.14-5.21c.8-1.05.17-2.72-.87-3.33-1.25-.73-2.53-.18-3.32.87a13.18 13.18 0 0 0-2.52 5.66 12.18 12.18 0 0 0-.24 3.85c.2 1.35.82 2.41 1.67 3.45.45.53 1.13 1.17 1.2 1.57.13.58-.59 1.43-1.01 1.94a17.43 17.43 0 0 1-5.15 4.22c-2.75 1.48-.3 5.68 2.45 4.18Zm-42.35 19c-3.22 1.07-5.67 3.78-7.06 6.81-.94 2.06-1.25 4.38.32 6.22 1.31 1.54 3.46 1.65 5.32 1.74 2.14.1 4.25.12 6.39.03 1.26-.05 2.5-1.08 2.44-2.44-.06-1.28-1.07-2.48-2.44-2.44a73.99 73.99 0 0 1-7.56-.1c-.69-.07.35.09-.08 0l-.56-.14c-.46-.1.42.27.06.03-.55-.37.23.27-.05-.03.23.3.26.35.13.14-.13-.23-.1-.17.07.18a1.4 1.4 0 0 1-.06-.28c.05.42.06.5.05.22l.01-.3c-.06.4-.06.46-.01.2l.16-.59.11-.29-.1.23.25-.47.61-1.07.34-.52c.04-.06.38-.44.36-.5a4.2 4.2 0 0 0-.09.12l.2-.23.3-.33c.28-.3.58-.57.89-.83l-.14.11.25-.17.5-.32c.1-.06.47-.16.53-.27l-.17.07.3-.09c1.2-.4 2.11-1.69 1.69-2.98-.37-1.2-1.68-2.14-2.96-1.71Z"/>
+</svg>
diff --git a/themes/paper/assets/main.css b/themes/paper/assets/main.css
index f7651c7..c2ab8ce 100644
--- a/themes/paper/assets/main.css
+++ b/themes/paper/assets/main.css
@@ -667,6 +667,7 @@ html,
 
 html {
   --bg: transparent;
+   --color-puzzmo-dark: #141620;
 }
 
 body {
@@ -1282,19 +1283,19 @@ body {
 
 .prose-neutral {
   --tw-prose-body: #404040;
-  --tw-prose-headings: #171717;
+  --tw-prose-headings: #141620;
   --tw-prose-lead: #525252;
-  --tw-prose-links: #171717;
-  --tw-prose-bold: #171717;
+  --tw-prose-links: #141620;
+  --tw-prose-bold: #141620;
   --tw-prose-counters: #737373;
   --tw-prose-bullets: #d4d4d4;
   --tw-prose-hr: #e5e5e5;
-  --tw-prose-quotes: #171717;
+  --tw-prose-quotes: #141620;
   --tw-prose-quote-borders: #e5e5e5;
   --tw-prose-captions: #737373;
-  --tw-prose-kbd: #171717;
+  --tw-prose-kbd: #141620;
   --tw-prose-kbd-shadows: 23 23 23;
-  --tw-prose-code: #171717;
+  --tw-prose-code: #141620;
   --tw-prose-pre-code: #e5e5e5;
   --tw-prose-pre-bg: #262626;
   --tw-prose-th-borders: #d4d4d4;
@@ -1858,7 +1859,7 @@ body {
   content: var(--tw-content);
 }
 
-:is(.dark .btn-menu)::before,:is(.dark 
+:is(.dark .btn-menu)::before,:is(.dark
   .btn-menu)::after {
   --tw-invert: invert(100%);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2147,13 +2148,41 @@ article .highlight > div table tr td:last-of-type {
   }
 }
 
-  
+
 /* PUZZZZZZMO */
 
 body {
  background-color: var(--theme-a_bg) !important;
 }
+.invert {
+  filter: invert(100%);
+}
 
+.w-6 {
+  height: 1.5rem;
+}
+
+.puzzmo-logo-wrapper {
+  background-color: var(--color-puzzmo-dark);
+  color: white;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.puzzmo-logo-wrapper a {
+  color: white;
+}
+.puzzmo-logo-wrapper a:hover {
+  color: white;
+}
+
+.puzzmo-logo {
+  display: inline;
+  height: 100%;
+  width: 100px;
+}
 
 .zoomable {
   transition: transform 200ms ease-in;
@@ -2161,4 +2190,8 @@ body {
 
 .zoomable:hover {
   transform: scale(1.2);
+}
+
+.btn {
+  background-color: var(--color-puzzmo-dark);
 }
\ No newline at end of file
diff --git a/themes/paper/layouts/_default/baseof.html b/themes/paper/layouts/_default/baseof.html
index 492e1f4..6c02cc3 100644
--- a/themes/paper/layouts/_default/baseof.html
+++ b/themes/paper/layouts/_default/baseof.html
@@ -40,10 +40,11 @@
 >
   {{ partial "head.html" . }}
   <body>
+
     {{ partial "header.html" . }}
 
     <main
-      class="prose prose-neutral relative mx-auto min-h-[calc(100%-9rem)] max-w-3xl px-8 pb-16 pt-12 dark:prose-invert"
+    class="prose prose-neutral relative mx-auto min-h-[calc(100%-9rem)] max-w-3xl px-8 pb-16 pt-12 dark:prose-invert"
     >
       {{ block "main" . }}{{ end }}
     </main>
diff --git a/themes/paper/layouts/partials/header.html b/themes/paper/layouts/partials/header.html
index e496a47..6752b47 100644
--- a/themes/paper/layouts/partials/header.html
+++ b/themes/paper/layouts/partials/header.html
@@ -1,18 +1,41 @@
-<header class="mx-auto flex h-[4.5rem] max-w-3xl px-8 lg:justify-center">
+<div class="puzzmo-logo-wrapper">
+  <div class="mx-auto px-8 flex max-w-3xl" style="display:flex;justify-content: space-between;">
+    <a class="link" target="_blank" title="Go to puzzmo.com" href="https://www.puzzmo.com/">
+      <img src="/logo.svg" alt="Puzzmo" class="puzzmo-logo" />
+    </a>
+
+        {{ with $.Scratch.Get "social_list" }}
+    <nav
+      style="gap:12px"
+      class="flex justify-center invert"
+    >
+      {{ range . }}<!---->
+      <a
+        class="text-[0] [background:var(--url)_center_center/cover_no-repeat] h-6 w-6"
+        style="--url: url(./{{ . }}.svg)"
+        href="{{ if eq . `rss` }}{{ `index.xml` | absURL }}{{ else if eq . `mastodon` }}{{ index site.Params . }}{{ else }}https://{{ . }}.com/{{ if eq . `linkedin` }}in/{{ end }}{{ index site.Params . }}{{ end }}"
+        target="_blank"
+        rel="{{ if eq . `rss` }}alternate{{ else }}me{{ end }}"
+      >
+        {{ . }}
+      </a>
+      {{ end }}<!---->
+    </nav>
+    {{ end }}<!---->
+
+  </div>
+</div>
+
+<header class="mx-auto flex max-w-3xl px-8 lg:justify-center" style="display:flex">
+
   <div class="relative z-50 mr-auto flex items-center">
     <a
-      class="-translate-x-[1px] -translate-y-[1px] text-2xl font-semibold"
+      class="-translate-x-[1px] -translate-y-[1px] text-2xl"
       href="{{ `/` | absURL }}"
       >{{ site.Title }}</a
     >
-  
-  </div>
 
-  <div
-    class="btn-menu relative z-50 -mr-8 flex h-[4.5rem] w-[5rem] shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 lg:hidden"
-    role="button"
-    aria-label="Menu"
-  ></div>
+  </div>
 
   {{ $bg_color := $.Scratch.Get "bg_color" }}<!---->
 
@@ -23,11 +46,6 @@
       htmlClass.remove('not-ready');
     }, 10);
 
-    // mobile menu
-    const btnMenu = document.querySelector('.btn-menu');
-    btnMenu.addEventListener('click', () => {
-      htmlClass.toggle('open');
-    });
 
     // dark theme
    // const metaTheme = document.querySelector('meta[name="theme-color"]');
@@ -64,6 +82,7 @@
   >
     {{ $url := .RelPermalink }}<!---->
     {{ with site.Menus.main }}
+
     <nav class="lg:ml-12 lg:flex lg:flex-row lg:items-center lg:space-x-6">
       {{ range . }}
       <a
@@ -75,22 +94,5 @@
     </nav>
     {{ end }}<!---->
 
-    {{ with $.Scratch.Get "social_list" }}
-    <nav
-      class="mt-12 flex justify-center space-x-10 dark:invert lg:ml-12 lg:mt-0 lg:items-center lg:space-x-6"
-    >
-      {{ range . }}<!---->
-      <a
-        class="h-8 w-8 text-[0] [background:var(--url)_center_center/cover_no-repeat] lg:h-6 lg:w-6"
-        style="--url: url(./{{ . }}.svg)"
-        href="{{ if eq . `rss` }}{{ `index.xml` | absURL }}{{ else if eq . `mastodon` }}{{ index site.Params . }}{{ else }}https://{{ . }}.com/{{ if eq . `linkedin` }}in/{{ end }}{{ index site.Params . }}{{ end }}"
-        target="_blank"
-        rel="{{ if eq . `rss` }}alternate{{ else }}me{{ end }}"
-      >
-        {{ . }}
-      </a>
-      {{ end }}<!---->
-    </nav>
-    {{ end }}<!---->
   </div>
 </header>