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