+++ /dev/null
-#mask {
- width: 100vw;
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- background-color: rgba(0, 0, 0, .4);
- display: none;
- visibility: hidden;
- &.open {
- display: block;
- visibility: visible;
- z-index: 250;
- }
-}
-
-.tux {
- position: absolute;
- top: 12px;
- left:50%;
- transform: translateX(-50%);
- h1 {
- font-weight: 300 !important;
- color: $blue-grey-900;
- font-size: 20px;
- line-height: 28px;
- margin-bottom: 0;
- strong {
- font-weight: 700 !important;
- }
- }
- h1:before {
- content: "";
- height: 32px;
- width: 25px;
- background-image: url('img/ipfire-tux.png');
- background-repeat: no-repeat;
- background-position: center center;
- background-size: contain;
- display: inline-block;
- position: relative;
- }
-}
-
-.menu-text {
- transition: opacity .25s ease-in-out;
-}
-
-.menu-text.hidden {
- opacity: 0;
- transition: opacity .35s ease-in-out;
-}
-
-.fixed-top {
- transition: background-color .25s linear;
- height: 56px;
- @include media-breakpoint-up(sm) {
- height: 72px;
- }
- @include media-breakpoint-up(lg) {
- height: 96px;
- }
- .navbar {
- width: 100%;
- z-index: 500;
- a {
- color: $blue-grey-900;
- @include media-breakpoint-up(sm) {
- margin-top: 8px;
- }
- }
- .navbar-toggler-left {
- left: -12px;
- top: 8px;
- @include media-breakpoint-up(sm) {
- top: 17px;
- }
- }
- .btn {
- margin-top: .15rem;
- }
- }
-}
-
-.navbar-brand {
- font-size: 20px;
- font-weight: 300;
- opacity: 0;
- margin: 0;
- transition: opacity .7s linear;
- @include media-breakpoint-up(lg) {
- opacity: 1;
- font-size: 36px;
- }
- strong {
- font-weight: 900;
- }
- img {
- margin-right: 4px;
- transform: translateY(-5px);
- height: 32px;
- width: auto;
- @include media-breakpoint-up(lg) {
- height: 40px;
- }
- }
-}
-
-.scrolled {
- background-color: rgba(255, 255, 255, .96);
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
- height: 56px;
- @include media-breakpoint-up(sm) {
- height: 72px;
- }
- @include media-breakpoint-up(lg) {
- height: 96px;
- }
- .navbar-brand {
- opacity: 1;
- }
-}
-
-.scrolled.fadeout {
- background-color: rgba(100, 100, 100, .5);
- a.btn-donate {
- opacity: .5;
- }
- a.navbar-brand {
- opacity: .5;
- }
-}
-
-#navbarSupportedContent {
- width: 100%;
- @include media-breakpoint-down(md) {
- background: white;
- position: fixed;
- top: 0;
- left: 0;
- width: 256px;
- height: 100vh;
- padding-top: 64px;
- transform: translateX(-256px);
- transition: all .15s ease-in-out;
- &.open {
- transform: translateX(0);
- transition: all .15s ease-in-out;
- box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
- }
- }
-}
-
-.navbar-nav {
- @include media-breakpoint-up(lg) {
- padding-top: 2px;
-
- }
-}
-
-.navbar-nav .nav-link {
- color: $blue-grey-900;
- padding: 16px !important;
- display: block;
- position: relative;
- @include media-breakpoint-up(lg) {
- margin-right: 16px;
- display: block;
- position: relative;
- &:after {
- content: "";
- border-bottom: 2px solid $red_900;
- position: absolute;
- transform: scaleX(0);
- width: 100%;
- left: 0;
- top: 44px;
- padding: inherit;
- transition: transform .3s ease-out, color .3s ease-out;
- }
- }
-}
-
-.navbar-nav .nav-link:active {
- @include media-breakpoint-down(lg) {
- color: $red_900
- }
-}
-
-.navbar-nav .nav-link:active:before {
- @include media-breakpoint-down(lg) {
- content: "";
- border-left: 2px solid $red_900;
- position: absolute;
- left: 0;
- height: 36px;
- transform: translateY(-4px);
- }
-}
-
-.navbar-nav .nav-link:hover {
- @include media-breakpoint-up(lg) {
- color: $red_900;
- }
-}
-
-.navbar-nav .nav-link:hover:after {
- @include media-breakpoint-up(lg) {
- transform: scaleX(1);
- }
-}
-
-body.About li.nav-item a.about,
-body.Download li.nav-item a.download,
-body.Support li.nav-item a.support,
-body.Involved li.nav-item a.community,
-body.Phonebook li.nav-item a.phonebook,
-body.Diagnosis li.nav-item a.diagnosis {
- @include media-breakpoint-up(lg) {
- color: $red_900;
- &:after {
- content: "";
- border-bottom: 2px solid $red_900;
- position: absolute;
- width: 100%;
- left: 0;
- top: 44px;
- padding: inherit;
- transform: scale(1);
- }
- }
-}
-
-#sidebar {
- padding: 0;
- @include media-breakpoint-down(sm) {
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
- 0 1px 2px 0 rgba(0, 0, 0, 0.23);
- position: fixed;
- top: 52px;
- z-index: 200;
- background-color: white;
- }
- ul {
- list-style: none;
- &.features_nav {
- padding: 0 0 24px 0;
- overflow-x: auto;
- &.fixed {
- position: fixed;
- top: 100px;
- outline: 1px solid grey;
- }
- }
- ul {
- margin: 0;
- padding-left: 0;
- li:last-child {
- margin-bottom: 0;
- }
- }
- li {
- padding: 0 16px;
- margin: 8px 0;
- a.nav-link {
- padding: inherit;
- color: $blue-grey-900;
- height: 32px;
- padding: 0 8px;
- line-height: 2;
- &.active {
- color: $red_900;
- border-left: 2px solid $red_900;
- padding: 0 8px 0 6px;
- }
- }
- }
- }
-}
-
-// Feature mobile Menu
-
-/* Fix for Android */
-body {
- -webkit-animation: bugfix infinite 1s;
-}
-@-webkit-keyframes bugfix {
- from { padding: 0; }
- to { padding: 0; }
-}
-
-/* default checkbox */
-input[type=checkbox] {
- position: absolute;
- top: -9999px;
- left: -9999px;
-}
-
-label {
- cursor: pointer;
- user-select: none;
-}
-
-nav[role="dropdown"] {
- label { display: none; }
-}
-
-@media screen and (max-width: 44em) {
- nav[role="dropdown"] {
- ul {
- height: 48px;
- overflow: hidden;
- }
-
- label {
- position: relative;
- display: block;
- width: 100%;
- }
-
- label:after {
- font-family: FontAwesome;
- font-size: 24px;
- content: "\f107";
- position: absolute;
- top: 0;
- right: 0;
- z-index: 9999;
- width: 100%;
- height: 56px;
- padding: 12px 12px 0;
- text-align: right;
- }
-
- input:checked ~ label:after {
- content: "\f106";
- }
-
- input:checked ~ ul {
- display: block;
- height: 40vh;
- overflow-y: scroll;
- }
- }
-}
{% if rss_url %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ rss_url }}" />
{% end %}
-
</head>
<body id="page-top" class="{% block title %}{% end block %}">
-
- <div class="fixed-top">
- <div class="container d-flex justify-content-between">
- <nav class="navbar navbar-toggleable-md align-items-md-start">
- <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="slide-collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
- <div class="visible-md-up menu-text">Menu</div>
- </button>
-
- <a class="navbar-brand align-self-center" href="/">
- <img src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Tux" height="40px" />
- {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
- IP<strong>Fire</strong>
- {% elif hostname == "planet.ipfire.org" %}
- IP<strong>Fire</strong> Planet
- {% else %}
- {{ hostname }}
- {% end %}
- </a>
-
- <div id="navbarSupportedContent" class="d-lg-flex justify-content-lg-end">
- {% block menu %}
- {% module Menu() %}
- {% end block %}
- </div>
- </nav>
- <div class="align-self-start hidden-xs-down">
- <a class="btn btn-red900 btn-sm btn-donate" href="/donate">
- <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
- {{ _("Donate") }}
- </a>
+ <nav class="navbar navbar-expand-lg fixed-top bg-white">
+ <div class="container">
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
+ aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+ <svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
+ </button>
+
+ <a class="navbar-brand text-dark" href="/">
+ <img src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire" height="32px" />
+ IP<strong>Fire</strong>
+ </a>
+
+ <div class="collapse navbar-collapse" id="navbar">
+ {% block menu %}
+ {% module Menu() %}
+ {% end block %}
</div>
+
+ <a class="btn btn-primary btn-donate d-none d-sm-block" href="/donate">
+ <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
+ {{ _("Donate") }}
+ </a>
</div>
- </div>
+ </nav>
{% block container %}
<div class="container">