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