From be4f48652da9177e01e7dd046146d597c99d4b54 Mon Sep 17 00:00:00 2001 From: bep Date: Mon, 11 May 2015 18:39:40 +0200 Subject: [PATCH] Add ToC to long pages * A compact, fixed box in the right screen * Only for big screens, > 1200 px wide --- docs/.gitignore | 1 + docs/content/extras/crossreferences.md | 1 + docs/content/extras/dynamiccontent.md | 1 + docs/content/extras/highlighting.md | 1 + docs/content/extras/menus.md | 2 + docs/content/extras/shortcodes.md | 2 + docs/content/templates/functions.md | 1 + .../tutorials/automated-deployments.md | 1 + .../content/tutorials/creating-a-new-theme.md | 2 + docs/content/tutorials/github-pages-blog.md | 1 + docs/content/tutorials/installing-on-mac.md | 5 +- .../tutorials/installing-on-windows.md | 1 + docs/content/tutorials/migrate-from-jekyll.md | 2 + docs/layouts/_default/single.html | 9 ++++ docs/layouts/partials/footer.html | 8 +-- docs/layouts/partials/header.html | 6 ++- docs/static/css/style.css | 50 ++++++++++++++++--- 17 files changed, 80 insertions(+), 14 deletions(-) create mode 100644 docs/.gitignore diff --git a/docs/.gitignore b/docs/.gitignore new file mode 100644 index 00000000000..a09c56df5c7 --- /dev/null +++ b/docs/.gitignore @@ -0,0 +1 @@ +/.idea diff --git a/docs/content/extras/crossreferences.md b/docs/content/extras/crossreferences.md index 19a3a9526d5..0b37cc09c89 100644 --- a/docs/content/extras/crossreferences.md +++ b/docs/content/extras/crossreferences.md @@ -6,6 +6,7 @@ menu: next: /extras/livereload prev: /extras/comments title: Cross-References +toc: true weight: 40 --- diff --git a/docs/content/extras/dynamiccontent.md b/docs/content/extras/dynamiccontent.md index 9691ede33ad..2874f3b65b9 100644 --- a/docs/content/extras/dynamiccontent.md +++ b/docs/content/extras/dynamiccontent.md @@ -9,6 +9,7 @@ next: /extras/highlighting prev: /extras/datafiles title: Dynamic Content weight: 91 +toc: true --- Dynamic content with a static site generator? Yes, it is possible! diff --git a/docs/content/extras/highlighting.md b/docs/content/extras/highlighting.md index 8296861d4a0..240c33057ad 100644 --- a/docs/content/extras/highlighting.md +++ b/docs/content/extras/highlighting.md @@ -9,6 +9,7 @@ next: /extras/toc prev: /extras/shortcodes title: Syntax Highlighting weight: 90 +toc: true --- Hugo provides the ability for you to highlight source code in two different diff --git a/docs/content/extras/menus.md b/docs/content/extras/menus.md index bcdee6afa17..05d40e5f9c9 100644 --- a/docs/content/extras/menus.md +++ b/docs/content/extras/menus.md @@ -1,5 +1,7 @@ --- date: 2014-05-14T02:36:37Z +toc: true +tocstyle: compact menu: main: parent: extras diff --git a/docs/content/extras/shortcodes.md b/docs/content/extras/shortcodes.md index 79c6871cd0a..790fba970af 100644 --- a/docs/content/extras/shortcodes.md +++ b/docs/content/extras/shortcodes.md @@ -9,6 +9,8 @@ next: /extras/pagination prev: /extras/permalinks title: Shortcodes weight: 80 +toc: true +tocstyle: compact --- Hugo uses Markdown for its simple content format. However, there are a lot diff --git a/docs/content/templates/functions.md b/docs/content/templates/functions.md index c380b091b55..ec857fbce6e 100644 --- a/docs/content/templates/functions.md +++ b/docs/content/templates/functions.md @@ -3,6 +3,7 @@ aliases: - /layout/functions/ date: 2013-07-01 linktitle: Functions +toc: true menu: main: parent: layout diff --git a/docs/content/tutorials/automated-deployments.md b/docs/content/tutorials/automated-deployments.md index 1194455b8ab..66a41c19da6 100644 --- a/docs/content/tutorials/automated-deployments.md +++ b/docs/content/tutorials/automated-deployments.md @@ -2,6 +2,7 @@ author: "Arjen Schwarz" date: 2015-01-12 linktitle: Automated deployments +toc: true menu: main: parent: tutorials diff --git a/docs/content/tutorials/creating-a-new-theme.md b/docs/content/tutorials/creating-a-new-theme.md index d46413b7687..4113636ade9 100644 --- a/docs/content/tutorials/creating-a-new-theme.md +++ b/docs/content/tutorials/creating-a-new-theme.md @@ -2,6 +2,8 @@ author: "Michael Henderson" date: 2014-09-28 linktitle: Creating a New Theme +toc: true +tocstyle: compact menu: main: parent: tutorials diff --git a/docs/content/tutorials/github-pages-blog.md b/docs/content/tutorials/github-pages-blog.md index c003c84f38a..41d7e4db60b 100644 --- a/docs/content/tutorials/github-pages-blog.md +++ b/docs/content/tutorials/github-pages-blog.md @@ -4,6 +4,7 @@ aliases: author: Spencer Lyon date: 2014-03-21 linktitle: Hosting on GitHub +toc: true menu: main: parent: tutorials diff --git a/docs/content/tutorials/installing-on-mac.md b/docs/content/tutorials/installing-on-mac.md index 7c1cad17e2c..2ca0b73c3b6 100644 --- a/docs/content/tutorials/installing-on-mac.md +++ b/docs/content/tutorials/installing-on-mac.md @@ -2,6 +2,7 @@ author: "Michael Henderson" date: 2015-02-22 linktitle: Installing on Mac +toc: true menu: main: parent: tutorials @@ -56,7 +57,7 @@ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ When I did this, I had some problems with directory permissions. Searches on Google pointed me to pages that walked me through updating permissions on the `/usr/local` directory. Seemed scary, but it's worked well since. -## Step 2: Run the `brew` command to install `hugo` +### Step 2: Run the `brew` command to install `hugo` Replace `brew install hugo` with `brew install hugo --HEAD` if you want the absolute latest version—there might be bugs! @@ -129,7 +130,7 @@ $ tar tvf ~/Downloads/hugo_0.13_darwin_amd64.zip The `.md` files are documentation. The other file is the executable. -## Step 4: Install into your bin directory +### Step 4: Install into your bin directory ``` $ # create the directory if needed diff --git a/docs/content/tutorials/installing-on-windows.md b/docs/content/tutorials/installing-on-windows.md index beb821d8a87..aea75ed076b 100644 --- a/docs/content/tutorials/installing-on-windows.md +++ b/docs/content/tutorials/installing-on-windows.md @@ -2,6 +2,7 @@ author: "Michael Henderson" date: 2015-03-30 linktitle: Installing on Windows +toc: true menu: main: parent: tutorials diff --git a/docs/content/tutorials/migrate-from-jekyll.md b/docs/content/tutorials/migrate-from-jekyll.md index 75f95585439..1dd5fd324d1 100644 --- a/docs/content/tutorials/migrate-from-jekyll.md +++ b/docs/content/tutorials/migrate-from-jekyll.md @@ -1,6 +1,8 @@ --- date: 2014-03-10 linktitle: Migrating from Jekyll +toc: true +tocstyle: compact menu: main: parent: tutorials diff --git a/docs/layouts/_default/single.html b/docs/layouts/_default/single.html index 16f6ffc1410..864b37b8e5e 100644 --- a/docs/layouts/_default/single.html +++ b/docs/layouts/_default/single.html @@ -1,3 +1,12 @@ {{ partial "header.html" . }} +{{ if .Params.toc }} +
{{ .Content }} +
+
+{{ .TableOfContents }} +
+{{ else }} +{{ .Content }} +{{ end }} {{ partial "footer.html" . }} diff --git a/docs/layouts/partials/footer.html b/docs/layouts/partials/footer.html index f4263759300..e5cd26d37b8 100644 --- a/docs/layouts/partials/footer.html +++ b/docs/layouts/partials/footer.html @@ -1,8 +1,10 @@ -
-
Hugo v{{ .Hugo.Version }} documentation
+ - +
Hugo v{{ .Hugo.Version }} documentation
+ + +
{{ if .IsPage }} {{ with .GetParam "next" }} diff --git a/docs/layouts/partials/header.html b/docs/layouts/partials/header.html index 8da30119837..d06bf4913c9 100644 --- a/docs/layouts/partials/header.html +++ b/docs/layouts/partials/header.html @@ -81,4 +81,8 @@

