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