diff options
| -rw-r--r-- | assets/sass/_ed.scss | 1377 | ||||
| -rw-r--r-- | assets/sass/_reset.scss | 128 | ||||
| -rw-r--r-- | assets/sass/style.scss | 4 | ||||
| -rw-r--r-- | resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content | 204 |
4 files changed, 738 insertions, 975 deletions
diff --git a/assets/sass/_ed.scss b/assets/sass/_ed.scss index f50b2f3..4042af9 100644 --- a/assets/sass/_ed.scss +++ b/assets/sass/_ed.scss @@ -16,6 +16,7 @@ the very bottom of this file */ +@import "_mixins"; /* General @@ -24,781 +25,779 @@ */ * { - -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; - } - + @include 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-family: $main-font; - font-size: 1em; /* 16px; specify in ems to support text resizing in all browsers */ - line-height: 1.5; + font-size: $regular-font-size; } +} - @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%; +} - body { - color: $text-color; - background-color: #fff; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - } +.content { + margin-bottom: 4rem; +} - .content { - margin-bottom: 4rem; - } +/* + Wrapper - /* - 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. +*/ - 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%; +} - .wrap { - position: relative; - width: 100%; - } +/* + Container - /* - Container + Center the page content. +*/ - 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: 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 */ + 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: 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; - } - + 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 - .masthead { - border-bottom: 1px solid #eee; - margin-bottom: 3rem; - padding-top: 26px; - padding-bottom: 1rem; - text-align: center; - } + 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 { - 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; + margin-top: 2px; + margin-right: 15%; + margin-left: 15%; } +} +@media (min-width: 48em) { .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%; - } + display: inline; } +} - @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. +/* + Sidebar - 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. + The sidebar is the drawer, the item we are toggling with our handy hamburger button in the corner + of the page. - Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504 - */ + 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. - /* 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 */ - } - } + Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504 +*/ - /* Sidebar content */ +/* 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 { - background-color: $link-color; - } - - .sidebar a { - font-weight: normal; - color: #fff; - } - + 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: 1rem; - } - - .sidebar-item p:last-child { - margin-bottom: 0; - } - - /* Sidebar nav */ - .sidebar-nav { - border-bottom: 1px solid rgba(255,255,255,.1); + padding: 1.5rem; } .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` */ + 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: 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; + position: fixed; } +} - .wrap, +@media print { .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; + display: none; } +} - /* 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*/ - } +/* + Slide effect + Handle the sliding effects of the sidebar and content in one spot, separate from the default + 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 - */ + 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. - .indent-1 { - padding-left: 1rem; - } + Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/. +*/ - .indent-2 { - padding-left: 2rem; - } +.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); +} - .indent-3 { - padding-left: 3rem; - } - .indent-4 { - padding-left: 4rem; - } +/* + Reverse layout - .indent-5 { - padding-left: 5rem; - } + Flip the orientation of the page by placing the `.sidebar` and sidebar toggle on the right side. +*/ - .indent-6 { - padding-left: 6rem; - } +.layout-reverse .sidebar { + left: auto; + right: -14rem; +} - .indent-7 { - padding-left: 7rem; - } +.layout-reverse .sidebar-toggle { + left: auto; + right: 1rem; +} - .indent-8 { - padding-left: 8rem; - } +.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); +} - .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; - } +/* + Overlay sidebar - /* Footnotes styles */ - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } + Make the sidebar content overlay the viewport content instead of pushing it aside when toggled. +*/ - sup { - top: -0.5em; - } +.sidebar-overlay #sidebar-checkbox:checked ~ .wrap { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); +} - .footnotes { - line-height: 1.2rem; - font-size: 0.9rem; - letter-spacing: .01rem; - } +.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle { + box-shadow: 0 0 0 .25rem #fff; +} - .footnotes .foot-block { - display: inline-block; - padding: 0 4rem 0 2rem; - margin-bottom: .8rem; - font-style: italic; - } +.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar { + box-shadow: .25rem 0 .5rem rgba(0,0,0,.1); +} - a.footnote-ref { - padding-left: .1rem; - font-size: .66rem; - } +/* 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); +} - /*Bibliography styles */ - ol.bibliography { - list-style-type:none; - padding-left: 1rem; - text-indent: -1rem; - } - /* Diplomatic editions */ - ins, - .add { - color:#288828; - font-style: italic; - } +/* + ED special layouts +*/ - del, - .delete { - text-decoration: line-through; - color: #AA3232; - } +p.centered { + text-align: center; +} - u, - .underline { - text-decoration: underline; - } +p.larger { + font-size: 1.6rem; +} +p.large { + font-size: 1.4rem +} - /* - Line layouts for prose-poetry and theater +p.small { + font-size: 0.8rem; +} - To use these layouts you need to add the classes to your markdown or HTML lines. - (ex. "- {:.centered} hello!") - */ +div.poem, +.poem, +div.narrative, +.narrative { + margin-bottom: 5rem; +} - li.centered { - text-align: center; - } +div.toc { + margin-bottom: 4rem; +} - li.speaker, - li.speakerGroup { - text-align: center; - padding-top: 1.2em; - } - li.speakerGroup { - margin-bottom: -1.6em; - } +/* + Poem styles - /* To add an attribution, make sure to make a line with the attribution class */ + 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 +*/ - li.attribution { - text-align: right; - list-style: none; - padding: 0rem 1.5rem 0rem 2rem; - margin: 0 0 20px 0; - color: #454545; - } +.poem ul, +.poetry ul, +ul.poetry { + list-style: none; + list-style-type: none; + padding-left: 1rem; + text-indent: -1rem; +} - li.prose { - list-style-position: inside; - margin-left: -1em; - text-indent: 0; - } - li.prose-indent { - text-indent: 2rem; - } +/* 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*/ +} - /* - Themes +/* + 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 +*/ - Applies custom color schemes by adding the appropriate class to the `body`. Based on colors from - Base16: http://chriskempson.com/projects/base16/ - */ +.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-ref { + 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; +} - /* 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; - } +/* + Line layouts for prose-poetry and theater - /* Orange */ - .theme-base-orange .sidebar, - .theme-base-orange .sidebar-toggle:active { - background-color: #d28445; - } + To use these layouts you need to add the classes to your markdown or HTML lines. + (ex. "- {:.centered} hello!") +*/ - .theme-base-orange .container a, - .theme-base-orange .sidebar-toggle, - .theme-base-orange .related-posts li a:hover { - color: #d28445; - } +li.centered { + text-align: center; +} - /* Green */ - .theme-base-green .sidebar, - .theme-base-green .sidebar-toggle:active { - background-color: #90a959; - } +li.speaker, +li.speakerGroup { + text-align: center; + padding-top: 1.2em; +} - .theme-base-green .container a, - .theme-base-green .sidebar-toggle, - .theme-base-green .related-posts li a:hover { - color: #90a959; - } +li.speakerGroup { + margin-bottom: -1.6em; +} - /* Cyan */ - .theme-base-cyan .sidebar, - .theme-base-cyan .sidebar-toggle:active { - background-color: #75b5aa; - } +/* To add an attribution, make sure to make a line with the attribution class */ - .theme-base-cyan .container a, - .theme-base-cyan .sidebar-toggle, - .theme-base-cyan .related-posts li a:hover { - color: #75b5aa; - } +li.attribution { + text-align: right; + list-style: none; + padding: 0rem 1.5rem 0rem 2rem; + margin: 0 0 20px 0; + color: #454545; +} - /* Blue */ - .theme-base-blue .sidebar, - .theme-base-blue .sidebar-toggle:active { - background-color: #6a9fb5; - } +li.prose { + list-style-position: inside; + margin-left: -1em; + text-indent: 0; +} - .theme-base-blue .container a, - .theme-base-blue .sidebar-toggle, - .theme-base-blue .related-posts li a:hover { - color: #6a9fb5; - } +li.prose-indent { + text-indent: 2rem; +} - /* 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; - } +/* + Themes - /* Brown */ - .theme-base-brown .sidebar, - .theme-base-brown .sidebar-toggle:active { - background-color: #8f5536; - } + Applies custom color schemes by adding the appropriate class to the `body`. Based on colors from + Base16: http://chriskempson.com/projects/base16/ +*/ - .theme-base-brown .container a, - .theme-base-brown .sidebar-toggle, - .theme-base-brown .related-posts li a:hover { - color: #8f5536; - } +/* 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/_reset.scss b/assets/sass/_reset.scss deleted file mode 100644 index d7dd1a2..0000000 --- a/assets/sass/_reset.scss +++ /dev/null @@ -1,128 +0,0 @@ -// - - - - - - - - - - - - - - - - - - -// Reset -// - - - - - - - - - - - - - - - - - - - -@import "_mixins"; - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, a, -abbr, address, cite, code, del, dfn, em, img, -ins, kbd, q, s, samp, small, strong, sub, sup, tt, -var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, -label, legend, table, caption, tbody, tfoot, -thead, tr, th, td, article, aside, canvas, details, -figcaption, figure, footer, header, hgroup, menu, -nav, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; -} - -article, aside, details, figcaption, figure, footer, -header, hgroup, menu, nav, section { - display: block; -} - -h1, h2, h3, h4, h5, h6 { - font-size: 100%; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -strong, b, mark { - font-weight: 700; - font-style: inherit; -} - -em, i, cite, q, address, dfn, var { - font-style: italic; - font-weight: inherit; -} - -abbr[title],dfn[title] { - cursor: help; - border-bottom: 1px dotted; -} - -ins { - border-bottom: 1px solid; -} - -a, u, ins { - text-decoration: none; -} - -del, s { - text-decoration: line-through; -} - -pre, code, samp, kbd { - font-family: monospace; -} - -small { - font-size: .75em; -} - -img { - border: 0; - font-style: italic; -} - -input, select, option, optgroup, textarea { - font: inherit; -} - -* { - @include box-sizing (border-box); - margin: 0; - padding: 0; -} - -article, aside, details, figcaption, figure, footer, -header, hgroup, nav, section { - display: block; -} - -audio[controls], canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -html { - font-size: 100%; - -webkit-overflow-scrolling: touch; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} - -body { - margin: 0; - text-rendering: optimizeLegibility; -} - -img { - border: 0; - -ms-interpolation-mode: bicubic; - display: block; -} - -img, object, embed { - max-width: 100%; - height: auto; -} - -input { - @include appearance(none); -} - -header, footer, section { - position: relative; - float: left; - clear: both; - width: 100%; -} diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 1546192..9e08ea5 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -20,10 +20,6 @@ $text-color: #454545; $heading-color: #404040; $link-color: #841212; -// - - - - - - - - - - Foundations - -@import "_reset"; - // - - - - - - - - - - Global styles @import "ed"; @import "syntax"; diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index 4f19e66..cfa32b4 100644 --- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -10,110 +10,6 @@ Make sure to leave color_scheme in `config.toml` file empty for granular control */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, a, -abbr, address, cite, code, del, dfn, em, img, -ins, kbd, q, s, samp, small, strong, sub, sup, tt, -var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, -label, legend, table, caption, tbody, tfoot, -thead, tr, th, td, article, aside, canvas, details, -figcaption, figure, footer, header, hgroup, menu, -nav, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; } - -article, aside, details, figcaption, figure, footer, -header, hgroup, menu, nav, section { - display: block; } - -h1, h2, h3, h4, h5, h6 { - font-size: 100%; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -strong, b, mark { - font-weight: 700; - font-style: inherit; } - -em, i, cite, q, address, dfn, var { - font-style: italic; - font-weight: inherit; } - -abbr[title], dfn[title] { - cursor: help; - border-bottom: 1px dotted; } - -ins { - border-bottom: 1px solid; } - -a, u, ins { - text-decoration: none; } - -del, s { - text-decoration: line-through; } - -pre, code, samp, kbd { - font-family: monospace; } - -small { - font-size: .75em; } - -img { - border: 0; - font-style: italic; } - -input, select, option, optgroup, textarea { - font: inherit; } - -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin: 0; - padding: 0; } - -article, aside, details, figcaption, figure, footer, -header, hgroup, nav, section { - display: block; } - -audio[controls], canvas, video { - display: inline-block; - *display: inline; - *zoom: 1; } - -html { - font-size: 100%; - -webkit-overflow-scrolling: touch; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; } - -body { - margin: 0; - text-rendering: optimizeLegibility; } - -img { - border: 0; - -ms-interpolation-mode: bicubic; - display: block; } - -img, object, embed { - max-width: 100%; - height: auto; } - -input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } - -header, footer, section { - position: relative; - float: left; - clear: both; - width: 100%; } - /* Ed: the minimal edition theme. * ___________________ * \_ _____/\______ \ @@ -166,20 +62,20 @@ body { margin-bottom: 4rem; } /* - Wrapper + 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. - */ + 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 + Container - Center the page content. - */ + Center the page content. +*/ .container { max-width: 32rem; padding-left: 1rem; @@ -292,10 +188,10 @@ tbody tr:nth-child(odd) th { background-color: #f9f9f9; } /* - Masthead + Masthead - Super small header above the content for site name and short description. - */ + Super small header above the content for site name and short description. +*/ .masthead { border-bottom: 1px solid #eee; margin-bottom: 3rem; @@ -334,18 +230,18 @@ tbody tr:nth-child(odd) th { display: inline; } } /* - Sidebar + Sidebar - The sidebar is the drawer, the item we are toggling with our handy hamburger button in the corner - of the page. + 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. + 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 - */ + Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504 +*/ /* Style and "hide" the sidebar */ .sidebar { position: fixed; @@ -457,17 +353,17 @@ a.sidebar-nav-item:focus { display: none; } } /* - Slide effect + Slide effect - Handle the sliding effects of the sidebar and content in one spot, separate from the default - styles. + 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. + 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/. - */ + Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/. +*/ .wrap, .sidebar, .sidebar-toggle { @@ -492,10 +388,10 @@ a.sidebar-nav-item:focus { transform: translateX(14rem); } /* - Reverse layout + Reverse layout - Flip the orientation of the page by placing the `.sidebar` and sidebar toggle on the right side. - */ + Flip the orientation of the page by placing the `.sidebar` and sidebar toggle on the right side. +*/ .layout-reverse .sidebar { left: auto; right: -14rem; } @@ -512,10 +408,10 @@ a.sidebar-nav-item:focus { transform: translateX(-14rem); } /* - Overlay sidebar + Overlay sidebar - Make the sidebar content overlay the viewport content instead of pushing it aside when toggled. - */ + 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); @@ -532,8 +428,8 @@ a.sidebar-nav-item:focus { box-shadow: -0.25rem 0 0.5rem rgba(0, 0, 0, 0.1); } /* - ED special layouts - */ + ED special layouts +*/ p.centered { text-align: center; } @@ -556,11 +452,11 @@ div.toc { margin-bottom: 4rem; } /* - Poem styles + 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 - */ + 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 { @@ -576,9 +472,9 @@ ul.poetry { /* 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 - */ + 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; } @@ -664,11 +560,11 @@ u, text-decoration: underline; } /* - Line layouts for prose-poetry and theater + 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!") - */ + To use these layouts you need to add the classes to your markdown or HTML lines. + (ex. "- {:.centered} hello!") +*/ li.centered { text-align: center; } @@ -697,11 +593,11 @@ li.prose-indent { text-indent: 2rem; } /* - Themes + Themes - Applies custom color schemes by adding the appropriate class to the `body`. Based on colors from - Base16: http://chriskempson.com/projects/base16/ - */ + 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, |