docs/_sass/jekyll-theme-cayman.scss

   1 @import "normalize";
   2 @import "rouge-github";
   3 @import "variables";
   4
   5 @mixin large {
   6   @media screen and (min-width: #{$large-breakpoint}) {
   7     @content;
   8   }
   9 }
  10
  11 @mixin medium {
  12   @media screen and (min-width: #{$medium-breakpoint}) and (max-width: #{$large-breakpoint}) {
  13     @content;
  14   }
  15 }
  16
  17 @mixin small {
  18   @media screen and (max-width: #{$medium-breakpoint}) {
  19     @content;
  20   }
  21 }
  22
  23 * {
  24   box-sizing: border-box;
  25 }
  26
  27 body {
  28   padding: 0;
  29   margin: 0;
  30   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  31   font-size: 16px;
  32   line-height: 1.5;
  33   color: $body-text-color;
  34 }
  35
  36 a {
  37   color: $body-link-color;
  38   text-decoration: none;
  39
  40   &:hover {
  41     text-decoration: underline;
  42   }
  43 }
  44
  45 .btn {
  46   display: inline-block;
  47   margin-bottom: 1rem;
  48   color: rgba(255, 255, 255, 0.7);
  49   background-color: rgba(255, 255, 255, 0.08);
  50   border-color: rgba(255, 255, 255, 0.2);
  51   border-style: solid;
  52   border-width: 1px;
  53   border-radius: 0.3rem;
  54   transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  55
  56   &:hover {
  57     color: rgba(255, 255, 255, 0.8);
  58     text-decoration: none;
  59     background-color: rgba(255, 255, 255, 0.2);
  60     border-color: rgba(255, 255, 255, 0.3);
  61   }
  62
  63   + .btn {
  64     margin-left: 1rem;
  65   }
  66
  67   @include large {
  68     padding: 0.75rem 1rem;
  69   }
  70
  71   @include medium {
  72     padding: 0.6rem 0.9rem;
  73     font-size: 0.9rem;
  74   }
  75
  76   @include small {
  77     display: block;
  78     width: 100%;
  79     padding: 0.75rem;
  80     font-size: 0.9rem;
  81
  82     + .btn {
  83       margin-top: 1rem;
  84       margin-left: 0;
  85     }
  86   }
  87 }
  88
  89 .page-header {
  90   color: $header-heading-color;
  91   text-align: center;
  92   background-color: $header-bg-color;
  93   background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
  94
  95   @include large {
  96     padding: 5rem 6rem;
  97   }
  98
  99   @include medium {
 100     padding: 3rem 4rem;
 101   }
 102
 103   @include small {
 104     padding: 2rem 1rem;
 105   }
 106 }
 107
 108 .project-name {
 109   margin-top: 0;
 110   margin-bottom: 0.1rem;
 111
 112   @include large {
 113     font-size: 3.25rem;
 114   }
 115
 116   @include medium {
 117     font-size: 2.25rem;
 118   }
 119
 120   @include small {
 121     font-size: 1.75rem;
 122   }
 123 }
 124
 125 .project-tagline {
 126   margin-bottom: 2rem;
 127   font-weight: normal;
 128   opacity: 0.7;
 129
 130   @include large {
 131     font-size: 1.25rem;
 132   }
 133
 134   @include medium {
 135     font-size: 1.15rem;
 136   }
 137
 138   @include small {
 139     font-size: 1rem;
 140   }
 141 }
 142
 143 .main-content {
 144   word-wrap: break-word;
 145
 146   :first-child {
 147     margin-top: 0;
 148   }
 149
 150   @include large {
 151     max-width: 64rem;
 152     padding: 2rem 6rem;
 153     margin: 0 auto;
 154     font-size: 1.1rem;
 155   }
 156
 157   @include medium {
 158     padding: 2rem 4rem;
 159     font-size: 1.1rem;
 160   }
 161
 162   @include small {
 163     padding: 2rem 1rem;
 164     font-size: 1rem;
 165   }
 166
 167   img {
 168     max-width: 100%;
 169   }
 170
 171   h1,
 172   h2,
 173   h3,
 174   h4,
 175   h5,
 176   h6 {
 177     margin-top: 2rem;
 178     margin-bottom: 1rem;
 179     font-weight: normal;
 180     color: $section-headings-color;
 181   }
 182
 183   p {
 184     margin-bottom: 1em;
 185   }
 186
 187   code {
 188     padding: 2px 4px;
 189     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
 190     font-size: 0.9rem;
 191     color: $code-text-color;
 192     background-color: $code-bg-color;
 193     border-radius: 0.3rem;
 194   }
 195
 196   pre {
 197     padding: 0.8rem;
 198     margin-top: 0;
 199     margin-bottom: 1rem;
 200     font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
 201     color: $code-text-color;
 202     word-wrap: normal;
 203     background-color: $code-bg-color;
 204     border: solid 1px $border-color;
 205     border-radius: 0.3rem;
 206
 207     > code {
 208       padding: 0;
 209       margin: 0;
 210       font-size: 0.9rem;
 211       color: $code-text-color;
 212       word-break: normal;
 213       white-space: pre;
 214       background: transparent;
 215       border: 0;
 216     }
 217   }
 218
 219   .highlight {
 220     margin-bottom: 1rem;
 221
 222     pre {
 223       margin-bottom: 0;
 224       word-break: normal;
 225     }
 226   }
 227
 228   .highlight pre,
 229   pre {
 230     padding: 0.8rem;
 231     overflow: auto;
 232     font-size: 0.9rem;
 233     line-height: 1.45;
 234     border-radius: 0.3rem;
 235     -webkit-overflow-scrolling: touch;
 236   }
 237
 238   pre code,
 239   pre tt {
 240     display: inline;
 241     max-width: initial;
 242     padding: 0;
 243     margin: 0;
 244     overflow: initial;
 245     line-height: inherit;
 246     word-wrap: normal;
 247     background-color: transparent;
 248     border: 0;
 249
 250     &:before,
 251     &:after {
 252       content: normal;
 253     }
 254   }
 255
 256   ul,
 257   ol {
 258     margin-top: 0;
 259   }
 260
 261   blockquote {
 262     padding: 0 1rem;
 263     margin-left: 0;
 264     color: $blockquote-text-color;
 265     border-left: 0.3rem solid $border-color;
 266
 267     > :first-child {
 268       margin-top: 0;
 269     }
 270
 271     > :last-child {
 272       margin-bottom: 0;
 273     }
 274   }
 275
 276   table {
 277     display: block;
 278     width: 100%;
 279     overflow: auto;
 280     word-break: normal;
 281     word-break: keep-all; // For Firefox to horizontally scroll wider tables.
 282     -webkit-overflow-scrolling: touch;
 283
 284     th {
 285       font-weight: bold;
 286     }
 287
 288     th,
 289     td {
 290       padding: 0.5rem 1rem;
 291       border: 1px solid $table-border-color;
 292     }
 293   }
 294
 295   dl {
 296     padding: 0;
 297
 298     dt {
 299       padding: 0;
 300       margin-top: 1rem;
 301       font-size: 1rem;
 302       font-weight: bold;
 303     }
 304
 305     dd {
 306       padding: 0;
 307       margin-bottom: 1rem;
 308     }
 309   }
 310
 311   hr {
 312     height: 2px;
 313     padding: 0;
 314     margin: 1rem 0;
 315     background-color: $hr-border-color;
 316     border: 0;
 317   }
 318 }
 319
 320 .site-footer {
 321   padding-top: 2rem;
 322   margin-top: 2rem;
 323   border-top: solid 1px $hr-border-color;
 324
 325   @include large {
 326     font-size: 1rem;
 327   }
 328
 329   @include medium {
 330     font-size: 1rem;
 331   }
 332
 333   @include small {
 334     font-size: 0.9rem;
 335   }
 336 }
 337
 338 .site-footer-owner {
 339   display: block;
 340   font-weight: bold;
 341 }
 342
 343 .site-footer-credits {
 344   color: $blockquote-text-color;
 345 }