@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 "../bootstrap/scss/pagination";
+@import "../bootstrap/scss/breadcrumb";
@import "../bootstrap/scss/badge";
@import "../bootstrap/scss/alert";
@import "../bootstrap/scss/progress";
@import "../bootstrap/scss/list-group";
@import "../bootstrap/scss/close";
@import "../bootstrap/scss/modal";
+@import "../bootstrap/scss/spinners";
@import "../bootstrap/scss/utilities";
@import "../bootstrap/scss/print";
// Include fonts
-@import "fonts";
+@import "_fonts.scss";
// Custom stuff
-@import '_icons';
+@import "icons";
+@import "code-highlighting";
// Makes everything white with dark text on it
.inverse {
color: $body-bg;
}
-html {
- position: relative;
- min-height: 100%;
-}
-
body {
- padding-top: 6rem;
- margin-bottom: $footer-height;
+ display: flex;
+ min-height: 100vh;
+ flex-flow: column;
+
+ // Make the wiki slightly narrower
+ &.wiki-ipfire-org {
+ @include media-breakpoint-up(xl) {
+ .container {
+ max-width: 900px;
+ }
+ }
+ }
}
// Buttons
}
@each $color, $value in $theme-colors {
- .btn-glow-#{$color} {
+ .glow-#{$color} {
+ color: white;
background-color: rgba($value, .15);
}
}
+code {
+ background-color: $dark;
+ border-radius: $border-radius;
+ padding: 0.1rem 0.2rem;
+}
+
+pre {
+ background-color: $dark;
+ border-radius: $border-radius;
+ padding: 0.5rem;
+
+ code {
+ background-color: inherit;
+ padding: 0;
+ }
+
+ &.pre-light {
+ background-color: $white;
+ color: $body-bg;
+ }
+}
+
.card {
@extend .inverse;
+
+ // Reset padding for sections
+ section {
+ padding: 0;
+ }
+}
+
+.list-group {
+ .list-group-item {
+ color: $body-bg;
+ }
}
.nav {
}
.navbar {
- &.scrolled {
- @extend .inverse;
-
- transition: background-color 200ms linear;
+ background-color: rgba($gray-400, .06);
- border-bottom: 4px solid $body-bg;
- }
+ // Webkit is being stupid and cannot figure out the height
+ // of the navbar by itself
+ min-height: $navbar-height;
.navbar-brand {
color: inherit;
}
}
-footer {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: $footer-height;
+header {
+ &.cover {
+ position: relative;
+ width: 100%;
+ height: auto;
+ min-height: 42rem;
- padding: 3rem 0 0 0;
+ @include media-breakpoint-up(lg) {
+ height: calc(100vh - #{$navbar-height});
+ }
+ }
+}
+
+.icon-large {
+ font-size: 8em;
- @include media-breakpoint-down(md) {
- padding-top: 31px;
+ @include media-breakpoint-up(md) {
+ font-size: 6em;
}
- h4 {
- margin-bottom: 1.25rem;
- color: rgba($gray-400, .6);
- font-size: 20px;
- line-height: 28px;
+ @include media-breakpoint-up(lg) {
+ font-size: 8em;
}
- ul {
- li {
- font-size: 14px;
- margin-bottom: .75rem;
+ @include media-breakpoint-up(xl) {
+ font-size: 10em;
+ }
+}
+
+footer {
+ margin-top: auto;
+
+ .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;
- a {
- color: rgba($gray-400, .6);
- text-decoration: none;
&:hover {
- color: $gray-400;
- text-decoration: underline;
+ color: inherit;
}
}
- }
- }
- .btn-lg {
- margin-bottom: 2.75rem;
- }
+ 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;
+ }
}
}
+}
- .btn-toolbar .icon {
- height: 2.25rem;
- width: 2.25rem;
- fill: rgba($gray-400, .6);
- }
- .i_heart {
- vertical-align: top;
- transform: translateY(-.15rem);
- @include media-breakpoint-down(sm) {
- transform: translateY(-.75rem);
- }
- }
+.map {
+ min-height: 24rem;
}
// Sections
-.main {
- .intro {
- min-height: 100%;
- min-height: 100vh;
+section {
+ padding: 3rem 1rem;
- margin-top: -6rem;
+ @include media-breakpoint-up(md) {
+ padding: 5rem 0;
+ }
- @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;
}
+ }
+}
+
+blockquote {
+ @extend .blockquote;
- display: flex;
- align-items: center;
+ // Add a light border to the left
+ border-left: 0.5rem solid $light;
+ padding: $spacer;
+
+ quotes: "“" "”" "“" "”";
+
+ // Quote
+ &:before{
+ color: $light;
+ font-size: $display1-size;
+ line-height: 0;
+ margin-right: 0.25em;
+ vertical-align: -0.4em;
}
- section {
- padding: 3rem 0;
+ &:before {
+ content: open-quote;
+ }
- @include media-breakpoint-up(sm) {
- padding: 72px 0;
- }
+ p {
+ margin-bottom: 0;
}
}
.blog-post {
.blog-header {
- h5 {
+ h4 {
+ margin-bottom: 0;
+
a {
color: $dark;
}
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;
}
}
}
}
-// Donations
+.wiki-content {
+ h1, h2, h3, h4, h5, h6 {
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ margin-bottom: 0.5rem;
+ }
+
+ h1 {
+ font-size: $h4-font-size;
+ }
-.faq {
- a {
- color: $body-color;
+ h2 {
+ font-size: $h5-font-size;
}
-}
-.donation-explanation {
- margin-bottom: 2rem;
+ h3, h4, h5, h6 {
+ font-size: $h6-font-size;
+ }
- p {
- color: $text-muted;
+ figure {
+ // Center images
+ display: table;
+ margin-right: auto;
+ margin-left: auto;
+
+ // Add some extra margin to the top & bottom
+ padding: ($spacer * 2) 0 ($spacer * 2) 0;
}
- @include media-breakpoint-down(sm) {
- background-color: $dark;
- color: $white;
+ blockquote {
+ @extend .blockquote;
+ }
- padding: 1.5rem;
+ table {
+ @extend .table;
+ @extend .table-sm;
+ @extend .table-striped;
- h5, p {
- color: inherit;
+ // Apply CSS classes for alignment
+ thead {
+ th[align="left"], td[align="left"] {
+ @extend .text-left;
+ }
+
+ th[align="center"], td[align="center"] {
+ @extend .text-center;
+ }
+
+ th[align="right"], td[align="right"] {
+ @extend .text-right;
+ }
}
}
-}
-// Sidebar navigation
+ .footnote {
+ font-size: $small-font-size;
+
+ ol {
+ margin-bottom: 0;
-#sidebar .nav {
- position: fixed;
+ li {
+ p {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
}
-.feature_icons {
- width: 40px;
- height: 100%;
- float: left;
- margin-right: .75rem;
+#preview {
+ // Hide the spinner by default
+ #spinner {
+ display: none;
+ }
+
+ #preview-content {
+ @include transition(opacity .5s linear);
+ }
+
+ &.updating {
+ // Show the spinner during updates
+ #spinner {
+ display: block;
+ }
+
+ // While updating, we face out the content
+ #preview-content {
+ opacity: 0.5;
+ }
+ }
}
-.progress {
- background-color: rgba(255, 255, 255, .2);
+hr.divider {
+ border-color: rgba($dark, .15);
+ margin-top: 2rem;
+ margin-bottom: 3rem;
}
.circle {
}
}
-.fixed-top + .blog-content {
- padding-top: 88px;
- margin-bottom: 40px;
- @include media-breakpoint-up(lg) {
- padding-top: 161px;
- }
- .content {
- background: white;
- border-radius: 4px;
- padding: 40px 24px;
- position: relative;
- }
-}
-
-.blog-content {
- margin-bottom: 80px;
-}
-
-.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%); }
+.pdf-viewer {
+ width: 100%;
+ min-height: 32rem;
}
projects / ipfire.org.git / blobdiff