@import "variables";
-// Core variables and mixins
+// Use all Bootstrap modules that we want
@import "../bootstrap/scss/functions";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
+@import "../bootstrap/scss/root";
@import "../bootstrap/scss/reboot";
-
-// @import "../bootstrap/scss/print";
-
-// Core CSS
@import "../bootstrap/scss/type";
-//@import "../bootstrap/scss/images";
-// @import "../bootstrap/scss/code";
+@import "../bootstrap/scss/images";
+@import "../bootstrap/scss/code";
@import "../bootstrap/scss/grid";
@import "../bootstrap/scss/tables";
@import "../bootstrap/scss/forms";
@import "../bootstrap/scss/buttons";
-
-// Components
@import "../bootstrap/scss/transitions";
-//@import "../bootstrap/scss/dropdown";
+@import "../bootstrap/scss/dropdown";
@import "../bootstrap/scss/button-group";
-//@import "../bootstrap/scss/input-group";
-//@import "../bootstrap/scss/custom-forms";
+@import "../bootstrap/scss/input-group";
+@import "../bootstrap/scss/custom-forms";
@import "../bootstrap/scss/nav";
@import "../bootstrap/scss/navbar";
-//@import "../bootstrap/scss/card";
-// @import "../bootstrap/scss/breadcrumb";
-// @import "../bootstrap/scss/pagination";
+@import "../bootstrap/scss/card";
+@import "../bootstrap/scss/pagination";
+@import "../bootstrap/scss/breadcrumb";
@import "../bootstrap/scss/badge";
-// @import "../bootstrap/scss/jumbotron";
-// @import "../bootstrap/scss/alert";
+@import "../bootstrap/scss/alert";
@import "../bootstrap/scss/progress";
@import "../bootstrap/scss/media";
@import "../bootstrap/scss/list-group";
-// @import "../bootstrap/scss/responsive-embed";
-// @import "../bootstrap/scss/close";
-
-// Components w/ JavaScript
-// @import "../bootstrap/scss/modal";
-// @import "../bootstrap/scss/tooltip";
-// @import "../bootstrap/scss/popover";
-// @import "../bootstrap/scss/carousel";
-
-// Utility classes
+@import "../bootstrap/scss/close";
+@import "../bootstrap/scss/modal";
@import "../bootstrap/scss/utilities";
+@import "../bootstrap/scss/print";
+
+// Include fonts
+@import "_fonts.scss";
-// Lightbox
-@import "photoswipe/main";
-@import "photoswipe/default-skin/default-skin";
+// Custom stuff
+@import "icons";
-// Donation Box
-@import "_donation";
+// Makes everything white with dark text on it
+.inverse {
+ background-color: $body-color;
+ color: $body-bg;
+}
body {
- min-height: 100vh;
display: flex;
- flex-direction: column;
+ min-height: 100vh;
+ flex-flow: column;
}
-.container {
- width: 100%;
- max-width: 1200px;
- flex: 1;
+// Buttons
+.btn {
+ text-transform: uppercase;
}
-// Custom stuff
-@import '_fonts';
-@import '_nav';
-@import '_buttons';
-@import '_icons';
-
+@each $color, $value in $theme-colors {
+ .btn-glow-#{$color} {
+ color: white;
+ background-color: rgba($value, .15);
+ }
+}
+.card {
+ @extend .inverse;
-// Colors
-.amber-800 {
- color: $amber-800;
- border-color: $amber-800;
+ // Reset padding for sections
+ section {
+ padding: 0;
+ }
}
-.green-600 {
- color: $green-600;
- border-color: $green-600;
+.list-group {
+ .list-group-item {
+ color: $body-bg;
+ }
}
-.red-900 {
- color: $red_900;
- border-color: $red_900;
-}
+.nav {
+ .nav-link {
+ color: $white;
-.blue-700{
- color: $blue-700;
- border-color: $blue-700;
+ &.active {
+ color: $link-color;
+ border-left: 2px solid $link-color;
+ }
+ }
}
-.blue_grey_300 {
- color: $blue_grey_300;
-}
+.navbar {
+ background-color: rgba($gray-400, .06);
-.bg-blue-grey-900 {
- background-color: $blue-grey-900;
-}
+ // Webkit is being stupid and cannot figure out the height
+ // of the navbar by itself
+ min-height: $navbar-height;
-.bg-blue-grey-50 {
- background-color: $blue-grey-50;
-}
+ .navbar-brand {
+ color: inherit;
+ }
-// Images
-img {
- &.img-fluid {
- width: 100%;
- max-width: 100%;
- height: auto;
+ .navbar-nav {
+ .nav-link {
+ color: inherit;
+
+ &.active {
+ border-bottom: 2px solid $link-color;
+ }
+ }
}
}
+header {
+ &.cover {
+ position: relative;
+ width: 100%;
+ height: auto;
+ min-height: 35rem;
-footer {
- .btn-toolbar .icon {
- height: 2.25rem;
- width: 2.25rem;
- fill: rgba($blue-grey-900, .6);
- }
- .i_heart {
- vertical-align: top;
- transform: translateY(-.15rem);
- @include media-breakpoint-down(sm) {
- transform: translateY(-.75rem);
+ @include media-breakpoint-up(lg) {
+ height: calc(100vh - #{$navbar-height});
}
}
}
+footer {
+ margin-top: auto;
-// Sections
-section.intro {
- min-height: 100vh;
- background-image: url('img/header-background.jpg');
- background-size: cover;
- background-attachment: fixed;
- background-position: center top;
- position: relative;
- .branding {
- padding-top: 6rem;
- @include media-breakpoint-up(sm) {
- padding-top: 192px;
- }
- margin-bottom: 64px;
- text-align: center;
- color: $blue-grey-600;
- h1 {
- font-weight: 300 !important;
- color: $blue-grey-900;
- @include media-breakpoint-down(xs) {
- font-size: 72px;
- line-height: 88px;
- margin-bottom: 0;
+ .footer {
+ margin-top: $spacer * 3;
+
+ .footer-info {
+ padding: 2rem 0 0 0;
+
+ color: $white;
+ background-color: rgba($gray-400, .04);
+
+ @include media-breakpoint-down(md) {
+ padding-top: 31px;
+ }
+
+ a, .btn-link {
+ color: inherit;
+
+ &:hover {
+ color: inherit;
+ }
}
- strong {
- font-weight: 700 !important;
+
+ ul {
+ li {
+ margin-bottom: $spacer / 4;
+ }
}
}
- h1:before {
- content: "";
- height: 60px;
- width: 76px;
- background-image: url('img/ipfire-tux.png');
- background-repeat: no-repeat;
- background-position: center center;
- background-size: contain;
- display: inline-block;
- position: relative;
- top: 4px;
- @include media-breakpoint-up(sm) {
- height: 120px;
- width: 93px;
- margin-right: 32px;
- top: 8px;
+
+ .copyright {
+ background-color: rgba($gray-400, .06);
+ padding: $spacer 0;
+
+ font-size: $small-font-size;
+
+ a {
+ color: $text-muted;
}
}
}
}
-.page-scroll {
- display: block;
- visibility: visible;
- position: absolute;
- bottom: 48px;
- left: 50%;
- transform: translateX(-50%);
- .btn {
- width: 36px;
- height: 36px;
- fill: $red_900;
- @include media-breakpoint-up(sm) {
- width: 64px;
- height: 64px;
- }
- &:hover .i_arrow_down {
- fill: white;
- }
- }
-}
+// Sections
+
+section {
+ padding: 3rem 1rem;
-section.content-section {
- padding: 3rem 0;
- @include media-breakpoint-up(sm) {
- padding: 72px 0;
+ @include media-breakpoint-up(md) {
+ padding: 5rem 0;
}
-}
-.feature_icons {
- width: 40px;
- height: 100%;
- float: left;
- margin-right: .75rem;
+ @include media-breakpoint-up(md) {
+ // Reset large headlines to normal size on mobile devices
+ h1 {
+ font-size: $display1-size;
+ font-weight: $display1-weight;
+ line-height: $display-line-height;
+ }
+ }
}
-section#news,
-section#support,
-footer {
- background-color: rgba($blue-grey-900, .06);
-}
+.blog-post {
+ .blog-header {
+ h4 {
+ margin-bottom: 0;
-section#news {
- color: rgba($blue-grey-900, .6);
- h2 {
- color: $blue-grey-900;
+ a {
+ color: $dark;
+ }
+ }
}
-}
-.progress {
- background-color: rgba(255, 255, 255, .2);
-}
+ .blog-content {
+ h1, h2, h3, h4, h5, h6 {
+ font-size: 1.375rem;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ margin-bottom: 0.25rem;
+ }
-.bg-progress {
- background-image: linear-gradient(to right, $yellow-700, $amber-800);
-}
+ img {
+ @include img-fluid;
-section#fireinfo {
- border-bottom: 1px solid rgba($blue-grey-900, .2);
-}
+ // Center all images
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
-.circle {
- position: relative;
- p.fireinfo_per {
- color: $blue-grey-600;
- position: absolute;
- top: calc(50% - 18px);
- width: 100%;
+ // Add some extra margin to the top & bottom
+ padding: ($spacer * 2) 0 ($spacer * 2) 0;
+ }
}
-}
-section#appliances {
- padding-bottom: 48px;
-}
+ &.lightning-wire-labs {
+ .blog-header {
+ h5 {
+ a {
+ color: $lwl;
+ }
+ }
-.features-content,
-.fixed-top + .blog-content {
- padding-top: 88px;
- margin-bottom: 40px;
- @include media-breakpoint-up(lg) {
- padding-top: 161px;
- }
- .content {
- background: white;
- border-radius: 4px;
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
- padding: 40px 24px;
- position: relative;
+ a {
+ color: $lwl;
+ }
+ }
+
+ .blog-content {
+ a {
+ color: $lwl;
+ }
+ }
}
}
-.blog-content {
- margin-bottom: 80px;
-}
+.wiki-content {
+ h1, h2, h3, h4, h5, h6 {
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ margin-bottom: 0.25rem;
+ }
-.divider {
- width: 128px;
- height: 4px;
- border-radius: 2px;
- background-image: linear-gradient(to right, $red-900, $orange-a400);
- margin: 40px auto 24px auto;
- @include media-breakpoint-up(sm) {
- margin: 56px auto 40px auto;
+ h1 {
+ font-size: $h4-font-size;
}
-}
-footer {
- padding: 3rem 0 0 0;
- @include media-breakpoint-down(md) {
- padding-top: 31px;
+ h2 {
+ font-size: $h5-font-size;
}
- h4 {
- margin-bottom: 1.25rem;
- color: rgba($blue-grey-900, .6);
- font-size: 20px;
- line-height: 28px;
+
+ h3, h4, h5, h6 {
+ font-size: $h6-font-size;
}
- ul {
- li {
- font-size: 14px;
- margin-bottom: .75rem;
- a {
- color: rgba($blue-grey-900, .6);
- text-decoration: none;
- &:hover {
- color: $blue-grey-900;
- text-decoration: underline;
- }
- }
- }
+
+ img {
+ @include img-fluid;
+
+ // Center all images
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+
+ // Add some extra margin to the top & bottom
+ padding: ($spacer * 2) 0 ($spacer * 2) 0;
}
- .btn-lg {
- margin-bottom: 2.75rem;
+
+ blockquote {
+ @extend .blockquote;
}
- .btn-sm {
- box-shadow: none;
- &:hover {
- box-shadow: none;
- }
+
+ table {
+ @extend .table;
+ @extend .table-sm;
}
}
-#copyright {
- background-color: rgba($blue-grey-900, .06);
- padding: 1rem 0;
- p {
- font-size: 12px;
- line-height: 16px;
- }
+hr.divider {
+ border-color: rgba($dark, .15);
+ margin-top: 2rem;
+ margin-bottom: 3rem;
}
-// Animation
-@keyframes scroll {
- 0%, 100% { transform: translateY(30%); }
- 50% { transform: translateY(50%); }
+.circle {
+ position: relative;
+ p.fireinfo_per {
+ color: $gray-800;
+ position: absolute;
+ top: calc(50% - 18px);
+ width: 100%;
+ }
}
projects / ipfire.org.git / blobdiff