swap kramdown toc for jekyll-toc plugin, update page layout to only show on xl and above
This commit is contained in:
Mark Otto
parent
3b8202db93
commit
a3f7639728
1
Gemfile
1
Gemfile
|
|
@ -4,5 +4,6 @@ group :development, :test do
|
|||
gem 'jekyll', '~> 3.4.3'
|
||||
gem 'jekyll-redirect-from', '~> 0.12.1'
|
||||
gem 'jekyll-sitemap', '~> 1.1.1'
|
||||
gem 'jekyll-toc', '~> 0.3.0.pre1'
|
||||
gem 'scss_lint', '~> 0.53.0'
|
||||
end
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ GEM
|
|||
sass (~> 3.4)
|
||||
jekyll-sitemap (1.1.1)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-toc (0.3.0.pre1)
|
||||
nokogiri (~> 1.6)
|
||||
jekyll-watch (1.5.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
kramdown (1.13.2)
|
||||
|
|
@ -31,6 +33,9 @@ GEM
|
|||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.1.0)
|
||||
nokogiri (1.7.2)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
pathutil (0.14.0)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (2.0.5)
|
||||
|
|
@ -52,6 +57,7 @@ DEPENDENCIES
|
|||
jekyll (~> 3.4.3)
|
||||
jekyll-redirect-from (~> 0.12.1)
|
||||
jekyll-sitemap (~> 1.1.1)
|
||||
jekyll-toc (~> 0.3.0.pre1)
|
||||
scss_lint (~> 0.53.0)
|
||||
|
||||
BUNDLED WITH
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ exclude: [assets/scss/]
|
|||
gems:
|
||||
- jekyll-redirect-from
|
||||
- jekyll-sitemap
|
||||
- jekyll-toc
|
||||
|
||||
# Social
|
||||
title: Bootstrap
|
||||
|
|
|
|||
|
|
@ -17,12 +17,18 @@
|
|||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||||
{% include nav-docs.html %}
|
||||
</div>
|
||||
<main class="col-12 col-md-9 col-xl-auto py-md-3 pl-md-5 bd-content" role="main">
|
||||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||||
<h1 class="bd-title" id="content">{{ page.title }}</h1>
|
||||
<p class="bd-lead">{{ page.description }}</p>
|
||||
{% include ads.html %}
|
||||
{{ content }}
|
||||
</main>
|
||||
|
||||
{% if page.toc %}
|
||||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||||
{{ content | toc_only }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,32 +5,6 @@
|
|||
//
|
||||
|
||||
.bd-content {
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex: 1;
|
||||
padding-right: 20%;
|
||||
|
||||
#contents {
|
||||
display: none;
|
||||
}
|
||||
#markdown-toc {
|
||||
position: fixed;
|
||||
top: 5rem;
|
||||
right: 0;
|
||||
width: 20%;
|
||||
max-height: calc(100vh - 8rem);
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 3rem;
|
||||
overflow-y: auto;
|
||||
font-size: .85rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2000px) {
|
||||
#markdown-toc {
|
||||
padding-left: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Hack the sticky header
|
||||
h2[id],
|
||||
h3[id] {
|
||||
|
|
@ -126,21 +100,3 @@
|
|||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Markdown generated ToC
|
||||
//
|
||||
|
||||
#markdown-toc {
|
||||
// Hide the first child li because it's always going to be "Contents".
|
||||
> li:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 2rem;
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,40 @@
|
|||
// Side navigation
|
||||
//
|
||||
|
||||
.bd-toc {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
max-height: calc(100vh - 4rem);
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
overflow-y: auto;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
.section-nav {
|
||||
padding-left: 0;
|
||||
border-left: 1px solid #eee;
|
||||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-entry {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .25rem 1.5rem;
|
||||
color: #99979c;
|
||||
|
||||
&:hover {
|
||||
color: $brand-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-sidebar {
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid rgba(0,0,0,.1);
|
||||
|
|
@ -93,6 +127,7 @@
|
|||
|
||||
> .bd-sidenav {
|
||||
display: block;
|
||||
padding-bottom: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,18 +4,13 @@ title: Introduction
|
|||
description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.
|
||||
group: getting-started
|
||||
redirect_from: "/getting-started/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
<!-- Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. -->
|
||||
|
||||
<!-- Here's how to quickly get started with the Bootstrap CDN and a template starter page. -->
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
* Will be replaced with the ToC, excluding the "Contents" header
|
||||
{:toc}
|
||||
|
||||
## Quick start
|
||||
|
||||
Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/)
|
||||
|
|
|
|||
Loading…
Reference in New Issue