7 background-color: rgba(0, 0, 0, .4);
20 transform: translateX(-50%);
22 font-weight: 300 !important;
23 color: $blue-grey-900;
28 font-weight: 700 !important;
35 background-image: url('../img/ipfire-tux.png');
36 background-repeat: no-repeat;
37 background-position: center center;
38 background-size: contain;
39 display: inline-block;
45 transition: opacity .25s ease-in-out;
50 transition: opacity .35s ease-in-out;
54 transition: background-color .25s linear;
56 @include media-breakpoint-up(sm) {
59 @include media-breakpoint-up(lg) {
65 color: $blue-grey-900;
66 @include media-breakpoint-up(sm) {
70 .navbar-toggler-left {
73 @include media-breakpoint-up(sm) {
88 transition: opacity .7s linear;
89 @include media-breakpoint-up(lg) {
98 transform: translateY(-5px);
101 @include media-breakpoint-up(lg) {
108 background-color: rgba(255, 255, 255, .96);
109 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
111 @include media-breakpoint-up(sm) {
114 @include media-breakpoint-up(lg) {
123 background-color: rgba(100, 100, 100, .5);
132 #navbarSupportedContent {
134 @include media-breakpoint-down(md) {
142 transform: translateX(-256px);
143 transition: all .15s ease-in-out;
145 transform: translateX(0);
146 transition: all .15s ease-in-out;
147 box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26);
153 @include media-breakpoint-up(lg) {
159 .navbar-nav .nav-link {
160 color: $blue-grey-900;
161 padding: 16px !important;
164 @include media-breakpoint-up(lg) {
170 border-bottom: 2px solid $red_900;
172 transform: scaleX(0);
177 transition: transform .3s ease-out, color .3s ease-out;
182 .navbar-nav .nav-link:active {
183 @include media-breakpoint-down(lg) {
188 .navbar-nav .nav-link:active:before {
189 @include media-breakpoint-down(lg) {
191 border-left: 2px solid $red_900;
195 transform: translateY(-4px);
199 .navbar-nav .nav-link:hover {
200 @include media-breakpoint-up(lg) {
205 .navbar-nav .nav-link:hover:after {
206 @include media-breakpoint-up(lg) {
207 transform: scaleX(1);
211 body.About li.nav-item a.about,
212 body.Download li.nav-item a.download {
213 @include media-breakpoint-up(lg) {
217 border-bottom: 2px solid $red_900;
230 @include media-breakpoint-down(md) {
231 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16),
232 0 1px 2px 0 rgba(0, 0, 0, 0.23);
236 background-color: white;
246 outline: 1px solid grey;
261 color: $blue-grey-900;
267 border-left: 2px solid $red_900;
268 padding: 0 8px 0 6px;
275 // Feature mobile Menu
277 /* Fix for Android */
279 -webkit-animation: bugfix infinite 1s;
281 @-webkit-keyframes bugfix {
286 /* default checkbox */
287 input[type=checkbox] {
298 nav[role="dropdown"] {
299 label { display: none; }
302 @media screen and (max-width: 44em) {
303 nav[role="dropdown"] {
316 font-family: FontAwesome;
325 padding: 12px 12px 0;
329 input:checked ~ label:after {