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