├── .gitignore
├── .scss-lint.yml
├── package.json
├── README.md
├── Gruntfile.js
├── compositor.json
├── css
    ├── cayman.css
    └── normalize.css
├── scss
    ├── cayman.scss
    └── .scss-lint.yml
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/.scss-lint.yml:
--------------------------------------------------------------------------------
1 | scss/.scss-lint.yml


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Cayman",
 3 |   "version": "1.0.0",
 4 |   "homepage": "http://github.com/jasonlong/cayman-theme",
 5 |   "author": "Jason Long",
 6 |   "scss": "./scss/cayman.scss",
 7 |   "devDependencies": {
 8 |     "autoprefixer": "^6.6.0",
 9 |     "grunt-browser-sync": "~2.1.1",
10 |     "grunt": "~1.0.1",
11 |     "grunt-postcss": "~0.8.0",
12 |     "grunt-sass": "~1.1.0",
13 |     "grunt-contrib-watch": "~1.0.0"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cayman theme
 2 | 
 3 | Cayman is a clean, responsive theme for [GitHub Pages](https://pages.github.com). This theme is available as an option if you use the [Automatic Page Generator](https://help.github.com/articles/creating-pages-with-the-automatic-generator/) or you can copy the template and styles to use on your own.
 4 | 
 5 | You can preview the theme at http://jasonlong.github.io/cayman-theme or with real content at http://jasonlong.github.io/geo_pattern.
 6 | 
 7 | ![](http://cl.ly/image/1T3r3d18311V/content)
 8 | 
 9 | # Customizations
10 | 
11 | If you copy this theme for your own needs, feel free to customize the colors however you like. A couple of nice sources for gradient colors are http://uigradients.com and http://jxnblk.com/shade/.
12 | 
13 | # Using with Jekyll
14 | 
15 | If you'd like to use this theme with Jekyll, Pietro Menna has put together a package to make it easy. You can find it at https://github.com/pietromenna/jekyll-cayman-theme
16 | 
17 | # License
18 | 
19 | This work is licensed under a [Creative Commons Attribution 4.0 International](http://creativecommons.org/licenses/by/4.0/) license.
20 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |   grunt.initConfig({
 4 | 
 5 |     watch: {
 6 |       options: {
 7 |         spawn: false
 8 |       },
 9 |       sass: {
10 |         files: 'scss/*.scss',
11 |         tasks: ['sass', 'postcss', 'bsReload:css']
12 |       },
13 |       html: {
14 |         files: '*.html',
15 |         tasks: ['bsReload:all']
16 |       }
17 |     },
18 | 
19 |     sass: {
20 |       options: {
21 |         precision: 6,
22 |         sourceComments: false
23 |       },
24 |       dist: {
25 |         files: {
26 |           'css/cayman.css': 'scss/cayman.scss'
27 |         }
28 |       }
29 |     },
30 | 
31 |     postcss: {
32 |       options: {
33 |         processors: [
34 |           require('autoprefixer')({browsers: ['last 2 versions', 'ie 8', 'ie 9']})
35 |         ]
36 |       },
37 |       dist: {
38 |         files: {
39 |           'css/cayman.css': 'css/cayman.css'
40 |         }
41 |       }
42 |     },
43 | 
44 |     browserSync: {
45 |       dev: {
46 |         options: {
47 |           server: "./",
48 |           background: true
49 |         }
50 |       }
51 |     },
52 | 
53 |     bsReload: {
54 |       css: {
55 |         reload: "cayman.css"
56 |       },
57 |       all: {
58 |         reload: true
59 |       }
60 |     }
61 |   });
62 | 
63 |   // Load dependencies
64 |   grunt.loadNpmTasks('grunt-browser-sync');
65 |   grunt.loadNpmTasks('grunt-postcss');
66 |   grunt.loadNpmTasks('grunt-contrib-watch');
67 |   grunt.loadNpmTasks('grunt-sass');
68 | 
69 |   // Generate and format the CSS
70 |   grunt.registerTask('default', ['browserSync', 'watch']);
71 | 
72 | };
73 | 


--------------------------------------------------------------------------------
/compositor.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "jasonlong/cayman-theme",
  3 |   "version": "0.1.4",
  4 |   "libraries": {
  5 |     "xv": "^1.1.25"
  6 |   },
  7 |   "title": "",
  8 |   "branch": "",
  9 |   "style": {
 10 |     "name": "Future",
 11 |     "componentSet": {
 12 |       "nav": "nav/BasicNav",
 13 |       "header": "header/BannerHeader",
 14 |       "article": "article/BasicArticle",
 15 |       "footer": "footer/BasicFooter"
 16 |     },
 17 |     "fontFamily": "\"Avenir Next\", Helvetica, sans-serif",
 18 |     "heading": {
 19 |       "fontWeight": 500,
 20 |       "textTransform": "uppercase",
 21 |       "letterSpacing": "0.2em"
 22 |     },
 23 |     "alternativeText": {
 24 |       "textTransform": "uppercase",
 25 |       "fontWeight": 400,
 26 |       "letterSpacing": "0.2em",
 27 |       "opacity": 0.75
 28 |     },
 29 |     "colors": {
 30 |       "text": "#333",
 31 |       "background": "#fff",
 32 |       "primary": "#666",
 33 |       "secondary": "#888",
 34 |       "highlight": "#1f80ff",
 35 |       "muted": "#f6f6f6",
 36 |       "border": "#eee"
 37 |     },
 38 |     "layout": {
 39 |       "centered": true,
 40 |       "maxWidth": 1024,
 41 |       "bannerHeight": "80vh"
 42 |     }
 43 |   },
 44 |   "content": [
 45 |     {
 46 |       "component": "nav",
 47 |       "links": [
 48 |         {
 49 |           "href": "http://jasonlong.github.io/cayman-theme/",
 50 |           "text": "Home"
 51 |         },
 52 |         {
 53 |           "href": "https://github.com/jasonlong/cayman-theme",
 54 |           "text": "GitHub"
 55 |         },
 56 |         {
 57 |           "href": "https://npmjs.com/package/Cayman",
 58 |           "text": "npm"
 59 |         }
 60 |       ]
 61 |     },
 62 |     {
 63 |       "component": "header",
 64 |       "heading": "cayman-theme",
 65 |       "subhead": "A responsive theme for GitHub Pages",
 66 |       "children": [
 67 |         {
 68 |           "component": "ui/TweetButton",
 69 |           "text": "cayman-theme: A responsive theme for GitHub Pages",
 70 |           "url": "http://jasonlong.github.io/cayman-theme/"
 71 |         },
 72 |         {
 73 |           "component": "ui/GithubButton",
 74 |           "user": "jasonlong",
 75 |           "repo": "cayman-theme"
 76 |         }
 77 |       ],
 78 |       "text": "v1.0.0"
 79 |     },
 80 |     {
 81 |       "component": "article",
 82 |       "metadata": {
 83 |         "source": "github.readme"
 84 |       },
 85 |       "html": "\n<p>Cayman is a clean, responsive theme for <a href=\"https://pages.github.com\">GitHub Pages</a>. This theme is available as an option if you use the <a href=\"https://help.github.com/articles/creating-pages-with-the-automatic-generator/\">Automatic Page Generator</a> or you can copy the template and styles to use on your own.</p>\n<p>You can preview the theme at <a href=\"http://jasonlong.github.io/cayman-theme\">http://jasonlong.github.io/cayman-theme</a> or with real content at <a href=\"http://jasonlong.github.io/geo_pattern\">http://jasonlong.github.io/geo_pattern</a>.</p>\n<p><img src=\"http://cl.ly/image/1T3r3d18311V/content\"></p>\n<h1>Customizations</h1>\n<p>If you copy this theme for your own needs, feel free to customize the colors however you like. A couple of nice sources for gradient colors are <a href=\"http://uigradients.com\">http://uigradients.com</a> and <a href=\"http://jxnblk.com/shade/\">http://jxnblk.com/shade/</a>.</p>\n<h1>Using with Jekyll</h1>\n<p>If you&apos;d like to use this theme with Jekyll, Pietro Menna has put together a package to make it easy. You can find it at <a href=\"https://github.com/pietromenna/jekyll-cayman-theme\">https://github.com/pietromenna/jekyll-cayman-theme</a></p>\n<h1>License</h1>\n<p>This work is licensed under a <a href=\"http://creativecommons.org/licenses/by/4.0/\">Creative Commons Attribution 4.0 International</a> license.</p>\n"
 86 |     },
 87 |     {
 88 |       "component": "footer",
 89 |       "links": [
 90 |         {
 91 |           "href": "https://github.com/jasonlong/cayman-theme",
 92 |           "text": "GitHub"
 93 |         },
 94 |         {
 95 |           "href": "https://github.com/jasonlong",
 96 |           "text": "jasonlong"
 97 |         }
 98 |       ]
 99 |     }
100 |   ]
101 | }


--------------------------------------------------------------------------------
/css/cayman.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box; }
  3 | 
  4 | body {
  5 |   padding: 0;
  6 |   margin: 0;
  7 |   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  8 |   font-size: 16px;
  9 |   line-height: 1.5;
 10 |   color: #606c71; }
 11 | 
 12 | a {
 13 |   color: #1e6bb8;
 14 |   text-decoration: none; }
 15 |   a:hover {
 16 |     text-decoration: underline; }
 17 | 
 18 | .btn {
 19 |   display: inline-block;
 20 |   margin-bottom: 1rem;
 21 |   color: rgba(255, 255, 255, 0.7);
 22 |   background-color: rgba(255, 255, 255, 0.08);
 23 |   border-color: rgba(255, 255, 255, 0.2);
 24 |   border-style: solid;
 25 |   border-width: 1px;
 26 |   border-radius: 0.3rem;
 27 |   transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
 28 |   .btn:hover {
 29 |     color: rgba(255, 255, 255, 0.8);
 30 |     text-decoration: none;
 31 |     background-color: rgba(255, 255, 255, 0.2);
 32 |     border-color: rgba(255, 255, 255, 0.3); }
 33 |   .btn + .btn {
 34 |     margin-left: 1rem; }
 35 |   @media screen and (min-width: 64em) {
 36 |     .btn {
 37 |       padding: 0.75rem 1rem; } }
 38 |   @media screen and (min-width: 42em) and (max-width: 64em) {
 39 |     .btn {
 40 |       padding: 0.6rem 0.9rem;
 41 |       font-size: 0.9rem; } }
 42 |   @media screen and (max-width: 42em) {
 43 |     .btn {
 44 |       display: block;
 45 |       width: 100%;
 46 |       padding: 0.75rem;
 47 |       font-size: 0.9rem; }
 48 |       .btn + .btn {
 49 |         margin-top: 1rem;
 50 |         margin-left: 0; } }
 51 | 
 52 | .page-header {
 53 |   color: #fff;
 54 |   text-align: center;
 55 |   background-color: #159957;
 56 |   background-image: linear-gradient(120deg, #155799, #159957); }
 57 |   @media screen and (min-width: 64em) {
 58 |     .page-header {
 59 |       padding: 5rem 6rem; } }
 60 |   @media screen and (min-width: 42em) and (max-width: 64em) {
 61 |     .page-header {
 62 |       padding: 3rem 4rem; } }
 63 |   @media screen and (max-width: 42em) {
 64 |     .page-header {
 65 |       padding: 2rem 1rem; } }
 66 | 
 67 | .project-name {
 68 |   margin-top: 0;
 69 |   margin-bottom: 0.1rem; }
 70 |   @media screen and (min-width: 64em) {
 71 |     .project-name {
 72 |       font-size: 3.25rem; } }
 73 |   @media screen and (min-width: 42em) and (max-width: 64em) {
 74 |     .project-name {
 75 |       font-size: 2.25rem; } }
 76 |   @media screen and (max-width: 42em) {
 77 |     .project-name {
 78 |       font-size: 1.75rem; } }
 79 | 
 80 | .project-tagline {
 81 |   margin-bottom: 2rem;
 82 |   font-weight: normal;
 83 |   opacity: 0.7; }
 84 |   @media screen and (min-width: 64em) {
 85 |     .project-tagline {
 86 |       font-size: 1.25rem; } }
 87 |   @media screen and (min-width: 42em) and (max-width: 64em) {
 88 |     .project-tagline {
 89 |       font-size: 1.15rem; } }
 90 |   @media screen and (max-width: 42em) {
 91 |     .project-tagline {
 92 |       font-size: 1rem; } }
 93 | 
 94 | .main-content {
 95 |   word-wrap: break-word; }
 96 |   .main-content :first-child {
 97 |     margin-top: 0; }
 98 |   @media screen and (min-width: 64em) {
 99 |     .main-content {
100 |       max-width: 64rem;
101 |       padding: 2rem 6rem;
102 |       margin: 0 auto;
103 |       font-size: 1.1rem; } }
104 |   @media screen and (min-width: 42em) and (max-width: 64em) {
105 |     .main-content {
106 |       padding: 2rem 4rem;
107 |       font-size: 1.1rem; } }
108 |   @media screen and (max-width: 42em) {
109 |     .main-content {
110 |       padding: 2rem 1rem;
111 |       font-size: 1rem; } }
112 |   .main-content img {
113 |     max-width: 100%; }
114 |   .main-content h1,
115 |   .main-content h2,
116 |   .main-content h3,
117 |   .main-content h4,
118 |   .main-content h5,
119 |   .main-content h6 {
120 |     margin-top: 2rem;
121 |     margin-bottom: 1rem;
122 |     font-weight: normal;
123 |     color: #159957; }
124 |   .main-content p {
125 |     margin-bottom: 1em; }
126 |   .main-content code {
127 |     padding: 2px 4px;
128 |     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
129 |     font-size: 0.9rem;
130 |     color: #567482;
131 |     background-color: #f3f6fa;
132 |     border-radius: 0.3rem; }
133 |   .main-content pre {
134 |     padding: 0.8rem;
135 |     margin-top: 0;
136 |     margin-bottom: 1rem;
137 |     font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
138 |     color: #567482;
139 |     word-wrap: normal;
140 |     background-color: #f3f6fa;
141 |     border: solid 1px #dce6f0;
142 |     border-radius: 0.3rem; }
143 |     .main-content pre > code {
144 |       padding: 0;
145 |       margin: 0;
146 |       font-size: 0.9rem;
147 |       color: #567482;
148 |       word-break: normal;
149 |       white-space: pre;
150 |       background: transparent;
151 |       border: 0; }
152 |   .main-content .highlight {
153 |     margin-bottom: 1rem; }
154 |     .main-content .highlight pre {
155 |       margin-bottom: 0;
156 |       word-break: normal; }
157 |   .main-content .highlight pre,
158 |   .main-content pre {
159 |     padding: 0.8rem;
160 |     overflow: auto;
161 |     font-size: 0.9rem;
162 |     line-height: 1.45;
163 |     border-radius: 0.3rem;
164 |     -webkit-overflow-scrolling: touch; }
165 |   .main-content pre code,
166 |   .main-content pre tt {
167 |     display: inline;
168 |     max-width: initial;
169 |     padding: 0;
170 |     margin: 0;
171 |     overflow: initial;
172 |     line-height: inherit;
173 |     word-wrap: normal;
174 |     background-color: transparent;
175 |     border: 0; }
176 |     .main-content pre code:before, .main-content pre code:after,
177 |     .main-content pre tt:before,
178 |     .main-content pre tt:after {
179 |       content: normal; }
180 |   .main-content ul,
181 |   .main-content ol {
182 |     margin-top: 0; }
183 |   .main-content blockquote {
184 |     padding: 0 1rem;
185 |     margin-left: 0;
186 |     color: #819198;
187 |     border-left: 0.3rem solid #dce6f0; }
188 |     .main-content blockquote > :first-child {
189 |       margin-top: 0; }
190 |     .main-content blockquote > :last-child {
191 |       margin-bottom: 0; }
192 |   .main-content table {
193 |     display: block;
194 |     width: 100%;
195 |     overflow: auto;
196 |     word-break: normal;
197 |     word-break: keep-all;
198 |     -webkit-overflow-scrolling: touch; }
199 |     .main-content table th {
200 |       font-weight: bold; }
201 |     .main-content table th,
202 |     .main-content table td {
203 |       padding: 0.5rem 1rem;
204 |       border: 1px solid #e9ebec; }
205 |   .main-content dl {
206 |     padding: 0; }
207 |     .main-content dl dt {
208 |       padding: 0;
209 |       margin-top: 1rem;
210 |       font-size: 1rem;
211 |       font-weight: bold; }
212 |     .main-content dl dd {
213 |       padding: 0;
214 |       margin-bottom: 1rem; }
215 |   .main-content hr {
216 |     height: 2px;
217 |     padding: 0;
218 |     margin: 1rem 0;
219 |     background-color: #eff0f1;
220 |     border: 0; }
221 | 
222 | .site-footer {
223 |   padding-top: 2rem;
224 |   margin-top: 2rem;
225 |   border-top: solid 1px #eff0f1; }
226 |   @media screen and (min-width: 64em) {
227 |     .site-footer {
228 |       font-size: 1rem; } }
229 |   @media screen and (min-width: 42em) and (max-width: 64em) {
230 |     .site-footer {
231 |       font-size: 1rem; } }
232 |   @media screen and (max-width: 42em) {
233 |     .site-footer {
234 |       font-size: 0.9rem; } }
235 | 
236 | .site-footer-owner {
237 |   display: block;
238 |   font-weight: bold; }
239 | 
240 | .site-footer-credits {
241 |   color: #819198; }
242 | 


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


--------------------------------------------------------------------------------
/scss/.scss-lint.yml:
--------------------------------------------------------------------------------
  1 | # This is the lint file for .scss files. It uses https://github.com/causes/scss-lint
  2 | # to search through .scss files and point out errors.
  3 | # You can view these errors in your editor.
  4 | #
  5 | # Here's a link to all the default configurations
  6 | # https://github.com/causes/scss-lint/blob/master/config/default.yml
  7 | # below is our settings.
  8 | 
  9 | linters:
 10 |   BangFormat:
 11 |     enabled: true
 12 |     space_before_bang: true
 13 |     space_after_bang: false
 14 | 
 15 |   BorderZero:
 16 |     enabled: true
 17 |     convention: zero # or `none`
 18 | 
 19 |   ColorKeyword:
 20 |     enabled: true
 21 | 
 22 |   ColorVariable:
 23 |     enabled: false
 24 | 
 25 |   Comment:
 26 |     enabled: false
 27 | 
 28 |   DebugStatement:
 29 |     enabled: true
 30 | 
 31 |   DeclarationOrder:
 32 |     enabled: true
 33 | 
 34 |   DuplicateProperty:
 35 |     enabled: true
 36 | 
 37 |   ElsePlacement:
 38 |     enabled: true
 39 |     style: same_line # or 'new_line'
 40 | 
 41 |   EmptyLineBetweenBlocks:
 42 |     enabled: true
 43 |     ignore_single_line_blocks: true
 44 | 
 45 |   EmptyRule:
 46 |     enabled: false
 47 | 
 48 |   FinalNewline:
 49 |     enabled: true
 50 |     present: true
 51 | 
 52 |   HexLength:
 53 |     enabled: true
 54 |     style: short # or 'long'
 55 | 
 56 |   HexNotation:
 57 |     enabled: true
 58 |     style: lowercase # or 'uppercase'
 59 | 
 60 |   HexValidation:
 61 |     enabled: true
 62 | 
 63 |   IdSelector:
 64 |     enabled: true
 65 | 
 66 |   ImportantRule:
 67 |     enabled: true
 68 | 
 69 |   ImportPath:
 70 |     enabled: true
 71 |     leading_underscore: false
 72 |     filename_extension: false
 73 | 
 74 |   Indentation:
 75 |     enabled: true
 76 |     allow_non_nested_indentation: false
 77 |     character: space # or 'tab'
 78 |     width: 2
 79 | 
 80 |   LeadingZero:
 81 |     enabled: true
 82 |     style: include_zero
 83 | 
 84 |   MergeableSelector:
 85 |     enabled: true
 86 |     force_nesting: true
 87 | 
 88 |   NameFormat:
 89 |     enabled: false
 90 |     convention: hyphenated_lowercase # or 'BEM', or a regex pattern
 91 | 
 92 |   NestingDepth:
 93 |     enabled: false
 94 |     max_depth: 3
 95 | 
 96 |   PlaceholderInExtend:
 97 |     enabled: false
 98 | 
 99 |   PropertySortOrder:
100 |     enabled: false
101 |     ignore_unspecified: true
102 |     severity: warning
103 |     order:
104 |       - position
105 |       - top
106 |       - right
107 |       - bottom
108 |       - left
109 |       - z-index
110 |       - display
111 |       - float
112 |       - width
113 |       - min-width
114 |       - max-width
115 |       - height
116 |       - min-height
117 |       - max-height
118 |       - box-sizing
119 |       - padding
120 |       - padding-top
121 |       - padding-right
122 |       - padding-bottom
123 |       - padding-left
124 |       - margin
125 |       - margin-top
126 |       - margin-right
127 |       - margin-bottom
128 |       - margin-left
129 |       - overflow
130 |       - overflow-x
131 |       - overflow-y
132 |       - clip
133 |       - clear
134 |       - font
135 |       - font-family
136 |       - font-size
137 |       - font-style
138 |       - font-weight
139 |       - font-variant
140 |       - font-size-adjust
141 |       - font-stretch
142 |       - font-effect
143 |       - font-emphasize
144 |       - font-emphasize-position
145 |       - font-emphasize-style
146 |       - font-smooth
147 |       - hyphens
148 |       - line-height
149 |       - color
150 |       - text-align
151 |       - text-align-last
152 |       - text-emphasis
153 |       - text-emphasis-color
154 |       - text-emphasis-style
155 |       - text-emphasis-position
156 |       - text-decoration
157 |       - text-indent
158 |       - text-justify
159 |       - text-outline
160 |       - text-overflow
161 |       - text-overflow-ellipsis
162 |       - text-overflow-mode
163 |       - text-shadow
164 |       - text-transform
165 |       - text-wrap
166 |       - letter-spacing
167 |       - word-break
168 |       - word-spacing
169 |       - word-wrap
170 |       - tab-size
171 |       - white-space
172 |       - vertical-align
173 |       - list-style
174 |       - list-style-position
175 |       - list-style-type
176 |       - list-style-image
177 |       - pointer-events
178 |       - fill
179 |       - fill-opacity
180 |       - stroke
181 |       - stroke-opacity
182 |       - stroke-width
183 |       - shape-rendering
184 |       - cursor
185 |       - visibility
186 |       - zoom
187 |       - flex-direction
188 |       - flex-order
189 |       - flex-pack
190 |       - flex-align
191 |       - table-layout
192 |       - empty-cells
193 |       - caption-side
194 |       - border-spacing
195 |       - border-collapse
196 |       - content
197 |       - quotes
198 |       - counter-reset
199 |       - counter-increment
200 |       - resize
201 |       - user-select
202 |       - nav-index
203 |       - nav-up
204 |       - nav-right
205 |       - nav-down
206 |       - nav-left
207 |       - background
208 |       - background-color
209 |       - background-image
210 |       - filter
211 |       - background-repeat
212 |       - background-attachment
213 |       - background-position
214 |       - background-position-x
215 |       - background-position-y
216 |       - background-clip
217 |       - background-origin
218 |       - background-size
219 |       - border
220 |       - border-color
221 |       - border-style
222 |       - border-width
223 |       - border-top
224 |       - border-top-color
225 |       - border-top-style
226 |       - border-top-width
227 |       - border-right
228 |       - border-right-color
229 |       - border-right-style
230 |       - border-right-width
231 |       - border-bottom
232 |       - border-bottom-color
233 |       - border-bottom-style
234 |       - border-bottom-width
235 |       - border-left
236 |       - border-left-color
237 |       - border-left-style
238 |       - border-left-width
239 |       - border-radius
240 |       - border-top-left-radius
241 |       - border-top-right-radius
242 |       - border-bottom-right-radius
243 |       - border-bottom-left-radius
244 |       - border-image
245 |       - border-image-source
246 |       - border-image-slice
247 |       - border-image-width
248 |       - border-image-outset
249 |       - border-image-repeat
250 |       - outline
251 |       - outline-width
252 |       - outline-style
253 |       - outline-color
254 |       - outline-offset
255 |       - box-shadow
256 |       - opacity
257 |       - transition
258 |       - transition-delay
259 |       - transition-timing-function
260 |       - transition-duration
261 |       - transition-property
262 |       - transform
263 |       - transform-origin
264 |       - animation
265 |       - animation-name
266 |       - animation-duration
267 |       - animation-fill-mode
268 |       - animation-play-state
269 |       - animation-timing-function
270 |       - animation-delay
271 |       - animation-iteration-count
272 |       - animation-direction
273 | 
274 |   PropertySpelling:
275 |     enabled: true
276 |     extra_properties: []
277 | 
278 |   QualifyingElement:
279 |     enabled: true
280 |     allow_element_with_attribute: false
281 |     allow_element_with_class: false
282 |     allow_element_with_id: false
283 | 
284 |   SelectorDepth:
285 |     enabled: true
286 |     max_depth: 4
287 | 
288 |   SelectorFormat:
289 |     enabled: false
290 |     convention: hyphenated_lowercase # or 'BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
291 | 
292 |   Shorthand:
293 |     enabled: true
294 | 
295 |   SingleLinePerProperty:
296 |     enabled: true
297 |     allow_single_line_rule_sets: true
298 | 
299 |   SingleLinePerSelector:
300 |     enabled: true
301 | 
302 |   SpaceAfterComma:
303 |     enabled: true
304 | 
305 |   SpaceAfterPropertyColon:
306 |     enabled: true
307 |     style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
308 | 
309 |   SpaceAfterPropertyName:
310 |     enabled: true
311 | 
312 |   SpaceBeforeBrace:
313 |     enabled: true
314 |     style: space # or 'new_line'
315 |     allow_single_line_padding: true
316 | 
317 |   SpaceBetweenParens:
318 |     enabled: true
319 |     spaces: 0
320 | 
321 |   StringQuotes:
322 |     enabled: true
323 |     style: double_quotes
324 | 
325 |   TrailingSemicolon:
326 |     enabled: true
327 | 
328 |   TrailingZero:
329 |     enabled: false
330 | 
331 |   UnnecessaryMantissa:
332 |     enabled: true
333 | 
334 |   UnnecessaryParentReference:
335 |     enabled: true
336 | 
337 |   UrlFormat:
338 |     enabled: true
339 | 
340 |   UrlQuotes:
341 |     enabled: true
342 | 
343 |   VariableForProperty:
344 |     enabled: false
345 |     properties: []
346 | 
347 |   VendorPrefix:
348 |     enabled: true
349 |     identifier_list: base
350 |     additional_identifiers: []
351 |     excluded_identifiers: []
352 | 
353 |   ZeroUnit:
354 |     enabled: true
355 | 


--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability when focused and also mouse hovered in all browsers.
 95 |  */
 96 | 
 97 | a:active,
 98 | a:hover {
 99 |   outline: 0;
100 | }
101 | 
102 | /* Text-level semantics
103 |    ========================================================================== */
104 | 
105 | /**
106 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
107 |  */
108 | 
109 | abbr[title] {
110 |   border-bottom: 1px dotted;
111 | }
112 | 
113 | /**
114 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
115 |  */
116 | 
117 | b,
118 | strong {
119 |   font-weight: bold;
120 | }
121 | 
122 | /**
123 |  * Address styling not present in Safari and Chrome.
124 |  */
125 | 
126 | dfn {
127 |   font-style: italic;
128 | }
129 | 
130 | /**
131 |  * Address variable `h1` font-size and margin within `section` and `article`
132 |  * contexts in Firefox 4+, Safari, and Chrome.
133 |  */
134 | 
135 | h1 {
136 |   font-size: 2em;
137 |   margin: 0.67em 0;
138 | }
139 | 
140 | /**
141 |  * Address styling not present in IE 8/9.
142 |  */
143 | 
144 | mark {
145 |   background: #ff0;
146 |   color: #000;
147 | }
148 | 
149 | /**
150 |  * Address inconsistent and variable font size in all browsers.
151 |  */
152 | 
153 | small {
154 |   font-size: 80%;
155 | }
156 | 
157 | /**
158 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
159 |  */
160 | 
161 | sub,
162 | sup {
163 |   font-size: 75%;
164 |   line-height: 0;
165 |   position: relative;
166 |   vertical-align: baseline;
167 | }
168 | 
169 | sup {
170 |   top: -0.5em;
171 | }
172 | 
173 | sub {
174 |   bottom: -0.25em;
175 | }
176 | 
177 | /* Embedded content
178 |    ========================================================================== */
179 | 
180 | /**
181 |  * Remove border when inside `a` element in IE 8/9/10.
182 |  */
183 | 
184 | img {
185 |   border: 0;
186 | }
187 | 
188 | /**
189 |  * Correct overflow not hidden in IE 9/10/11.
190 |  */
191 | 
192 | svg:not(:root) {
193 |   overflow: hidden;
194 | }
195 | 
196 | /* Grouping content
197 |    ========================================================================== */
198 | 
199 | /**
200 |  * Address margin not present in IE 8/9 and Safari.
201 |  */
202 | 
203 | figure {
204 |   margin: 1em 40px;
205 | }
206 | 
207 | /**
208 |  * Address differences between Firefox and other browsers.
209 |  */
210 | 
211 | hr {
212 |   box-sizing: content-box;
213 |   height: 0;
214 | }
215 | 
216 | /**
217 |  * Contain overflow in all browsers.
218 |  */
219 | 
220 | pre {
221 |   overflow: auto;
222 | }
223 | 
224 | /**
225 |  * Address odd `em`-unit font size rendering in all browsers.
226 |  */
227 | 
228 | code,
229 | kbd,
230 | pre,
231 | samp {
232 |   font-family: monospace, monospace;
233 |   font-size: 1em;
234 | }
235 | 
236 | /* Forms
237 |    ========================================================================== */
238 | 
239 | /**
240 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
241 |  * styling of `select`, unless a `border` property is set.
242 |  */
243 | 
244 | /**
245 |  * 1. Correct color not being inherited.
246 |  *    Known issue: affects color of disabled elements.
247 |  * 2. Correct font properties not being inherited.
248 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
249 |  */
250 | 
251 | button,
252 | input,
253 | optgroup,
254 | select,
255 | textarea {
256 |   color: inherit; /* 1 */
257 |   font: inherit; /* 2 */
258 |   margin: 0; /* 3 */
259 | }
260 | 
261 | /**
262 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
263 |  */
264 | 
265 | button {
266 |   overflow: visible;
267 | }
268 | 
269 | /**
270 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
271 |  * All other form control elements do not inherit `text-transform` values.
272 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
273 |  * Correct `select` style inheritance in Firefox.
274 |  */
275 | 
276 | button,
277 | select {
278 |   text-transform: none;
279 | }
280 | 
281 | /**
282 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
283 |  *    and `video` controls.
284 |  * 2. Correct inability to style clickable `input` types in iOS.
285 |  * 3. Improve usability and consistency of cursor style between image-type
286 |  *    `input` and others.
287 |  */
288 | 
289 | button,
290 | html input[type="button"], /* 1 */
291 | input[type="reset"],
292 | input[type="submit"] {
293 |   -webkit-appearance: button; /* 2 */
294 |   cursor: pointer; /* 3 */
295 | }
296 | 
297 | /**
298 |  * Re-set default cursor for disabled elements.
299 |  */
300 | 
301 | button[disabled],
302 | html input[disabled] {
303 |   cursor: default;
304 | }
305 | 
306 | /**
307 |  * Remove inner padding and border in Firefox 4+.
308 |  */
309 | 
310 | button::-moz-focus-inner,
311 | input::-moz-focus-inner {
312 |   border: 0;
313 |   padding: 0;
314 | }
315 | 
316 | /**
317 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
318 |  * the UA stylesheet.
319 |  */
320 | 
321 | input {
322 |   line-height: normal;
323 | }
324 | 
325 | /**
326 |  * It's recommended that you don't attempt to style these elements.
327 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
328 |  *
329 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
330 |  * 2. Remove excess padding in IE 8/9/10.
331 |  */
332 | 
333 | input[type="checkbox"],
334 | input[type="radio"] {
335 |   box-sizing: border-box; /* 1 */
336 |   padding: 0; /* 2 */
337 | }
338 | 
339 | /**
340 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
341 |  * `font-size` values of the `input`, it causes the cursor style of the
342 |  * decrement button to change from `default` to `text`.
343 |  */
344 | 
345 | input[type="number"]::-webkit-inner-spin-button,
346 | input[type="number"]::-webkit-outer-spin-button {
347 |   height: auto;
348 | }
349 | 
350 | /**
351 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
352 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
353 |  *    (include `-moz` to future-proof).
354 |  */
355 | 
356 | input[type="search"] {
357 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
358 |   box-sizing: content-box;
359 | }
360 | 
361 | /**
362 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 |  * Safari (but not Chrome) clips the cancel button when the search input has
364 |  * padding (and `textfield` appearance).
365 |  */
366 | 
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 |   -webkit-appearance: none;
370 | }
371 | 
372 | /**
373 |  * Define consistent border, margin, and padding.
374 |  */
375 | 
376 | fieldset {
377 |   border: 1px solid #c0c0c0;
378 |   margin: 0 2px;
379 |   padding: 0.35em 0.625em 0.75em;
380 | }
381 | 
382 | /**
383 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 |  */
386 | 
387 | legend {
388 |   border: 0; /* 1 */
389 |   padding: 0; /* 2 */
390 | }
391 | 
392 | /**
393 |  * Remove default vertical scrollbar in IE 8/9/10/11.
394 |  */
395 | 
396 | textarea {
397 |   overflow: auto;
398 | }
399 | 
400 | /**
401 |  * Don't inherit the `font-weight` (applied by a rule above).
402 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 |  */
404 | 
405 | optgroup {
406 |   font-weight: bold;
407 | }
408 | 
409 | /* Tables
410 |    ========================================================================== */
411 | 
412 | /**
413 |  * Remove most spacing between table cells.
414 |  */
415 | 
416 | table {
417 |   border-collapse: collapse;
418 |   border-spacing: 0;
419 | }
420 | 
421 | td,
422 | th {
423 |   padding: 0;
424 | }
425 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Cayman</title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <meta name="theme-color" content="#157878">
  8 |     <link rel="stylesheet" href="css/normalize.css">
  9 |     <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
 10 |     <link rel="stylesheet" href="css/cayman.css">
 11 |   </head>
 12 |   <body>
 13 |     <section class="page-header">
 14 |       <h1 class="project-name">Cayman</h1>
 15 |       <h2 class="project-tagline">A responsive theme for your project on GitHub Pages</h2>
 16 |       <a href="#" class="btn">View on GitHub</a>
 17 |       <a href="#" class="btn">Download .zip</a>
 18 |       <a href="#" class="btn">Download .tar.gz</a>
 19 |     </section>
 20 | 
 21 |     <section class="main-content">
 22 |       <p>Text can be <strong>bold</strong>, <em>italic</em>, or <del>strikethrough</del>. <a href="https://github.com">Links</a> should be blue with no underlines (unless hovered over).</p>
 23 | 
 24 |       <p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
 25 | 
 26 |       <p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
 27 | 
 28 |       <blockquote>
 29 |       <p>There should be no margin above this first sentence.</p>
 30 | 
 31 |       <p>Blockquotes should be a lighter gray with a gray border along the left side.</p>
 32 | 
 33 |       <p>There should be no margin below this final sentence.</p>
 34 |       </blockquote>
 35 | 
 36 |       <h1>
 37 |       <a id="user-content-header-1" class="anchor" href="#header-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>Header 1</h1>
 38 | 
 39 |       <p>This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.</p>
 40 | 
 41 |       <h2>
 42 |       <a id="user-content-header-2" class="anchor" href="#header-2" aria-hidden="true"><span class="octicon octicon-link"></span></a>Header 2</h2>
 43 | 
 44 |       <blockquote>
 45 |       <p>This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.</p>
 46 |       </blockquote>
 47 | 
 48 |       <h3>
 49 |       <a id="user-content-header-3" class="anchor" href="#header-3" aria-hidden="true"><span class="octicon octicon-link"></span></a>Header 3</h3>
 50 | 
 51 |       <pre><code>This is a code block following a header.</code></pre>
 52 | 
 53 |       <h4>
 54 |       <a id="user-content-header-4" class="anchor" href="#header-4" aria-hidden="true"><span class="octicon octicon-link"></span></a>Header 4</h4>
 55 | 
 56 |       <ul class="task-list">
 57 |       <li>This is an unordered list following a header.</li>
 58 |       <li>This is an unordered list following a header.</li>
 59 |       <li>This is an unordered list following a header.</li>
 60 |       </ul>
 61 | 
 62 |       <h5>
 63 |       <a id="user-content-header-5" class="anchor" href="#header-5" aria-hidden="true"><span class="octicon octicon-link"></span></a>Header 5</h5>
 64 | 
 65 |       <ol class="task-list">
 66 |       <li>This is an ordered list following a header.</li>
 67 |       <li>This is an ordered list following a header.</li>
 68 |       <li>This is an ordered list following a header.</li>
 69 |       </ol>
 70 | 
 71 |       <h6>
 72 |       <a id="user-content-header-6" class="anchor" href="#header-6" aria-hidden="true"><span class="octicon octicon-link"></span></a>Header 6</h6>
 73 | 
 74 |       <table>
 75 |       <thead>
 76 |       <tr>
 77 |       <th>What</th>
 78 |       <th>Follows</th>
 79 |       </tr>
 80 |       </thead>
 81 |       <tbody>
 82 |       <tr>
 83 |       <td>A table</td>
 84 |       <td>A header</td>
 85 |       </tr>
 86 |       <tr>
 87 |       <td>A table</td>
 88 |       <td>A header</td>
 89 |       </tr>
 90 |       <tr>
 91 |       <td>A table</td>
 92 |       <td>A header</td>
 93 |       </tr>
 94 |       </tbody>
 95 |       </table>
 96 | 
 97 |       <hr>
 98 | 
 99 |       <p>There's a horizontal rule above and below this.</p>
100 | 
101 |       <hr>
102 | 
103 |       <p>Here is an unordered list:</p>
104 | 
105 |       <ul class="task-list">
106 |       <li>Salt-n-Pepa</li>
107 |       <li>Bel Biv DeVoe</li>
108 |       <li>Kid 'N Play</li>
109 |       </ul>
110 | 
111 |       <p>And an ordered list:</p>
112 | 
113 |       <ol class="task-list">
114 |       <li>Michael Jackson</li>
115 |       <li>Michael Bolton</li>
116 |       <li>Michael Bublé</li>
117 |       </ol>
118 | 
119 |       <p>And an unordered task list:</p>
120 | 
121 |       <ul class="task-list">
122 |       <li class="task-list-item">
123 |       <input type="checkbox" class="task-list-item-checkbox" checked="" disabled=""> Create a sample markdown document</li>
124 |       <li class="task-list-item">
125 |       <input type="checkbox" class="task-list-item-checkbox" checked="" disabled=""> Add task lists to it</li>
126 |       <li class="task-list-item">
127 |       <input type="checkbox" class="task-list-item-checkbox" disabled=""> Take a vacation</li>
128 |       </ul>
129 | 
130 |       <p>And a "mixed" task list:</p>
131 | 
132 |       <ul class="task-list">
133 |       <li class="task-list-item">
134 |       <input type="checkbox" class="task-list-item-checkbox" disabled=""> Steal underpants</li>
135 |       <li>?</li>
136 |       <li class="task-list-item">
137 |       <input type="checkbox" class="task-list-item-checkbox" disabled=""> Profit!</li>
138 |       </ul>
139 | 
140 |       <p>And a nested list:</p>
141 | 
142 |       <ul class="task-list">
143 |       <li>Jackson 5
144 | 
145 |       <ul class="task-list">
146 |       <li>Michael</li>
147 |       <li>Tito</li>
148 |       <li>Jackie</li>
149 |       <li>Marlon</li>
150 |       <li>Jermaine</li>
151 |       </ul>
152 |       </li>
153 |       <li>TMNT
154 | 
155 |       <ul class="task-list">
156 |       <li>Leonardo</li>
157 |       <li>Michelangelo</li>
158 |       <li>Donatello</li>
159 |       <li>Raphael</li>
160 |       </ul>
161 |       </li>
162 |       </ul>
163 | 
164 |       <p>Definition lists can be used with HTML syntax. Definition terms are bold and italic.</p>
165 | 
166 |       <dl>
167 |           <dt>Name</dt>
168 |           <dd>Godzilla</dd>
169 |           <dt>Born</dt>
170 |           <dd>1952</dd>
171 |           <dt>Birthplace</dt>
172 |           <dd>Japan</dd>
173 |           <dt>Color</dt>
174 |           <dd>Green</dd>
175 |       </dl>
176 | 
177 |       <hr>
178 | 
179 |       <p>Tables should have bold headings and alternating shaded rows.</p>
180 | 
181 |       <table>
182 |       <thead>
183 |       <tr>
184 |       <th>Artist</th>
185 |       <th>Album</th>
186 |       <th>Year</th>
187 |       </tr>
188 |       </thead>
189 |       <tbody>
190 |       <tr>
191 |       <td>Michael Jackson</td>
192 |       <td>Thriller</td>
193 |       <td>1982</td>
194 |       </tr>
195 |       <tr>
196 |       <td>Prince</td>
197 |       <td>Purple Rain</td>
198 |       <td>1984</td>
199 |       </tr>
200 |       <tr>
201 |       <td>Beastie Boys</td>
202 |       <td>License to Ill</td>
203 |       <td>1986</td>
204 |       </tr>
205 |       </tbody>
206 |       </table>
207 | 
208 |       <p>If a table is too wide, it should condense down and/or scroll horizontally.</p>
209 | 
210 |       <table>
211 |       <thead>
212 |       <tr>
213 |       <th>Artist</th>
214 |       <th>Album</th>
215 |       <th>Year</th>
216 |       <th>Label</th>
217 |       <th>Awards</th>
218 |       <th>Songs</th>
219 |       </tr>
220 |       </thead>
221 |       <tbody>
222 |       <tr>
223 |       <td>Michael Jackson</td>
224 |       <td>Thriller</td>
225 |       <td>1982</td>
226 |       <td>Epic Records</td>
227 |       <td>Grammy Award for Album of the Year, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&amp;B Album, Brit Award for Best Selling Album, Grammy Award for Best Engineered Album, Non-Classical</td>
228 |       <td>Wanna Be Startin' Somethin', Baby Be Mine, The Girl Is Mine, Thriller, Beat It, Billie Jean, Human Nature, P.Y.T. (Pretty Young Thing), The Lady in My Life</td>
229 |       </tr>
230 |       <tr>
231 |       <td>Prince</td>
232 |       <td>Purple Rain</td>
233 |       <td>1984</td>
234 |       <td>Warner Brothers Records</td>
235 |       <td>Grammy Award for Best Score Soundtrack for Visual Media, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&amp;B Album, Brit Award for Best Soundtrack/Cast Recording, Grammy Award for Best Rock Performance by a Duo or Group with Vocal</td>
236 |       <td>Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain</td>
237 |       </tr>
238 |       <tr>
239 |       <td>Beastie Boys</td>
240 |       <td>License to Ill</td>
241 |       <td>1986</td>
242 |       <td>Mercury Records</td>
243 |       <td>noawardsbutthistablecelliswide</td>
244 |       <td>Rhymin &amp; Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, (You Gotta) Fight for Your Right, No Sleep Till Brooklyn, Paul Revere, Hold It Now, Hit It, Brass Monkey, Slow and Low, Time to Get Ill</td>
245 |       </tr>
246 |       </tbody>
247 |       </table>
248 | 
249 |       <hr>
250 | 
251 |       <p>Code snippets like <code>var foo = "bar";</code> can be shown inline.</p>
252 | 
253 |       <p>Also, <code>this should vertically align</code> <del><code>with this</code></del> <del>and this</del>.</p>
254 | 
255 |       <p>Code can also be shown in a block element.</p>
256 | 
257 |       <pre><code>var foo = "bar";
258 | </code></pre>
259 | 
260 |       <p>Code can also use syntax highlighting.</p>
261 | 
262 |       <div class="highlight highlight-Javascript"><pre><span class="pl-k">var</span> foo <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>bar<span class="pl-pds">"</span></span>;</pre></div>
263 | 
264 |       <pre><code>Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.</code></pre>
265 | 
266 |       <div class="highlight highlight-Javascript"><pre><span class="pl-k">var</span> foo <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.<span class="pl-pds">"</span></span>;</pre></div>
267 | 
268 |       <p>Inline code inside table cells should still be distinguishable.</p>
269 | 
270 |       <table>
271 |       <thead>
272 |       <tr>
273 |       <th>Language</th>
274 |       <th>Code</th>
275 |       </tr>
276 |       </thead>
277 |       <tbody>
278 |       <tr>
279 |       <td>Javascript</td>
280 |       <td><code>var foo = "bar";</code></td>
281 |       </tr>
282 |       <tr>
283 |       <td>Ruby</td>
284 |       <td><code>foo = "bar"</code></td>
285 |       </tr>
286 |       </tbody>
287 |       </table>
288 | 
289 |       <hr>
290 | 
291 |       <p>Small images should be shown at their actual size.</p>
292 | 
293 |       <p><a href="https://camo.githubusercontent.com/16a9d5241f679b6429fc0597f10816dd2665bbb2/687474703a2f2f706c6163656b697474656e2e636f6d2f672f3330302f3230302f" target="_blank"><img src="https://camo.githubusercontent.com/16a9d5241f679b6429fc0597f10816dd2665bbb2/687474703a2f2f706c6163656b697474656e2e636f6d2f672f3330302f3230302f" alt="" data-canonical-src="https://placekitten.com/g/300/200/" style="max-width:100%;"></a></p>
294 | 
295 |       <p>Large images should always scale down and fit in the content container.</p>
296 | 
297 |       <p><a href="https://camo.githubusercontent.com/afe46418285497605cf4f6376b75f8c818658fb1/687474703a2f2f706c6163656b697474656e2e636f6d2f672f313230302f3830302f" target="_blank"><img src="https://camo.githubusercontent.com/afe46418285497605cf4f6376b75f8c818658fb1/687474703a2f2f706c6163656b697474656e2e636f6d2f672f313230302f3830302f" alt="" data-canonical-src="https://placekitten.com/g/1200/800/" style="max-width:100%;"></a></p>
298 | 
299 |       <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
300 | 
301 |       <footer class="site-footer">
302 |         <span class="site-footer-owner"><a href="https://github.com/jasonlong/cayman-theme">Cayman</a> is maintained by <a href="https://github.com/jasonlong">jasonlong</a>.</span>
303 |         <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
304 |       </footer>
305 | 
306 |     </section>
307 | 
308 |   </body>
309 | </html>
310 | 


--------------------------------------------------------------------------------