Merge pull request #20 from puzzmo-com/minor-design-tweaks

add header, adjust colors
puzzmo-com · Aug 7, 2024 · d200a40 · d200a40
2 parents d610c39 + 4f32331
commit d200a40
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 40 deletions.
diff --git a/static/logo.svg b/static/logo.svg
diff --git 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,18 +2148,50 @@ 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;
 }
 
 .zoomable:hover {
   transform: scale(1.2);
+}
+
+.btn {
+  background-color: var(--color-puzzmo-dark);
 }
diff --git 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
@@ -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>