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 footer {
 128         margin-top: auto;
 129
 130         .footer {
 131                 margin-top: $spacer * 3;
 132
 133                 .footer-info {
 134                         padding: 2rem 0 0 0;
 135
 136                         color: $white;
 137                         background-color: rgba($gray-400, .04);
 138
 139                         @include media-breakpoint-down(md) {
 140                                 padding-top: 31px;
 141                         }
 142
 143                         a, .btn-link {
 144                                 color: inherit;
 145
 146                                 &:hover {
 147                                         color: inherit;
 148                                 }
 149                         }
 150
 151                         ul {
 152                                 li {
 153                                         margin-bottom: $spacer / 4;
 154                                 }
 155                         }
 156                 }
 157
 158                 .copyright {
 159                         background-color: rgba($gray-400, .06);
 160                         padding: $spacer 0;
 161
 162                         font-size: $small-font-size;
 163
 164                         a {
 165                                 color: $text-muted;
 166                         }
 167                 }
 168         }
 169 }
 170
 171 // Sections
 172
 173 section {
 174         padding: 3rem 1rem;
 175
 176         @include media-breakpoint-up(md) {
 177                 padding: 5rem 0;
 178         }
 179
 180         @include media-breakpoint-up(md) {
 181                 // Reset large headlines to normal size on mobile devices
 182                 h1 {
 183                         font-size: $display1-size;
 184                         font-weight: $display1-weight;
 185                         line-height: $display-line-height;
 186                 }
 187         }
 188 }
 189
 190 .blog-post {
 191         .blog-header {
 192                 h4 {
 193                         margin-bottom: 0;
 194
 195                         a {
 196                                 color: $dark;
 197                         }
 198                 }
 199         }
 200
 201         .blog-content {
 202                 h1, h2, h3, h4, h5, h6 {
 203                         font-size: 1.375rem;
 204                         font-weight: $headings-font-weight;
 205                         line-height: $headings-line-height;
 206                         margin-bottom: 0.25rem;
 207                 }
 208
 209                 img {
 210                         @include img-fluid;
 211
 212                         // Center all images
 213                         display: block;
 214                         margin-left: auto;
 215                         margin-right: auto;
 216
 217                         // Add some extra margin to the top & bottom
 218                         padding: ($spacer * 2) 0 ($spacer * 2) 0;
 219                 }
 220         }
 221
 222         &.lightning-wire-labs {
 223                 .blog-header {
 224                         h5 {
 225                                 a {
 226                                         color: $lwl;
 227                                 }
 228                         }
 229
 230                         a {
 231                                 color: $lwl;
 232                         }
 233                 }
 234
 235                 .blog-content {
 236                         a {
 237                                 color: $lwl;
 238                         }
 239                 }
 240         }
 241 }
 242
 243 .wiki-content {
 244         h1, h2, h3, h4, h5, h6 {
 245                 font-weight: $headings-font-weight;
 246                 line-height: $headings-line-height;
 247                 margin-bottom: 0.25rem;
 248         }
 249
 250         h1 {
 251                 font-size: $h4-font-size;
 252         }
 253
 254         h2 {
 255                 font-size: $h5-font-size;
 256         }
 257
 258         h3, h4, h5, h6 {
 259                 font-size: $h6-font-size;
 260         }
 261
 262         img {
 263                 @include img-fluid;
 264
 265                 // Center all images
 266                 display: block;
 267                 margin-left: auto;
 268                 margin-right: auto;
 269
 270                 // Add some extra margin to the top & bottom
 271                 padding: ($spacer * 2) 0 ($spacer * 2) 0;
 272         }
 273
 274         blockquote {
 275                 @extend .blockquote;
 276         }
 277
 278         table {
 279                 @extend .table;
 280                 @extend .table-sm;
 281         }
 282 }
 283
 284 hr.divider {
 285         border-color: rgba($dark, .15);
 286         margin-top: 2rem;
 287         margin-bottom: 3rem;
 288 }
 289
 290 .circle {
 291         position: relative;
 292         p.fireinfo_per {
 293                 color: $gray-800;
 294                 position: absolute;
 295                 top: calc(50% - 18px);
 296                 width: 100%;
 297         }
 298 }