github.com/projectcontour/contour@v1.28.2/site/themes/contour/assets/scss/_base.scss (about)

     1  @import 'variables';
     2  @import 'mixins';
     3  
     4  $font-family-base: "Metropolis-Light", Helvetica, sans-serif;
     5  $metropolis-light: $font-family-base;
     6  $metropolis-light-italic: "Metropolis-LightItalic", Helvetica, sans-serif;
     7  $metropolis-regular: "Metropolis-Regular", Helvetica, sans-serif;
     8  $metropolis-regular-italic: "Metropolis-RegularItalic", Helvetica, sans-serif;
     9  $metropolis-medium: "Metropolis-Medium", Helvetica, sans-serif;
    10  $metropolis-medium-italic: "Metropolis-MediumItalic", Helvetica, sans-serif;
    11  $metropolis-bold: "Metropolis-Bold", Helvetica, sans-serif;
    12  $metropolis-bold-italic: "Metropolis-BoldItalic", Helvetica, sans-serif;
    13  $metropolis-semibold: "Metropolis-SemiBold", Helvetica, sans-serif;
    14  $metropolis-semibold-italic: "Metropolis-SemiBoldItalic", Helvetica, sans-serif;
    15  
    16  body {
    17      font-family: $font-family-base;
    18      margin: 0px;
    19      line-height: 1.25;
    20  }
    21  .wrapper {
    22      max-width: 980px;
    23      margin: 0px auto;
    24      padding: 20px;
    25      @include breakpoint(small) {
    26          max-width: 100%;
    27      }
    28      &.docs {
    29          @include breakpoint(extra-large) {
    30              max-width: 80%;
    31          }
    32      }
    33  }
    34  .clearfix {
    35  	*zoom: 1;
    36  	&:before, &:after {
    37  		display: table;
    38  		content: "";
    39  		line-height: 0;
    40  	}
    41  	&:after {
    42  		clear: both;
    43  	}
    44  }
    45  h1, h2, h3, h4, h5, h6 {
    46      font-weight: 300;
    47  }
    48  h1 {
    49      font-size: 28px;
    50  }
    51  h2 {
    52      font-size: 22px;
    53      color: #333;
    54  }
    55  h3 {
    56      font-size: 20px;
    57  }
    58  h4 {
    59      font-size: 18px;
    60  }
    61  li {
    62      list-style-type: none;
    63      display: inline;
    64      padding-right: 25px;
    65      font-size: 14px;
    66      line-height: 1.7em;
    67      &:last-of-type {
    68          padding-right: 0px;
    69      }
    70  }
    71  p {
    72      line-height: 1.7em;
    73      font-weight: 300;
    74      font-size: 16px;
    75      color: $darkgrey;
    76      &.intro {
    77          font-size: 18px;
    78      }
    79  }
    80  a {
    81      font-size: 16px;
    82      text-decoration: none;
    83      color: $blue;
    84      font-family: $metropolis-medium
    85  }
    86  button {
    87      background-color: unset;
    88      border: none;
    89  }
    90  .button {
    91      color: $blue;
    92      font-size: 12px;
    93      font-weight: 600;
    94      background-color: $white;
    95      border-radius: 3px;
    96      padding: 14px 10px;
    97      min-width: 200px;
    98      text-transform: uppercase;
    99      border: 1px solid $white;
   100      &.secondary {
   101          background-color: $mainblue;
   102          color: $white;
   103      }
   104      &.tertiary {
   105          border: 1px solid $blue;
   106      }
   107  }
   108  .buttons {
   109      margin-top: 40px;
   110      .button:first-of-type {
   111          margin-right: 30px;
   112          @include breakpoint(small) {
   113              margin: 0px 0px 20px 0px;
   114          }
   115      }
   116  }
   117  .strong {
   118      font-family: $metropolis-medium;
   119  }
   120  .bg-grey {
   121      background-color: $lightgrey;
   122  }
   123  
   124  .grid.three {
   125      display: grid;
   126      grid-template-columns: 1fr 1fr 1fr;
   127      row-gap: 20px;
   128      column-gap: 20px;
   129      @include breakpoint(small) {
   130          grid-template-columns: 1fr;
   131      }
   132  }
   133  
   134  .grid.two {
   135      display: grid;
   136      grid-template-columns: 1fr 1fr;
   137      @include breakpoint(small) {
   138          grid-template-columns: 1fr;
   139      }
   140  }
   141  
   142  
   143  // Metropolis
   144  @font-face {
   145      font-family: "Metropolis-Bold";
   146      src:url("/fonts/Metropolis-Bold.eot");
   147      src:url("/fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype"),
   148          url("/fonts/Metropolis-Bold.woff2") format("woff2"),
   149          url("/fonts/Metropolis-Bold.woff") format("woff");
   150      font-weight: normal;
   151      font-style: normal;
   152    }
   153    
   154    @font-face {
   155      font-family: "Metropolis-BoldItalic";
   156      src:url("/fonts/Metropolis-BoldItalic.eot");
   157      src:url("/fonts/Metropolis-BoldItalic.eot?#iefix") format("embedded-opentype"),
   158          url("/fonts/Metropolis-BoldItalic.woff2") format("woff2"),
   159          url("/fonts/Metropolis-BoldItalic.woff") format("woff");
   160      font-weight: normal;
   161      font-style: normal;
   162    }
   163    
   164    @font-face {
   165      font-family: "Metropolis-Light";
   166      src:url("/fonts/Metropolis-Light.eot");
   167      src:url("/fonts/Metropolis-Light.eot?#iefix") format("embedded-opentype"),
   168          url("/fonts/Metropolis-Light.woff2") format("woff2"),
   169          url("/fonts/Metropolis-Light.woff") format("woff");
   170      font-weight: normal;
   171      font-style: normal;
   172    }
   173    
   174    @font-face {
   175      font-family: "Metropolis-LightItalic";
   176      src:url("/fonts/Metropolis-LightItalic.eot");
   177      src:url("/fonts/Metropolis-LightItalic.eot?#iefix") format("embedded-opentype"),
   178          url("/fonts/Metropolis-LightItalic.woff2") format("woff2"),
   179          url("/fonts/Metropolis-LightItalic.woff") format("woff");
   180      font-weight: normal;
   181      font-style: normal;
   182    }
   183    
   184    @font-face {
   185      font-family: "Metropolis-Regular";
   186      src:url("/fonts/Metropolis-Regular.eot");
   187      src:url("/fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype"),
   188          url("/fonts/Metropolis-Regular.woff2") format("woff2"),
   189          url("/fonts/Metropolis-Regular.woff") format("woff");
   190      font-weight: normal;
   191      font-style: normal;
   192    }
   193    
   194    @font-face {
   195      font-family: "Metropolis-RegularItalic";
   196      src:url("/fonts/Metropolis-RegularItalic.eot");
   197      src:url("/fonts/Metropolis-RegularItalic.eot?#iefix") format("embedded-opentype"),
   198          url("/fonts/Metropolis-RegularItalic.woff2") format("woff2"),
   199          url("/fonts/Metropolis-RegularItalic.woff") format("woff");
   200      font-weight: normal;
   201      font-style: normal;
   202    }
   203    
   204    @font-face {
   205      font-family: "Metropolis-Medium";
   206      src:url("/fonts/Metropolis-Medium.eot");
   207      src:url("/fonts/Metropolis-Medium.eot?#iefix") format("embedded-opentype"),
   208          url("/fonts/Metropolis-Medium.woff2") format("woff2"),
   209          url("/fonts/Metropolis-Medium.woff") format("woff");
   210      font-weight: normal;
   211      font-style: normal;
   212    }
   213    
   214    @font-face {
   215      font-family: "Metropolis-MediumItalic";
   216      src:url("/fonts/Metropolis-MediumItalic.eot");
   217      src:url("/fonts/Metropolis-MediumItalic.eot?#iefix") format("embedded-opentype"),
   218          url("/fonts/Metropolis-MediumItalic.woff2") format("woff2"),
   219          url("/fonts/Metropolis-MediumItalic.woff") format("woff");
   220      font-weight: normal;
   221      font-style: normal;
   222    }
   223    
   224    @font-face {
   225      font-family: "Metropolis-SemiBold";
   226      src:url("/fonts/Metropolis-SemiBold.eot");
   227      src:url("/fonts/Metropolis-SemiBold.eot?#iefix") format("embedded-opentype"),
   228          url("/fonts/Metropolis-SemiBold.woff2") format("woff2"),
   229          url("/fonts/Metropolis-SemiBold.woff") format("woff");
   230      font-weight: normal;
   231      font-style: normal;
   232    }
   233    
   234    @font-face {
   235      font-family: "Metropolis-SemiBoldItalic";
   236      src:url("/fonts/Metropolis-SemiBoldItalic.eot");
   237      src:url("/fonts/Metropolis-SemiBoldItalic.eot?#iefix") format("embedded-opentype"),
   238          url("/fonts/Metropolis-SemiBoldItalic.woff2") format("woff2"),
   239          url("/fonts/Metropolis-SemiBoldItalic.woff") format("woff");
   240      font-weight: normal;
   241      font-style: normal;
   242    }
   243  
   244  table {
   245      border-spacing: 0px;
   246      overflow-x: auto;
   247      display: block;
   248      th, td {
   249          border: 1px solid #ccc;
   250          border-collapse: collapse;
   251          padding: 6px;
   252          border-spacing: 0px;
   253      }
   254  }