diff options
| -rw-r--r-- | assets/sass/_ed.scss | 1564 | ||||
| -rw-r--r-- | assets/sass/_syntax.scss | 68 | ||||
| -rw-r--r-- | assets/sass/style.scss | 8 |
3 files changed, 820 insertions, 820 deletions
diff --git a/assets/sass/_ed.scss b/assets/sass/_ed.scss index dba6904..30020af 100644 --- a/assets/sass/_ed.scss +++ b/assets/sass/_ed.scss @@ -12,793 +12,793 @@ */ /* - To apply a different color scheme to the whole scroll down to the themes section instructions at - the very bottom of this file + To apply a different color scheme to the whole scroll down to the themes section instructions at + the very bottom of this file */ /* - General + General - Update the foundational and global aspects of the page. + Update the foundational and global aspects of the page. */ * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; // editorconfig-checker-disable-line - 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; - } + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; // editorconfig-checker-disable-line + 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 9797024..adc48ff 100644 --- a/assets/sass/_syntax.scss +++ b/assets/sass/_syntax.scss @@ -69,62 +69,62 @@ /* Code */ code, pre { - font-family: Menlo, Monaco, "Courier New", monospace; + font-family: Menlo, Monaco, "Courier New", monospace; } code { - padding: .25em .5em; - font-size: 85%; - color: #bf616a; - background-color: #f9f9f9; - border-radius: 3px; + 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; + 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; + 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; + font-family: Menlo, Monaco, "Courier New", monospace !important; } .gist .markdown-body { - padding: 15px; + padding: 15px; } .gist pre { - padding: 0; - background-color: transparent; + padding: 0; + background-color: transparent; } .gist .gist-file .gist-data { - font-size: .8rem !important; - line-height: 1.4; + font-size: .8rem !important; + line-height: 1.4; } .gist code { - padding: 0; - color: inherit; - background-color: transparent; - border-radius: 0; + padding: 0; + color: inherit; + background-color: transparent; + border-radius: 0; } /* Pygments via Jekyll */ .highlight { - margin-bottom: 1rem; - border-radius: 4px; + margin-bottom: 1rem; + border-radius: 4px; } .highlight pre { - margin-bottom: 0; + margin-bottom: 0; } diff --git a/assets/sass/style.scss b/assets/sass/style.scss index fcc493c..6c471f9 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -1,7 +1,7 @@ /* - Common Variables + Common Variables - Feel free to change! + Feel free to change! */ /* Fonts */ @@ -11,9 +11,9 @@ $regular-font-size: 1.25em; /* 20px / 16px = 1.25em; support text resizing in al /* - Color + Color - Make sure to leave color_scheme in `config.toml` file empty for granular control + Make sure to leave color_scheme in `config.toml` file empty for granular control */ $text-color: #454545; |