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