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/nav";
  21 @import "../bootstrap/scss/navbar";
  22 @import "../bootstrap/scss/card";
  23 @import "../bootstrap/scss/pagination";
  24 @import "../bootstrap/scss/badge";
  25 @import "../bootstrap/scss/alert";
  26 @import "../bootstrap/scss/progress";
  27 @import "../bootstrap/scss/media";
  28 @import "../bootstrap/scss/list-group";
  29 @import "../bootstrap/scss/close";
  30 @import "../bootstrap/scss/modal";
  31 @import "../bootstrap/scss/utilities";
  32 @import "../bootstrap/scss/print";
  33
  34 // Include fonts
  35 @import "fonts";
  36
  37 // Custom stuff
  38 @import '_icons';
  39
  40 // Makes everything white with dark text on it
  41 .inverse {
  42         background-color: $body-color;
  43         color: $body-bg;
  44 }
  45
  46 html, body {
  47         height: 100%;
  48 }
  49
  50 body {
  51         display: flex;
  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 .card {
  68         @extend .inverse;
  69
  70         // Reset padding for sections
  71         section {
  72                 padding: 0;
  73         }
  74 }
  75
  76 .list-group {
  77         .list-group-item {
  78                 @extend .inverse;
  79         }
  80 }
  81
  82 .nav {
  83         .nav-link {
  84                 color: $white;
  85
  86                 &.active {
  87                         color: $link-color;
  88                         border-left: 2px solid $link-color;
  89                 }
  90         }
  91 }
  92
  93 .navbar {
  94         background-color: rgba($gray-400, .06);
  95
  96         // Webkit is being stupid and cannot figure out the height
  97         // of the navbar by itself
  98         min-height: $navbar-height;
  99
 100         .navbar-brand {
 101                 color: inherit;
 102         }
 103
 104         .navbar-nav {
 105                 .nav-link {
 106                         color: inherit;
 107
 108                         &.active {
 109                                 border-bottom: 2px solid $link-color;
 110                         }
 111                 }
 112         }
 113 }
 114
 115 footer {
 116         margin-top: auto;
 117
 118         .footer {
 119                 margin-top: $spacer * 4;
 120                 padding: 2rem 0 0 0;
 121
 122                 color: $white;
 123                 background-color: rgba($gray-400, .04);
 124
 125                 @include media-breakpoint-down(md) {
 126                         padding-top: 31px;
 127                 }
 128
 129                 a, .btn-link {
 130                         color: inherit;
 131
 132                         &:hover {
 133                                 color: inherit;
 134                         }
 135                 }
 136
 137                 ul {
 138                         li {
 139                                 margin-bottom: $spacer / 4;
 140                         }
 141                 }
 142         }
 143
 144         .copyright {
 145                 background-color: rgba($gray-400, .06);
 146                 padding: $spacer 0;
 147
 148                 font-size: $small-font-size;
 149
 150                 a {
 151                         color: $text-muted;
 152                 }
 153         }
 154 }
 155
 156 // Sections
 157
 158 section {
 159         padding: 3rem 0;
 160
 161         @include media-breakpoint-up(sm) {
 162                 padding: 72px 0;
 163         }
 164 }
 165
 166 .main {
 167         .intro {
 168                 min-height: 100%;
 169                 min-height: 100vh;
 170
 171                 margin-top: -6rem;
 172
 173                 @include media-breakpoint-down(sm) {
 174                         padding-top: 6rem;
 175                 }
 176
 177                 display: flex;
 178                 align-items: center;
 179         }
 180 }
 181
 182 .blog-post {
 183         .blog-header {
 184                 h5 {
 185                         a {
 186                                 color: $dark;
 187                         }
 188                 }
 189         }
 190
 191         .blog-content {
 192                 h1, h2, h3, h4, h5, h6 {
 193                         font-size: 1.375rem;
 194                         font-weight: $headings-font-weight;
 195                         line-height: $headings-line-height;
 196                         margin-bottom: 0.25rem;
 197                 }
 198
 199                 img {
 200                         @include img-fluid;
 201                 }
 202         }
 203
 204         &.lightning-wire-labs {
 205                 .blog-header {
 206                         h5 {
 207                                 a {
 208                                         color: $lwl;
 209                                 }
 210                         }
 211
 212                         a {
 213                                 color: $lwl;
 214                         }
 215                 }
 216
 217                 .blog-content {
 218                         a {
 219                                 color: $lwl;
 220                         }
 221                 }
 222         }
 223 }
 224
 225 // Donations
 226
 227 .donation-explanation {
 228         color: $text-muted;
 229         padding: 1.5rem;
 230
 231         .faq {
 232                 a {
 233                         color: inherit;
 234                 }
 235         }
 236 }
 237
 238 // Sidebar navigation
 239
 240 #sidebar .nav {
 241         position: fixed;
 242 }
 243
 244 .feature_icons {
 245         width: 40px;
 246         height: 100%;
 247         float: left;
 248         margin-right: .75rem;
 249 }
 250
 251 .progress {
 252         background-color: rgba(255, 255, 255, .2);
 253 }
 254
 255 .circle {
 256         position: relative;
 257         p.fireinfo_per {
 258                 color: $gray-800;
 259                 position: absolute;
 260                 top: calc(50% - 18px);
 261                 width: 100%;
 262         }
 263 }
 264
 265 .divider {
 266         width: 128px;
 267         height: 4px;
 268         border-radius: 2px;
 269         background-image: linear-gradient(to right, $red, $gray-400);
 270         margin: 40px auto 24px auto;
 271         @include media-breakpoint-up(sm) {
 272                 margin: 56px auto 40px auto;
 273         }
 274 }
 275
 276 // Animation
 277 @keyframes scroll {
 278   0%, 100%   { transform: translateY(30%); }
 279   50% { transform: translateY(50%); }
 280 }