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