From: Mark Otto Date: Sun, 19 Apr 2015 05:37:09 +0000 (-0700) Subject: move to sass dir X-Git-Url: http://git.bitcoin.ninja/?a=commitdiff_plain;h=16c08e4bbfbf778f755b4caa1003ae806249b73f;p=blog move to sass dir --- diff --git a/_config.yml b/_config.yml index a2229f2..34baf41 100644 --- a/_config.yml +++ b/_config.yml @@ -19,7 +19,7 @@ baseurl: / # # We specify the directory for Jekyll so we can use @imports. sass: - sass_dir: _scss + sass_dir: _sass style: :compressed # About/contact diff --git a/_sass/base.scss b/_sass/base.scss new file mode 100644 index 0000000..df8b5d0 --- /dev/null +++ b/_sass/base.scss @@ -0,0 +1,73 @@ +// Body resets +// +// Update the foundational and global aspects of the page. + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + + @media (min-width: 38em) { + font-size: 20px; + } +} + +body { + color: #515151; + background-color: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +// No `:visited` state is required by default (browsers will use `a`) +a { + color: #268bd2; + text-decoration: none; + + // `:focus` is linked to `:hover` for basic accessibility + &:hover, + &:focus { + text-decoration: underline; + } + + strong { + color: inherit; + } +} + +// Images +img { + display: block; + max-width: 100%; + margin: 0 0 1rem; + border-radius: 5px; +} + +// Tables +table { + margin-bottom: 1rem; + width: 100%; + border: 1px solid #e5e5e5; + border-collapse: collapse; +} +td, +th { + padding: .25rem .5rem; + border: 1px solid #e5e5e5; +} +tbody tr:nth-child(odd) td, +tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} diff --git a/_sass/code.scss b/_sass/code.scss new file mode 100644 index 0000000..328ea75 --- /dev/null +++ b/_sass/code.scss @@ -0,0 +1,66 @@ +// Code +// +// Inline and block-level code snippets. Includes tweaks to syntax highlighted +// snippets from Pygments/Rouge and Gist embeds. + +code, +pre { + font-family: Menlo, Monaco, "Courier New", monospace; +} +code { + padding: .25em .5em; + font-size: 85%; + color: #bf616a; + background-color: #f9f9f9; + border-radius: 3px; +} +pre { + display: block; + margin-top: 0; + margin-bottom: 1rem; + padding: 1rem; + font-size: .8rem; + line-height: 1.4; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + // word-wrap: break-word; + background-color: #f9f9f9; +} +pre code { + padding: 0; + font-size: 100%; + color: inherit; + background-color: transparent; +} + +// Pygments via Jekyll +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} + +// Gist via GitHub Pages +.gist .gist-file { + font-family: Menlo, Monaco, "Courier New", monospace !important; +} +.gist .markdown-body { + padding: 15px; +} +.gist pre { + padding: 0; + background-color: transparent; +} +.gist .gist-file .gist-data { + font-size: .8rem !important; + line-height: 1.4; +} +.gist code { + padding: 0; + color: inherit; + background-color: transparent; + border-radius: 0; +} diff --git a/_sass/layout.scss b/_sass/layout.scss new file mode 100644 index 0000000..2a27269 --- /dev/null +++ b/_sass/layout.scss @@ -0,0 +1,15 @@ +// Layout +// +// Styles for managing the structural hierarchy of the site. + +.container { + max-width: 38rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + margin-left: auto; + margin-right: auto; +} + +footer { + margin-bottom: 2rem; +} diff --git a/_sass/masthead.scss b/_sass/masthead.scss new file mode 100644 index 0000000..34306f5 --- /dev/null +++ b/_sass/masthead.scss @@ -0,0 +1,26 @@ +// Masthead +// +// Super small header above the content for site name and short description. + +.masthead { + padding-top: 1rem; + padding-bottom: 1rem; + margin-bottom: 3rem; +} + +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: #505050; + + a { + color: #505050; + } + + small { + font-size: 75%; + font-weight: 400; + color: #c0c0c0; + letter-spacing: 0; + } +} diff --git a/_sass/message.scss b/_sass/message.scss new file mode 100644 index 0000000..42bf2e5 --- /dev/null +++ b/_sass/message.scss @@ -0,0 +1,11 @@ +// Messages +// +// Show alert messages to users. You may add it to single elements like a `

