add a menu and improve readability

Add a menu with links to some sections. Tweak the CSS to make the
website a bit more readable.

8 files changed, 260 insertions, 91 deletions

diff --git a/content/_index.md b/content/_index.md
index f17087d..f11ae83 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,9 +1,3 @@
 ---
 title: "home"
 ---
-
-My name is Franck Cuny and this is my little corner on the web.
-
-I currently work as a [Site Reliability Engineer](https://en.wikipedia.org/wiki/Site_reliability_engineering) (SRE) at [Roblox](https://www.roblox.com). Previously, I worked as a SRE at [Twitter](https://twitter.com/TwitterEng), and my focus was on infrastructure.
-
-I'm interested in building sustainable teams, improving the management and operation of large infrastructure, and to work with different teams to implement best practices around reliability and security.
diff --git a/static/css/custom.css b/static/css/custom.css
index ece5457..5c3901b 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,24 +1,142 @@
 body {
-  margin: 1em auto;
-  max-width: 46rem;
-  line-height: 1.6;
+  margin: 0;
   font-family: sans-serif;
   font-size: 1rem;
+  line-height: 1.6;
 }
 
-h1 {
-  font-size: 1.2rem;
+.container {
+  display: flex;
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 1em;
 }
 
-h2 {
-  font-size: 1.1rem;
-  border-left: 5px solid #ffc832;
-  padding-left: 0.2em;
+.menu {
+  flex: 0 0 auto;
+  margin-right: 2em;
 }
 
-h3 {
-  font-size: 1rem;
-  font-weight: normal;
+.content {
+  flex: 1;
+  max-width: 46rem;
+}
+
+.menu ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.menu li:first-child {
+  margin-top: 0;
+}
+
+.menu li {
+  margin-bottom: 0.3em;
+}
+
+.menu a {
+  text-decoration: none;
+  color: #333;
+  padding: 0.2em 0.5em;
+  display: inline-block;
+  white-space: nowrap;
+}
+
+.menu a:hover {
+  text-decoration: underline;
+  background-color: #f0f0f0;
+}
+
+.section {
+  margin-top: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  line-height: 1.25;
+  font-weight: 600;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+.post-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.post-list li {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 0.5em;
+}
+
+.post-list a {
+  text-decoration: none;
+  color: #333;
+  max-width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.post-list a:hover {
+  text-decoration: underline;
+}
+
+.post-date {
+  font-size: 0.9em;
+  color: #666;
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .menu {
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 1em;
+  }
+
+  .menu ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .menu li {
+    margin-right: 1em;
+    margin-bottom: 0.5em;
+  }
+
+  .post-list li {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .post-list a {
+    max-width: 100%;
+    margin-bottom: 0.2em;
+  }
+}
+
+h1 {
+  font-size: 1.4rem;
+}
+h2 {
+    font-size: 1.3rem;
+}
+h3{
+    font-size: 1.2rem
 }
 
 a {
@@ -33,25 +151,29 @@ a:active {
 }
 
 code {
-  font-family: monospace;
-  font-size: 0.8rem;
+    font-family: monospace;
+    font-size: 90%;
   overflow-x: auto;
-  padding: 0.2rem 0.5rem;
-  margin: 0 0.2rem;
+
   border-radius: 4px;
 }
 
 pre {
+  padding: 0.2rem 0.5rem;
   overflow: auto;
-  font-size: 0.8rem;
   overflow-x: auto;
-  margin: 0 0.2rem;
+    font-size: 90%;
 }
 
 pre > code {
   display: block;
 }
 
+
+p > code {
+    background: #eee;
+};
+
 section.times time {
   font-style: oblique;
   float: right;
@@ -109,3 +231,54 @@ ul {
 li {
   display: list-item;
 }
+
+
+/* Table of Contents styles */
+.toc-container {
+  margin-bottom: 2em;
+}
+
+.toc-toggle {
+  background-color: #f0f0f0;
+  border: 1px solid #ccc;
+  color: #333;
+  padding: 0.5em 1em;
+  cursor: pointer;
+  font-size: 0.9em;
+  transition: background-color 0.3s;
+}
+
+.toc-toggle:hover {
+  background-color: #e0e0e0;
+}
+
+.toc {
+  border: 1px solid #ccc;
+  background-color: #f9f9f9;
+  padding: 1em;
+  margin-top: 0.5em;
+}
+
+.toc ul {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.toc ul ul {
+  padding-left: 1.5em;
+}
+
+.toc li {
+  margin-bottom: 0.5em;
+}
+
+.toc a {
+  text-decoration: none;
+  color: #333;
+  transition: color 0.3s;
+}
+
+.toc a:hover {
+  color: #ffc832;
+}
diff --git a/templates/base.html b/templates/base.html
index 75d108c..b903da3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,16 +5,32 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="canonical" href="{{- current_url|safe -}}" />
     <link rel="stylesheet" href="/css/custom.css" />
+    <link rel="stylesheet" href="/css/carousel.css" />
 
     <meta name="author" content="{{- config.author -}}" />
     <meta name="description" content="{%- block description -%}{{- config.description -}}{%- endblock description -%}" />
     <link rel="alternate" type="application/atom+xml" title="Blog posts" href="{{ get_url(path="/feed.xml", trailing_slash=false) }}" />
+    <script src="/js/carousel.js"></script>
 
     <title>{% block title %}{{- config.title -}}{% endblock title %}</title>
   </head>
 
   <body>
-    {% block content %}{% endblock content %}
+    <div class="container">
+      <nav class="menu">
+	<ul>
+	  <li><a href="/">Home</a></li>
+	  <li><a href="/blog">Blog</a></li>
+	  <li><a href="/notes">Notes</a></li>
+	  <li><a href="/about">About</a></li>
+	  <li><a href="https://git.fcuny.net">Code</a></li>
+	</ul>
+      </nav>
+
+      <div class="content">
+	{% block content %}{% endblock content %}
+      </div>
+    </div>
   </body>
 
 </html>
diff --git a/templates/blog.html b/templates/blog.html
index 0e3c2bf..cfdd8c2 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -1,20 +1,19 @@
 {% extends "section.html" %}
 
 {%- block content -%}
-<h1>{{ section.title }}</h1>
-{%- for year, posts in section.pages | group_by(attribute="year") -%}
-<section class="times">
-<h2>{{ year }}</h2>
 
-<ul>
+{%- for year, posts in section.pages | group_by(attribute="year") -%}
+<section>
+<ul class="post-list">
 {%- for post in posts %}
-	<li>
-		<h3><a href="{{- post.path|safe -}}">{{- post.title -}}</a></h3>
-		<time datetime="{{ post.date | date(format="%+")}}">{{ post.date | date(format="%d %h %Y")}}</time>
-	</li>
+<li>
+  <a href="{{- post.path|safe -}}">{{- post.title -}}</a>
+  <span class="post-date">{{ post.date | date(format="%d %h %Y")}}</span>
+</li>
 {%- endfor %}
 </ul>
 
 </section>
 {%- endfor %}
+
 {%- endblock content -%}
diff --git a/templates/index.html b/templates/index.html
index 5c11ab3..cf3e4b3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,38 +1,33 @@
 {% extends "base.html" %}
 
 {%- block content -%}
-<section id="blog" class="times">
 
-{% if section.content %}
-<section id="introduction">
-  {{ section.content | safe }}
-</section>
-{% endif %}
-
-<h2>articles ⇢</h2>
-{%- set blog = get_section(path="blog/_index.md") -%}
-{%- set post_count = blog.pages | length -%}
-{%- for post in blog.pages %}
-<article>
-    <h3><a href="{{- post.path|safe -}}">{{- post.title -}}</a></h3>
-    <time datetime="{{ post.date | date(format="%+")}}">{{ post.date | date(format="%B %m, %Y")}}</time>
-</article>
-{%- endfor %}
-
-<h2>notes ⇢</h2>
-{%- set notes = get_section(path="notes/_index.md") -%}
-{%- set post_count = notes.pages | length -%}
-{%- for post in notes.pages %}
-<article>
-    <h3><a href="{{- post.path|safe -}}">{{- post.title -}}</a></h3>
-    <time datetime="{{ post.date | date(format="%+")}}">{{ post.date | date(format="%B %m, %Y")}}</time>
-</article>
-{%- endfor %}
-
-<h2>contact</h2>
-
-Email: <a href="mailto:franck@fcuny.net">franck@fcuny.net</a>
-
-</section>
+<div class="content">
+  <div id="blog" class="section times">
+    <b>articles ⇢</b>
+    {%- set blog = get_section(path="blog/_index.md") -%}
+    {%- set post_count = blog.pages | length -%}
+    <ul class="post-list">
+      {%- for post in blog.pages %}
+      <li>
+        <a href="{{ post.path | safe }}">{{ post.title }}</a>
+        <span class="post-date">{{ post.date | date(format="%B %d, %Y")}}</span>
+      </li>
+      {%- endfor %}
+    </ul>
+
+    <b>notes ⇢</b>
+    {%- set notes = get_section(path="notes/_index.md") -%}
+    {%- set post_count = notes.pages | length -%}
+    <ul class="post-list">
+      {%- for post in notes.pages %}
+      <li>
+        <a href="{{ post.path | safe }}">{{ post.title }}</a>
+        <span class="post-date">{{ post.date | date(format="%B %d, %Y")}}</span>
+      </li>
+      {%- endfor %}
+    </ul>
+  </div>
+</div>
 
 {%- endblock content -%}
diff --git a/templates/orphan.html b/templates/orphan.html
index 2469ecf..020c8a6 100644
--- a/templates/orphan.html
+++ b/templates/orphan.html
@@ -4,7 +4,8 @@
 
 {% block content -%}
 <main>
-<h1>{{- page.title -}}</h1>
-{{ page.content | safe -}}
+  <h1>{{- page.title -}}</h1>
+
+  {{ page.content | safe -}}
 </main>
 {%- endblock content -%}
diff --git a/templates/page.html b/templates/page.html
index 1026cd0..53a7be3 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -4,25 +4,16 @@
 
 {% block content -%}
 <main>
-<h1>{{ page.title }}</h1>
-<p class="date">
-	<time datetime="{{ page.date | date(format="%+") }}">
-		{{- page.date | date(format="%B %m, %Y") -}}
-	</time>
-	{%- if page.updated %}
-	•
-	updated <time datetime="{{ page.updated | date(format="%+") }}">
-		{{- page.updated | date(format="%B %m, %Y") -}}
-	</time>
-	{%- endif %}
-</p>
+  <h1>{{ page.title }}</h1>
 
-{{ page.content | safe -}}
-</main>
+  {{ page.content | safe -}}
+
+  <p class="date">
+    <time datetime="{{ page.date | date(format="%+") }}">
+      {{- page.date | date(format="%B %m, %Y") -}}
+    </time>
+  </p>
 
-<hr>
-<p>
-<b><a href="/">↑ back home</a></b>
-</p>
+</main>
 
 {%- endblock content %}
diff --git a/templates/section.html b/templates/section.html
index 7130c84..e6b6694 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -6,11 +6,11 @@
 <h1>{{ section.title }}</h1>
 <ul>
 {% for post in section.pages %}
-	<li>
-		<a href="{{ post.permalink }}">{{ post.title }}</a>
-		<br>
-		<small>{{ post.date | date(format="%d %h %Y") }}</small>
-	</li>
+<li>
+  <a href="{{ post.permalink }}">{{ post.title }}</a>
+  <br>
+  <small>{{ post.date | date(format="%d %h %Y") }}</small>
+</li>
 {% endfor %}
 </ul>
 {% endblock content %}