icons styling in seperat file

diff --git a/static/scss/_buttons.scss b/static/scss/_buttons.scss
new file mode 100644 (file)
index 0000000..f71a5d1
--- /dev/null
+++ b/static/scss/_buttons.scss
@@ -0,0 +1,95 @@
+// 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

diff --git a/static/scss/_fonts.scss b/static/scss/_fonts.scss
new file mode 100644 (file)
index 0000000..c6826c5
--- /dev/null
+++ b/static/scss/_fonts.scss
@@ -0,0 +1,162 @@
+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

diff --git a/static/scss/_icons.scss b/static/scss/_icons.scss
new file mode 100644 (file)
index 0000000..c3eb103
--- /dev/null
+++ b/static/scss/_icons.scss
@@ -0,0 +1,40 @@
+// Icons
+.icon {
+       width: 1.5rem;
+       height: 1.5rem;
+       fill: currentColor;
+       vertical-align: -.15rem;
+       overflow: hidden;
+       margin-right: .5rem;
+}
+
+.i_arrow_down {
+       margin: 0;
+       position: absolute;
+       left: .75rem;
+       top: -.25rem;
+       animation: scroll 1.5s ease-in-out infinite;
+       @include media-breakpoint-down(xs) {
+               width: 1.75rem !important;
+               height: 1.75rem !important;
+               left: .25rem;
+               top: -.5rem;
+       }
+}
+
+.i_lg {
+       width: 2.5rem;
+       height: 2.5rem;
+       margin: 0;
+       transform: translateY(-.35rem);
+       fill: $red_900;
+}
+
+.i_white {
+       fill: white;
+}
+
+.i_sm {
+       vertical-align: top;
+       transform: translateY(-.10rem);
+}
\ No newline at end of file

diff --git a/static/scss/_nav.scss b/static/scss/_nav.scss
new file mode 100644 (file)
index 0000000..420648b
--- /dev/null
+++ b/static/scss/_nav.scss
@@ -0,0 +1,339 @@
+#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