`, +// or to a parent if there are multiple elements to show. + +.message { + margin-bottom: 1rem; + padding: 1rem; + color: #717171; + background-color: #f9f9f9; +} diff --git a/_sass/pagination.scss b/_sass/pagination.scss new file mode 100644 index 0000000..4308134 --- /dev/null +++ b/_sass/pagination.scss @@ -0,0 +1,52 @@ +// Pagination +// +// Super lightweight (HTML-wise) blog pagination. `span`s are provide for when +// there are no more previous or next posts to show. + +.pagination { + overflow: hidden; // clearfix + margin: 0 -1.5rem 1rem; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + color: #ccc; + text-align: center; +} + +// Pagination items can be `span`s or `a`s +.pagination-item { + display: block; + padding: 1rem; + border: solid #eee; + border-width: 1px 0; + + &:first-child { + margin-bottom: -1px; + } +} + +// Only provide a hover state for linked pagination items +a.pagination-item:hover { + background-color: #f5f5f5; +} + +@media (min-width: 30em) { + .pagination { + margin: 3rem 0; + } + + .pagination-item { + float: left; + width: 50%; + border-width: 1px; + + &:first-child { + margin-bottom: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + } + &:last-child { + margin-left: -1px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + } + } +} diff --git a/_sass/posts.scss b/_sass/posts.scss new file mode 100644 index 0000000..5acf278 --- /dev/null +++ b/_sass/posts.scss @@ -0,0 +1,61 @@ +// Posts and pages +// +// Each post is wrapped in `.post` and is used on default and post layouts. Each +// page is wrapped in `.page` and is only used on the page layout. + +.page, +.post { + margin-bottom: 4em; +} + +// Blog post or page title +.page-title, +.post-title, +.post-title a { + color: #303030; +} +.page-title, +.post-title { + margin-top: 0; +} + +// Meta data line below post title +.post-date { + display: block; + margin-top: -.5rem; + margin-bottom: 1rem; + color: #9a9a9a; +} + + +// Related posts +.related { + padding-top: 2rem; + padding-bottom: 2rem; + border-top: 1px solid #eee; +} + +.related-posts { + padding-left: 0; + list-style: none; + + h3 { + margin-top: 0; + } + + li { + small { + font-size: 75%; + color: #999; + } + + a:hover { + color: #268bd2; + text-decoration: none; + + small { + color: inherit; + } + } + } +} diff --git a/_sass/syntax.scss b/_sass/syntax.scss new file mode 100644 index 0000000..15ad797 --- /dev/null +++ b/_sass/syntax.scss @@ -0,0 +1,65 @@ +.highlight .hll { background-color: #ffc; } +.highlight .c { color: #999; } /* Comment */ +.highlight .err { color: #a00; background-color: #faa } /* Error */ +.highlight .k { color: #069; } /* Keyword */ +.highlight .o { color: #555 } /* Operator */ +.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #099 } /* Comment.Preproc */ +.highlight .c1 { color: #999; } /* Comment.Single */ +.highlight .cs { color: #999; } /* Comment.Special */ +.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #f00 } /* Generic.Error */ +.highlight .gh { color: #030; } /* Generic.Heading */ +.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ +.highlight .go { color: #aaa } /* Generic.Output */ +.highlight .gp { color: #009; } /* Generic.Prompt */ +.highlight .gs { } /* Generic.Strong */ +.highlight .gu { color: #030; } /* Generic.Subheading */ +.highlight .gt { color: #9c6 } /* Generic.Traceback */ +.highlight .kc { color: #069; } /* Keyword.Constant */ +.highlight .kd { color: #069; } /* Keyword.Declaration */ +.highlight .kn { color: #069; } /* Keyword.Namespace */ +.highlight .kp { color: #069 } /* Keyword.Pseudo */ +.highlight .kr { color: #069; } /* Keyword.Reserved */ +.highlight .kt { color: #078; } /* Keyword.Type */ +.highlight .m { color: #f60 } /* Literal.Number */ +.highlight .s { color: #d44950 } /* Literal.String */ +.highlight .na { color: #4f9fcf } /* Name.Attribute */ +.highlight .nb { color: #366 } /* Name.Builtin */ +.highlight .nc { color: #0a8; } /* Name.Class */ +.highlight .no { color: #360 } /* Name.Constant */ +.highlight .nd { color: #99f } /* Name.Decorator */ +.highlight .ni { color: #999; } /* Name.Entity */ +.highlight .ne { color: #c00; } /* Name.Exception */ +.highlight .nf { color: #c0f } /* Name.Function */ +.highlight .nl { color: #99f } /* Name.Label */ +.highlight .nn { color: #0cf; } /* Name.Namespace */ +.highlight .nt { color: #2f6f9f; } /* Name.Tag */ +.highlight .nv { color: #033 } /* Name.Variable */ +.highlight .ow { color: #000; } /* Operator.Word */ +.highlight .w { color: #bbb } /* Text.Whitespace */ +.highlight .mf { color: #f60 } /* Literal.Number.Float */ +.highlight .mh { color: #f60 } /* Literal.Number.Hex */ +.highlight .mi { color: #f60 } /* Literal.Number.Integer */ +.highlight .mo { color: #f60 } /* Literal.Number.Oct */ +.highlight .sb { color: #c30 } /* Literal.String.Backtick */ +.highlight .sc { color: #c30 } /* Literal.String.Char */ +.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ +.highlight .s2 { color: #c30 } /* Literal.String.Double */ +.highlight .se { color: #c30; } /* Literal.String.Escape */ +.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ +.highlight .si { color: #a00 } /* Literal.String.Interpol */ +.highlight .sx { color: #c30 } /* Literal.String.Other */ +.highlight .sr { color: #3aa } /* Literal.String.Regex */ +.highlight .s1 { color: #c30 } /* Literal.String.Single */ +.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ +.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #033 } /* Name.Variable.Class */ +.highlight .vg { color: #033 } /* Name.Variable.Global */ +.highlight .vi { color: #033 } /* Name.Variable.Instance */ +.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } diff --git a/_sass/type.scss b/_sass/type.scss new file mode 100644 index 0000000..90699f0 --- /dev/null +++ b/_sass/type.scss @@ -0,0 +1,97 @@ +// Typography +// +// Headings, body text, lists, and other misc typographic elements. + +// Headings +h1, h2, h3, h4, h5, h6 { + margin-bottom: .5rem; + font-weight: bold; + line-height: 1.25; + color: #313131; + text-rendering: optimizeLegibility; +} +h1 { + font-size: 2rem; +} +h2 { + margin-top: 1rem; + font-size: 1.5rem; +} +h3 { + margin-top: 1.5rem; + font-size: 1.25rem; +} +h4, h5, h6 { + margin-top: 1rem; + font-size: 1rem; +} + +// Body text +p { + margin-top: 0; + margin-bottom: 1rem; +} + +strong { + color: #303030; +} + +// Lists +ul, ol, dl { + margin-top: 0; + margin-bottom: 1rem; +} + +dt { + font-weight: bold; +} +dd { + margin-bottom: .5rem; +} + +// Misc +hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; +} + +abbr { + font-size: 85%; + font-weight: bold; + color: #555; + text-transform: uppercase; +} +abbr[title] { + cursor: help; + border-bottom: 1px dotted #e5e5e5; +} + +/* Quotes */ +blockquote { + padding: .5rem 1rem; + margin: .8rem 0; + color: #7a7a7a; + border-left: .25rem solid #e5e5e5; + + @media (min-width: 30em) { + padding-right: 5rem; + padding-left: 1.25rem; + } +} + +blockquote p:last-child { + margin-bottom: 0; +} + + +// Custom type +// +// Extend paragraphs with `.lead` for larger introductory text. + +.lead { + font-size: 1.25rem; + font-weight: 300; +} diff --git a/_scss/base.scss b/_scss/base.scss deleted file mode 100644 index df8b5d0..0000000 --- a/_scss/base.scss +++ /dev/null @@ -1,73 +0,0 @@ -// Body resets -// -// Update the foundational and global aspects of the page. - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -html, -body { - margin: 0; - padding: 0; -} - -html { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 1.5; - - @media (min-width: 38em) { - font-size: 20px; - } -} - -body { - color: #515151; - background-color: #fff; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -// No `:visited` state is required by default (browsers will use `a`) -a { - color: #268bd2; - text-decoration: none; - - // `:focus` is linked to `:hover` for basic accessibility - &:hover, - &:focus { - text-decoration: underline; - } - - strong { - color: inherit; - } -} - -// Images -img { - display: block; - max-width: 100%; - margin: 0 0 1rem; - border-radius: 5px; -} - -// Tables -table { - margin-bottom: 1rem; - width: 100%; - border: 1px solid #e5e5e5; - border-collapse: collapse; -} -td, -th { - padding: .25rem .5rem; - border: 1px solid #e5e5e5; -} -tbody tr:nth-child(odd) td, -tbody tr:nth-child(odd) th { - background-color: #f9f9f9; -} diff --git a/_scss/code.scss b/_scss/code.scss deleted file mode 100644 index 328ea75..0000000 --- a/_scss/code.scss +++ /dev/null @@ -1,66 +0,0 @@ -// Code -// -// Inline and block-level code snippets. Includes tweaks to syntax highlighted -// snippets from Pygments/Rouge and Gist embeds. - -code, -pre { - font-family: Menlo, Monaco, "Courier New", monospace; -} -code { - padding: .25em .5em; - font-size: 85%; - color: #bf616a; - background-color: #f9f9f9; - border-radius: 3px; -} -pre { - display: block; - margin-top: 0; - margin-bottom: 1rem; - padding: 1rem; - font-size: .8rem; - line-height: 1.4; - white-space: pre; - white-space: pre-wrap; - word-break: break-all; - // word-wrap: break-word; - background-color: #f9f9f9; -} -pre code { - padding: 0; - font-size: 100%; - color: inherit; - background-color: transparent; -} - -// Pygments via Jekyll -.highlight { - margin-bottom: 1rem; - border-radius: 4px; -} -.highlight pre { - margin-bottom: 0; -} - -// Gist via GitHub Pages -.gist .gist-file { - font-family: Menlo, Monaco, "Courier New", monospace !important; -} -.gist .markdown-body { - padding: 15px; -} -.gist pre { - padding: 0; - background-color: transparent; -} -.gist .gist-file .gist-data { - font-size: .8rem !important; - line-height: 1.4; -} -.gist code { - padding: 0; - color: inherit; - background-color: transparent; - border-radius: 0; -} diff --git a/_scss/layout.scss b/_scss/layout.scss deleted file mode 100644 index 2a27269..0000000 --- a/_scss/layout.scss +++ /dev/null @@ -1,15 +0,0 @@ -// Layout -// -// Styles for managing the structural hierarchy of the site. - -.container { - max-width: 38rem; - padding-left: 1.5rem; - padding-right: 1.5rem; - margin-left: auto; - margin-right: auto; -} - -footer { - margin-bottom: 2rem; -} diff --git a/_scss/masthead.scss b/_scss/masthead.scss deleted file mode 100644 index 34306f5..0000000 --- a/_scss/masthead.scss +++ /dev/null @@ -1,26 +0,0 @@ -// Masthead -// -// Super small header above the content for site name and short description. - -.masthead { - padding-top: 1rem; - padding-bottom: 1rem; - margin-bottom: 3rem; -} - -.masthead-title { - margin-top: 0; - margin-bottom: 0; - color: #505050; - - a { - color: #505050; - } - - small { - font-size: 75%; - font-weight: 400; - color: #c0c0c0; - letter-spacing: 0; - } -} diff --git a/_scss/message.scss b/_scss/message.scss deleted file mode 100644 index 42bf2e5..0000000 --- a/_scss/message.scss +++ /dev/null @@ -1,11 +0,0 @@ -// Messages -// -// Show alert messages to users. You may add it to single elements like a `

