├── .gitignore ├── README.md ├── images ├── newspaper.gif └── patreoncot.jpg ├── _includes ├── icon-github.html ├── icon-twitter.html ├── icon-twitter.svg ├── head.html ├── icon-github.svg ├── footer.html └── header.html ├── _layouts ├── page.html ├── default.html └── post.html ├── faq.md ├── about.md ├── info.md ├── _posts ├── 2016-11-08-welcome-to-accessiblity.md └── 2016-11-08-youre-a-tester-now-what.md ├── index.html ├── _config.yml ├── css └── main.scss ├── feed.xml └── _sass ├── _syntax-highlighting.scss ├── _base.scss └── _layout.scss /.gitignore: -------------------------------------------------------------------------------- 1 | _site/ 2 | .sass-cache/ 3 | .jekyll-metadata 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # accessibility-practice-site 2 | A jekyll based website used for practicing accessibility testing 3 | -------------------------------------------------------------------------------- /images/newspaper.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/accessibility-practice-site/master/images/newspaper.gif -------------------------------------------------------------------------------- /images/patreoncot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/18F/accessibility-practice-site/master/images/patreoncot.jpg -------------------------------------------------------------------------------- /_includes/icon-github.html: -------------------------------------------------------------------------------- 1 | {% include icon-github.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /_includes/icon-twitter.html: -------------------------------------------------------------------------------- 1 | {% include icon-twitter.svg %}{{ include.username }} 2 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | 6 |
7 |

{{ page.title }}

