github.com/outbrain/consul@v1.4.5/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-top: 80px;
    76        padding: 0;
    77      }
    78  
    79      p {
    80        font-family: $font-family-open-sans;
    81        font-size: 16px;
    82        letter-spacing: 0.01em;
    83        line-height: 1.8;
    84        margin: 0 0 10px;
    85      }
    86  
    87      span.callout {
    88        background: $black;
    89        color: $white;
    90        display: inline-block;
    91        font-family: $font-family-klavika;
    92        font-size: 18px;
    93        font-weight: $font-weight-bold;
    94        line-height: 1;
    95        margin: 0;
    96        padding: 5px;
    97        letter-spacing: 0.05em;
    98        text-transform: uppercase;
    99      }
   100  
   101      &.pink {
   102        background: $consul-red;
   103  
   104        h2 {
   105          color: $white;
   106        }
   107  
   108        p {
   109          color: $white;
   110          font-weight: $font-weight-bold;
   111        }
   112  
   113        span.callout {
   114          background: $white;
   115          color: $black;
   116        }
   117      }
   118  
   119      &.pink-dark {
   120        background: $consul-red-dark;
   121  
   122        h2 {
   123          color: $white;
   124        }
   125  
   126        p {
   127          color: $white;
   128          font-weight: $font-weight-bold;
   129        }
   130  
   131        span.callout {
   132          background: $white;
   133          color: $black;
   134        }
   135      }
   136  
   137      &.black {
   138        background: $black;
   139  
   140        h2 {
   141          color: $white;
   142        }
   143  
   144        p {
   145          color: $white;
   146          font-weight: $font-weight-bold;
   147        }
   148  
   149        span.callout {
   150          background: $white;
   151          color: $black;
   152        }
   153      }
   154  
   155      &#features {
   156        .feature-icon {
   157          text-align: center;
   158          clear: both;
   159        }
   160  
   161        h2, svg {
   162          margin: 0;
   163          padding: 0;
   164          padding-top: 40px;
   165        }
   166  
   167        svg {
   168          display: block;
   169          margin: 0 auto;
   170        }
   171      }
   172  
   173      &#cta {
   174        padding: 0 0 50px 0;
   175        text-align: center;
   176      }
   177    }
   178  
   179    .terminal {
   180      border: 1px solid $white;
   181      background-color: $black;
   182      box-sizing: border-box;
   183      color: $white;
   184      font-family: $font-family-monospace;
   185      font-size: 15px;
   186      line-height: 1.8;
   187      margin: 20px auto auto auto;
   188      padding: 10px 20px 20px 20px;
   189  
   190      .terminal-content {
   191        margin-top: 5px;
   192        overflow-x: scroll;
   193        width: 100%;
   194        white-space: nowrap;
   195  
   196        span {
   197          display: block;
   198  
   199          span {
   200            display: inline;
   201          }
   202  
   203          &.text-pink {
   204            color: lighten($consul-red, 20%);
   205          }
   206        }
   207      }
   208  
   209      span.circle {
   210        &:before {
   211          content: '\25CF';
   212          color: $white;
   213          font-family: $font-family-monospace;
   214          font-size: 30px;
   215          line-height: 1;
   216          margin: 0 0 0 -4px;
   217          padding: 0;
   218          height: 100%;
   219        }
   220      }
   221    }
   222  }