- Removed full sidebar for mobile view to prevent large amount of links
to scroll past.
- Adjusted main breakpoint size to better align to grid system used.
- Fixed large images pushing out content on mobile
<div class="container">
<div class="row">
- <aside class="col-sm-2 sidebar">
+ <aside class="col-md-2 sidebar">
<div class="sidebar-inner">
{{ if eq .Type "admin-doc" }}
{{partial "menu_admin_docs"}}
{{partial "menu_user_docs"}}
{{end}}
</div>
+ <div class="sidebar-inner mobile">
+ <ul>
+ <li><a href="/docs">« All Documentation</a></li>
+ </ul>
+ </div>
</aside>
- <main class="col-sm-8 col-sm-offset-1 docs-content">
+ <main class="col-md-8 col-md-offset-1 docs-content">
<h1>{{.Title}}</h1>
@extend .code-base;
display: inline;
padding: 1px 3px;
- white-space:pre;
+ white-space: pre-wrap;
line-height: 1.2em;
margin-bottom: 1.2em;
color: #c54545;
// Screen breakpoints
$xl: 1100px;
$ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality.
-$l: 1000px;
+$l: 992px;
$m: 800px;
$s: 600px;
$xs: 400px;
img, video {
border: 1px solid $primary;
border-radius: 3px;
+ max-width: 100%;
}
video {
cursor: pointer;
margin: $-l auto;
display: block;
- max-width: 100%;
}
}
border-right: 2px dotted #E5E5E5;
}
-@include larger-than($xl) {
+.sidebar-inner {
+ display: none;
+}
+.sidebar-inner.mobile {
+ display: block;
+}
+
+
+@include larger-than($l) {
.sidebar {
position: sticky;
top: $-m;
}
-}
-
-@include smaller-than($m) {
- .sidebar li a {
- padding: $-xs 0;
+ .sidebar-inner {
display: block;
}
+ .sidebar-inner.mobile {
+ display: none;
+ }
}
-
h2.thin-margin {
margin-top: 0;
}