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