src/scss/style.scss

   1 @import "variables";
   2
   3 // Use all Bootstrap modules that we want
   4 @import "../bootstrap/scss/functions";
   5 @import "../bootstrap/scss/variables";
   6 @import "../bootstrap/scss/mixins";
   7 @import "../bootstrap/scss/root";
   8 @import "../bootstrap/scss/reboot";
   9 @import "../bootstrap/scss/type";
  10 @import "../bootstrap/scss/images";
  11 @import "../bootstrap/scss/code";
  12 @import "../bootstrap/scss/grid";
  13 @import "../bootstrap/scss/tables";
  14 @import "../bootstrap/scss/forms";
  15 @import "../bootstrap/scss/buttons";
  16 @import "../bootstrap/scss/transitions";
  17 @import "../bootstrap/scss/dropdown";
  18 @import "../bootstrap/scss/button-group";
  19 @import "../bootstrap/scss/input-group";
  20 @import "../bootstrap/scss/custom-forms";
  21 @import "../bootstrap/scss/nav";
  22 @import "../bootstrap/scss/navbar";
  23 @import "../bootstrap/scss/card";
  24 @import "../bootstrap/scss/pagination";
  25 @import "../bootstrap/scss/breadcrumb";
  26 @import "../bootstrap/scss/badge";
  27 @import "../bootstrap/scss/alert";
  28 @import "../bootstrap/scss/progress";
  29 @import "../bootstrap/scss/media";
  30 @import "../bootstrap/scss/list-group";
  31 @import "../bootstrap/scss/close";
  32 @import "../bootstrap/scss/modal";
  33 @import "../bootstrap/scss/spinners";
  34 @import "../bootstrap/scss/utilities";
  35 @import "../bootstrap/scss/print";
  36
  37 // Include fonts
  38 @import "_fonts.scss";
  39
  40 // Custom stuff
  41 @import "icons";
  42 @import "code-highlighting";
  43
  44 // Makes everything white with dark text on it
  45 .inverse {
  46         background-color: $body-color;
  47         color: $body-bg;
  48 }
  49
  50 body {
  51         display: flex;
  52         min-height: 100vh;
  53         flex-flow: column;
  54
  55         // Make the wiki slightly narrower
  56         &.wiki-ipfire-org {
  57                 @include media-breakpoint-up(xl) {
  58                         .container {
  59                                 max-width: 900px;
  60                         }
  61                 }
  62         }
  63 }
  64
  65 .header {
  66         padding-top: 5rem;
  67         background-color: $light;
  68 }
  69
  70 // Buttons
  71 .btn {
  72         text-transform: uppercase;
  73 }
  74
  75 @each $color, $value in $theme-colors {
  76         .glow-#{$color} {
  77                 color: white;
  78                 background-color: rgba($value, .15);
  79         }
  80 }
  81
  82 code {
  83         background-color: $dark;
  84         border-radius: $border-radius;
  85         padding: 0.1rem 0.2rem;
  86 }
  87
  88 pre {
  89         background-color: $dark;
  90         border-radius: $border-radius;
  91         padding: 0.5rem;
  92
  93         code {
  94                 background-color: inherit;
  95                 padding: 0;
  96         }
  97
  98         &.pre-light {
  99                 background-color: $white;
 100                 color: $body-bg;
 101         }
 102 }
 103
 104 .list-group {
 105         .list-group-item {
 106                 color: $body-bg;
 107         }
 108 }
 109
 110 .navbar {
 111         .navbar-brand {
 112                 font-weight: bold;
 113                 letter-spacing: 0.07em;
 114         }
 115 }
 116
 117 .bg-brand {
 118         min-height: 40rem;
 119
 120         // Background Image
 121         background-image: url("img/bg-img.jpg");
 122         background-repeat: no-repeat;
 123         background-position: center;
 124         background-size: cover;
 125
 126         // Text is white
 127         color: $white;
 128
 129         // Center the content
 130         display: flex;
 131         flex-direction: column;
 132         justify-content: center;
 133 }
 134
 135 .icon-large {
 136         font-size: 8em;
 137
 138         @include media-breakpoint-up(md) {
 139                 font-size: 6em;
 140         }
 141
 142         @include media-breakpoint-up(lg) {
 143                 font-size: 8em;
 144         }
 145
 146         @include media-breakpoint-up(xl) {
 147                 font-size: 10em;
 148         }
 149 }
 150
 151 footer {
 152         margin-top: auto;
 153
 154         .footer {
 155                 margin: ($spacer * 2) 0;
 156
 157                 ul {
 158                         @include list-unstyled();
 159
 160                         li {
 161                                 padding: ($spacer / 2) 0;
 162                         }
 163                 }
 164         }
 165
 166         .footer-link {
 167                 color: inherit;
 168
 169                 &:hover {
 170                         color: inherit;
 171                 }
 172         }
 173 }
 174
 175 .map {
 176         min-height: 24rem;
 177 }
 178
 179 // Sections
 180
 181 section {
 182         padding: 3rem 1rem;
 183
 184         @include media-breakpoint-up(md) {
 185                 padding: 5rem 0;
 186         }
 187
 188         @include media-breakpoint-up(md) {
 189                 // Reset large headlines to normal size on mobile devices
 190                 h1 {
 191                         font-size: $display1-size;
 192                         font-weight: $display1-weight;
 193                         line-height: $display-line-height;
 194                 }
 195         }
 196 }
 197
 198 blockquote {
 199         @extend .blockquote;
 200
 201         // Add a light border to the left
 202         border-left: 0.5rem solid $light;
 203         padding: $spacer;
 204
 205         quotes: "“" "”" "“" "”";
 206
 207         // Quote
 208         &:before{
 209                 color: $light;
 210                 font-size: $display1-size;
 211                 line-height: 0;
 212                 margin-right: 0.25em;
 213                 vertical-align: -0.4em;
 214         }
 215
 216         &:before {
 217                 content: open-quote;
 218         }
 219
 220         p {
 221                 margin-bottom: 0;
 222         }
 223 }
 224
 225 .blog-post {
 226         .blog-header {
 227                 h4 {
 228                         margin-bottom: 0;
 229
 230                         a {
 231                                 color: $dark;
 232                         }
 233                 }
 234         }
 235
 236         .blog-content {
 237                 h1, h2, h3, h4, h5, h6 {
 238                         font-size: 1.375rem;
 239                         font-weight: $headings-font-weight;
 240                         line-height: $headings-line-height;
 241                         margin-bottom: 0.25rem;
 242                 }
 243
 244                 img {
 245                         @include img-fluid;
 246
 247                         // Center all images
 248                         display: block;
 249                         margin-left: auto;
 250                         margin-right: auto;
 251
 252                         // Add some extra margin to the top & bottom
 253                         padding: ($spacer * 2) 0 ($spacer * 2) 0;
 254                 }
 255         }
 256
 257         &.lightning-wire-labs {
 258                 .blog-header {
 259                         h5 {
 260                                 a {
 261                                         color: $lwl;
 262                                 }
 263                         }
 264
 265                         a {
 266                                 color: $lwl;
 267                         }
 268                 }
 269
 270                 .blog-content {
 271                         a {
 272                                 color: $lwl;
 273                         }
 274                 }
 275         }
 276 }
 277
 278 .wiki-content {
 279         h1, h2, h3, h4, h5, h6 {
 280                 font-weight: $headings-font-weight;
 281                 line-height: $headings-line-height;
 282                 margin-bottom: 0.5rem;
 283         }
 284
 285         h1 {
 286                 font-size: $h4-font-size;
 287         }
 288
 289         h2 {
 290                 font-size: $h5-font-size;
 291         }
 292
 293         h3, h4, h5, h6 {
 294                 font-size: $h6-font-size;
 295         }
 296
 297         figure {
 298                 // Center images
 299                 display: table;
 300                 margin-right: auto;
 301                 margin-left: auto;
 302
 303                 // Add some extra margin to the top & bottom
 304                 padding: ($spacer * 2) 0 ($spacer * 2) 0;
 305         }
 306
 307         blockquote {
 308                 @extend .blockquote;
 309         }
 310
 311         table {
 312                 @extend .table;
 313                 @extend .table-sm;
 314                 @extend .table-striped;
 315
 316                 // Apply CSS classes for alignment
 317                 thead {
 318                         th[align="left"], td[align="left"] {
 319                                 @extend .text-left;
 320                         }
 321
 322                         th[align="center"], td[align="center"] {
 323                                 @extend .text-center;
 324                         }
 325
 326                         th[align="right"], td[align="right"] {
 327                                 @extend .text-right;
 328                         }
 329                 }
 330         }
 331
 332         .footnote {
 333                 font-size: $small-font-size;
 334
 335                 ol {
 336                         margin-bottom: 0;
 337
 338                         li {
 339                                 p {
 340                                         margin-bottom: 0;
 341                                 }
 342                         }
 343                 }
 344         }
 345 }
 346
 347 #preview {
 348         // Hide the spinner by default
 349         #spinner {
 350                 display: none;
 351         }
 352
 353         #preview-content {
 354                 @include transition(opacity .5s linear);
 355         }
 356
 357         &.updating {
 358                 // Show the spinner during updates
 359                 #spinner {
 360                         display: block;
 361                 }
 362
 363                 // While updating, we face out the content
 364                 #preview-content {
 365                         opacity: 0.5;
 366                 }
 367         }
 368 }
 369
 370 hr.divider {
 371         border-color: rgba($dark, .15);
 372         margin-top: 2rem;
 373         margin-bottom: 3rem;
 374 }
 375
 376 .circle {
 377         position: relative;
 378         p.fireinfo_per {
 379                 color: $gray-800;
 380                 position: absolute;
 381                 top: calc(50% - 18px);
 382                 width: 100%;
 383         }
 384 }
 385
 386 .pdf-viewer {
 387         width: 100%;
 388         min-height: 32rem;
 389 }