From 6cec505270210327498736c9d9828f14e1302b4b Mon Sep 17 00:00:00 2001 From: Franck Cuny Date: Wed, 16 Feb 2022 09:17:35 -0800 Subject: 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. --- config.toml | 22 +------- layouts/_default/baseof.html | 1 + layouts/index.html | 19 +++---- layouts/partials/footer.html | 32 ++++++++++++ layouts/partials/header.html | 12 ++--- static/css/custom.css | 120 +++++++++++++++++++++---------------------- 6 files changed, 110 insertions(+), 96 deletions(-) create mode 100644 layouts/partials/footer.html diff --git a/config.toml b/config.toml index 1fe49bc..c47b946 100644 --- a/config.toml +++ b/config.toml @@ -20,32 +20,14 @@ enableGitInfo = true tags = "/tags/:slug/" [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 @@
{{ block "main" . }}{{ end }}
+ {{- partial "footer.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 @@
-

{{ .Site.Home.Title }}

+

I'm a Principal SRE, currently working at Roblox. Previously I worked at Twitter for over 7 years, and my main focus was on Twitter's compute platform.

-

I'm an engineer currently on a break. Previously I was a Site Reliability Engineer working on Twitter's compute platform.

+

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.

-

Contact

- +

Posts

+
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 @@ + 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 @@
-
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; } -- cgit 1.4.1