kythe.io@v0.0.68-0.20240422202219-7225dbc01741/kythe/web/site/_sass/_layout.scss (about)

     1  /** Site header */
     2  .site-header {
     3    border-top: 5px solid $grey-color-dark;
     4    border-bottom: 1px solid $grey-color-light;
     5    min-height: 56px;
     6  
     7    // Positioning context for the mobile navigation icon
     8    position: relative;
     9  }
    10  
    11  .site-title {
    12    font-size: 26px;
    13    line-height: 56px;
    14    letter-spacing: -1px;
    15    margin-bottom: 0;
    16    float: left;
    17    color: $brand-color;
    18  }
    19  
    20  .site-nav {
    21    float: right;
    22    line-height: 56px;
    23  
    24    .menu-icon {
    25      display: none;
    26    }
    27  
    28    .page-link {
    29      color: $text-color;
    30      line-height: $base-line-height;
    31  
    32      // Gaps between nav items, but not on the first one
    33      &:not(:first-child) {
    34        margin-left: 20px;
    35      }
    36    }
    37  
    38    @include media-query($on-palm) {
    39      position: absolute;
    40      top: 9px;
    41      right: 30px;
    42      background-color: $background-color;
    43      border: 1px solid $grey-color-light;
    44      border-radius: 5px;
    45      text-align: right;
    46  
    47      .menu-icon {
    48        display: block;
    49        float: right;
    50        width: 36px;
    51        height: 26px;
    52        line-height: 0;
    53        padding-top: 10px;
    54        text-align: center;
    55  
    56        > svg {
    57          width: 18px;
    58          height: 15px;
    59  
    60          path {
    61            fill: $grey-color-dark;
    62          }
    63        }
    64      }
    65  
    66      .trigger {
    67        clear: both;
    68        display: none;
    69      }
    70  
    71      &:hover .trigger {
    72        display: block;
    73        padding-bottom: 5px;
    74      }
    75  
    76      .page-link {
    77        display: block;
    78        padding: 5px 10px;
    79      }
    80    }
    81  }
    82  
    83  /**
    84   * Site footer
    85   */
    86  .site-footer {
    87    border-top: 1px solid $grey-color-light;
    88    padding: $spacing-unit 0;
    89  }
    90  
    91  .footer-heading {
    92    font-size: 18px;
    93    margin-bottom: $spacing-unit / 2;
    94  }
    95  
    96  .contact-list,
    97  .social-media-list {
    98    list-style: none;
    99    margin-left: 0;
   100  }
   101  
   102  .footer-col-wrapper {
   103    font-size: 15px;
   104    color: $grey-color;
   105    margin-left: -$spacing-unit / 2;
   106    @extend %clearfix;
   107  }
   108  
   109  .footer-col {
   110    float: left;
   111    margin-bottom: $spacing-unit / 2;
   112    padding-left: $spacing-unit / 2;
   113  }
   114  
   115  .footer-col-1 {
   116    width: -webkit-calc(35% - (#{$spacing-unit} / 2));
   117    width:     calc(35% - (#{$spacing-unit} / 2));
   118  }
   119  
   120  .footer-col-2 {
   121    width: -webkit-calc(20% - (#{$spacing-unit} / 2));
   122    width:     calc(20% - (#{$spacing-unit} / 2));
   123  }
   124  
   125  .footer-col-3 {
   126    width: -webkit-calc(45% - (#{$spacing-unit} / 2));
   127    width:     calc(45% - (#{$spacing-unit} / 2));
   128  }
   129  
   130  @include media-query($on-laptop) {
   131    .footer-col-1,
   132    .footer-col-2 {
   133      width: -webkit-calc(50% - (#{$spacing-unit} / 2));
   134      width:     calc(50% - (#{$spacing-unit} / 2));
   135    }
   136  
   137    .footer-col-3 {
   138      width: -webkit-calc(100% - (#{$spacing-unit} / 2));
   139      width:     calc(100% - (#{$spacing-unit} / 2));
   140    }
   141  }
   142  
   143  @include media-query($on-palm) {
   144    .footer-col {
   145      float: none;
   146      width: -webkit-calc(100% - (#{$spacing-unit} / 2));
   147      width:     calc(100% - (#{$spacing-unit} / 2));
   148    }
   149  }
   150  
   151  /**
   152   * Page content
   153   */
   154  .page-content {
   155    padding: $spacing-unit 0;
   156  }
   157  
   158  .page-heading {
   159    font-size: 20px;
   160  }
   161  
   162  .post-list {
   163    margin-left: 0;
   164    list-style: none;
   165  
   166    > li {
   167      margin-bottom: $spacing-unit;
   168    }
   169  }
   170  
   171  .post-meta {
   172    font-size: $small-font-size;
   173    color: $grey-color;
   174  }
   175  
   176  .page-header {
   177    margin-top: 0;
   178  }
   179  
   180  .post-title {
   181    margin-top: 0;
   182    font-size: 42px;
   183    letter-spacing: -1px;
   184    line-height: 1;
   185  
   186    @include media-query($on-laptop) {
   187      font-size: 36px;
   188    }
   189  }
   190  
   191  .post-content {
   192    margin-bottom: $spacing-unit;
   193  
   194    h2 {
   195      font-size: 32px;
   196  
   197      @include media-query($on-laptop) {
   198        font-size: 28px;
   199      }
   200    }
   201  
   202    h3 {
   203      font-size: 26px;
   204  
   205      @include media-query($on-laptop) {
   206        font-size: 22px;
   207      }
   208    }
   209  
   210    h4 {
   211      font-size: 20px;
   212  
   213      @include media-query($on-laptop) {
   214        font-size: 18px;
   215      }
   216    }
   217  }