--- /dev/null
+// Buttons
+.btn-red900 {
+ @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
+}
+.btn-white {
+ @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
+}
+.btn-bluegrey900 {
+ @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
+}
+
+button.navbar-toggler div {
+ font-family: 'Ubuntu', sans-serif;
+ font-size: 1rem;
+ display: inline-block;
+ position: relative;
+ top: -4px;
+}
+
+.btn {
+ height: 36px;
+ text-transform: uppercase;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
+ transition: box-shadow .25s ease-in-out;
+ &:hover {
+ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
+ transition: box-shadow .25s ease-in-out;
+ }
+ @include media-breakpoint-down(sm) {
+ font-size: .875rem;
+ }
+}
+
+.btn-outline-primary,
+.btn-outline-secondary {
+ transition: background-color .25s ease-in-out;
+ &:hover {
+ transition: background-color .25s ease-in-out;
+ }
+}
+
+.btn-xlg {
+ height: 72px;
+ margin: 0 36px;
+ padding-top: 16px;
+}
+
+.btn-lg {
+ height: 48px;
+ margin: 0 24px;
+ @include media-breakpoint-down(sm) {
+ height: 36px;
+ margin: 0 8px;
+ padding: 1rem;
+ font-size: .875rem;
+ line-height: 0;
+ }
+}
+
+.btn-md {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ padding: .4rem 1rem .5rem 1rem;
+}
+
+.btn-block {
+ margin: 0 0 1.5rem 0;
+ @include media-breakpoint-up(md) {
+ margin: 0 0 2rem 0;
+ }
+ @include media-breakpoint-down(xs) {
+ font-size: .875rem;
+ line-height: 0;
+ }
+}
+
+button:focus {
+ outline: none;
+}
+
+// Top navigation Donate Button //
+.btn-donate {
+ margin-top: 18px;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 20px;
+ padding: 3px 16px 0 5px;
+ @include media-breakpoint-up(lg) {
+ margin-top: 29px;
+ }
+ svg {
+ vertical-align: -7px;
+ margin-right: 5px;
+ }
+}
\ No newline at end of file
--- /dev/null
+body {
+ -webkit-font-smoothing: antialiased;
+ font-size: 16px;
+}
+
+h1 {
+ line-height: 3rem;
+}
+
+h2 {
+ line-height: 2.75rem;
+}
+
+h3 {
+ font-size: 20px;
+ line-height: 28px;
+ @include media-breakpoint-up(md) {
+ font-size: 24px;
+ line-height: 32px;
+ font-weight: 300;
+ margin-bottom: 0;
+ }
+ &.headline {
+ text-align: center;
+ font-size: 32px;
+ line-height: 44px;
+ color: $blue-grey-900;
+ @include media-breakpoint-up(sm) {
+ font-size: 36px;
+ line-height: 48px;
+ }
+ }
+}
+
+h4 {
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 24px;
+ @include media-breakpoint-up(sm) {
+ font-size: 20px;
+ line-height: 28px;
+ }
+ &.secondHeadline {
+ font-size: 24px;
+ line-height: 32px;
+ text-align: left;
+ margin-top: 24px;
+ }
+}
+
+h5,
+.h5 {
+ font-size: 16px;
+ line-height: 24px;
+ @include media-breakpoint-up(md) {
+ font-size: 24px;
+ line-height: 32px;
+ }
+ &.subheadline {
+ text-align: center;
+ font-size: 16px;
+ line-height: 24px;
+ color: $blue-grey-600;
+ }
+}
+
+p {
+ font-size: 16px;
+ line-height: 24px;
+ &.lead {
+ font-size: inherit;
+ line-height: inherit;
+ @include media-breakpoint-up(md) {
+ font-size: 24px;
+ line-height: 32px;
+ }
+ }
+ &.copy {
+ margin-top: 16px;
+ @include media-breakpoint-up(sm) {
+ margin-top: 24px;
+ }
+ }
+}
+
+.display-1 {
+ font-size: 120px;
+ line-height: 144px;
+}
+
+.display-2 {
+ font-size: 32px;
+ line-height: 44px;
+ margin-bottom: 40px;
+ @include media-breakpoint-up(md) {
+ font-size: 40px;
+ line-height: 56px;
+ margin-bottom: 3rem;
+ }
+}
+
+.display-3 {
+ font-size: 24px;
+ line-height: 32px;
+ @include media-breakpoint-up(md) {
+ font-size: 32px;
+ line-height: 44px;
+ }
+}
+
+.display-4 {
+ font-size: 14px;
+ line-height: 20px;
+ font-weight: 400;
+ @include media-breakpoint-up(sm) {
+ font-size: 24px;
+ line-height: 32px;;
+ }
+}
+
+.display-5 {
+ font-size: 20px;
+ line-height: 28px;
+}
+
+small,
+.small {
+ font-size: 14px;
+ line-height: 20px;
+ @include media-breakpoint-up(md) {
+ font-size: 16px;
+ line-height: 24px;
+ }
+}
+
+.truncate {
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+
+// fireInfo
+.fireinfo_cat {
+ font-size: 14px;
+ line-height: 20px;
+}
+
+h5.fireinfo {
+ font-size: 16px;
+ line-height: 28px;
+ font-weight: 500;
+ @include media-breakpoint-up(md) {
+ font-size: 20px;
+ }
+}
+
+.fireinfo_per {
+ font-size: 20px;
+ line-height: 28px;
+}
\ No newline at end of file
--- /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;
+ }
+}
+
+.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%;
+ 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 {
+ @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(md) {
+ 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: 9999;
+ 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;
+ }
+ }
+}
\ No newline at end of file