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