8 |
9 | 10 |
11 | {{ content }} 12 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 |
11 |
12 | {{ content }} 13 |
14 |
15 | 16 | {% include footer.html %} 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /faq.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: FAQ 4 | permalink: /faq/ 5 | --- 6 | 7 | This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) 8 | 9 | You can find the source code for the Jekyll new theme at: 10 | {% include icon-github.html username="jglovier" %} / 11 | [jekyll-new](https://github.com/jglovier/jekyll-new) 12 | 13 | You can find the source code for Jekyll at 14 | {% include icon-github.html username="jekyll" %} / 15 | [jekyll](https://github.com/jekyll/jekyll) 16 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/) 8 | 9 | You can find the source code for the Jekyll new theme at: 10 | {% include icon-github.html username="jglovier" %} / 11 | [jekyll-new](https://github.com/jglovier/jekyll-new) 12 | 13 | You can find the source code for Jekyll at 14 | {% include icon-github.html username="jekyll" %} / 15 | [jekyll](https://github.com/jekyll/jekyll) 16 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 | 6 |
7 |

{{ page.title }}

8 |

{% if page.author %} • {% endif %}

9 |
10 | 11 |
12 | {{ content }} 13 |
14 | 15 |
16 | -------------------------------------------------------------------------------- /info.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Newsletter 4 | permalink: /newsletter/ 5 | --- 6 | 7 | 8 | 9 | Sign up for the news letter to get more information about accessibility every month! 10 | 11 |
12 |
13 | 17 |
18 |
19 | 23 |
24 |
25 | Email Address 26 | 27 |
28 | 29 |
30 | -------------------------------------------------------------------------------- /_posts/2016-11-08-welcome-to-accessiblity.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Welcome to Accessibility!" 4 | date: 2016-11-08 09:46:23 -0500 5 | categories: jekyll update 6 | --- 7 | Welcome to the accessibility practice site. This is a very simple blog built using jekyll with the explicit purpose of showing accessibility failures and allowing you to practice finding them. 8 | 9 | I would highly encourage you use the template for testing find all the errors yourself. After you are done, watch the video showing the testing by Nick Bristow and see how you did! 10 | 11 | After you have found the errors, I encourage you to fork this repo and attempt to fix the issues! Accessibility can be addressed in numerous ways and I encourage you to share your results! -------------------------------------------------------------------------------- /_includes/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 |

Posts

8 | 9 | 26 | 27 |

subscribe via RSS

28 | 29 |
30 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: Welcome to Accessibility Testing 10 | email: your-email@domain.com 11 | description: > # this means to ignore newlines until "baseurl:" 12 | A site to let you practice accessibility testing. 13 | baseurl: "" # the subpath of your site, e.g. /blog 14 | url: "http://yourdomain.com" # the base hostname & protocol for your site 15 | twitter_username: rbristow 16 | github_username: nickbristow 17 | 18 | # Build settings 19 | markdown: kramdown 20 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /_includes/icon-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 39 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | {{ site.title }} 6 | 7 | 24 | 25 |
26 | 27 |
28 | -------------------------------------------------------------------------------- /css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | 7 | 8 | // Our variables 9 | $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 10 | $base-font-size: 16px; 11 | $base-font-weight: 400; 12 | $small-font-size: $base-font-size * 0.875; 13 | $base-line-height: 1.5; 14 | 15 | $spacing-unit: 30px; 16 | 17 | $text-color: #111; 18 | $background-color: #fdfdfd; 19 | $brand-color: #2a7ae2; 20 | 21 | $grey-color: #828282; 22 | $grey-color-light: lighten($grey-color, 40%); 23 | $grey-color-dark: darken($grey-color, 25%); 24 | 25 | // Width of the content area 26 | $content-width: 800px; 27 | 28 | $on-palm: 600px; 29 | $on-laptop: 800px; 30 | 31 | 32 | 33 | // Use media queries like this: 34 | // @include media-query($on-palm) { 35 | // .wrapper { 36 | // padding-right: $spacing-unit / 2; 37 | // padding-left: $spacing-unit / 2; 38 | // } 39 | // } 40 | @mixin media-query($device) { 41 | @media screen and (max-width: $device) { 42 | @content; 43 | } 44 | } 45 | 46 | 47 | 48 | // Import partials from `sass_dir` (defaults to `_sass`) 49 | @import 50 | "base", 51 | "layout", 52 | "syntax-highlighting" 53 | ; 54 | -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:10 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /_posts/2016-11-08-youre-a-tester-now-what.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "You're an Accessibility Tester, now what?" 4 | date: 2016-11-08 10:46:23 -0500 5 | categories: accessibilty 6 | --- 7 | Well, now its on your shoulders to make sure your teams work is accessible. Use your powers for good. 8 | 9 | image of chicken 10 | 11 | Lets look at a table of accessibility techniques and benefits 12 |
13 | 14 | 15 | 16 | 19 | 22 | 23 | 24 | 25 | 26 | 29 | 32 | 33 | 34 | 37 | 40 | 41 | 42 |
17 | Skill 18 | 20 | Benefit 21 |
27 | Alt tags 28 | 30 | SEO, Screen reader compatible 31 |
35 | Proper Forms 36 | 38 | keyboard functionality, Scren readers 39 |
43 |
44 |

and another

45 |
46 | 47 | 48 | 49 | 52 | 55 | 56 | 57 | 58 | 59 | 62 | 65 | 66 | 67 | 70 | 73 | 74 | 75 |
50 | Skill 51 | 53 | Benefit 54 |
60 | Headers 61 | 63 | Screen readers 64 |
68 | Language 69 | 71 | Screen readers 72 |
76 |
-------------------------------------------------------------------------------- /_sass/_syntax-highlighting.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Syntax highlighting styles 3 | */ 4 | .highlight { 5 | background: #fff; 6 | @extend %vertical-rhythm; 7 | 8 | .highlighter-rouge & { 9 | background: #eef; 10 | } 11 | 12 | .c { color: #998; font-style: italic } // Comment 13 | .err { color: #a61717; background-color: #e3d2d2 } // Error 14 | .k { font-weight: bold } // Keyword 15 | .o { font-weight: bold } // Operator 16 | .cm { color: #998; font-style: italic } // Comment.Multiline 17 | .cp { color: #999; font-weight: bold } // Comment.Preproc 18 | .c1 { color: #998; font-style: italic } // Comment.Single 19 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special 20 | .gd { color: #000; background-color: #fdd } // Generic.Deleted 21 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific 22 | .ge { font-style: italic } // Generic.Emph 23 | .gr { color: #a00 } // Generic.Error 24 | .gh { color: #999 } // Generic.Heading 25 | .gi { color: #000; background-color: #dfd } // Generic.Inserted 26 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific 27 | .go { color: #888 } // Generic.Output 28 | .gp { color: #555 } // Generic.Prompt 29 | .gs { font-weight: bold } // Generic.Strong 30 | .gu { color: #aaa } // Generic.Subheading 31 | .gt { color: #a00 } // Generic.Traceback 32 | .kc { font-weight: bold } // Keyword.Constant 33 | .kd { font-weight: bold } // Keyword.Declaration 34 | .kp { font-weight: bold } // Keyword.Pseudo 35 | .kr { font-weight: bold } // Keyword.Reserved 36 | .kt { color: #458; font-weight: bold } // Keyword.Type 37 | .m { color: #099 } // Literal.Number 38 | .s { color: #d14 } // Literal.String 39 | .na { color: #008080 } // Name.Attribute 40 | .nb { color: #0086B3 } // Name.Builtin 41 | .nc { color: #458; font-weight: bold } // Name.Class 42 | .no { color: #008080 } // Name.Constant 43 | .ni { color: #800080 } // Name.Entity 44 | .ne { color: #900; font-weight: bold } // Name.Exception 45 | .nf { color: #900; font-weight: bold } // Name.Function 46 | .nn { color: #555 } // Name.Namespace 47 | .nt { color: #000080 } // Name.Tag 48 | .nv { color: #008080 } // Name.Variable 49 | .ow { font-weight: bold } // Operator.Word 50 | .w { color: #bbb } // Text.Whitespace 51 | .mf { color: #099 } // Literal.Number.Float 52 | .mh { color: #099 } // Literal.Number.Hex 53 | .mi { color: #099 } // Literal.Number.Integer 54 | .mo { color: #099 } // Literal.Number.Oct 55 | .sb { color: #d14 } // Literal.String.Backtick 56 | .sc { color: #d14 } // Literal.String.Char 57 | .sd { color: #d14 } // Literal.String.Doc 58 | .s2 { color: #d14 } // Literal.String.Double 59 | .se { color: #d14 } // Literal.String.Escape 60 | .sh { color: #d14 } // Literal.String.Heredoc 61 | .si { color: #d14 } // Literal.String.Interpol 62 | .sx { color: #d14 } // Literal.String.Other 63 | .sr { color: #009926 } // Literal.String.Regex 64 | .s1 { color: #d14 } // Literal.String.Single 65 | .ss { color: #990073 } // Literal.String.Symbol 66 | .bp { color: #999 } // Name.Builtin.Pseudo 67 | .vc { color: #008080 } // Name.Variable.Class 68 | .vg { color: #008080 } // Name.Variable.Global 69 | .vi { color: #008080 } // Name.Variable.Instance 70 | .il { color: #099 } // Literal.Number.Integer.Long 71 | } 72 | -------------------------------------------------------------------------------- /_sass/_base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset some basic elements 3 | */ 4 | body, h1, h2, h3, h4, h5, h6, 5 | p, blockquote, pre, hr, 6 | dl, dd, ol, ul, figure { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | 12 | 13 | /** 14 | * Basic styling 15 | */ 16 | body { 17 | font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; 18 | color: $text-color; 19 | background-color: $background-color; 20 | -webkit-text-size-adjust: 100%; 21 | -webkit-font-feature-settings: "kern" 1; 22 | -moz-font-feature-settings: "kern" 1; 23 | -o-font-feature-settings: "kern" 1; 24 | font-feature-settings: "kern" 1; 25 | font-kerning: normal; 26 | } 27 | 28 | 29 | 30 | /** 31 | * Set `margin-bottom` to maintain vertical rhythm 32 | */ 33 | h1, h2, h3, h4, h5, h6, 34 | p, blockquote, pre, 35 | ul, ol, dl, figure, 36 | %vertical-rhythm { 37 | margin-bottom: $spacing-unit / 2; 38 | } 39 | 40 | 41 | 42 | /** 43 | * Images 44 | */ 45 | img { 46 | max-width: 100%; 47 | vertical-align: middle; 48 | } 49 | 50 | 51 | 52 | /** 53 | * Figures 54 | */ 55 | figure > img { 56 | display: block; 57 | } 58 | 59 | figcaption { 60 | font-size: $small-font-size; 61 | } 62 | 63 | 64 | 65 | /** 66 | * Lists 67 | */ 68 | ul, ol { 69 | margin-left: $spacing-unit; 70 | } 71 | 72 | li { 73 | > ul, 74 | > ol { 75 | margin-bottom: 0; 76 | } 77 | } 78 | 79 | 80 | 81 | /** 82 | * Headings 83 | */ 84 | h1, h2, h3, h4, h5, h6 { 85 | font-weight: $base-font-weight; 86 | } 87 | 88 | 89 | 90 | /** 91 | * Links 92 | */ 93 | a { 94 | color: $brand-color; 95 | text-decoration: none; 96 | 97 | &:visited { 98 | color: darken($brand-color, 15%); 99 | } 100 | 101 | &:hover { 102 | color: $text-color; 103 | text-decoration: underline; 104 | } 105 | } 106 | 107 | 108 | 109 | /** 110 | * Blockquotes 111 | */ 112 | blockquote { 113 | color: $grey-color; 114 | border-left: 4px solid $grey-color-light; 115 | padding-left: $spacing-unit / 2; 116 | font-size: 18px; 117 | letter-spacing: -1px; 118 | font-style: italic; 119 | 120 | > :last-child { 121 | margin-bottom: 0; 122 | } 123 | } 124 | 125 | 126 | 127 | /** 128 | * Code formatting 129 | */ 130 | pre, 131 | code { 132 | font-size: 15px; 133 | border: 1px solid $grey-color-light; 134 | border-radius: 3px; 135 | background-color: #eef; 136 | } 137 | 138 | code { 139 | padding: 1px 5px; 140 | } 141 | 142 | pre { 143 | padding: 8px 12px; 144 | overflow-x: auto; 145 | 146 | > code { 147 | border: 0; 148 | padding-right: 0; 149 | padding-left: 0; 150 | } 151 | } 152 | 153 | 154 | 155 | /** 156 | * Wrapper 157 | */ 158 | .wrapper { 159 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); 160 | max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); 161 | margin-right: auto; 162 | margin-left: auto; 163 | padding-right: $spacing-unit; 164 | padding-left: $spacing-unit; 165 | @extend %clearfix; 166 | 167 | @include media-query($on-laptop) { 168 | max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); 169 | max-width: calc(#{$content-width} - (#{$spacing-unit})); 170 | padding-right: $spacing-unit / 2; 171 | padding-left: $spacing-unit / 2; 172 | } 173 | } 174 | 175 | 176 | 177 | /** 178 | * Clearfix 179 | */ 180 | %clearfix { 181 | 182 | &:after { 183 | content: ""; 184 | display: table; 185 | clear: both; 186 | } 187 | } 188 | 189 | 190 | 191 | /** 192 | * Icons 193 | */ 194 | .icon { 195 | 196 | > svg { 197 | display: inline-block; 198 | width: 16px; 199 | height: 16px; 200 | vertical-align: middle; 201 | 202 | path { 203 | fill: $grey-color; 204 | } 205 | } 206 | } 207 | -------------------------------------------------------------------------------- /_sass/_layout.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Site header 3 | */ 4 | .site-header { 5 | border-top: 5px solid $grey-color-dark; 6 | border-bottom: 1px solid $grey-color-light; 7 | min-height: 56px; 8 | 9 | // Positioning context for the mobile navigation icon 10 | position: relative; 11 | } 12 | 13 | .site-title { 14 | font-size: 26px; 15 | font-weight: 300; 16 | line-height: 56px; 17 | letter-spacing: -1px; 18 | margin-bottom: 0; 19 | float: left; 20 | 21 | &, 22 | &:visited { 23 | color: $grey-color-dark; 24 | } 25 | } 26 | 27 | .site-nav { 28 | float: right; 29 | line-height: 56px; 30 | 31 | .menu-icon { 32 | display: none; 33 | } 34 | 35 | .page-link { 36 | color: $text-color; 37 | line-height: $base-line-height; 38 | 39 | // Gaps between nav items, but not on the last one 40 | &:not(:last-child) { 41 | margin-right: 20px; 42 | } 43 | } 44 | 45 | @include media-query($on-palm) { 46 | position: absolute; 47 | top: 9px; 48 | right: $spacing-unit / 2; 49 | background-color: $background-color; 50 | border: 1px solid $grey-color-light; 51 | border-radius: 5px; 52 | text-align: right; 53 | 54 | .menu-icon { 55 | display: block; 56 | float: right; 57 | width: 36px; 58 | height: 26px; 59 | line-height: 0; 60 | padding-top: 10px; 61 | text-align: center; 62 | 63 | > svg { 64 | width: 18px; 65 | height: 15px; 66 | 67 | path { 68 | fill: $grey-color-dark; 69 | } 70 | } 71 | } 72 | 73 | .trigger { 74 | clear: both; 75 | display: none; 76 | } 77 | 78 | &:hover .trigger { 79 | display: block; 80 | padding-bottom: 5px; 81 | } 82 | 83 | .page-link { 84 | display: block; 85 | padding: 5px 10px; 86 | 87 | &:not(:last-child) { 88 | margin-right: 0; 89 | } 90 | margin-left: 20px; 91 | } 92 | } 93 | } 94 | 95 | 96 | 97 | /** 98 | * Site footer 99 | */ 100 | .site-footer { 101 | border-top: 1px solid $grey-color-light; 102 | padding: $spacing-unit 0; 103 | } 104 | 105 | .footer-heading { 106 | font-size: 18px; 107 | margin-bottom: $spacing-unit / 2; 108 | } 109 | 110 | .contact-list, 111 | .social-media-list { 112 | list-style: none; 113 | margin-left: 0; 114 | } 115 | 116 | .footer-col-wrapper { 117 | font-size: 15px; 118 | color: $grey-color; 119 | margin-left: -$spacing-unit / 2; 120 | @extend %clearfix; 121 | } 122 | 123 | .footer-col { 124 | float: left; 125 | margin-bottom: $spacing-unit / 2; 126 | padding-left: $spacing-unit / 2; 127 | } 128 | 129 | .footer-col-1 { 130 | width: -webkit-calc(35% - (#{$spacing-unit} / 2)); 131 | width: calc(35% - (#{$spacing-unit} / 2)); 132 | } 133 | 134 | .footer-col-2 { 135 | width: -webkit-calc(20% - (#{$spacing-unit} / 2)); 136 | width: calc(20% - (#{$spacing-unit} / 2)); 137 | } 138 | 139 | .footer-col-3 { 140 | width: -webkit-calc(45% - (#{$spacing-unit} / 2)); 141 | width: calc(45% - (#{$spacing-unit} / 2)); 142 | } 143 | 144 | @include media-query($on-laptop) { 145 | .footer-col-1, 146 | .footer-col-2 { 147 | width: -webkit-calc(50% - (#{$spacing-unit} / 2)); 148 | width: calc(50% - (#{$spacing-unit} / 2)); 149 | } 150 | 151 | .footer-col-3 { 152 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 153 | width: calc(100% - (#{$spacing-unit} / 2)); 154 | } 155 | } 156 | 157 | @include media-query($on-palm) { 158 | .footer-col { 159 | float: none; 160 | width: -webkit-calc(100% - (#{$spacing-unit} / 2)); 161 | width: calc(100% - (#{$spacing-unit} / 2)); 162 | } 163 | } 164 | 165 | 166 | 167 | /** 168 | * Page content 169 | */ 170 | .page-content { 171 | padding: $spacing-unit 0; 172 | } 173 | 174 | .page-heading { 175 | font-size: 20px; 176 | } 177 | 178 | .post-list { 179 | margin-left: 0; 180 | list-style: none; 181 | 182 | > li { 183 | margin-bottom: $spacing-unit; 184 | } 185 | } 186 | 187 | .post-meta { 188 | font-size: $small-font-size; 189 | color: $grey-color; 190 | } 191 | 192 | .post-link { 193 | display: block; 194 | font-size: 24px; 195 | } 196 | 197 | 198 | 199 | /** 200 | * Posts 201 | */ 202 | .post-header { 203 | margin-bottom: $spacing-unit; 204 | } 205 | 206 | .post-title { 207 | font-size: 42px; 208 | letter-spacing: -1px; 209 | line-height: 1; 210 | 211 | @include media-query($on-laptop) { 212 | font-size: 36px; 213 | } 214 | } 215 | 216 | .post-content { 217 | margin-bottom: $spacing-unit; 218 | 219 | h2 { 220 | font-size: 32px; 221 | 222 | @include media-query($on-laptop) { 223 | font-size: 28px; 224 | } 225 | } 226 | 227 | h3 { 228 | font-size: 26px; 229 | 230 | @include media-query($on-laptop) { 231 | font-size: 22px; 232 | } 233 | } 234 | 235 | h4 { 236 | font-size: 20px; 237 | 238 | @include media-query($on-laptop) { 239 | font-size: 18px; 240 | } 241 | } 242 | } 243 | --------------------------------------------------------------------------------