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