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