diff --git a/assets/css/site.css b/assets/css/site.css index bf30d59..79c5bdd 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -5,14 +5,14 @@ --page-gutter: 24px; --header-height: 48px; --footer-height: 48px; - --sidebar-top: 70px; + --sidebar-top: 72px; --content-width: 40rem; --content-height: calc(100vh - (var(--page-top) * 2) - var(--footer-height)); - @media (min-width: 640px) { - --page-top: 192px; - --sidebar-top: 300px; + @media (min-width: 1080px) { + --page-top: 128px; + --sidebar-top: 144px; --page-gutter: 48px; } } @@ -119,6 +119,12 @@ pre > code { /* ################################# */ /* # Table of contents # */ /* ################################# */ +@media screen and (min-width: 1080px) { + #toc { + @apply fixed top-0 left-0 z-40 w-1/4 px-page-gutter py-sidebar-top; + } +} + #toc-list ol { @apply pl-3 m-1 border-l-2 text-sm text-muted; counter-reset: tocitem; diff --git a/layouts/_default/single.html b/layouts/_default/single.html index d20e1df..faa852d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -4,17 +4,7 @@

{{ .Title | emojify }}

{{- partial "date" .Date -}}{{ if ne .Date .Lastmod }}⇢ {{- partial "date" .Lastmod -}}{{ end }} {{- partial "tag" . -}} - - {{ if default true (default .Site.Params.toc .Params.toc) }} - {{ if gt (.TableOfContents | countwords) - 0 - }} -
- Table of contents -
{{ .TableOfContents }}
-
- {{ end }} - {{ end }} + {{- partial "toc.html" . -}} {{- partial "custom/content-before.html" . -}}
{{ .Content | emojify }}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html new file mode 100644 index 0000000..efb2aed --- /dev/null +++ b/layouts/partials/toc.html @@ -0,0 +1,13 @@ + +
+ {{ if default true (default .Site.Params.toc .Params.toc) }} + {{ if gt (.TableOfContents | countwords) + 0 + }} +
+ Table of contents +
{{ .TableOfContents }}
+
+ {{ end }} + {{ end }} +