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 // Buttons
  66 .btn {
  67         text-transform: uppercase;
  68 }
  69
  70 @each $color, $value in $theme-colors {
  71         .glow-#{$color} {
  72                 color: white;
  73                 background-color: rgba($value, .15);
  74         }
  75 }
  76
  77 code {
  78         background-color: $dark;
  79         border-radius: $border-radius;
  80         padding: 0.1rem 0.2rem;
  81 }
  82
  83 pre {
  84         background-color: $dark;
  85         border-radius: $border-radius;
  86         padding: 0.5rem;
  87
  88         code {
  89                 background-color: inherit;
  90                 padding: 0;
  91         }
  92
  93         &.pre-light {
  94                 background-color: $white;
  95                 color: $body-bg;
  96         }
  97 }
  98
  99 .card {
 100         @extend .inverse;
 101
 102         // Reset padding for sections
 103         section {
 104                 padding: 0;
 105         }
 106 }
 107
 108 .list-group {
 109         .list-group-item {
 110                 color: $body-bg;
 111         }
 112 }
 113
 114 .nav {
 115         .nav-link {
 116                 color: $white;
 117
 118                 &.active {
 119                         color: $link-color;
 120                         border-left: 2px solid $link-color;
 121                 }
 122         }
 123 }
 124
 125 .navbar {
 126         background-color: rgba($gray-400, .06);
 127
 128         // Webkit is being stupid and cannot figure out the height
 129         // of the navbar by itself
 130         min-height: $navbar-height;
 131
 132         .navbar-brand {
 133                 color: inherit;
 134         }
 135
 136         .navbar-nav {
 137                 .nav-link {
 138                         color: inherit;
 139
 140                         &.active {
 141                                 border-bottom: 2px solid $link-color;
 142                         }
 143                 }
 144         }
 145 }
 146
 147 header {
 148         &.cover {
 149                 position: relative;
 150                 width: 100%;
 151                 height: auto;
 152                 min-height: 42rem;
 153
 154                 @include media-breakpoint-up(lg) {
 155                         height: calc(100vh - #{$navbar-height});
 156                 }
 157         }
 158 }
 159
 160 .icon-large {
 161         font-size: 8em;
 162
 163         @include media-breakpoint-up(md) {
 164                 font-size: 6em;
 165         }
 166
 167         @include media-breakpoint-up(lg) {
 168                 font-size: 8em;
 169         }
 170
 171         @include media-breakpoint-up(xl) {
 172                 font-size: 10em;
 173         }
 174 }
 175
 176 footer {
 177         margin-top: auto;
 178
 179         .footer {
 180                 margin-top: $spacer * 3;
 181
 182                 .footer-info {
 183                         padding: 2rem 0 0 0;
 184
 185                         color: $white;
 186                         background-color: rgba($gray-400, .04);
 187
 188                         @include media-breakpoint-down(md) {
 189                                 padding-top: 31px;
 190                         }
 191
 192                         a, .btn-link {
 193                                 color: inherit;
 194
 195                                 &:hover {
 196                                         color: inherit;
 197                                 }
 198                         }
 199
 200                         ul {
 201                                 li {
 202                                         margin-bottom: $spacer / 4;
 203                                 }
 204                         }
 205                 }
 206
 207                 .copyright {
 208                         background-color: rgba($gray-400, .06);
 209                         padding: $spacer 0;
 210
 211                         font-size: $small-font-size;
 212
 213                         a {
 214                                 color: $text-muted;
 215                         }
 216                 }
 217         }
 218 }
 219
 220 .map {
 221         min-height: 24rem;
 222 }
 223
 224 // Sections
 225
 226 section {
 227         padding: 3rem 1rem;
 228
 229         @include media-breakpoint-up(md) {
 230                 padding: 5rem 0;
 231         }
 232
 233         @include media-breakpoint-up(md) {
 234                 // Reset large headlines to normal size on mobile devices
 235                 h1 {
 236                         font-size: $display1-size;
 237                         font-weight: $display1-weight;
 238                         line-height: $display-line-height;
 239                 }
 240         }
 241 }
 242
 243 blockquote {
 244         @extend .blockquote;
 245
 246         // Add a light border to the left
 247         border-left: 0.5rem solid $light;
 248         padding: $spacer;
 249
 250         quotes: "“" "”" "“" "”";
 251
 252         // Quote
 253         &:before{
 254                 color: $light;
 255                 font-size: $display1-size;
 256                 line-height: 0;
 257                 margin-right: 0.25em;
 258                 vertical-align: -0.4em;
 259         }
 260
 261         &:before {
 262                 content: open-quote;
 263         }
 264
 265         p {
 266                 margin-bottom: 0;
 267         }
 268 }
 269
 270 .blog-post {
 271         .blog-header {
 272                 h4 {
 273                         margin-bottom: 0;
 274
 275                         a {
 276                                 color: $dark;
 277                         }
 278                 }
 279         }
 280
 281         .blog-content {
 282                 h1, h2, h3, h4, h5, h6 {
 283                         font-size: 1.375rem;
 284                         font-weight: $headings-font-weight;
 285                         line-height: $headings-line-height;
 286                         margin-bottom: 0.25rem;
 287                 }
 288
 289                 img {
 290                         @include img-fluid;
 291
 292                         // Center all images
 293                         display: block;
 294                         margin-left: auto;
 295                         margin-right: auto;
 296
 297                         // Add some extra margin to the top & bottom
 298                         padding: ($spacer * 2) 0 ($spacer * 2) 0;
 299                 }
 300
 301                 table {
 302                         @extend .table;
 303                         @extend .table-sm;
 304                         @extend .table-striped;
 305
 306                         // Apply CSS classes for alignment
 307                         thead {
 308                                 th[align="left"], td[align="left"] {
 309                                         @extend .text-left;
 310                                 }
 311
 312                                 th[align="center"], td[align="center"] {
 313                                         @extend .text-center;
 314                                 }
 315
 316                                 th[align="right"], td[align="right"] {
 317                                         @extend .text-right;
 318                                 }
 319                         }
 320                 }
 321         }
 322
 323         &.lightning-wire-labs {
 324                 .blog-header {
 325                         h5 {
 326                                 a {
 327                                         color: $lwl;
 328                                 }
 329                         }
 330
 331                         a {
 332                                 color: $lwl;
 333                         }
 334                 }
 335
 336                 .blog-content {
 337                         a {
 338                                 color: $lwl;
 339                         }
 340                 }
 341         }
 342 }
 343
 344 .wiki-content {
 345         h1, h2, h3, h4, h5, h6 {
 346                 font-weight: $headings-font-weight;
 347                 line-height: $headings-line-height;
 348                 margin-bottom: 0.5rem;
 349         }
 350
 351         h1 {
 352                 font-size: $h4-font-size;
 353         }
 354
 355         h2 {
 356                 font-size: $h5-font-size;
 357         }
 358
 359         h3, h4, h5, h6 {
 360                 font-size: $h6-font-size;
 361         }
 362
 363         figure {
 364                 // Center images
 365                 display: table;
 366                 margin-right: auto;
 367                 margin-left: auto;
 368
 369                 // Add some extra margin to the top & bottom
 370                 padding: ($spacer * 2) 0 ($spacer * 2) 0;
 371         }
 372
 373         blockquote {
 374                 @extend .blockquote;
 375         }
 376
 377         table {
 378                 @extend .table;
 379                 @extend .table-sm;
 380                 @extend .table-striped;
 381
 382                 // Apply CSS classes for alignment
 383                 thead {
 384                         th[align="left"], td[align="left"] {
 385                                 @extend .text-left;
 386                         }
 387
 388                         th[align="center"], td[align="center"] {
 389                                 @extend .text-center;
 390                         }
 391
 392                         th[align="right"], td[align="right"] {
 393                                 @extend .text-right;
 394                         }
 395                 }
 396         }
 397
 398         .footnote {
 399                 font-size: $small-font-size;
 400
 401                 ol {
 402                         margin-bottom: 0;
 403
 404                         li {
 405                                 p {
 406                                         margin-bottom: 0;
 407                                 }
 408                         }
 409                 }
 410         }
 411 }
 412
 413 #preview {
 414         // Hide the spinner by default
 415         #spinner {
 416                 display: none;
 417         }
 418
 419         #preview-content {
 420                 @include transition(opacity .5s linear);
 421         }
 422
 423         &.updating {
 424                 // Show the spinner during updates
 425                 #spinner {
 426                         display: block;
 427                 }
 428
 429                 // While updating, we face out the content
 430                 #preview-content {
 431                         opacity: 0.5;
 432                 }
 433         }
 434 }
 435
 436 hr.divider {
 437         border-color: rgba($dark, .15);
 438         margin-top: 2rem;
 439         margin-bottom: 3rem;
 440 }
 441
 442 .circle {
 443         position: relative;
 444         p.fireinfo_per {
 445                 color: $gray-800;
 446                 position: absolute;
 447                 top: calc(50% - 18px);
 448                 width: 100%;
 449         }
 450 }
 451
 452 .pdf-viewer {
 453         width: 100%;
 454         min-height: 32rem;
 455 }