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 body {
  47         // For scrollspy
  48         position: relative;
  49
  50         padding-top: 6rem;
  51 }
  52
  53 // Buttons
  54 .btn {
  55         text-transform: uppercase;
  56 }
  57
  58 @each $color, $value in $theme-colors {
  59         .btn-glow-#{$color} {
  60                 background-color: rgba($value, .15);
  61         }
  62 }
  63
  64 .card {
  65         @extend .inverse;
  66 }
  67
  68 .nav {
  69         .nav-link {
  70                 color: $white;
  71
  72                 &.active {
  73                         color: $link-color;
  74                         border-left: 2px solid $link-color;
  75                 }
  76         }
  77 }
  78
  79 .navbar {
  80         &.scrolled {
  81                 @extend .inverse;
  82
  83                 transition: background-color 200ms linear;
  84
  85                 border-bottom: 4px solid $body-bg;
  86         }
  87
  88         .navbar-brand {
  89                 color: inherit;
  90         }
  91
  92         .navbar-nav {
  93                 .nav-link {
  94                         color: inherit;
  95
  96                         &.active {
  97                                 border-bottom: 2px solid $link-color;
  98                         }
  99                 }
 100         }
 101 }
 102
 103 footer {
 104         .btn-toolbar .icon {
 105                 height: 2.25rem;
 106                 width: 2.25rem;
 107                 fill: rgba($gray-400, .6);
 108         }
 109         .i_heart {
 110                 vertical-align: top;
 111                 transform: translateY(-.15rem);
 112                 @include media-breakpoint-down(sm) {
 113                         transform: translateY(-.75rem);
 114                 }
 115         }
 116 }
 117
 118 // Sections
 119
 120 .main {
 121         .intro {
 122                 min-height: 100%;
 123                 min-height: 100vh;
 124
 125                 margin-top: -6rem;
 126
 127                 @include media-breakpoint-down(sm) {
 128                         padding-top: 6rem;
 129                 }
 130
 131                 display: flex;
 132                 align-items: center;
 133         }
 134
 135         section {
 136                 padding: 3rem 0;
 137
 138                 @include media-breakpoint-up(sm) {
 139                         padding: 72px 0;
 140                 }
 141         }
 142 }
 143
 144 .blog-post {
 145         .blog-header {
 146                 h5 {
 147                         a {
 148                                 color: $dark;
 149                         }
 150                 }
 151         }
 152
 153         .blog-content {
 154                 h1, h2, h3, h4, h5, h6 {
 155                         font-size: 1.375rem;
 156                         font-weight: $headings-font-weight;
 157                         line-height: $headings-line-height;
 158                         margin-bottom: 0.25rem;
 159                 }
 160
 161                 img {
 162                         @include img-fluid;
 163                 }
 164         }
 165
 166         &.lightning-wire-labs {
 167                 .blog-header {
 168                         h5 {
 169                                 a {
 170                                         color: $lwl;
 171                                 }
 172                         }
 173
 174                         a {
 175                                 color: $lwl;
 176                         }
 177                 }
 178
 179                 .blog-content {
 180                         a {
 181                                 color: $lwl;
 182                         }
 183                 }
 184         }
 185 }
 186
 187 // Donations
 188
 189 .faq {
 190         a {
 191                 color: $body-color;
 192         }
 193 }
 194
 195 .donation-explanation {
 196         margin-bottom: 2rem;
 197
 198         p {
 199                 color: $text-muted;
 200         }
 201
 202         @include media-breakpoint-down(sm) {
 203                 background-color: $dark;
 204                 color: $white;
 205
 206                 padding: 1.5rem;
 207
 208                 h5, p {
 209                         color: inherit;
 210                 }
 211         }
 212 }
 213
 214 // Sidebar navigation
 215
 216 #sidebar .nav {
 217         position: fixed;
 218 }
 219
 220 .feature_icons {
 221         width: 40px;
 222         height: 100%;
 223         float: left;
 224         margin-right: .75rem;
 225 }
 226
 227 .progress {
 228         background-color: rgba(255, 255, 255, .2);
 229 }
 230
 231 .circle {
 232         position: relative;
 233         p.fireinfo_per {
 234                 color: $gray-800;
 235                 position: absolute;
 236                 top: calc(50% - 18px);
 237                 width: 100%;
 238         }
 239 }
 240
 241 .fixed-top + .blog-content {
 242         padding-top: 88px;
 243         margin-bottom: 40px;
 244         @include media-breakpoint-up(lg) {
 245                 padding-top: 161px;
 246         }
 247         .content {
 248                 background: white;
 249                 border-radius: 4px;
 250                 padding: 40px 24px;
 251                 position: relative;
 252         }
 253 }
 254
 255 .blog-content {
 256         margin-bottom: 80px;
 257 }
 258
 259 .divider {
 260         width: 128px;
 261         height: 4px;
 262         border-radius: 2px;
 263         background-image: linear-gradient(to right, $red, $gray-400);
 264         margin: 40px auto 24px auto;
 265         @include media-breakpoint-up(sm) {
 266                 margin: 56px auto 40px auto;
 267         }
 268 }
 269
 270 footer {
 271         padding: 3rem 0 0 0;
 272         @include media-breakpoint-down(md) {
 273                 padding-top: 31px;
 274         }
 275         h4 {
 276                 margin-bottom: 1.25rem;
 277                 color: rgba($gray-400, .6);
 278                 font-size: 20px;
 279                 line-height: 28px;
 280         }
 281         ul {
 282                 li {
 283                         font-size: 14px;
 284                         margin-bottom: .75rem;
 285                         a {
 286                                 color: rgba($gray-400, .6);
 287                                 text-decoration: none;
 288                                 &:hover {
 289                                         color: $gray-400;
 290                                         text-decoration: underline;
 291                                 }
 292                         }
 293                 }
 294         }
 295         .btn-lg {
 296                 margin-bottom: 2.75rem;
 297         }
 298
 299         .copyright {
 300                 background-color: rgba($gray-400, .06);
 301                 padding: $spacer 0;
 302
 303                 font-size: $small-font-size;
 304
 305                 a {
 306                         color: $text-muted;
 307                 }
 308         }
 309 }
 310
 311 // Animation
 312 @keyframes scroll {
 313   0%, 100%   { transform: translateY(30%); }
 314   50% { transform: translateY(50%); }
 315 }