diff --git a/README.md b/README.md index 2f6bce7..a5de124 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,9 @@ A viewer application for web publications, based on [NYPL’s prototype](https://github.com/NYPL-Simplified/webpub-viewer), which is itself based on [Hadrien Gardeur’s proof of concept](https://github.com/HadrienGardeur/webpub-viewer). -## About the Jellybooks-shared branch - -This branch is meant to host changes and improvements that [Jellybooks](https://www.jellybooks.com) can share with the larger community. - ## Quickstart -Clone this repo, `cd` the directory, checkout the `jellybooks-branch` then +Clone this repo, `cd` the directory, then ``` npm install diff --git a/examples/embedded/alice/main.css b/examples/embedded/alice/main.css index 2fe71d3..fd8dae7 100644 --- a/examples/embedded/alice/main.css +++ b/examples/embedded/alice/main.css @@ -409,10 +409,23 @@ iframe { -moz-user-select: none; -ms-user-select: none; user-select: none; } + .contents-view ol { + padding: 0; + margin-left: 1.25rem; } + @media screen and (min-width: 60rem) { + .contents-view ol { + margin-left: 2rem; } } + .contents-view > ol { + margin-bottom: 3.2rem; + margin-right: 1.25rem; } + @media screen and (min-width: 60rem) { + .contents-view > ol { + margin-right: 2rem; } } .contents-view ol li { margin-top: 0; - width: 88%; } + display: block; } .contents-view ol li a { + box-sizing: border-box; color: #5B5852; border-bottom: 1px solid #cccccc; display: block; @@ -430,6 +443,7 @@ iframe { background: #111; color: #DADADA; } .contents-view ol li span { + box-sizing: border-box; color: #5B5852; border-bottom: 1px solid #cccccc; display: block; diff --git a/examples/streamed/readers/reader-JBKS/main.css b/examples/streamed/readers/reader-JBKS/main.css index 2fe71d3..fd8dae7 100644 --- a/examples/streamed/readers/reader-JBKS/main.css +++ b/examples/streamed/readers/reader-JBKS/main.css @@ -409,10 +409,23 @@ iframe { -moz-user-select: none; -ms-user-select: none; user-select: none; } + .contents-view ol { + padding: 0; + margin-left: 1.25rem; } + @media screen and (min-width: 60rem) { + .contents-view ol { + margin-left: 2rem; } } + .contents-view > ol { + margin-bottom: 3.2rem; + margin-right: 1.25rem; } + @media screen and (min-width: 60rem) { + .contents-view > ol { + margin-right: 2rem; } } .contents-view ol li { margin-top: 0; - width: 88%; } + display: block; } .contents-view ol li a { + box-sizing: border-box; color: #5B5852; border-bottom: 1px solid #cccccc; display: block; @@ -430,6 +443,7 @@ iframe { background: #111; color: #DADADA; } .contents-view ol li span { + box-sizing: border-box; color: #5B5852; border-bottom: 1px solid #cccccc; display: block; diff --git a/src/styles/sass/_toc.scss b/src/styles/sass/_toc.scss index ce2a79c..b994481 100644 --- a/src/styles/sass/_toc.scss +++ b/src/styles/sass/_toc.scss @@ -11,11 +11,30 @@ -ms-user-select: none; user-select: none; + ol { + padding: 0; + margin-left: 1.25rem; + + @media screen and (min-width: 60rem) { + margin-left: 2rem; + } + } + + > ol { + margin-bottom: 3.2rem; // same value as top above + margin-right: 1.25rem; + + @media screen and (min-width: 60rem) { + margin-right: 2rem; + } + } + ol li { margin-top: 0; - width: 88%; + display: block; a { + box-sizing: border-box; color: $ui-dark-gray; border-bottom: 1px solid darken($ui-white, 20%); display: block; @@ -42,6 +61,7 @@ } span { + box-sizing: border-box; color: $ui-dark-gray; border-bottom: 1px solid darken($ui-white, 20%); display: block;