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         .btn-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
  85 .card {
  86         @extend .inverse;
  87
  88         // Reset padding for sections
  89         section {
  90                 padding: 0;
  91         }
  92 }
  93
  94 .list-group {
  95         .list-group-item {
  96                 color: $body-bg;
  97         }
  98 }
  99
 100 .nav {
 101         .nav-link {
 102                 color: $white;
 103
 104                 &.active {
 105                         color: $link-color;
 106                         border-left: 2px solid $link-color;
 107                 }
 108         }
 109 }
 110
 111 .navbar {
 112         background-color: rgba($gray-400, .06);
 113
 114         // Webkit is being stupid and cannot figure out the height
 115         // of the navbar by itself
 116         min-height: $navbar-height;
 117
 118         .navbar-brand {
 119                 color: inherit;
 120         }
 121
 122         .navbar-nav {
 123                 .nav-link {
 124                         color: inherit;
 125
 126                         &.active {
 127                                 border-bottom: 2px solid $link-color;
 128                         }
 129                 }
 130         }
 131 }
 132
 133 header {
 134         &.cover {
 135                 position: relative;
 136                 width: 100%;
 137                 height: auto;
 138                 min-height: 35rem;
 139
 140                 @include media-breakpoint-up(lg) {
 141                         height: calc(100vh - #{$navbar-height});
 142                 }
 143         }
 144 }
 145
 146 .icon-large {
 147         font-size: 8em;
 148
 149         @include media-breakpoint-up(md) {
 150                 font-size: 6em;
 151         }
 152
 153         @include media-breakpoint-up(lg) {
 154                 font-size: 8em;
 155         }
 156
 157         @include media-breakpoint-up(xl) {
 158                 font-size: 10em;
 159         }
 160 }
 161
 162 footer {
 163         margin-top: auto;
 164
 165         .footer {
 166                 margin-top: $spacer * 3;
 167
 168                 .footer-info {
 169                         padding: 2rem 0 0 0;
 170
 171                         color: $white;
 172                         background-color: rgba($gray-400, .04);
 173
 174                         @include media-breakpoint-down(md) {
 175                                 padding-top: 31px;
 176                         }
 177
 178                         a, .btn-link {
 179                                 color: inherit;
 180
 181                                 &:hover {
 182                                         color: inherit;
 183                                 }
 184                         }
 185
 186                         ul {
 187                                 li {
 188                                         margin-bottom: $spacer / 4;
 189                                 }
 190                         }
 191                 }
 192
 193                 .copyright {
 194                         background-color: rgba($gray-400, .06);
 195                         padding: $spacer 0;
 196
 197                         font-size: $small-font-size;
 198
 199                         a {
 200                                 color: $text-muted;
 201                         }
 202                 }
 203         }
 204 }
 205
 206 // Sections
 207
 208 section {
 209         padding: 3rem 1rem;
 210
 211         @include media-breakpoint-up(md) {
 212                 padding: 5rem 0;
 213         }
 214
 215         @include media-breakpoint-up(md) {
 216                 // Reset large headlines to normal size on mobile devices
 217                 h1 {
 218                         font-size: $display1-size;
 219                         font-weight: $display1-weight;
 220                         line-height: $display-line-height;
 221                 }
 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 }
 317
 318 #preview {
 319         // Hide the spinner by default
 320         #spinner {
 321                 display: none;
 322         }
 323
 324         #preview-content {
 325                 @include transition(opacity .5s linear);
 326         }
 327
 328         &.updating {
 329                 // Show the spinner during updates
 330                 #spinner {
 331                         display: block;
 332                 }
 333
 334                 // While updating, we face out the content
 335                 #preview-content {
 336                         opacity: 0.5;
 337                 }
 338         }
 339 }
 340
 341 hr.divider {
 342         border-color: rgba($dark, .15);
 343         margin-top: 2rem;
 344         margin-bottom: 3rem;
 345 }
 346
 347 .circle {
 348         position: relative;
 349         p.fireinfo_per {
 350                 color: $gray-800;
 351                 position: absolute;
 352                 top: calc(50% - 18px);
 353                 width: 100%;
 354         }
 355 }
 356
 357 .pdf-viewer {
 358         width: 100%;
 359         min-height: 32rem;
 360 }