language-servers/language-server-protocol
1
0
Fork 0
mirror of https://github.com/microsoft/language-server-protocol.git synced 2025-12-23 08:48:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make navigation sticky using position: sticky

Browse source
This commit is contained in:
Kenneth Auchenberg 2018-01-10 16:57:48 -08:00
parent cf8a84452a
commit 321c2995b7
4 changed files with 55 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
_includes/topnav.html
View file

@ -1,4 +1,4 @@
<header class="navbar navbar-expand-lg navbar-dark bg-primary">
<header class="navbar navbar-expand-lg navbar-dark bg-primary lsp-navbar">
<div class="container navbar-container">
<a class="navbar-brand" href="{{ site.baseurl }}/">
{% if page.sectionid != nil %}

5
_layouts/implementors.html
View file

@ -4,9 +4,8 @@ layout: default
<div class="container">
<div class="row single-page">
<div class="col-lg-3 col-xl-2 d-none d-lg-block">
<div class="card sticky-top" style="top: 40px">
<div class="col-lg-3 col-xl-2 d-none d-lg-block lsp-sidebar">
<div class="card">
<ul class="nav flex-column list-unstyled">
{% assign sorted = site.implementors | sort: 'index' %}
{% for post in sorted %}

44
_layouts/specification.html
View file

@ -11,33 +11,31 @@ layout: default
<div id="markdown-content-container">{{ content }}</div>
</div>
<div class="col-lg-3 col-xl-2 d-none d-lg-block">
<div class="sticky-top" style="top: 40px">
{% for toc-l1 in site.data.specification-toc %}
<div class="card">
<div id="outlineAccordion" data-children=".item">
{% for toc-l2 in toc-l1.children %}
<div class="item">
<a class="nav-link" data-toggle="collapse" data-parent="#outlineAccordion" href="#{{ toc-l2.anchor }}" aria-expanded="true" aria-controls="exampleAccordion1">
{{ toc-l2.title }}
</a>
<div id="{{ toc-l2.anchor }}" class="collapse {% if toc-l2.anchor=='general' %}show{% endif%}" role="tabpanel">
<ul class="nav toc flex-column" style="padding-left: 0.5rem">
{% for toc-l3 in toc-l2.children %}
<li class="nav-item">
<a class="nav-link toc-link" href="#{{ toc-l3.anchor }}">
{{ toc-l3.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="col-lg-3 col-xl-2 d-none d-lg-block lsp-sidebar">
{% for toc-l1 in site.data.specification-toc %}
<div class="card">
<div id="outlineAccordion" data-children=".item">
{% for toc-l2 in toc-l1.children %}
<div class="item">
<a class="nav-link" data-toggle="collapse" data-parent="#outlineAccordion" href="#{{ toc-l2.anchor }}" aria-expanded="true" aria-controls="exampleAccordion1">
{{ toc-l2.title }}
</a>
<div id="{{ toc-l2.anchor }}" class="collapse {% if toc-l2.anchor=='general' %}show{% endif%}" role="tabpanel">
<ul class="nav toc flex-column" style="padding-left: 0.5rem">
{% for toc-l3 in toc-l2.children %}
<li class="nav-item">
<a class="nav-link toc-link" href="#{{ toc-l3.anchor }}">
{{ toc-l3.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>

37
css/main.scss
View file

@ -18,10 +18,11 @@ body {
}
.header-container {
// background: url('../protocol.jpg');
color: #fff;
margin-bottom: 80px;
@media (min-width: 576px) {
margin-bottom: 80px;
}
h1 {
margin-top: 15px;
@ -347,13 +348,20 @@ pre[class=highlight] {
}
.footer {
padding: 50px 0;
padding: 15px 0;
color: #000;
background: #e9ecef;
@media (min-width: 576px) {
padding: 50px 0;
}
img {
width: 100px;
float: right;
@media (min-width: 576px) {
float: right;
}
}
ul {
@ -378,7 +386,7 @@ pre[class=highlight] {
padding-bottom: 10px;
@media (min-width: 576px) {
display: inline-block;
display: inline-block;
padding: 0;
}
}
@ -390,6 +398,23 @@ pre[class=highlight] {
}
}
@media (min-width: 768px) {
.lsp-navbar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1071;
}
.lsp-sidebar {
position: -webkit-sticky;
position: sticky;
top: 100px;
z-index: 1000;
height: calc(100vh - 100px);
}
}
.navbar-brand h1 {
font-size: 18px;
font-weight: bold;