rearrange header

EndangeredMassa · Jan 14, 2024 · d2ba6d7 · d2ba6d7
1 parent a6f5e06
commit d2ba6d7
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 11 deletions.
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -21,17 +21,30 @@
 
   header {
     color: #FFFFFF;
+    padding-bottom: 0;
+  }
+
+  main {
+    padding-top: 0;
   }
 
   footer {
-    color: #323232;
+    color: #8a8a8a;
   }
 }
 
 a, a:visited {
   color:var(--accent);
 }
 
+header>nav {
+  padding:0;
+}
+
+header>nav .separator {
+  color: gray;
+}
+
 header>nav a.active {
   border-color:var(--accent);
   color:var(--accent);

diff --git a/app/templates/application.gjs b/app/templates/application.gjs
@@ -4,27 +4,32 @@ import IconButton from '../components/icon-button';
 import Component from "@glimmer/component";
 
 class MyRouteComponent extends Component {
+  get title() {
+    return window.location.pathname.split('/')[1];
+  }
+
   <template>
     <header>
+      <h1>Massa Labs</h1>
       <nav>
         <LinkTo @route="index">Home</LinkTo>
         <LinkTo @route="blog">Blog</LinkTo>
         <LinkTo @route="talks">Talks</LinkTo>
         <LinkTo @route="projects">Projects</LinkTo>
+        <span class="separator">|</span>
+        <a target="_blank" href="https://social.massalabs.com/@sean">Microblog</a>
       </nav>
-      <div class="socials">
-        <IconButton @icon="github" @href="https://github.com/EndangeredMassa" />
-        <IconButton @icon="mastodon" @href="https://social.massalabs.com/@sean" />
-      </div>
-      <h1>Massa Labs</h1>
-      <p>Sean Massa writes about tech, organizations, ethics, and games.</p>
     </header>
 
     <main>
       {{outlet}}
     </main>
 
     <footer>
+      <div class="socials">
+        <IconButton @icon="github" @href="https://github.com/EndangeredMassa" />
+        <IconButton @icon="mastodon" @href="https://social.massalabs.com/@sean" />
+      </div>
       <p>
         Thanks to <a href="https://kevquirk.com">Kev Quirk</a>
         for making <a href="https://simplecss.org/">Simple.css</a>,
@@ -41,10 +46,6 @@ class MyRouteComponent extends Component {
       hljs.highlightAll();
     </script>
   </template>
-
-  get title() {
-    return window.location.pathname.split('/')[1];
-  }
 }
 
 export default RouteTemplate(MyRouteComponent);
diff --git a/app/templates/index.gjs b/app/templates/index.gjs
@@ -0,0 +1,10 @@
+import RouteTemplate from 'ember-route-template';
+
+export default RouteTemplate(
+<template>
+  <p>Sean Massa discusses tech, organizations, ethics, and games.</p>
+</template>
+);
+
+
+