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