{{.Title}}

-{{ partial "google-cse.html" . }} +
+
+ {{ partial "google-cse.html" . }} +
+
diff --git a/docs/static/css/style.css b/docs/static/css/style.css index 478134a89b3..66bb45b7ec0 100755 --- a/docs/static/css/style.css +++ b/docs/static/css/style.css @@ -101,7 +101,7 @@ body { font-family: 'Lato', sans-serif; padding: 0px !important; margin: 0px !important; - font-size:16px !important; + font-size:16px !important; font-weight: 300; } @@ -266,13 +266,13 @@ ul.sidebar-menu li.active a, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:fo -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; - transition: all 0.3s ease; + transition: all 0.3s ease; } ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus { border-bottom: 1px solid #ff4088; } /*ul.sidebar-menu li.active a,*/ ul.sidebar-menu .sub-menu li.active a{ - border-bottom: 1px solid #ff4088; + border-bottom: 1px solid #ff4088; } ul.sidebar-menu li a i { @@ -290,10 +290,10 @@ ul.sidebar-menu li.active a i { } -#sidebar ul > li > a .menu-arrow { - float: right; +#sidebar ul > li > a .menu-arrow { + float: right; margin-right: 8px; - margin-top: 6px; + margin-top: 6px; } #main-content { @@ -541,7 +541,7 @@ i.freebsd-19px:before { overflow: hidden; margin: 20px 0; } - + .video-container iframe, .video-container object, .video-container embed { @@ -549,5 +549,39 @@ i.freebsd-19px:before { top: 0; left: 0; width: 100%; - height: 100%; + height: 100%; } + +/* Google custom search */ +.cse { + margin-top: 20px; + padding-right: 20px; +} + + +/* Table of contents */ + +.toc ul { list-style: none; margin: 0; padding: 0 5px; } +.toc ul li { display: inline; } +#TableOfContents > ul > li > ul > li > ul li { margin-right: 8px; } +#TableOfContents > ul > li > ul > li > a, #TableOfContents > ul > li > a { font-weight: bold; background-color: #eeeeee; padding: 0 10px; margin: 0 2px; } +#TableOfContents > ul > li > ul > li > a { font-style: italic; } +.toc.compact ul > li > ul > li > ul { display: none; } + +#toc { + position:fixed; + background-color: rgba(0, 0, 0, 0.1); + padding: 10px 50px 10px 20px; +} + + +@media(max-width:1200px) { + .toc { + display: none; + } +} + + + + +