github.com/ratanraj/packer@v1.3.2/website/source/assets/stylesheets/_home.scss (about)

     1  #page-home {
     2    // Override the main header
     3    #header {
     4      background: $home-header-background-color;
     5  
     6      .navbar-toggle {
     7        .icon-bar {
     8          border: 1px solid $home-header-link-color;
     9        }
    10      }
    11  
    12      .navbar-brand {
    13        a {
    14          svg.logo {
    15            @extend svg.logo.color;
    16          }
    17        }
    18      }
    19  
    20      ul.nav {
    21        li {
    22          a {
    23            color: $home-header-link-color;
    24  
    25            &:hover, &:focus, &:active {
    26              background-color: transparent;
    27              color: $home-header-link-color-hover;
    28  
    29              svg {
    30                fill: $home-header-link-color-hover;
    31              }
    32            }
    33  
    34            svg {
    35              fill: $home-header-link-color;
    36            }
    37          }
    38        }
    39      }
    40    }
    41  
    42    header {
    43      .hero {
    44        margin: 140px auto 160px auto;
    45        text-align: center;
    46  
    47        .button {
    48          margin: 5px;
    49  
    50          @media (max-width: 768px) {
    51            display: block;
    52            margin-top: 10px;
    53            text-align: center;
    54          }
    55        }
    56  
    57        svg {
    58          max-width: 90%;
    59        }
    60      }
    61    }
    62  
    63    section {
    64      background: $white;
    65      padding: 100px 0;
    66    }
    67  
    68    section.marketing {
    69      h2 {
    70        font-family: $font-family-klavika;
    71        font-size: 36px;
    72        font-weight: $font-weight-bold;
    73        line-height: 1.25;
    74        letter-spacing: -0.02em;
    75        margin: 20px 0 10px 0;
    76        padding: 0;
    77        color: $black;
    78      }
    79  
    80      p {
    81        font-family: $font-family-open-sans;
    82        font-size: 16px;
    83        letter-spacing: 0.01em;
    84        line-height: 1.8;
    85        margin: 0 0 10px;
    86      }
    87  
    88      span.callout {
    89        background: $black;
    90        color: $white;
    91        display: inline-block;
    92        font-family: $font-family-klavika;
    93        font-size: 18px;
    94        font-weight: $font-weight-bold;
    95        line-height: 1;
    96        margin: 0;
    97        padding: 7px 5px 5px 5px;
    98        letter-spacing: 0.05em;
    99        text-transform: uppercase;
   100      }
   101  
   102      &.invert {
   103        background: $packer-blue;
   104  
   105        h2 {
   106          color: $white;
   107        }
   108  
   109        p {
   110          color: $white;
   111          font-weight: $font-weight-bold;
   112        }
   113      }
   114  
   115      &#automated {
   116        img {
   117          @media (min-width: 1024px) {
   118            padding-right: 40px;
   119          }
   120  
   121          @media (max-width: 992px) {
   122            padding-bottom: 40px;
   123          }
   124        }
   125      }
   126  
   127      &#integrations {
   128        .integrations-list {
   129          display: flex;
   130          flex-flow: row wrap;
   131          justify-content: space-between;
   132          margin-top: 30px;
   133  
   134          @media (min-width: 1024px) {
   135            padding-left: 40px;
   136          }
   137  
   138          .integration {
   139            display: flex;
   140            align-items: center;
   141            justify-content: center;
   142            border: 5px solid $packer-blue;
   143            height: 100px;
   144            width: 33.3%;
   145            background-color: $white;
   146            padding: 5px;
   147  
   148            img {
   149              max-width: 100%;
   150            }
   151          }
   152        }
   153      }
   154    }
   155  
   156    .terminal {
   157      border: 1px solid $white;
   158      background-color: $black;
   159      box-sizing: border-box;
   160      color: $white;
   161      font-family: $font-family-monospace;
   162      font-size: 15px;
   163      line-height: 1.8;
   164      margin: 20px auto;
   165      padding: 10px 20px 20px 20px;
   166  
   167      .terminal-content {
   168        margin-top: 5px;
   169        overflow-x: scroll;
   170        width: 100%;
   171        white-space: nowrap;
   172  
   173        span {
   174          display: block;
   175          white-space: pre;
   176        }
   177      }
   178  
   179      span.circle {
   180        &:before {
   181          content: '\25CF';
   182          color: $white;
   183          font-family: $font-family-monospace;
   184          font-size: 30px;
   185          line-height: 1;
   186          margin: 0 0 0 -4px;
   187          padding: 0;
   188          height: 100%;
   189        }
   190      }
   191  
   192      span.vbox {
   193        color: rgb(91, 251, 90);
   194      }
   195  
   196      span.vmware {
   197        color: rgb(83, 255, 255);
   198      }
   199    }
   200  }