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

     1  /** Basic styling */
     2  body {
     3    font-family: $base-font-family;
     4    font-size: $base-font-size;
     5    line-height: $base-line-height;
     6    font-weight: 300;
     7    color: $text-color;
     8    background-color: $background-color;
     9    -webkit-text-size-adjust: 100%;
    10  }
    11  
    12  /** Images */
    13  img {
    14    max-width: 100%;
    15    vertical-align: middle;
    16  }
    17  
    18  /** Headings */
    19  h1, h2, h3, h4, h5, h6 {
    20    color: darken($brand-color, 18%);
    21    font-weight: 600;
    22  }
    23  
    24  /** Links */
    25  a {
    26    color: lighten($brand-color, 5%);
    27    text-decoration: none;
    28  
    29    &:visited {
    30      color: darken($brand-color, 10%);
    31    }
    32  
    33    &:hover {
    34      color: $text-color;
    35      text-decoration: underline;
    36    }
    37  }
    38  
    39  header a {
    40    &:hover {
    41      color: lighten($brand-color, 5%);
    42      text-decoration: none;
    43    }
    44  }
    45  
    46  .post-content a {
    47    text-decoration: underline;
    48  
    49    &:hover {
    50      text-decoration: none;
    51    }
    52  }
    53  
    54  /** Blockquotes */
    55  blockquote {
    56    color: $grey-color;
    57    border-left: 4px solid $grey-color-light;
    58    padding-left: $spacing-unit / 2;
    59    font-size: 18px;
    60    letter-spacing: -1px;
    61    font-style: italic;
    62  
    63    > :last-child {
    64      margin-bottom: 0;
    65    }
    66  }
    67  
    68  .listingblock.well {
    69    background-color: white;
    70  }
    71  
    72  /** Code formatting */
    73  pre,
    74  code {
    75    font-size: 15px;
    76    border: 1px solid $grey-color-light;
    77    border-radius: 3px;
    78  }
    79  
    80  code {
    81    padding: 1px 5px;
    82  }
    83  
    84  pre {
    85    padding: 8px 12px;
    86    overflow-x: auto;
    87    word-wrap: normal;
    88  
    89    > code {
    90      white-space: pre;
    91      border: 0;
    92      padding-right: 0;
    93      padding-left: 0;
    94    }
    95  }
    96  
    97  /** Definition lists */
    98  dt {
    99    font-weight: 600;
   100  }
   101  
   102  dd {
   103    margin-left: 1.5em;
   104  }
   105  
   106  /** Asciidoc styles */
   107  div.admonitionblock {
   108    margin: 0.5em;
   109  }
   110  
   111  div.admonitionblock .icon {
   112    font-size: 1.2em;
   113    padding-right: 1.1em;
   114  }
   115  
   116  div.title, caption.title {
   117    color: $brand-color;
   118    font-weight: bold;
   119    text-align: left;
   120    margin-bottom: 0.5em;
   121  }
   122  
   123  div.admonitionblock .title {
   124    vertical-align: middle;
   125  }
   126  
   127  /** Base content wrapper */
   128  
   129  .wrapper {
   130    max-width: -webkit-calc(900px - (#{$spacing-unit} * 2));
   131    max-width:         calc(900px - (#{$spacing-unit} * 2));
   132    margin-right: auto;
   133    margin-left: auto;
   134    padding-right: $spacing-unit;
   135    padding-left: $spacing-unit;
   136    @extend %clearfix;
   137  
   138    @include media-query($on-laptop) {
   139      max-width: -webkit-calc(800px - (#{$spacing-unit}));
   140      max-width:         calc(800px - (#{$spacing-unit}));
   141      padding-right: $spacing-unit / 2;
   142      padding-left: $spacing-unit / 2;
   143    }
   144  }
   145  
   146  .inner-wrapper {
   147    margin: 5px ($spacing-unit*2);
   148  }
   149  
   150  .jumbotron {
   151    background-color: lighten($brand-color, 55%);
   152    border-radius: 40px;
   153  }
   154  
   155  #footer-title {
   156    font-weight: bold;
   157    color: $brand-color;
   158  }
   159  
   160  .subtitle {
   161    font-size: 1.1em !important;
   162  }
   163  
   164  .small {
   165    font-size: 70%;
   166  }
   167  
   168  %clearfix {
   169    &:after {
   170      content: "";
   171      display: table;
   172      clear: both;
   173    }
   174  }