`, -// or to a parent if there are multiple elements to show. - -.message { - margin-bottom: 1rem; - padding: 1rem; - color: #717171; - background-color: #f9f9f9; -} diff --git a/_scss/pagination.scss b/_scss/pagination.scss deleted file mode 100644 index 4308134..0000000 --- a/_scss/pagination.scss +++ /dev/null @@ -1,52 +0,0 @@ -// Pagination -// -// Super lightweight (HTML-wise) blog pagination. `span`s are provide for when -// there are no more previous or next posts to show. - -.pagination { - overflow: hidden; // clearfix - margin: 0 -1.5rem 1rem; - font-family: "PT Sans", Helvetica, Arial, sans-serif; - color: #ccc; - text-align: center; -} - -// Pagination items can be `span`s or `a`s -.pagination-item { - display: block; - padding: 1rem; - border: solid #eee; - border-width: 1px 0; - - &:first-child { - margin-bottom: -1px; - } -} - -// Only provide a hover state for linked pagination items -a.pagination-item:hover { - background-color: #f5f5f5; -} - -@media (min-width: 30em) { - .pagination { - margin: 3rem 0; - } - - .pagination-item { - float: left; - width: 50%; - border-width: 1px; - - &:first-child { - margin-bottom: 0; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; - } - &:last-child { - margin-left: -1px; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - } - } -} diff --git a/_scss/posts.scss b/_scss/posts.scss deleted file mode 100644 index 5acf278..0000000 --- a/_scss/posts.scss +++ /dev/null @@ -1,61 +0,0 @@ -// Posts and pages -// -// Each post is wrapped in `.post` and is used on default and post layouts. Each -// page is wrapped in `.page` and is only used on the page layout. - -.page, -.post { - margin-bottom: 4em; -} - -// Blog post or page title -.page-title, -.post-title, -.post-title a { - color: #303030; -} -.page-title, -.post-title { - margin-top: 0; -} - -// Meta data line below post title -.post-date { - display: block; - margin-top: -.5rem; - margin-bottom: 1rem; - color: #9a9a9a; -} - - -// Related posts -.related { - padding-top: 2rem; - padding-bottom: 2rem; - border-top: 1px solid #eee; -} - -.related-posts { - padding-left: 0; - list-style: none; - - h3 { - margin-top: 0; - } - - li { - small { - font-size: 75%; - color: #999; - } - - a:hover { - color: #268bd2; - text-decoration: none; - - small { - color: inherit; - } - } - } -} diff --git a/_scss/syntax.scss b/_scss/syntax.scss deleted file mode 100644 index 15ad797..0000000 --- a/_scss/syntax.scss +++ /dev/null @@ -1,65 +0,0 @@ -.highlight .hll { background-color: #ffc; } -.highlight .c { color: #999; } /* Comment */ -.highlight .err { color: #a00; background-color: #faa } /* Error */ -.highlight .k { color: #069; } /* Keyword */ -.highlight .o { color: #555 } /* Operator */ -.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #099 } /* Comment.Preproc */ -.highlight .c1 { color: #999; } /* Comment.Single */ -.highlight .cs { color: #999; } /* Comment.Special */ -.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #f00 } /* Generic.Error */ -.highlight .gh { color: #030; } /* Generic.Heading */ -.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */ -.highlight .go { color: #aaa } /* Generic.Output */ -.highlight .gp { color: #009; } /* Generic.Prompt */ -.highlight .gs { } /* Generic.Strong */ -.highlight .gu { color: #030; } /* Generic.Subheading */ -.highlight .gt { color: #9c6 } /* Generic.Traceback */ -.highlight .kc { color: #069; } /* Keyword.Constant */ -.highlight .kd { color: #069; } /* Keyword.Declaration */ -.highlight .kn { color: #069; } /* Keyword.Namespace */ -.highlight .kp { color: #069 } /* Keyword.Pseudo */ -.highlight .kr { color: #069; } /* Keyword.Reserved */ -.highlight .kt { color: #078; } /* Keyword.Type */ -.highlight .m { color: #f60 } /* Literal.Number */ -.highlight .s { color: #d44950 } /* Literal.String */ -.highlight .na { color: #4f9fcf } /* Name.Attribute */ -.highlight .nb { color: #366 } /* Name.Builtin */ -.highlight .nc { color: #0a8; } /* Name.Class */ -.highlight .no { color: #360 } /* Name.Constant */ -.highlight .nd { color: #99f } /* Name.Decorator */ -.highlight .ni { color: #999; } /* Name.Entity */ -.highlight .ne { color: #c00; } /* Name.Exception */ -.highlight .nf { color: #c0f } /* Name.Function */ -.highlight .nl { color: #99f } /* Name.Label */ -.highlight .nn { color: #0cf; } /* Name.Namespace */ -.highlight .nt { color: #2f6f9f; } /* Name.Tag */ -.highlight .nv { color: #033 } /* Name.Variable */ -.highlight .ow { color: #000; } /* Operator.Word */ -.highlight .w { color: #bbb } /* Text.Whitespace */ -.highlight .mf { color: #f60 } /* Literal.Number.Float */ -.highlight .mh { color: #f60 } /* Literal.Number.Hex */ -.highlight .mi { color: #f60 } /* Literal.Number.Integer */ -.highlight .mo { color: #f60 } /* Literal.Number.Oct */ -.highlight .sb { color: #c30 } /* Literal.String.Backtick */ -.highlight .sc { color: #c30 } /* Literal.String.Char */ -.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */ -.highlight .s2 { color: #c30 } /* Literal.String.Double */ -.highlight .se { color: #c30; } /* Literal.String.Escape */ -.highlight .sh { color: #c30 } /* Literal.String.Heredoc */ -.highlight .si { color: #a00 } /* Literal.String.Interpol */ -.highlight .sx { color: #c30 } /* Literal.String.Other */ -.highlight .sr { color: #3aa } /* Literal.String.Regex */ -.highlight .s1 { color: #c30 } /* Literal.String.Single */ -.highlight .ss { color: #fc3 } /* Literal.String.Symbol */ -.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #033 } /* Name.Variable.Class */ -.highlight .vg { color: #033 } /* Name.Variable.Global */ -.highlight .vi { color: #033 } /* Name.Variable.Instance */ -.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */ - -.css .o, -.css .o + .nt, -.css .nt + .nt { color: #999; } diff --git a/_scss/type.scss b/_scss/type.scss deleted file mode 100644 index 90699f0..0000000 --- a/_scss/type.scss +++ /dev/null @@ -1,97 +0,0 @@ -// Typography -// -// Headings, body text, lists, and other misc typographic elements. - -// Headings -h1, h2, h3, h4, h5, h6 { - margin-bottom: .5rem; - font-weight: bold; - line-height: 1.25; - color: #313131; - text-rendering: optimizeLegibility; -} -h1 { - font-size: 2rem; -} -h2 { - margin-top: 1rem; - font-size: 1.5rem; -} -h3 { - margin-top: 1.5rem; - font-size: 1.25rem; -} -h4, h5, h6 { - margin-top: 1rem; - font-size: 1rem; -} - -// Body text -p { - margin-top: 0; - margin-bottom: 1rem; -} - -strong { - color: #303030; -} - -// Lists -ul, ol, dl { - margin-top: 0; - margin-bottom: 1rem; -} - -dt { - font-weight: bold; -} -dd { - margin-bottom: .5rem; -} - -// Misc -hr { - position: relative; - margin: 1.5rem 0; - border: 0; - border-top: 1px solid #eee; - border-bottom: 1px solid #fff; -} - -abbr { - font-size: 85%; - font-weight: bold; - color: #555; - text-transform: uppercase; -} -abbr[title] { - cursor: help; - border-bottom: 1px dotted #e5e5e5; -} - -/* Quotes */ -blockquote { - padding: .5rem 1rem; - margin: .8rem 0; - color: #7a7a7a; - border-left: .25rem solid #e5e5e5; - - @media (min-width: 30em) { - padding-right: 5rem; - padding-left: 1.25rem; - } -} - -blockquote p:last-child { - margin-bottom: 0; -} - - -// Custom type -// -// Extend paragraphs with `.lead` for larger introductory text. - -.lead { - font-size: 1.25rem; - font-weight: 300; -}