layout: improve readability and remove /notes

The notes will be moved to a different site/repository, with their own
style.

Update the index page to make it more readable. Make the header more
visible with fewer links.

Add a footer, with links using SVG icons.

6 files changed, 110 insertions, 96 deletions

diff --git a/config.toml b/config.toml
index 1fe49bc..c47b946 100644
--- a/config.toml
+++ b/config.toml
@@ -21,31 +21,13 @@ enableGitInfo = true
 
 [menu]
   [[menu.main]]
-    identifier = "articles"
-    name = "blog"
-    title = "articles"
-    url = "/blog/"
-    weight = 110
-
-  [[menu.main]]
-    identifier = "notes"
-    name = "notes"
-    title = "notes"
-    url = "/notes/"
-    weight = 120
-
-  [[menu.main]]
     identifier = "RSS"
     name = "RSS"
-    title = "RSS"
+    title = "~/blog/feed"
     url = "/feed.xml"
     weight = 130
 
 [markup]
-  [markup.tableOfContents]
-    startLevel = 1
-    endLevel = 3
-    ordered = true
   [markup.highlight]
     anchorLineNos = false
     codeFences = false
@@ -56,7 +38,7 @@ enableGitInfo = true
     lineNos = false
     lineNumbersInTable = false
     noClasses = true
-    style = "emacs"
+    style = "manni"
     tabWidth = 4
 
 [mediaTypes."application/atom"]
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 0c72fb1..410e2bc 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,5 +6,6 @@
     <main>
      {{ block "main" . }}{{ end }}
     </main>
+    {{- partial "footer.html" . -}}
   </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index 2ab8c40..38520ef 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -2,17 +2,18 @@
 
 <article>
 
-<h1>{{ .Site.Home.Title }}</h1>
+  <p>I'm a Principal SRE, currently working at <a href="https://www.roblox.com/" target="_blank">Roblox</a>. Previously I worked at <a href="https://twitter.com/TwitterEng" target="_blank">Twitter</a> for over 7 years, and my main focus was on Twitter's compute platform.</p>
 
-<p>I'm an engineer currently on a break. Previously I was a Site Reliability Engineer working on Twitter's compute platform.</p>
+  <p>My general interests are in building sustainable teams, improving the management and operation of large infrastructure, and work with different teams to implement best practices around reliability and security.</p>
 
