Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
+// Links
+$link-color: $primary;
+
// Navbar
$navbar-brand-font-size: 36px;
$navbar-brand-height: 32px;
// Navbar
$navbar-brand-font-size: 36px;
$navbar-brand-height: 32px;
+ // For scrollspy
+ position: relative;
+
min-height: 75rem;
padding-top: 6rem;
}
min-height: 75rem;
padding-top: 6rem;
}
+.nav {
+ .nav-link {
+ color: $blue-grey-900;
+
+ &.active {
+ color: $link-color;
+ border-left: 2px solid $link-color;
+ }
+ }
+}
+
footer {
.btn-toolbar .icon {
height: 2.25rem;
footer {
.btn-toolbar .icon {
height: 2.25rem;
+// Sidebar navigation
+
+#sidebar .nav {
+ position: fixed;
+}
+
.page-scroll {
display: block;
visibility: visible;
.page-scroll {
display: block;
visibility: visible;
<script src="{{ static_url("js/popper.min.js") }}"></script>
<script src="{{ static_url("js/bootstrap.min.js") }}"></script>
<script src="{{ static_url("js/site.js") }}"></script>
<script src="{{ static_url("js/popper.min.js") }}"></script>
<script src="{{ static_url("js/bootstrap.min.js") }}"></script>
<script src="{{ static_url("js/site.js") }}"></script>
+ {% block javascript %}{% end block %}
<!-- <script src="{{ static_url("js/jquery.easing.js") }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<!-- <script src="{{ static_url("js/jquery.easing.js") }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<nav id="sidebar" class="col-12 col-md-3" role="dropdown">
<div class="container">
<div class="row">
<nav id="sidebar" class="col-12 col-md-3" role="dropdown">
- <input type="checkbox" id="menu">
- <label for="menu" onclick></label>
<ul class="nav flex-column features_nav">
<li class="nav-item"><a class="nav-link active" href="#about">About IPFire</a></li>
<li class="nav-item"><a class="nav-link" href="#security">Security</a></li>
<ul class="nav flex-column features_nav">
<li class="nav-item"><a class="nav-link active" href="#about">About IPFire</a></li>
<li class="nav-item"><a class="nav-link" href="#security">Security</a></li>
- <section class="content col-12 col-md-9 features">
+ <section class="content col-12 col-md-9">
<div class="card">
<div class="card-body">
<section id="about">
<div class="card">
<div class="card-body">
<section id="about">
- <script>
- $(document).ready(function () {
- $('body').scrollspy({ target: '#sidebar', offset: 148 })
-
- $('a[href^="#"]').on('click', function(event) {
- var target = $(this.getAttribute('href'));
- if( target.length ) {
- event.preventDefault();
- $('html, body').stop().animate({
- scrollTop: target.offset().top -147
- }, 750);
- }
- });
- });
- </script>
-
<!-- Gallery Lightbox -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Gallery Lightbox -->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
</symbol>
</svg>
{% end block %}
</symbol>
</svg>
{% end block %}
+
+{% block javascript %}
+ <script>
+ $(document).ready(function () {
+ $("body").scrollspy({ target: "#sidebar", offset: 148 })
+
+ $("a[href^='#']").on("click", function(event) {
+ var target = $(this.getAttribute("href"));
+ if (target.length) {
+ event.preventDefault();
+
+ $("html, body").stop().animate({
+ scrollTop: target.offset().top - 147
+ }, 750);
+ }
+ });
+ });
+ </script>
+{% end block %}