src/scss/style.scss

   1 @import "variables";
   2
   3 // Core variables and mixins
   4 @import "../bootstrap/scss/functions";
   5 @import "../bootstrap/scss/variables";
   6 @import "../bootstrap/scss/mixins";
   7 @import "../bootstrap/scss/reboot";
   8
   9 // @import "../bootstrap/scss/print";
  10
  11 // Core CSS
  12 @import "../bootstrap/scss/type";
  13 //@import "../bootstrap/scss/images";
  14 // @import "../bootstrap/scss/code";
  15 @import "../bootstrap/scss/grid";
  16 @import "../bootstrap/scss/tables";
  17 @import "../bootstrap/scss/forms";
  18 @import "../bootstrap/scss/buttons";
  19
  20 // Components
  21 @import "../bootstrap/scss/transitions";
  22 //@import "../bootstrap/scss/dropdown";
  23 @import "../bootstrap/scss/button-group";
  24 //@import "../bootstrap/scss/input-group";
  25 //@import "../bootstrap/scss/custom-forms";
  26 @import "../bootstrap/scss/nav";
  27 @import "../bootstrap/scss/navbar";
  28 //@import "../bootstrap/scss/card";
  29 // @import "../bootstrap/scss/breadcrumb";
  30 // @import "../bootstrap/scss/pagination";
  31 @import "../bootstrap/scss/badge";
  32 // @import "../bootstrap/scss/jumbotron";
  33 // @import "../bootstrap/scss/alert";
  34 @import "../bootstrap/scss/progress";
  35 @import "../bootstrap/scss/media";
  36 @import "../bootstrap/scss/list-group";
  37 // @import "../bootstrap/scss/responsive-embed";
  38 // @import "../bootstrap/scss/close";
  39
  40 // Components w/ JavaScript
  41 // @import "../bootstrap/scss/modal";
  42 // @import "../bootstrap/scss/tooltip";
  43 // @import "../bootstrap/scss/popover";
  44 // @import "../bootstrap/scss/carousel";
  45
  46 // Utility classes
  47 @import "../bootstrap/scss/utilities";
  48
  49 // Lightbox
  50 @import "photoswipe/main";
  51 @import "photoswipe/default-skin/default-skin";
  52
  53 // Donation Box
  54 @import "_donation";
  55
  56 body {
  57         min-height: 100vh;
  58         display: flex;
  59         flex-direction: column;
  60 }
  61
  62 .container {
  63         width: 100%;
  64         max-width: 1200px;
  65         flex: 1;
  66 }
  67
  68 // Custom stuff
  69 @import '_fonts';
  70 @import '_buttons';
  71 @import '_icons';
  72
  73
  74 // Colors
  75 .amber-800 {
  76         color: $amber-800;
  77         border-color: $amber-800;
  78 }
  79
  80 .green-600 {
  81         color: $green-600;
  82         border-color: $green-600;
  83 }
  84
  85 .red-900 {
  86         color: $red_900;
  87         border-color: $red_900;
  88 }
  89
  90 .blue-700{
  91         color: $blue-700;
  92         border-color: $blue-700;
  93 }
  94
  95 .blue_grey_300 {
  96         color: $blue_grey_300;
  97 }
  98
  99 .bg-blue-grey-900 {
 100         background-color: $blue-grey-900;
 101 }
 102
 103 .bg-blue-grey-50 {
 104         background-color: $blue-grey-50;
 105 }
 106
 107 // Images
 108 img {
 109         &.img-fluid {
 110                 width: 100%;
 111                 max-width: 100%;
 112                 height: auto;
 113         }
 114 }
 115
 116
 117 footer {
 118         .btn-toolbar .icon {
 119                 height: 2.25rem;
 120                 width: 2.25rem;
 121                 fill: rgba($blue-grey-900, .6);
 122         }
 123         .i_heart {
 124                 vertical-align: top;
 125                 transform: translateY(-.15rem);
 126                 @include media-breakpoint-down(sm) {
 127                         transform: translateY(-.75rem);
 128                 }
 129         }
 130 }
 131
 132
 133 // Sections
 134 section.intro {
 135         min-height: 100vh;
 136         background-image: url('img/header-background.jpg');
 137         background-size: cover;
 138         background-attachment: fixed;
 139         background-position: center top;
 140         position: relative;
 141         .branding {
 142                 padding-top: 6rem;
 143                 @include media-breakpoint-up(sm) {
 144                         padding-top: 192px;
 145                 }
 146                 margin-bottom: 64px;
 147                 text-align: center;
 148                 color: $blue-grey-600;
 149                 h1 {
 150                         font-weight: 300 !important;
 151                         color: $blue-grey-900;
 152                         @include media-breakpoint-down(xs) {
 153                                 font-size: 72px;
 154                                 line-height: 88px;
 155                                 margin-bottom: 0;
 156                         }
 157                         strong {
 158                                 font-weight: 700 !important;
 159                         }
 160                 }
 161                 h1:before {
 162                         content: "";
 163                         height: 60px;
 164                         width: 76px;
 165                         background-image: url('img/ipfire-tux.png');
 166                         background-repeat: no-repeat;
 167                         background-position: center center;
 168                         background-size: contain;
 169                         display: inline-block;
 170                         position: relative;
 171                         top: 4px;
 172                         @include media-breakpoint-up(sm) {
 173                                 height: 120px;
 174                                 width: 93px;
 175                                 margin-right: 32px;
 176                                 top: 8px;
 177                         }
 178                 }
 179         }
 180 }
 181
 182 .page-scroll {
 183         display: block;
 184         visibility: visible;
 185         position: absolute;
 186         bottom: 48px;
 187         left: 50%;
 188         transform: translateX(-50%);
 189         .btn {
 190                 width: 36px;
 191                 height: 36px;
 192                 fill: $red_900;
 193                 @include media-breakpoint-up(sm) {
 194                         width: 64px;
 195                         height: 64px;
 196                 }
 197                 &:hover .i_arrow_down {
 198                         fill: white;
 199                 }
 200         }
 201 }
 202
 203 section.content-section {
 204         padding: 3rem 0;
 205         @include media-breakpoint-up(sm) {
 206                 padding: 72px 0;
 207         }
 208 }
 209
 210 .feature_icons {
 211         width: 40px;
 212         height: 100%;
 213         float: left;
 214         margin-right: .75rem;
 215 }
 216
 217 section#news,
 218 section#support,
 219 footer {
 220         background-color: rgba($blue-grey-900, .06);
 221 }
 222
 223 section#news {
 224         color: rgba($blue-grey-900, .6);
 225         h2 {
 226                 color: $blue-grey-900;
 227         }
 228 }
 229
 230 .progress {
 231         background-color: rgba(255, 255, 255, .2);
 232 }
 233
 234 .bg-progress {
 235         background-image: linear-gradient(to right, $yellow-700, $amber-800);
 236 }
 237
 238 section#fireinfo {
 239         border-bottom: 1px solid rgba($blue-grey-900, .2);
 240 }
 241
 242 .circle {
 243         position: relative;
 244         p.fireinfo_per {
 245                 color: $blue-grey-600;
 246                 position: absolute;
 247                 top: calc(50% - 18px);
 248                 width: 100%;
 249         }
 250 }
 251
 252 section#appliances {
 253         padding-bottom: 48px;
 254 }
 255
 256 .features-content,
 257 .fixed-top + .blog-content {
 258         padding-top: 88px;
 259         margin-bottom: 40px;
 260         @include media-breakpoint-up(lg) {
 261                 padding-top: 161px;
 262         }
 263         .content {
 264                 background: white;
 265                 border-radius: 4px;
 266                 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 267                 padding: 40px 24px;
 268                 position: relative;
 269         }
 270 }
 271
 272 .blog-content {
 273         margin-bottom: 80px;
 274 }
 275
 276 .divider {
 277         width: 128px;
 278         height: 4px;
 279         border-radius: 2px;
 280         background-image: linear-gradient(to right, $red-900, $orange-a400);
 281         margin: 40px auto 24px auto;
 282         @include media-breakpoint-up(sm) {
 283                 margin: 56px auto 40px auto;
 284         }
 285 }
 286
 287 footer {
 288         padding: 3rem 0 0 0;
 289         @include media-breakpoint-down(md) {
 290                 padding-top: 31px;
 291         }
 292         h4 {
 293                 margin-bottom: 1.25rem;
 294                 color: rgba($blue-grey-900, .6);
 295                 font-size: 20px;
 296                 line-height: 28px;
 297         }
 298         ul {
 299                 li {
 300                         font-size: 14px;
 301                         margin-bottom: .75rem;
 302                         a {
 303                                 color: rgba($blue-grey-900, .6);
 304                                 text-decoration: none;
 305                                 &:hover {
 306                                         color: $blue-grey-900;
 307                                         text-decoration: underline;
 308                                 }
 309                         }
 310                 }
 311         }
 312         .btn-lg {
 313                 margin-bottom: 2.75rem;
 314         }
 315         .btn-sm {
 316                 box-shadow: none;
 317                 &:hover {
 318                         box-shadow: none;
 319                 }
 320         }
 321 }
 322
 323 #copyright {
 324         background-color: rgba($blue-grey-900, .06);
 325         padding: 1rem 0;
 326         p {
 327                 font-size: 12px;
 328                 line-height: 16px;
 329         }
 330 }
 331
 332 // Animation
 333 @keyframes scroll {
 334   0%, 100%   { transform: translateY(30%); }
 335   50% { transform: translateY(50%); }
 336 }