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