github.com/andrewrynhard/terraform@v0.9.5-0.20170502003928-8d286b83eae4/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        text-transform: uppercase;
    78      }
    79  
    80      h3 {
    81        color: $black;
    82        font-size: 20px;
    83        font-weight: $font-weight-bold;
    84        line-height: 1.2;
    85        margin: 50px 0 15px 0;
    86        text-transform: uppercase;
    87      }
    88  
    89      p {
    90        font-family: $font-family-open-sans;
    91        font-size: 16px;
    92        letter-spacing: 0.01em;
    93        line-height: 1.5;
    94        margin: 0 0 10px;
    95      }
    96  
    97      p.lead {
    98        font-size: 20px;
    99        margin: 15px 0 30px 0;
   100      }
   101  
   102      span.callout {
   103        background: $black;
   104        color: $white;
   105        display: inline-block;
   106        font-family: $font-family-klavika;
   107        font-size: 18px;
   108        font-weight: $font-weight-bold;
   109        line-height: 1;
   110        margin: 0;
   111        padding: 5px;
   112        letter-spacing: 0.05em;
   113        text-transform: uppercase;
   114      }
   115  
   116      &.purple {
   117        background: $terraform-purple;
   118  
   119        h2 {
   120          color: $white;
   121        }
   122  
   123        p {
   124          color: $white;
   125        }
   126  
   127        span.callout {
   128          background: $white;
   129          color: $terraform-purple;
   130        }
   131  
   132        .button {
   133          border: none;
   134        }
   135      }
   136  
   137      &.black {
   138        background: $black;
   139  
   140        h2 {
   141          color: $white;
   142        }
   143  
   144        p {
   145          color: $white;
   146        }
   147  
   148        span.callout {
   149          background: $white;
   150          color: $black;
   151        }
   152  
   153        .button {
   154          border: none;
   155        }
   156      }
   157  
   158      &#features {
   159        .feature-card {
   160          border: 1px solid $gray-darker;
   161          color: $gray-darker;
   162          display: block;
   163          height: 200px;
   164          font-weight: $font-weight-bold;
   165          padding: 20px;
   166          margin-bottom: 15px;
   167          text-transform: uppercase;
   168          transition: all 0.1s ease-in-out;
   169  
   170          p {
   171            line-height: 1.25em;
   172          }
   173  
   174          span {
   175            color: $terraform-purple;
   176            display: block;
   177            font-weight: $font-weight-bold;
   178            margin-bottom: 10px;
   179          }
   180  
   181          svg {
   182            display: block;
   183            margin-top: 20px;
   184            max-width: 100%;
   185  
   186            path {
   187              transition: all 0.1s ease-in-out;
   188              fill: $gray-dark;
   189            }
   190          }
   191  
   192          &:hover, &:active, &:focus {
   193            border: 1px solid $terraform-purple;
   194            color: $terraform-purple;
   195            text-decoration: none;
   196  
   197            svg {
   198              path {
   199                fill: $terraform-purple;
   200                transition: all 0.1s ease-in-out;
   201              }
   202            }
   203          }
   204        }
   205      }
   206  
   207      &#plan {
   208        h3 {
   209          color: $white;
   210        }
   211      }
   212  
   213      &#news {
   214        img {
   215          box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
   216          margin: 0 0 20px 0;
   217          max-width: 100%;
   218        }
   219  
   220        h2 {
   221          margin-bottom: 50px;
   222        }
   223  
   224        h3 {
   225          color: $white;
   226          margin-top: 0;
   227          text-transform: none;
   228        }
   229  
   230        div.latest-item {
   231          + .latest-item {
   232            border-top: 1px solid rgba(white, .5);
   233            margin-top: 20px;
   234            padding-top: 20px;
   235          }
   236  
   237          @media (max-width: $screen-sm-max) {
   238            &:last-child {
   239              border-bottom: 1px solid rgba(white, .5);
   240              margin-bottom: 20px;
   241              padding-bottom: 20px;
   242            }
   243          }
   244  
   245          p {
   246            padding: 0 0 10px 0;
   247          }
   248  
   249          .button {
   250            &:hover {
   251              background: $white;
   252              color: $terraform-purple;
   253            }
   254          }
   255        }
   256      }
   257  
   258      &#examples {
   259        background: #EDEDED;
   260  
   261        h1, h2, h3, h4, h5, h6, p {
   262          color: $black;
   263        }
   264      }
   265  
   266      &#enterprise {
   267        background-image: image-url('enterprise-callout-bg.svg');
   268        background-position: right bottom;
   269        background-repeat: no-repeat;
   270        background-size: 80%;
   271      }
   272    }
   273  
   274    .terminal {
   275      border: 1px solid $white;
   276      background-color: $black;
   277      box-sizing: border-box;
   278      color: $white;
   279      font-family: $font-family-monospace;
   280      font-size: 16px;
   281      line-height: 1.8;
   282      margin: 20px auto;
   283      padding: 10px 20px 20px 20px;
   284  
   285      .terminal-content {
   286        margin-top: 15px;
   287        overflow-x: scroll;
   288        width: 100%;
   289        white-space: nowrap;
   290  
   291        span {
   292          display: block;
   293          white-space: pre;
   294  
   295          span {
   296            display: inline;
   297          }
   298  
   299          &.text-pink {
   300            color: lighten($consul-pink, 20%);
   301          }
   302        }
   303      }
   304  
   305      span.circle {
   306        &:before {
   307          content: '\25CF';
   308          color: $white;
   309          font-size: 20px;
   310          line-height: 100%;
   311          height: 100%;
   312        }
   313      }
   314  
   315      span.txt-spe {
   316        color: #7190EA;
   317      }
   318  
   319      span.txt-str {
   320        color: #64E86C;
   321      }
   322  
   323      span.txt-int {
   324        color: #E89264;
   325      }
   326  
   327      span.txt-var {
   328        color: #9A56f9;
   329      }
   330    }
   331  }