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         box-shadow: $shadow-1;
  81 }
  82
  83 .nav {
  84         .nav-link {
  85                 color: $blue-grey-900;
  86
  87                 &.active {
  88                         color: $link-color;
  89                         border-left: 2px solid $link-color;
  90                 }
  91         }
  92 }
  93
  94 .navbar {
  95         &.scrolled {
  96                 background-color: white;
  97                 box-shadow: $shadow-2;
  98
  99                 transition: background-color 200ms linear;
 100         }
 101
 102         .navbar-nav {
 103                 .nav-link {
 104                         color: $blue-grey-900;
 105
 106                         &.active {
 107                                 border-bottom: 2px solid $link-color;
 108                         }
 109                 }
 110         }
 111 }
 112
 113 footer {
 114         .btn-toolbar .icon {
 115                 height: 2.25rem;
 116                 width: 2.25rem;
 117                 fill: rgba($blue-grey-900, .6);
 118         }
 119         .i_heart {
 120                 vertical-align: top;
 121                 transform: translateY(-.15rem);
 122                 @include media-breakpoint-down(sm) {
 123                         transform: translateY(-.75rem);
 124                 }
 125         }
 126 }
 127
 128 // Sections
 129
 130 .main {
 131         section {
 132                 padding: 3rem 0;
 133
 134                 @include media-breakpoint-up(sm) {
 135                         padding: 72px 0;
 136                 }
 137
 138                 h1 {
 139                         margin-bottom: 64px;
 140                 }
 141         }
 142
 143         section.intro {
 144                 // Make it cover the navbar, too
 145                 margin-top: -6rem;
 146                 padding-top: 6rem;
 147
 148                 min-height: 100vh;
 149                 background-image: url('img/header-background.jpg');
 150                 background-size: cover;
 151                 background-attachment: fixed;
 152                 background-position: center top;
 153                 position: relative;
 154
 155                 .branding {
 156                         margin-top: 7.5rem;
 157                         margin-bottom: 4rem;
 158
 159                         @include media-breakpoint-down(xs) {
 160                                 margin-top: 2.5rem;
 161                         }
 162
 163                         text-align: center;
 164
 165                         h1 {
 166                                 margin-bottom: 0;
 167
 168                                 @include media-breakpoint-down(xs) {
 169                                         font-size: 72px;
 170                                         line-height: 88px;
 171                                 }
 172                         }
 173
 174                         h1:before {
 175                                 content: "";
 176                                 height: 60px;
 177                                 width: 76px;
 178                                 background-image: url('img/ipfire-tux.png');
 179                                 background-repeat: no-repeat;
 180                                 background-position: center center;
 181                                 background-size: contain;
 182                                 display: inline-block;
 183                                 position: relative;
 184                                 top: 4px;
 185
 186                                 @include media-breakpoint-up(sm) {
 187                                         height: 120px;
 188                                         width: 93px;
 189                                         margin-right: 32px;
 190                                         top: 8px;
 191                                 }
 192                         }
 193
 194                         h5 {
 195                                 color: $blue-grey-600;
 196
 197                                 @include media-breakpoint-down(xs) {
 198                                         font-size: 14px;
 199                                         line-height: 20px;
 200                                 }
 201                         }
 202                 }
 203         }
 204
 205         section#news, section#support, footer {
 206                 background-color: rgba($blue-grey-900, .06);
 207         }
 208
 209         section#news {
 210                 color: rgba($blue-grey-900, .6);
 211         }
 212
 213         section#fireinfo {
 214                 border-bottom: 1px solid rgba($blue-grey-900, .2);
 215         }
 216
 217         section#appliances {
 218                 padding-bottom: 48px;
 219         }
 220 }
 221
 222 .blog-post {
 223         .blog-header {
 224                 h5 {
 225                         a {
 226                                 color: $body-color;
 227                         }
 228                 }
 229         }
 230
 231         .blog-content {
 232                 h1, h2, h3, h4, h5, h6 {
 233                         font-size: 20px;
 234                         font-weight: $headings-font-weight;
 235
 236                         line-height: 28px;
 237
 238                         margin-bottom: 0.25rem;
 239                 }
 240
 241                 img {
 242                         @include img-fluid;
 243                 }
 244         }
 245
 246         &.lightning-wire-labs {
 247                 .blog-header {
 248                         h5 {
 249                                 a {
 250                                         color: $lwl;
 251                                 }
 252                         }
 253
 254                         a {
 255                                 color: $lwl;
 256                         }
 257                 }
 258
 259                 .blog-content {
 260                         a {
 261                                 color: $lwl;
 262                         }
 263                 }
 264         }
 265 }
 266
 267 // Donations
 268
 269 .faq {
 270         a {
 271                 color: $body-color;
 272         }
 273 }
 274
 275 .donation-explanation {
 276         margin-bottom: 2rem;
 277
 278         p {
 279                 color: $text-muted;
 280         }
 281
 282         @include media-breakpoint-down(sm) {
 283                 background-color: $dark;
 284                 color: $white;
 285
 286                 padding: 1.5rem;
 287
 288                 h5, p {
 289                         color: inherit;
 290                 }
 291         }
 292 }
 293
 294 // Sidebar navigation
 295
 296 #sidebar .nav {
 297         position: fixed;
 298 }
 299
 300 .page-scroll {
 301         display: block;
 302         visibility: visible;
 303         position: absolute;
 304         bottom: 48px;
 305         left: 50%;
 306         transform: translateX(-50%);
 307         .btn {
 308                 width: 36px;
 309                 height: 36px;
 310                 fill: $red_900;
 311                 @include media-breakpoint-up(sm) {
 312                         width: 64px;
 313                         height: 64px;
 314                 }
 315                 &:hover .i_arrow_down {
 316                         fill: white;
 317                 }
 318         }
 319 }
 320
 321 .feature_icons {
 322         width: 40px;
 323         height: 100%;
 324         float: left;
 325         margin-right: .75rem;
 326 }
 327
 328 .progress {
 329         background-color: rgba(255, 255, 255, .2);
 330 }
 331
 332 .circle {
 333         position: relative;
 334         p.fireinfo_per {
 335                 color: $blue-grey-600;
 336                 position: absolute;
 337                 top: calc(50% - 18px);
 338                 width: 100%;
 339         }
 340 }
 341
 342 .fixed-top + .blog-content {
 343         padding-top: 88px;
 344         margin-bottom: 40px;
 345         @include media-breakpoint-up(lg) {
 346                 padding-top: 161px;
 347         }
 348         .content {
 349                 background: white;
 350                 border-radius: 4px;
 351                 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 352                 padding: 40px 24px;
 353                 position: relative;
 354         }
 355 }
 356
 357 .blog-content {
 358         margin-bottom: 80px;
 359 }
 360
 361 .divider {
 362         width: 128px;
 363         height: 4px;
 364         border-radius: 2px;
 365         background-image: linear-gradient(to right, $red-900, $orange-a400);
 366         margin: 40px auto 24px auto;
 367         @include media-breakpoint-up(sm) {
 368                 margin: 56px auto 40px auto;
 369         }
 370 }
 371
 372 footer {
 373         padding: 3rem 0 0 0;
 374         @include media-breakpoint-down(md) {
 375                 padding-top: 31px;
 376         }
 377         h4 {
 378                 margin-bottom: 1.25rem;
 379                 color: rgba($blue-grey-900, .6);
 380                 font-size: 20px;
 381                 line-height: 28px;
 382         }
 383         ul {
 384                 li {
 385                         font-size: 14px;
 386                         margin-bottom: .75rem;
 387                         a {
 388                                 color: rgba($blue-grey-900, .6);
 389                                 text-decoration: none;
 390                                 &:hover {
 391                                         color: $blue-grey-900;
 392                                         text-decoration: underline;
 393                                 }
 394                         }
 395                 }
 396         }
 397         .btn-lg {
 398                 margin-bottom: 2.75rem;
 399         }
 400         .btn-sm {
 401                 box-shadow: none;
 402                 &:hover {
 403                         box-shadow: none;
 404                 }
 405         }
 406 }
 407
 408 #copyright {
 409         background-color: rgba($blue-grey-900, .06);
 410         padding: 1rem 0;
 411         p {
 412                 font-size: 12px;
 413                 line-height: 16px;
 414         }
 415 }
 416
 417 // Animation
 418 @keyframes scroll {
 419   0%, 100%   { transform: translateY(30%); }
 420   50% { transform: translateY(50%); }
 421 }