-<h2>Contact</h2>
-<ul>
-  <li>Email: <a href="mailto:franck@fcuny.net">franck@fcuny.net</a></li>
-  <li>Git: <a href="https://git.fcuny.net/fcuny">@fcuny</a></li>
-  <li>Twitter: <a href="https://twitter.com/franckcuny">@franckcuny</a></li>
-  <li>Keys: <a href="/ssh.pub.sig">SSH public keys</a></li>
-</ul>
+  <h2>Posts</h2>
+  <ul>
+  {{- $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+  {{ range $pages }}
+  {{- $fmt := "2006-01-02" }}
+  <li class="post-permalink"><span class="post-date" >{{ .Date.Format $fmt | safeHTML }}</span>, <a href="{{ .Permalink }}">{{ .Title }}</a></li>
+  {{ end }}
+  </ul>
 
 </article>
 
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 0000000..e2bf7ab
--- /dev/null
+++ b/layouts/partials/footer.html
@@ -0,0 +1,32 @@
+<footer>
+  <a href="mailto:franck@fcuny.net" title="franck@fcuny.net">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 20 20">
+      <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
+    </svg>
+  </a>
+
+  <a target="_blank" href="https://git.fcuny.net/fcuny" title="git.fcuny.net">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-git" viewBox="0 0 20 20">
+      <path d="M15.698 7.287 8.712.302a1.03 1.03 0 0 0-1.457 0l-1.45 1.45 1.84 1.84a1.223 1.223 0 0 1 1.55 1.56l1.773 1.774a1.224 1.224 0 0 1 1.267 2.025 1.226 1.226 0 0 1-2.002-1.334L8.58 5.963v4.353a1.226 1.226 0 1 1-1.008-.036V5.887a1.226 1.226 0 0 1-.666-1.608L5.093 2.465l-4.79 4.79a1.03 1.03 0 0 0 0 1.457l6.986 6.986a1.03 1.03 0 0 0 1.457 0l6.953-6.953a1.031 1.031 0 0 0 0-1.457"/>
+    </svg>
+  </a>
+
+  <a target="_blank" href="https://twitter.com/franckcuny" title="@franckcuny">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-twitter" viewBox="0 0 20 20">
+      <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
+    </svg>
+  </a>
+
+  <a href="/ssh.pub.sig" title="SSH public keys">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-filetype-key" viewBox="0 0 20 20">
+      <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.21 11.85h-.87L.83 13.64H.79v-1.79H0v3.999h.791v-1.283l.41-.466 1.12 1.749h.951l-1.488-2.276 1.427-1.723Zm2.903 3.352h-1.79v-1.073h1.685v-.606H4.323v-1.025h1.79v-.648H3.538v3.999h2.575v-.647Zm2.243-.888v1.535h-.794v-1.52L6.223 11.85H7.1l.853 1.696h.032l.855-1.696h.856l-1.339 2.464Z"/>
+    </svg>
+  </a>
+
+  <a href="/feed.xml" title="atom feed">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-rss-fill" viewBox="0 0 20 20">
+      <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+    </svg>
+  </a>
+
+</footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index dede0ae..65900eb 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,12 +1,10 @@
 <header>
-    <nav class="navbar">
-    <a href="{{ .Site.BaseURL }}">
-      fcuny.net
-    </a>
+  <nav class="navbar">
+    <a class="nav-bold" href="{{ .Site.BaseURL }}">~/blog</a>
     <ul class="nav-links">
-    {{ range .Site.Menus.main }}
-    <li class="nav-item"><a href="{{ absURL .URL }}">{{ .Title }}</a></li>
-    {{ end }}
+      {{ range .Site.Menus.main }}
+      <li class="nav-item"><a class="nav-bold" href="{{ absURL .URL }}">{{ .Title }}</a></li>
+      {{ end }}
     </ul>
   </nav>
 </header>
diff --git a/static/css/custom.css b/static/css/custom.css
index ae6d674..70ce618 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,37 +1,40 @@
 body {
   font-family: sans-serif;
-  font-size: 1.125em;
-  line-height: 1.5;
-  color: #37474f;
+  font-size: 1em;
+  line-height: 1.8em;
+  color: #0e0e0b;
   margin: 1em auto;
   padding: 0 0.55em;
-  max-width: 45rem;
-}
-
-@media screen and (min-width:58rem) {
-  body,
-  main {
-    max-width:calc(45rem + 15rem);
-  }
-  main {
-    display: flex;
-  }
+  max-width: 50rem;
 }
 
 h1 {
+  color: #0e0e0b;
   font-size: 2rem;
   margin-top: 1em;
   margin-bottom: 0.34em;
 }
 
-h2 {margin-top: 1.25em; margin-bottom: 0.41em}
-h3 {margin-top: 1.5em; margin-bottom: 0.5em}
+h2, h3 {
+  border-bottom: 1px solid #eee;
+  font-style: italic;
+}
+h2 {
+  margin-top: 1.25em;
+  margin-bottom: 0.41em;
+  font-size: 1.4rem;
+}
+h3 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  font-size: 1.2rem;
+}
 
 hr{
   color:#000111;
   background-color:#000111;
   border:none;
-  height:2px
+  height:1px
 }
 
 a {
@@ -64,10 +67,12 @@ p code {
   color: black;
   background-color: #eee;
   padding: 0 0.2rem;
+  font-size: 1.1em;
 }
 
 pre {
   font-family: monospace;
+  font-size: 1.1em;
   margin: 0;
   word-wrap: normal;
   padding: 0.8em;
@@ -130,20 +135,15 @@ blockquote {
 }
 
 nav {
-  width: 100%;
   padding-right: 10px;
+  font-size: 1.4em;
   display: flex;
+  font-family: monospace;
   justify-content: space-between;
   align-items: center;
   padding-top: 0.5rem;
 }
 
-@media screen and (min-width:58rem) {
-  nav {
-    max-width: calc(45rem + 15rem);
-  }
-}
-
 .nav-links {
   list-style: none;
   display: flex;
@@ -151,51 +151,51 @@ nav {
 
 .navbar a {
   display: inline-block;
-  padding-right: 10px;
+  text-decoration: none;
+}
+
+.navbar a:hover {
+  background-color: #b72d2d;
+  color: #fafafa;
+  text-decoration: none;
+}
+
+.nav-bold {
+  font-weight: 700;
+  color: #b72d2d;
+  text-decoration: none;
 }
 
 article {
-  max-width: 45rem;
+  text-align: justify;
 }
 
-#toc {display: none}
+.post-permalink {
+  list-style: none;
+  margin-left: -20px;
+}
 
-#toc_small {
-  font-size: 0.9rem;
-  margin-bottom: 2rem;
-  margin-top: 2rem;
+.post-date {
+  font-family: monospace;
+  font-weight: 400;
+  font-size: 1.1em;
 }
-@media screen and (min-width:58rem) {
-  #toc_small {display: none;}
+
+footer {
+  border-top: 2px solid #eee;
+  margin-top: 2em;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: left;
 }
 
-summary {
-  display:flex;
-  flex-direction:column;
+footer a, footer a:link, footer a:focus, footer a:active, footer a:hover {
+  color: black;
+  text-decoration: none;
+  padding: 5px;
 }
 
-#TableOfContents > ul, #TableOfContents > ul > li > ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-#TableOfContents li {margin-bottom: 1rem;}
-
-@media screen and (min-width:58rem) {
-  #toc {
-    padding-left: 1rem;
-    padding-top: 4.5rem;
-    font-size: 0.9rem;
-    display:block;
-    position:sticky;
-    top:0;
-    align-self:flex-start;
-    max-width:15rem;
-    z-index:1;
-  }
-  #TableOfContents {
-    border-left: 3px solid #eee;
-    padding-left: 1rem;
-  }
+footer a:not(:first-child) {
+  margin-left: 15px;
 }