diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/sass/_ed.scss | 787 | ||||
| -rw-r--r-- | assets/sass/_syntax.scss | 130 |
2 files changed, 917 insertions, 0 deletions
diff --git a/assets/sass/_ed.scss b/assets/sass/_ed.scss index bea39f6..f84da83 100644 --- a/assets/sass/_ed.scss +++ b/assets/sass/_ed.scss @@ -15,3 +15,790 @@ To apply a different color scheme to the whole scroll down to the themes section instructions at the very bottom of this file */ + + +/* + General + + 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; + overflow-x: hidden; + } + + html { + font-family: $main-font; + font-size: 1em; /* 16px; specify in ems to support text resizing in all browsers */ + line-height: 1.5; + } + + @media (min-width: 38em) { + html { + font-size: $regular-font-size; + } + } + + body { + color: $text-color; + background-color: #fff; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + } + + .content { + margin-bottom: 4rem; + } + + + /* + Wrapper + + The wrapper is used to position site content when the sidebar is toggled. We use an outter wrap to + position the sidebar without interferring with the regular page content. + */ + + .wrap { + position: relative; + width: 100%; + } + + + /* + Container + + Center the page content. + */ + + .container { + max-width: 32rem; + padding-left: 1rem; + padding-right: 1rem; + margin-left: auto; + margin-right: auto; + } + + @media (min-width: 56em) { + .container { + max-width: 38rem; + } + } + + /* Links */ + a, .text-title a { + color: $link-color; + text-decoration: none; + } + + /* `:focus` is linked to `:hover` for basic accessibility */ + a:hover, + a:focus { + text-decoration: underline; + } + + /* Headings */ + h1, h2, h3, h4, h5, h6 { + font-family: $heading-font; + margin-bottom: .5rem; + font-weight: normal; + color: $heading-color; + letter-spacing: -.025rem; + line-height: 1.25; + text-rendering: optimizeLegibility; + } + + h1, + h1.text-title { + font-size: 1.4rem; + } + + h2 { + margin-top: 1rem; + font-size: 1.2rem; + } + + h3, h4, h5, h6 { + margin-top: 1rem; + font-size: 1rem; + } + + h3 { + margin-top: 1.5rem; + } + + + /* Body text */ + p { + margin-top: 0; + margin-bottom: 1rem; + } + + /* Lists */ + ul { + list-style: circle; + } + + ul, ol { + margin-top: 0; + margin-bottom: 1rem; + } + + /* Horizontal ruler */ + hr { + position: relative; + margin: 1.5rem 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; + } + + /* Search highlighting */ + mark { + color: white; + background-color: $link-color; + } + + /* Quotes */ + blockquote { + padding: 0rem 1.5rem 0rem 2rem; + margin: 0 0 20px 0; + color: $text-color; + border-left: none; + font-style: italic; + } + + blockquote p:last-child { + margin-bottom: 0; + } + + @media (min-width: 30em) { + blockquote { + padding-right: 5rem; + padding-left: 1.25rem; + } + } + + /* 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; + } + + + /* + Masthead + + Super small header above the content for site name and short description. + */ + + .masthead { + border-bottom: 1px solid #eee; + margin-bottom: 3rem; + padding-top: 26px; + padding-bottom: 1rem; + text-align: center; + } + + .masthead-title { + color: #505050; + font-family: $main-font; + font-size: 1.8rem; + line-height: .777em; + margin-top: 2em; + margin-bottom: 0; + margin-right: 0; + margin-left: 0; + text-align: center; + } + + .masthead-title small { + color: $text-color; + display: none; /* This is an accessibility no-no */ + font-family: $heading-font; + font-size: .88rem; + font-weight: normal; + letter-spacing: .05rem; + } + + @media (min-width: 320px) { + .masthead-title { + margin-top: 2px; + margin-right: 15%; + margin-left: 15%; + } + } + + @media (min-width: 48em) { + .masthead-title small { + display: inline; + } + } + + /* + Sidebar + + The sidebar is the drawer, the item we are toggling with our handy hamburger button in the corner + of the page. + + This particular sidebar implementation was inspired by Chris Coyier's "Offcanvas Menu with CSS + Target" article, and the checkbox variation from the comments by a reader. It modifies both + implementations to continue using the checkbox (no change in URL means no polluted browser + history), but this uses `position` for the menu to avoid some potential content reflow issues. + + Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504 + */ + + /* Style and "hide" the sidebar */ + .sidebar { + position: fixed; + top: 0; + bottom: 0; + left: -14rem; + width: 14rem; + visibility: hidden; + overflow-y: auto; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-size: .875rem;/* 15px*/ + color: rgba(255,255,255,.6); + background-color: #202020; + -webkit-transition: all .3s ease-in-out; + transition: all .3s ease-in-out; + } + + @media (min-width: 30em) { + .sidebar { + font-size: .75rem;/* 14px */ + } + } + + /* Sidebar content */ + .sidebar { + background-color: $link-color; + } + + .sidebar a { + font-weight: normal; + color: #fff; + } + + .sidebar-item { + padding: 1rem; + } + + .sidebar-item p:last-child { + margin-bottom: 0; + } + + /* Sidebar nav */ + .sidebar-nav { + border-bottom: 1px solid rgba(255,255,255,.1); + } + + .sidebar-nav-item { + display: block; + padding: .5rem 1rem; + border-top: 1px solid rgba(255,255,255,.1); + } + + a.sidebar-nav-item-toc { + color: rgba(255,255,255,.8); + } + + .sidebar-nav-item.active, + a.sidebar-nav-item:hover, + a.sidebar-nav-item:focus { + text-decoration: none; + background-color: rgba(255,255,255,.1); + border-color: transparent; + } + + @media (min-width: 48em) { + .sidebar-item { + padding: 1.5rem; + } + + .sidebar-nav-item { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + } + + /* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */ + .sidebar-checkbox { + display: none; + } + + /* Style the `label` that we use to target the `.sidebar-checkbox` */ + .sidebar-toggle { + position: absolute; + top: .8rem; + left: 1rem; + display: block; + padding: .25rem .75rem; + color: #505050; + background-color: #fff; + border-radius: .25rem; + cursor: pointer; + } + + .sidebar-toggle:before { + display: inline-block; + width: 1rem; + height: .75rem; + content: ""; + background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); + background-image: -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); + background-image: -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); + background-image: linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%); + } + + .sidebar-toggle:active, + #sidebar-checkbox:focus ~ .sidebar-toggle, + #sidebar-checkbox:checked ~ .sidebar-toggle { + color: #fff; + background-color: #555; + } + + .sidebar-toggle:active:before, + #sidebar-checkbox:focus ~ .sidebar-toggle:before, + #sidebar-checkbox:checked ~ .sidebar-toggle:before { + background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); + background-image: -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); + background-image: -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); + background-image: linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%); + } + + @media (min-width: 30.1em) { + .sidebar-toggle { + position: fixed; + } + } + + @media print { + .sidebar-toggle { + display: none; + } + } + + + /* + Slide effect + + Handle the sliding effects of the sidebar and content in one spot, separate from the default + styles. + + As a heads-up, we don't use `transform: translate3d()` here because, when mixed with + `position: fixed;` for the sidebar toggle, it creates a new containing block. Put simply, the + fixed sidebar toggle behaves like `position: absolute;` when transformed. + + Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/. + */ + + .wrap, + .sidebar, + .sidebar-toggle { + -webkit-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + } + + .wrap, + .sidebar-toggle { + -webkit-transition: -webkit-transform .3s ease-in-out; + transition: transform .3s ease-in-out; + } + + #sidebar-checkbox:checked + .sidebar { + z-index: 10; + visibility: visible; + } + + #sidebar-checkbox:checked ~ .sidebar, + #sidebar-checkbox:checked ~ .wrap, + #sidebar-checkbox:checked ~ .sidebar-toggle { + -webkit-transform: translateX(14rem); + -ms-transform: translateX(14rem); + transform: translateX(14rem); + } + + + /* + Reverse layout + + Flip the orientation of the page by placing the `.sidebar` and sidebar toggle on the right side. + */ + + .layout-reverse .sidebar { + left: auto; + right: -14rem; + } + + .layout-reverse .sidebar-toggle { + left: auto; + right: 1rem; + } + + .layout-reverse #sidebar-checkbox:checked ~ .sidebar, + .layout-reverse #sidebar-checkbox:checked ~ .wrap, + .layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle { + -webkit-transform: translateX(-14rem); + -ms-transform: translateX(-14rem); + transform: translateX(-14rem); + } + + + /* + Overlay sidebar + + Make the sidebar content overlay the viewport content instead of pushing it aside when toggled. + */ + + .sidebar-overlay #sidebar-checkbox:checked ~ .wrap { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + } + + .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle { + box-shadow: 0 0 0 .25rem #fff; + } + + .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar { + box-shadow: .25rem 0 .5rem rgba(0,0,0,.1); + } + + /* Only one tweak for a reverse layout*/ + .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar { + box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1); + } + + + /* + ED special layouts + */ + + p.centered { + text-align: center; + } + + p.larger { + font-size: 1.6rem; + } + + p.large { + font-size: 1.4rem + } + + p.small { + font-size: 0.8rem; + } + + div.poem, + .poem, + div.narrative, + .narrative { + margin-bottom: 5rem; + } + + div.toc { + margin-bottom: 4rem; + } + + + /* + Poem styles + + If you want your lines not to wrap on small screens, add the rule "white-space: nowrap;"; If you + want you want to remove the hanging indent, reset the padding-left to 0 and erase text-indent + */ + + .poem ul, + .poetry ul, + ul.poetry { + list-style: none; + list-style-type: none; + padding-left: 1rem; + text-indent: -1rem; + } + + + /* This snippet helps us reset the margin for all spans with the indent- class */ + .poem span[class^='indent-'], + .poetry span[class^='indent-'] { + margin: 0;/* reset browsers default margin styles*/ + } + + + /* + To set line indentation for poetry wrap the line in a span with a class="indent-x" attribute. + The x is represents a rem (root em) value + */ + + .indent-1 { + padding-left: 1rem; + } + + .indent-2 { + padding-left: 2rem; + } + + .indent-3 { + padding-left: 3rem; + } + + .indent-4 { + padding-left: 4rem; + } + + .indent-5 { + padding-left: 5rem; + } + + .indent-6 { + padding-left: 6rem; + } + + .indent-7 { + padding-left: 7rem; + } + + .indent-8 { + padding-left: 8rem; + } + + .indent-9 { + padding-left: 9rem; + } + + .indent-10 { + padding-left: 10rem; + } + + .poem .byline, + .poetry .byline { + font-style: italic; + font-weight: normal; + letter-spacing: 0; + margin-top: -.5rem; + } + + /* Footnotes styles */ + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sup { + top: -0.5em; + } + + .footnotes { + line-height: 1.2rem; + font-size: 0.9rem; + letter-spacing: .01rem; + } + + .footnotes .foot-block { + display: inline-block; + padding: 0 4rem 0 2rem; + margin-bottom: .8rem; + font-style: italic; + } + + a.footnote { + padding-left: .1rem; + font-size: .66rem; + } + + /*Bibliography styles */ + ol.bibliography { + list-style-type:none; + padding-left: 1rem; + text-indent: -1rem; + } + + /* Diplomatic editions */ + ins, + .add { + color:#288828; + font-style: italic; + } + + del, + .delete { + text-decoration: line-through; + color: #AA3232; + } + + u, + .underline { + text-decoration: underline; + } + + + /* + Line layouts for prose-poetry and theater + + To use these layouts you need to add the classes to your markdown or HTML lines. + (ex. "- {:.centered} hello!") + */ + + li.centered { + text-align: center; + } + + li.speaker, + li.speakerGroup { + text-align: center; + padding-top: 1.2em; + } + + li.speakerGroup { + margin-bottom: -1.6em; + } + + /* To add an attribution, make sure to make a line with the attribution class */ + + li.attribution { + text-align: right; + list-style: none; + padding: 0rem 1.5rem 0rem 2rem; + margin: 0 0 20px 0; + color: #454545; + } + + li.prose { + list-style-position: inside; + margin-left: -1em; + text-indent: 0; + } + + li.prose-indent { + text-indent: 2rem; + } + + + /* + Themes + + Applies custom color schemes by adding the appropriate class to the `body`. Based on colors from + Base16: http://chriskempson.com/projects/base16/ + */ + + /* Red */ + .theme-base-red .sidebar, + .theme-base-red .sidebar-toggle:active, + .theme-base-red #sidebar-checkbox:checked ~ .sidebar-toggle { + background-color: #ac4142; + } + + .theme-base-red .container a, + .theme-base-red .sidebar-toggle, + .theme-base-red .related-posts li a:hover { + color: #ac4142; + } + + /* Orange */ + .theme-base-orange .sidebar, + .theme-base-orange .sidebar-toggle:active { + background-color: #d28445; + } + + .theme-base-orange .container a, + .theme-base-orange .sidebar-toggle, + .theme-base-orange .related-posts li a:hover { + color: #d28445; + } + + /* Green */ + .theme-base-green .sidebar, + .theme-base-green .sidebar-toggle:active { + background-color: #90a959; + } + + .theme-base-green .container a, + .theme-base-green .sidebar-toggle, + .theme-base-green .related-posts li a:hover { + color: #90a959; + } + + /* Cyan */ + .theme-base-cyan .sidebar, + .theme-base-cyan .sidebar-toggle:active { + background-color: #75b5aa; + } + + .theme-base-cyan .container a, + .theme-base-cyan .sidebar-toggle, + .theme-base-cyan .related-posts li a:hover { + color: #75b5aa; + } + + /* Blue */ + .theme-base-blue .sidebar, + .theme-base-blue .sidebar-toggle:active { + background-color: #6a9fb5; + } + + .theme-base-blue .container a, + .theme-base-blue .sidebar-toggle, + .theme-base-blue .related-posts li a:hover { + color: #6a9fb5; + } + + /* Magenta */ + .theme-base-magenta .sidebar, + .theme-base-magenta .sidebar-toggle:active { + background-color: #aa759f; + } + + .theme-base-magenta .container a, + .theme-base-magenta .sidebar-toggle, + .theme-base-magenta .related-posts li a:hover { + color: #aa759f; + } + + /* Brown */ + .theme-base-brown .sidebar, + .theme-base-brown .sidebar-toggle:active { + background-color: #8f5536; + } + + .theme-base-brown .container a, + .theme-base-brown .sidebar-toggle, + .theme-base-brown .related-posts li a:hover { + color: #8f5536; + } diff --git a/assets/sass/_syntax.scss b/assets/sass/_syntax.scss index e69de29..9797024 100644 --- a/assets/sass/_syntax.scss +++ b/assets/sass/_syntax.scss @@ -0,0 +1,130 @@ +.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; } + +/* Transferred from poole.css */ + +/* Code */ +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; +} + +/* 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; +} + +/* Pygments via Jekyll */ +.highlight { + margin-bottom: 1rem; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} |
