Rewrite navbar (#1154)
Fixes #877, #872
This commit was merged in pull request #1154.
This commit is contained in:
Dawid Potocki
@@ -1,85 +1,115 @@
|
|||||||
<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
|
<div class="fixed-top bg-dark">
|
||||||
<div class="container">
|
<nav id="navbar">
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
<input type="checkbox" id="nav-toggle" checked />
|
||||||
<ul class="navbar-nav mr-auto">
|
<label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>
|
||||||
<li class="nav-item">
|
<a id="nav-home-mobile" class="nav-anchor" href="/index.html">
|
||||||
<a class="nav-link" href="/index.html"><i class="fas fa-home"></i> <span class="sr-only">Home</span></a>
|
<img src="/assets/img/layout/logo_smaller.png" width="148px" height="22px" />
|
||||||
</li>
|
</a>
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="/providers/" id="providerDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<div class="menu">
|
||||||
Provider
|
|
||||||
</a>
|
<div id="nav-left" class="position-relative flex-col">
|
||||||
<div class="dropdown-menu" aria-labelledby="providerDropdown">
|
<a class="nav-anchor" href="/index.html">
|
||||||
<a class="dropdown-item" href="/providers/#ukusa"><i class="fab fa-creative-commons-nc fa-fw"></i> Avoid US & UK services</a>
|
<span id="nav-home" class="fas fa-home"></span>
|
||||||
<a class="dropdown-item" href="/providers/cloud-storage/"><i class="fas fa-cloud fa-fw"></i> Cloud Storage</a>
|
</a>
|
||||||
<a class="dropdown-item" href="/providers/dns/"><i class="fa fa-tasks fa-fw"></i> DNS</a>
|
|
||||||
<a class="dropdown-item" href="/providers/email/"><i class="fas fa-mail-bulk fa-fw"></i> Email</a>
|
<!-- Provider -->
|
||||||
<a class="dropdown-item" href="/providers/hosting/"><i class="fas fa-database fa-fw"></i> Hosting</a>
|
<details class="nav-details">
|
||||||
<a class="dropdown-item" href="/providers/paste/"><i class="fas fa-paste fa-fw"></i> Pastebins</a>
|
<summary>
|
||||||
<a class="dropdown-item" href="/providers/search-engines/"><i class="fab fa-searchengin fa-fw"></i> Search Engines</a>
|
<span class="nav-summary">
|
||||||
<a class="dropdown-item" href="/providers/social-networks/"><i class="fas fa-expand-arrows-alt fa-fw"></i> Social Networks</a>
|
Provider
|
||||||
<a class="dropdown-item" href="/providers/social-news-aggregator/"><i class="far fa-newspaper fa-fw"></i> Social News Aggregators</a>
|
<span class="dropdown-toggle"></span>
|
||||||
<a class="dropdown-item" href="/providers/vpn/"><i class="far fa-eye-slash fa-fw"></i> VPN</a>
|
</span>
|
||||||
</div>
|
</summary>
|
||||||
</li>
|
<span class="nav-dropdown">
|
||||||
<li class="nav-item dropdown">
|
<a class="dropdown-item" href="/providers/#ukusa"><span class="fab fa-creative-commons-nc fa-fw"></span> Avoid US & UK services</a>
|
||||||
<a class="nav-link dropdown-toggle" href="/browsers/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<a class="dropdown-item" href="/providers/cloud-storage/"><span class="fas fa-cloud fa-fw"></span> Cloud Storage</a>
|
||||||
Browser
|
<a class="dropdown-item" href="/providers/dns/"><span class="fa fa-tasks fa-fw"></span> DNS</a>
|
||||||
</a>
|
<a class="dropdown-item" href="/providers/email/"><span class="fas fa-mail-bulk fa-fw"></span> Email</a>
|
||||||
<div class="dropdown-menu" aria-labelledby="browserDropdown">
|
<a class="dropdown-item" href="/providers/hosting/"><span class="fas fa-database fa-fw"></span> Hosting</a>
|
||||||
<a class="dropdown-item" href="/browsers/#browser"><i class="fas fa-check fa-fw"></i> Recommendations</a>
|
<a class="dropdown-item" href="/providers/paste/"><span class="fas fa-paste fa-fw"></span> Pastebins</a>
|
||||||
<a class="dropdown-item" href="/browsers/#fingerprint"><i class="fas fa-fingerprint fa-fw"></i> Fingerprinting Info</a>
|
<a class="dropdown-item" href="/providers/search-engines/"><span class="fab fa-searchengin fa-fw"></span> Search Engines</a>
|
||||||
<a class="dropdown-item" href="/browsers/#webrtc"><i class="far fa-eye fa-fw"></i> WebRTC IP Leak Test</a>
|
<a class="dropdown-item" href="/providers/social-networks/"><span class="fas fa-expand-arrows-alt fa-fw"></span> Social Networks</a>
|
||||||
<a class="dropdown-item" href="/browsers/#addons"><i class="far fa-list-alt fa-fw"></i> Browser Add-ons</a>
|
<a class="dropdown-item" href="/providers/social-news-aggregator/"><span class="far fa-newspaper fa-fw"></span> Social News Aggregators</a>
|
||||||
<a class="dropdown-item" href="/browsers/#about_config"><i class="fas fa-wrench fa-fw"></i> Firefox Tweaks</a>
|
<a class="dropdown-item" href="/providers/vpn/"><span class="far fa-eye-slash fa-fw"></span> VPN</a>
|
||||||
</div>
|
</span>
|
||||||
</li>
|
</details>
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="/software/" id="softwareDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<!-- Browser -->
|
||||||
Software
|
<details class="nav-details">
|
||||||
</a>
|
<summary>
|
||||||
<div class="dropdown-menu" aria-labelledby="softwareDropdown">
|
<span class="nav-summary">
|
||||||
<a class="dropdown-item" href="/software/calendar-contacts/"><i class="fas fa-calendar fa-fw"></i> Calendar/Contacts Sync Tools</a>
|
Browser
|
||||||
<a class="dropdown-item" href="/software/notebooks/"><i class="far fa-sticky-note fa-fw"></i> Digital Notebook</a>
|
<span class="dropdown-toggle"></span>
|
||||||
<a class="dropdown-item" href="/software/email/#messaging"><i class="fas fa-random fa-fw"></i> Email Alternatives</a>
|
</span>
|
||||||
<a class="dropdown-item" href="/software/email/"><i class="fas fa-envelope fa-fw"></i> Email Clients</a>
|
</summary>
|
||||||
<a class="dropdown-item" href="/software/encryption-tools/"><i class="fas fa-lock fa-fw"></i> File Encryption</a>
|
<span class="nav-dropdown">
|
||||||
<a class="dropdown-item" href="/software/file-sharing/"><i class="fas fa-file-export fa-fw"></i> File Sharing</a>
|
<a class="dropdown-item" href="/browsers/#browser"><span class="fas fa-check fa-fw"></span> Recommendation</a>
|
||||||
<a class="dropdown-item" href="/software/passwords/"><i class="fas fa-user-lock fa-fw"></i> Password Manager</a>
|
<a class="dropdown-item" href="/browsers/#fingerprint"><span class="fas fa-fingerprint fa-fw"></span> Fingerprinting Info</a>
|
||||||
<a class="dropdown-item" href="/software/productivity/"><i class="fas fa-briefcase fa-fw"></i> Productivity Tools</a>
|
<a class="dropdown-item" href="/browsers/#webrtc"><span class="far fa-eye fa-fw"></span> WebRTC IP Leak</a>
|
||||||
<a class="dropdown-item" href="/software/real-time-communication/"><i class="fas fa-comments fa-fw"></i> Real-Time Communication</a>
|
<a class="dropdown-item" href="/browsers/#addons"><span class="far fa-list-alt fa-fw"></span> Browser Add-ons</a>
|
||||||
<a class="dropdown-item" href="/software/file-sync/"><i class="fas fa-copy fa-fw"></i> Secure File Sync</a>
|
<a class="dropdown-item" href="/browsers/#about_config"><span class="fas fa-wrench fa-fw"></span> Firefox Tweaks</a>
|
||||||
<a class="dropdown-item" href="/software/networks/"><i class="fas fa-user-secret fa-fw"></i> Self-contained Networks</a>
|
</span>
|
||||||
<a class="dropdown-item" href="/software/cloud/"><i class="fas fa-hdd fa-fw"></i> Self-Hosted Cloud Server</a>
|
</details>
|
||||||
</div>
|
|
||||||
</li>
|
<!-- Software -->
|
||||||
<li class="nav-item dropdown">
|
<details class="nav-details">
|
||||||
<a class="nav-link dropdown-toggle" href="/operating-systems/" id="osDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<summary>
|
||||||
OS
|
<span class="nav-summary">
|
||||||
</a>
|
Software
|
||||||
<div class="dropdown-menu" aria-labelledby="osDropdown">
|
<span class="dropdown-toggle"></span>
|
||||||
<a class="dropdown-item" href="/operating-systems/#os"><i class="fas fa-th-large fa-fw"></i> PC OS Recommendations</a>
|
</span>
|
||||||
<a class="dropdown-item" href="/operating-systems/#live_os"><i class="fas fa-compact-disc fa-fw"></i> Live CD Operating Systems</a>
|
</summary>
|
||||||
<a class="dropdown-item" href="/operating-systems/#mobile_os"><i class="fas fa-mobile-alt fa-fw"></i> Mobile Operating Systems</a>
|
<span class="nav-dropdown">
|
||||||
<a class="dropdown-item" href="/operating-systems/#aaddons"><i class="fas fa-th fa-fw"></i> Android Privacy Add-ons</a>
|
<a class="dropdown-item" href="/software/calendar-contacts/"><span class="fas fa-calendar fa-fw"></span> Calendar/Contacts Sync Tools</a>
|
||||||
<a class="dropdown-item" href="/operating-systems/#firmware"><i class="fas fa-signal fa-fw"></i> Router Firmware</a>
|
<a class="dropdown-item" href="/software/notebooks/"><span class="far fa-sticky-note fa-fw"></span> Digital Notebook</a>
|
||||||
<a class="dropdown-item" href="/operating-systems/#win10"><i class="far fa-thumbs-down fa-fw"></i> Don't use Windows 10</a>
|
<a class="dropdown-item" href="/software/email/#messaging"><span class="fas fa-random fa-fw"></span> Email Alternatives</a>
|
||||||
</div>
|
<a class="dropdown-item" href="/software/email/"><span class="fas fa-envelope fa-fw"></span> Email Clients</a>
|
||||||
</li>
|
<a class="dropdown-item" href="/software/encryption-tools/"><span class="fas fa-lock fa-fw"></span> File Encryption</a>
|
||||||
<li class="nav-item">
|
<a class="dropdown-item" href="/software/file-sharing/"><span class="fas fa-file-export fa-fw"></span> File Sharing</a>
|
||||||
<a class="nav-link" href="/index.html#participate">Participate</a>
|
<a class="dropdown-item" href="/software/passwords/"><span class="fas fa-user-lock fa-fw"></span> Password Manager</a>
|
||||||
</li>
|
<a class="dropdown-item" href="/software/productivity/"><span class="fas fa-briefcase fa-fw"></span> Productivity Tools</a>
|
||||||
</ul>
|
<a class="dropdown-item" href="/software/real-time-communication/"><span class="fas fa-comments fa-fw"></span> Real-Time Communication</a>
|
||||||
<ul class="navbar-nav">
|
<a class="dropdown-item" href="/software/file-sync/"><span class="fas fa-copy fa-fw"></span> Secure File Sync</a>
|
||||||
<li class="nav-item dropdown">
|
<a class="dropdown-item" href="/software/networks/"><span class="fas fa-user-secret fa-fw"></span> Self-contained Networks</a>
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fas fa-language text-danger"></i>
|
<a class="dropdown-item" href="/software/cloud/"><span class="fas fa-hdd fa-fw"></span> Self-Hosted Cloud Server</a>
|
||||||
Language
|
</span>
|
||||||
</a>
|
</details>
|
||||||
<div class="dropdown-menu" aria-labelledby="servicesDropdown">
|
|
||||||
|
<!-- OS -->
|
||||||
|
<details class="nav-details">
|
||||||
|
<summary>
|
||||||
|
<span class="nav-summary">
|
||||||
|
OS
|
||||||
|
<span class="dropdown-toggle"></span>
|
||||||
|
</span>
|
||||||
|
</summary>
|
||||||
|
<span class="nav-dropdown">
|
||||||
|
<a class="dropdown-item" href="/operating-systems/#os"><span class="fas fa-th-large fa-fw"></span> PC OS</a>
|
||||||
|
<a class="dropdown-item" href="/operating-systems/#live_os"><span class="fas fa-compact-disc fa-fw"></span> Live CD OS</a>
|
||||||
|
<a class="dropdown-item" href="/operating-systems/#mobile_os"><span class="fas fa-mobile-alt fa-fw"></span> Mobile OS</a>
|
||||||
|
<a class="dropdown-item" href="/operating-systems/#aaddons"><span class="fas fa-th fa-fw"></span> Android Privacy Add-ons</a>
|
||||||
|
<a class="dropdown-item" href="/operating-systems/#firmware"><span class="fas fa-signal fa-fw"></span> Router Firmware</a>
|
||||||
|
<a class="dropdown-item" href="/operating-systems/#win10"><span class="far fa-thumbs-down fa-fw"></span> Don't use Windows 10</a>
|
||||||
|
</span>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<a class="nav-anchor" href="/index.html#participate">Participate</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Language -->
|
||||||
|
<div id="nav-right">
|
||||||
|
<details class="nav-details">
|
||||||
|
<summary>
|
||||||
|
<span class="nav-summary">
|
||||||
|
<span class="fas fa-language text-danger"></span>
|
||||||
|
Language
|
||||||
|
<span class="dropdown-toggle"></span>
|
||||||
|
</span>
|
||||||
|
</summary>
|
||||||
|
<span class="nav-dropdown">
|
||||||
|
<a href="https://privacytools.io/" class="dropdown-item">English</a>
|
||||||
<a href="https://privacytools.twngo.xyz/" class="dropdown-item">繁體中文</a>
|
<a href="https://privacytools.twngo.xyz/" class="dropdown-item">繁體中文</a>
|
||||||
<a href="https://victorhck.gitlab.io/privacytools-es/" class="dropdown-item">Español</a>
|
<a href="https://victorhck.gitlab.io/privacytools-es/" class="dropdown-item">Español</a>
|
||||||
<a href="https://pl.privacytools.io/" class="dropdown-item">Polski</a>
|
<a href="https://pl.privacytools.io/" class="dropdown-item">Polski</a>
|
||||||
@@ -88,26 +118,33 @@
|
|||||||
<a href="https://privacytools-it.github.io/" class="dropdown-item">Italiano</a>
|
<a href="https://privacytools-it.github.io/" class="dropdown-item">Italiano</a>
|
||||||
<a href="https://privacytools.ru" class="dropdown-item">Русский</a>
|
<a href="https://privacytools.ru" class="dropdown-item">Русский</a>
|
||||||
<a href="https://privacytools.dreads-unlock.fr" class="dropdown-item">Français</a>
|
<a href="https://privacytools.dreads-unlock.fr" class="dropdown-item">Français</a>
|
||||||
</div>
|
</span>
|
||||||
</li>
|
</details>
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="/services/" id="browserDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<!-- Services -->
|
||||||
Services
|
<details class="nav-details">
|
||||||
</a>
|
<summary>
|
||||||
<div class="dropdown-menu" aria-labelledby="servicesDropdown">
|
<span class="nav-summary">
|
||||||
<a class="dropdown-item" href="https://forum.privacytools.io/"><i class="fab fa-discourse fa-fw"></i> Discourse - Forum</a>
|
Services
|
||||||
<a class="dropdown-item" href="https://git.privacytools.io/"><i class="fab fa-git fa-fw"></i> Gitea - Git-Repository Manager</a>
|
<span class="dropdown-toggle"></span>
|
||||||
<a class="dropdown-item" href="https://social.privacytools.io/"><i class="fas fa-retweet fa-fw"></i> Mastodon - Social Network</a>
|
</span>
|
||||||
<a class="dropdown-item" href="https://chat.privacytools.io/"><i class="fas fa-comment fa-fw"></i> Matrix - Federated Chat</a>
|
</summary>
|
||||||
<a class="dropdown-item" href="https://bin.privacytools.io/"><i class="fas fa-clipboard fa-fw"></i> PrivateBin - Encrypted Pastebin</a>
|
<span class="nav-dropdown">
|
||||||
<a class="dropdown-item" href="https://search.privacytools.io/"><i class="fas fa-search fa-fw"></i> Searx - Privacy Friendly Search</a>
|
<a class="dropdown-item" href="https://forum.privacytools.io/"><span class="fab fa-discourse fa-fw"></span> Discourse - Forum</a>
|
||||||
<a class="dropdown-item" href="https://write.privacytools.io/"><i class="fas fa-pen-alt fa-fw"></i> Write Freely - Federated Blog</a>
|
<a class="dropdown-item" href="https://git.privacytools.io/"><span class="fab fa-git fa-fw"></span> Gitea - Git-Repository Manager</a>
|
||||||
</div>
|
<a class="dropdown-item" href="https://social.privacytools.io/"><span class="fas fa-retweet fa-fw"></span> Mastodon - Social Network</a>
|
||||||
</li>
|
<a class="dropdown-item" href="https://chat.privacytools.io/"><span class="fas fa-comment fa-fw"></span> Matrix - Federated Chat</a>
|
||||||
<li class="nav-item">
|
<a class="dropdown-item" href="https://bin.privacytools.io/"><span class="fas fa-clipboard fa-fw"></span> PrivateBin - Encrypted Pastebin</a>
|
||||||
<a class="nav-link" href="/donate/">Donate <i class="fas fa-heart text-danger"></i></a>
|
<a class="dropdown-item" href="https://search.privacytools.io/"><span class="fas fa-search fa-fw"></span> Searx - Privacy Friendly Search</a>
|
||||||
</li>
|
<a class="dropdown-item" href="https://write.privacytools.io/"><span class="fas fa-pen-alt fa-fw"></span> Write Freely - Federated Blog</a>
|
||||||
</ul>
|
</span>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<a href="https://blog.privacytools.io/" class="nav-anchor">Blog </a>
|
||||||
|
<a href="/donate/" class="nav-anchor">
|
||||||
|
Donate <span class="fas fa-heart text-danger"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</nav>
|
</div>
|
||||||
|
|||||||
@@ -1,18 +1,8 @@
|
|||||||
|
<script src="/assets/js/main.js?v=1"></script>
|
||||||
<script src="/assets/js/jquery-3.3.1.min.js?v=4"></script>
|
<script src="/assets/js/jquery-3.3.1.min.js?v=4"></script>
|
||||||
<script src="/assets/js/popper.min.js?v=4"></script>
|
<script src="/assets/js/popper.min.js?v=4"></script>
|
||||||
<script src="/assets/js/bootstrap.min.js?v=4"></script>
|
<script src="/assets/js/bootstrap.min.js?v=4"></script>
|
||||||
<script src="/assets/js/sortable.min.js?v=4"></script>
|
<script src="/assets/js/sortable.min.js?v=4"></script>
|
||||||
<script>
|
|
||||||
$(function () {
|
|
||||||
$("[data-toggle='tooltip']").tooltip();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.navbar a').not(".dropdown-toggle").click(function (e) {
|
|
||||||
if ($(".navbar-toggler").is(":visible")) {
|
|
||||||
$('.navbar-collapse').collapse('toggle');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
Matomo is the leading open-source analytics platform:
|
Matomo is the leading open-source analytics platform:
|
||||||
|
|||||||
@@ -182,4 +182,156 @@ footer {
|
|||||||
i {
|
i {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Navbar
|
||||||
|
*/
|
||||||
|
|
||||||
|
#navbar {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 1140px;
|
||||||
|
padding: .75rem 3rem;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navbar .menu {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-anchor {
|
||||||
|
display: inline;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-anchor:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-anchor:hover,
|
||||||
|
.nav-summary:hover,
|
||||||
|
.nav-details[open] > summary > .nav-summary {
|
||||||
|
color: rgba(255,255,255,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown {
|
||||||
|
color: var(--dark);
|
||||||
|
background-color: var(--light);
|
||||||
|
padding: .5rem 0;
|
||||||
|
margin-top: .5rem;
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
border-radius: .25rem;
|
||||||
|
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-right > details > .nav-dropdown {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-details {
|
||||||
|
display: inline;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-details > summary {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.nav-details > summary::-webkit-details-marker {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-right > .nav-details,
|
||||||
|
#nav-right > .nav-anchor {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
}
|
||||||
|
#nav-left > .nav-details,
|
||||||
|
#nav-left > .nav-anchor {
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#nav-toggle,
|
||||||
|
#nav-toggle-label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-home-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile hamburger menu */
|
||||||
|
|
||||||
|
@media only screen and (max-width: 992px) {
|
||||||
|
.menu,
|
||||||
|
.nav-details,
|
||||||
|
.nav-anchor {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
#nav-home {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#nav-home-mobile {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
input#nav-toggle:checked ~ .menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
input#nav-toggle + label {
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.nav-dropdown {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
max-height: 15.75em;
|
||||||
|
overflow-y: auto;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
#nav-right > .nav-details,
|
||||||
|
#nav-right > .nav-anchor,
|
||||||
|
#nav-left > .nav-details,
|
||||||
|
#nav-left > .nav-anchor {
|
||||||
|
padding: 0 0;
|
||||||
|
}
|
||||||
|
#navbar {
|
||||||
|
padding: 1rem 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
#navbar {
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 575px) {
|
||||||
|
#navbar {
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-height: 350px) {
|
||||||
|
.nav-dropdown {
|
||||||
|
max-height: 8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
27
assets/js/main.js
Normal file
27
assets/js/main.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
//
|
||||||
|
// Navbar dropdowns
|
||||||
|
//
|
||||||
|
|
||||||
|
const navSections = document.querySelectorAll(".nav-details");
|
||||||
|
|
||||||
|
navSections.forEach(navSection => {
|
||||||
|
navSection.addEventListener("toggle", navSectionsToggle);
|
||||||
|
});
|
||||||
|
document.addEventListener("click", navSectionsClose);
|
||||||
|
|
||||||
|
function navSectionsToggle() {
|
||||||
|
// When opening next dropdown, hide previous
|
||||||
|
if (this.open) {
|
||||||
|
navSections.forEach(navSection => {
|
||||||
|
if (navSection != this && navSection.open) navSection.open = !open;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function navSectionsClose(event) {
|
||||||
|
// Hide all dropdowns when clicking in different place
|
||||||
|
if (event.target.matches(".nav-summary")) return;
|
||||||
|
navSections.forEach(navSection => {
|
||||||
|
navSection.open = !open;
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user