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
  71 .nav {
  72         .nav-link {
  73                 color: $white;
  74
  75                 &.active {
  76                         color: $link-color;
  77                         border-left: 2px solid $link-color;
  78                 }
  79         }
  80 }
  81
  82 .navbar {
  83         background-color: rgba($gray-400, .06);
  84
  85         .navbar-brand {
  86                 color: inherit;
  87         }
  88
  89         .navbar-nav {
  90                 .nav-link {
  91                         color: inherit;
  92
  93                         &.active {
  94                                 border-bottom: 2px solid $link-color;
  95                         }
  96                 }
  97         }
  98 }
  99
 100 footer {
 101         margin-top: auto;
 102
 103         .footer {
 104                 margin-top: $spacer * 4;
 105                 padding: 2rem 0 0 0;
 106
 107                 color: $white;
 108                 background-color: rgba($gray-400, .04);
 109
 110                 @include media-breakpoint-down(md) {
 111                         padding-top: 31px;
 112                 }
 113
 114                 a, .btn-link {
 115                         color: inherit;
 116
 117                         &:hover {
 118                                 color: inherit;
 119                         }
 120                 }
 121
 122                 ul {
 123                         li {
 124                                 margin-bottom: $spacer / 4;
 125                         }
 126                 }
 127         }
 128
 129         .copyright {
 130                 background-color: rgba($gray-400, .06);
 131                 padding: $spacer 0;
 132
 133                 font-size: $small-font-size;
 134
 135                 a {
 136                         color: $text-muted;
 137                 }
 138         }
 139 }
 140
 141 // Sections
 142
 143 section {
 144         padding: 3rem 0;
 145
 146         @include media-breakpoint-up(sm) {
 147                 padding: 72px 0;
 148         }
 149 }
 150
 151 .main {
 152         .intro {
 153                 min-height: 100%;
 154                 min-height: 100vh;
 155
 156                 margin-top: -6rem;
 157
 158                 @include media-breakpoint-down(sm) {
 159                         padding-top: 6rem;
 160                 }
 161
 162                 display: flex;
 163                 align-items: center;
 164         }
 165 }
 166
 167 .blog-post {
 168         .blog-header {
 169                 h5 {
 170                         a {
 171                                 color: $dark;
 172                         }
 173                 }
 174         }
 175
 176         .blog-content {
 177                 h1, h2, h3, h4, h5, h6 {
 178                         font-size: 1.375rem;
 179                         font-weight: $headings-font-weight;
 180                         line-height: $headings-line-height;
 181                         margin-bottom: 0.25rem;
 182                 }
 183
 184                 img {
 185                         @include img-fluid;
 186                 }
 187         }
 188
 189         &.lightning-wire-labs {
 190                 .blog-header {
 191                         h5 {
 192                                 a {
 193                                         color: $lwl;
 194                                 }
 195                         }
 196
 197                         a {
 198                                 color: $lwl;
 199                         }
 200                 }
 201
 202                 .blog-content {
 203                         a {
 204                                 color: $lwl;
 205                         }
 206                 }
 207         }
 208 }
 209
 210 // Donations
 211
 212 .donation-explanation {
 213         color: $text-muted;
 214         padding: 1.5rem;
 215
 216         .faq {
 217                 a {
 218                         color: inherit;
 219                 }
 220         }
 221 }
 222
 223 // Sidebar navigation
 224
 225 #sidebar .nav {
 226         position: fixed;
 227 }
 228
 229 .feature_icons {
 230         width: 40px;
 231         height: 100%;
 232         float: left;
 233         margin-right: .75rem;
 234 }
 235
 236 .progress {
 237         background-color: rgba(255, 255, 255, .2);
 238 }
 239
 240 .circle {
 241         position: relative;
 242         p.fireinfo_per {
 243                 color: $gray-800;
 244                 position: absolute;
 245                 top: calc(50% - 18px);
 246                 width: 100%;
 247         }
 248 }
 249
 250 .divider {
 251         width: 128px;
 252         height: 4px;
 253         border-radius: 2px;
 254         background-image: linear-gradient(to right, $red, $gray-400);
 255         margin: 40px auto 24px auto;
 256         @include media-breakpoint-up(sm) {
 257                 margin: 56px auto 40px auto;
 258         }
 259 }
 260
 261 // Animation
 262 @keyframes scroll {
 263   0%, 100%   { transform: translateY(30%); }
 264   50% { transform: translateY(50%); }
 265 }