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