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 .card {
 105         @extend .inverse;
 106
 107         // Reset padding for sections
 108         section {
 109                 padding: 0;
 110         }
 111 }
 112
 113 .list-group {
 114         .list-group-item {
 115                 color: $body-bg;
 116         }
 117 }
 118
 119 .navbar {
 120         .navbar-brand {
 121                 font-weight: bold;
 122                 letter-spacing: 0.07em;
 123         }
 124 }
 125
 126 .bg-brand {
 127         min-height: 40rem;
 128
 129         // Background Image
 130         background-image: url("img/bg-img.jpg");
 131         background-repeat: no-repeat;
 132         background-position: center;
 133         background-size: cover;
 134
 135         // Text is white
 136         color: $white;
 137
 138         // Center the content
 139         display: flex;
 140         flex-direction: column;
 141         justify-content: center;
 142 }
 143
 144 .icon-large {
 145         font-size: 8em;
 146
 147         @include media-breakpoint-up(md) {
 148                 font-size: 6em;
 149         }
 150
 151         @include media-breakpoint-up(lg) {
 152                 font-size: 8em;
 153         }
 154
 155         @include media-breakpoint-up(xl) {
 156                 font-size: 10em;
 157         }
 158 }
 159
 160 footer {
 161         margin-top: auto;
 162
 163         .footer {
 164                 margin: ($spacer * 2) 0;
 165
 166                 ul {
 167                         @include list-unstyled();
 168
 169                         li {
 170                                 padding: ($spacer / 2) 0;
 171                         }
 172                 }
 173         }
 174
 175         .footer-link {
 176                 color: inherit;
 177
 178                 &:hover {
 179                         color: inherit;
 180                 }
 181         }
 182 }
 183
 184 .map {
 185         min-height: 24rem;
 186 }
 187
 188 // Sections
 189
 190 section {
 191         padding: 3rem 1rem;
 192
 193         @include media-breakpoint-up(md) {
 194                 padding: 5rem 0;
 195         }
 196
 197         @include media-breakpoint-up(md) {
 198                 // Reset large headlines to normal size on mobile devices
 199                 h1 {
 200                         font-size: $display1-size;
 201                         font-weight: $display1-weight;
 202                         line-height: $display-line-height;
 203                 }
 204         }
 205 }
 206
 207 blockquote {
 208         @extend .blockquote;
 209
 210         // Add a light border to the left
 211         border-left: 0.5rem solid $light;
 212         padding: $spacer;
 213
 214         quotes: "“" "”" "“" "”";
 215
 216         // Quote
 217         &:before{
 218                 color: $light;
 219                 font-size: $display1-size;
 220                 line-height: 0;
 221                 margin-right: 0.25em;
 222                 vertical-align: -0.4em;
 223         }
 224
 225         &:before {
 226                 content: open-quote;
 227         }
 228
 229         p {
 230                 margin-bottom: 0;
 231         }
 232 }
 233
 234 .blog-post {
 235         .blog-header {
 236                 h4 {
 237                         margin-bottom: 0;
 238
 239                         a {
 240                                 color: $dark;
 241                         }
 242                 }
 243         }
 244
 245         .blog-content {
 246                 h1, h2, h3, h4, h5, h6 {
 247                         font-size: 1.375rem;
 248                         font-weight: $headings-font-weight;
 249                         line-height: $headings-line-height;
 250                         margin-bottom: 0.25rem;
 251                 }
 252
 253                 img {
 254                         @include img-fluid;
 255
 256                         // Center all images
 257                         display: block;
 258                         margin-left: auto;
 259                         margin-right: auto;
 260
 261                         // Add some extra margin to the top & bottom
 262                         padding: ($spacer * 2) 0 ($spacer * 2) 0;
 263                 }
 264         }
 265
 266         &.lightning-wire-labs {
 267                 .blog-header {
 268                         h5 {
 269                                 a {
 270                                         color: $lwl;
 271                                 }
 272                         }
 273
 274                         a {
 275                                 color: $lwl;
 276                         }
 277                 }
 278
 279                 .blog-content {
 280                         a {
 281                                 color: $lwl;
 282                         }
 283                 }
 284         }
 285 }
 286
 287 .wiki-content {
 288         h1, h2, h3, h4, h5, h6 {
 289                 font-weight: $headings-font-weight;
 290                 line-height: $headings-line-height;
 291                 margin-bottom: 0.5rem;
 292         }
 293
 294         h1 {
 295                 font-size: $h4-font-size;
 296         }
 297
 298         h2 {
 299                 font-size: $h5-font-size;
 300         }
 301
 302         h3, h4, h5, h6 {
 303                 font-size: $h6-font-size;
 304         }
 305
 306         figure {
 307                 // Center images
 308                 display: table;
 309                 margin-right: auto;
 310                 margin-left: auto;
 311
 312                 // Add some extra margin to the top & bottom
 313                 padding: ($spacer * 2) 0 ($spacer * 2) 0;
 314         }
 315
 316         blockquote {
 317                 @extend .blockquote;
 318         }
 319
 320         table {
 321                 @extend .table;
 322                 @extend .table-sm;
 323                 @extend .table-striped;
 324
 325                 // Apply CSS classes for alignment
 326                 thead {
 327                         th[align="left"], td[align="left"] {
 328                                 @extend .text-left;
 329                         }
 330
 331                         th[align="center"], td[align="center"] {
 332                                 @extend .text-center;
 333                         }
 334
 335                         th[align="right"], td[align="right"] {
 336                                 @extend .text-right;
 337                         }
 338                 }
 339         }
 340
 341         .footnote {
 342                 font-size: $small-font-size;
 343
 344                 ol {
 345                         margin-bottom: 0;
 346
 347                         li {
 348                                 p {
 349                                         margin-bottom: 0;
 350                                 }
 351                         }
 352                 }
 353         }
 354 }
 355
 356 #preview {
 357         // Hide the spinner by default
 358         #spinner {
 359                 display: none;
 360         }
 361
 362         #preview-content {
 363                 @include transition(opacity .5s linear);
 364         }
 365
 366         &.updating {
 367                 // Show the spinner during updates
 368                 #spinner {
 369                         display: block;
 370                 }
 371
 372                 // While updating, we face out the content
 373                 #preview-content {
 374                         opacity: 0.5;
 375                 }
 376         }
 377 }
 378
 379 hr.divider {
 380         border-color: rgba($dark, .15);
 381         margin-top: 2rem;
 382         margin-bottom: 3rem;
 383 }
 384
 385 .circle {
 386         position: relative;
 387         p.fireinfo_per {
 388                 color: $gray-800;
 389                 position: absolute;
 390                 top: calc(50% - 18px);
 391                 width: 100%;
 392         }
 393 }
 394
 395 .pdf-viewer {
 396         width: 100%;
 397         min-height: 32rem;
 398 }