@import "../bootstrap/scss/dropdown";
@import "../bootstrap/scss/button-group";
@import "../bootstrap/scss/input-group";
+@import "../bootstrap/scss/custom-forms";
@import "../bootstrap/scss/nav";
@import "../bootstrap/scss/navbar";
@import "../bootstrap/scss/card";
@import "fonts";
// Custom stuff
-@import '_icons';
+@import "icons";
// Makes everything white with dark text on it
.inverse {
color: $body-bg;
}
-html, body {
- height: 100%;
-}
-
body {
display: flex;
+ min-height: 100vh;
flex-flow: column;
}
.card {
@extend .inverse;
+
+ // Reset padding for sections
+ section {
+ padding: 0;
+ }
+}
+
+.list-group {
+ .list-group-item {
+ color: $body-bg;
+ }
}
.nav {
.navbar {
background-color: rgba($gray-400, .06);
+ // Webkit is being stupid and cannot figure out the height
+ // of the navbar by itself
+ min-height: $navbar-height;
+
.navbar-brand {
color: inherit;
}
}
}
+header {
+ &.cover {
+ position: relative;
+ width: 100%;
+ height: auto;
+ min-height: 35rem;
+
+ @include media-breakpoint-up(lg) {
+ height: calc(100vh - #{$navbar-height});
+ }
+ }
+}
+
footer {
margin-top: auto;
.footer {
- margin-top: $spacer * 4;
- padding: 2rem 0 0 0;
+ margin-top: $spacer * 3;
- color: $white;
- background-color: rgba($gray-400, .04);
+ .footer-info {
+ padding: 2rem 0 0 0;
- @include media-breakpoint-down(md) {
- padding-top: 31px;
- }
+ color: $white;
+ background-color: rgba($gray-400, .04);
- a, .btn-link {
- color: inherit;
+ @include media-breakpoint-down(md) {
+ padding-top: 31px;
+ }
- &:hover {
+ a, .btn-link {
color: inherit;
+
+ &:hover {
+ color: inherit;
+ }
}
- }
- ul {
- li {
- margin-bottom: $spacer / 4;
+ ul {
+ li {
+ margin-bottom: $spacer / 4;
+ }
}
}
- }
- .copyright {
- background-color: rgba($gray-400, .06);
- padding: $spacer 0;
+ .copyright {
+ background-color: rgba($gray-400, .06);
+ padding: $spacer 0;
- font-size: $small-font-size;
+ font-size: $small-font-size;
- a {
- color: $text-muted;
+ a {
+ color: $text-muted;
+ }
}
}
}
// Sections
section {
- padding: 3rem 0;
+ padding: 3rem 1rem;
- @include media-breakpoint-up(sm) {
- padding: 72px 0;
+ @include media-breakpoint-up(md) {
+ padding: 5rem 0;
}
-}
-
-.main {
- .intro {
- min-height: 100%;
- min-height: 100vh;
- margin-top: -6rem;
-
- @include media-breakpoint-down(sm) {
- padding-top: 6rem;
+ @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;
}
-
- display: flex;
- align-items: center;
}
}
.blog-post {
.blog-header {
- h5 {
+ h4 {
+ margin-bottom: 0;
+
a {
color: $dark;
}
}
}
-// Donations
-
-.donation-explanation {
- color: $text-muted;
- padding: 1.5rem;
-
- .faq {
- a {
- color: inherit;
- }
- }
-}
-
-// Sidebar navigation
-
-#sidebar .nav {
- position: fixed;
-}
-
-.feature_icons {
- width: 40px;
- height: 100%;
- float: left;
- margin-right: .75rem;
-}
-
-.progress {
- background-color: rgba(255, 255, 255, .2);
+hr.divider {
+ border-color: rgba($dark, .15);
+ margin-top: 2rem;
+ margin-bottom: 3rem;
}
.circle {
width: 100%;
}
}
-
-.divider {
- width: 128px;
- height: 4px;
- border-radius: 2px;
- background-image: linear-gradient(to right, $red, $gray-400);
- margin: 40px auto 24px auto;
- @include media-breakpoint-up(sm) {
- margin: 56px auto 40px auto;
- }
-}
-
-// Animation
-@keyframes scroll {
- 0%, 100% { transform: translateY(30%); }
- 50% { transform: translateY(50%); }
-}