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