Update web
This commit is contained in:
Madison Scott-Clary
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
.hugo_build.lock
|
||||
content/perfect-edition
|
||||
|
||||
@ -1,179 +1,121 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: "Vollkorn";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src: url("../font/Vollkorn-Regular.woff2") format("woff2");
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Gotu&family=Gentium+Plus:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: "Vollkorn";
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
src: url("../font/Vollkorn-Italic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Vollkorn";
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
src: url("../font/Vollkorn-Semibold.woff2") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Vollkorn";
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
src: url("../font/Vollkorn-SemiboldItalic.woff2") format("woff2");
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizelegibility;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Baseline defaults for all devices */
|
||||
--base-unit: 5vh;
|
||||
--column-width: 50vw;
|
||||
}
|
||||
|
||||
@supports (width: clamp(28px, 5vh, 56px)) {
|
||||
@supports (width: clamp(28px, 5vh, 48px)) {
|
||||
:root {
|
||||
/* Baseline defaults for all devices and browsers that support clamp() */
|
||||
/* Edge Chromium on Android has an issue with supporting clamp() for widths */
|
||||
--base-unit: clamp(28px, 5vh, 56px);
|
||||
--base-unit: clamp(28px, 5vh, 48px);
|
||||
--column-width: clamp(480px, 50vw, 640px);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--base-unit-half: calc( var(--base-unit) / 2.0 );
|
||||
|
||||
--body-text-font-stack: "Vollkorn", serif;
|
||||
--heading-text-font-stack: "Vollkorn", serif;
|
||||
--body-text-font-stack: "Gentium Plus", serif;
|
||||
--heading-text-font-stack: "Gotu", sans-serif;
|
||||
--font-size: var(--base-unit-half);
|
||||
--line-height: 1.4rem;
|
||||
--print-line-height: 1.4rem;
|
||||
|
||||
--vertical-padding: var(--base-unit);
|
||||
|
||||
/* this 4.0 is a bit cryptic; we are making space for the toc button:; */
|
||||
--column-height: calc(100vh - calc(var(--vertical-padding) * 4.0));
|
||||
--column-height: calc(100svh - calc(var(--vertical-padding) * 4.0));
|
||||
--column-gap: var(--base-unit);
|
||||
|
||||
--paper-hue: 100;
|
||||
--paper-saturation: 50%;
|
||||
--paper-lightness: 99%;
|
||||
--paper-color: hsla( var(--paper-hue), var(--paper-saturation), var(--paper-lightness), 1.0 );
|
||||
|
||||
/* these are for the "shades" that obscure text on the sides of the screen in wider browsers */
|
||||
--shade-color-destination: hsla(var(--paper-hue), var(--paper-saturation), var(--paper-lightness), 0.0);
|
||||
--shade-color-origin: hsla(var(--paper-hue), var(--paper-saturation), var(--paper-lightness), 0.75);
|
||||
|
||||
--spot-color: hsla(340, 100%, 50%, 1.0);
|
||||
--selection-color: hsla(340, 100%, 75%, 1.0);
|
||||
--text-color: rgb(5, 5, 5);
|
||||
|
||||
--page-count: 1;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme:dark) {
|
||||
:root {
|
||||
--paper-lightness: 1%;
|
||||
--selection-color: hsla(340, 100%, 25%, 1.0);
|
||||
--text-color: rgb(250, 250, 250);
|
||||
}
|
||||
--paper-color: #222222;
|
||||
--shade-color-destination: #000000;
|
||||
--shade-color-origin: #111111;
|
||||
--spot-color: #ffffff;
|
||||
--selection-color: #bbbbbb;
|
||||
--text-color: #eeeeee;
|
||||
}
|
||||
|
||||
::-moz-selection { background: var(--selection-color); }
|
||||
::selection { background: var(--selection-color); }
|
||||
|
||||
/* reset */
|
||||
/* <button> has some gross defaults */
|
||||
button {
|
||||
outline: none;
|
||||
border: none;
|
||||
touch-action: manipulation;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
touch-action: manipulation;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: hidden; /* the key, always */
|
||||
font-size: var(--font-size);
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/* ss11 gives us the more normal 1 digit */
|
||||
font-feature-settings: "kern", "liga", "ss11";
|
||||
overflow: hidden; /* This is the key, always */
|
||||
font-size: var(--font-size);
|
||||
font-feature-settings: "kern", "liga", "ss11"; /* ss11 gives us the more normal 1 digit in Vollkorn */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
height: 100vh; /* so scrollbar appears at bottom */
|
||||
|
||||
background-color: var(--paper-color);
|
||||
padding: var(--vertical-padding) 0 0 0;
|
||||
|
||||
height: 100vh; /* So the scrollbar appears at the bottom */
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
/* to justify or not to justify? */
|
||||
text-align: left; /* sigh */
|
||||
line-height: var(--line-height);
|
||||
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
padding: var(--vertical-padding) 0 0 0;
|
||||
background-color: var(--paper-color);
|
||||
font-family: var(--body-text-font-stack);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
text-align: left; /* sigh */
|
||||
line-height: var(--line-height);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
div.tutorial {
|
||||
div.book div.tutorial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
width: var(--column-width);
|
||||
height: calc( var(--column-height) - 1px ); /* full 100vh was causing an extra page break */
|
||||
|
||||
text-align: center;
|
||||
|
||||
gap: var(--line-height);
|
||||
break-after: column;
|
||||
width: var(--column-width);
|
||||
height: calc(var(--column-height) - 1px);
|
||||
overflow: hidden; /* hacky, prevents weird flow problems */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.tutorial h2 {
|
||||
height: auto;
|
||||
div.book div.tutorial h2 {
|
||||
flex-grow: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--line-height);
|
||||
|
||||
height: auto;
|
||||
margin: 0;
|
||||
font-family: var(--body-text-font-stack); /* a bit ugly */
|
||||
}
|
||||
|
||||
div.tutorial p {
|
||||
div.book div.tutorial p {
|
||||
flex-grow: 0;
|
||||
margin-bottom: var(--line-height);
|
||||
margin: 0;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
button.toc-button {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
left: 50vw;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
z-index: 100000;
|
||||
bottom: 0;
|
||||
left: 50vw;
|
||||
cursor: pointer;
|
||||
width: calc( var(--base-unit) * 2.0 );
|
||||
height: var(--base-unit);
|
||||
|
||||
border: 1px solid var(--text-color);
|
||||
background-color: var(--paper-color);
|
||||
color: inherit;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background-color: var(--paper-color);
|
||||
border: 1px solid var(--text-color);
|
||||
color: inherit;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
button.toc-button:hover {
|
||||
@ -182,56 +124,43 @@ button.toc-button:hover {
|
||||
}
|
||||
|
||||
button.toc-button svg {
|
||||
fill: currentColor;
|
||||
flex-grow: 1;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
|
||||
top: calc( var(--vertical-padding) + var(--base-unit) );
|
||||
/* the toc is 90% of the page's width */
|
||||
left: calc( 50vw - var(--column-width) * 0.45);
|
||||
|
||||
z-index: 10000;
|
||||
/* this is all a little bit stupid and I'm sure there's a more
|
||||
principled way to do it */
|
||||
width: calc( var(--column-width) * 0.9 );
|
||||
width: calc( var(--column-width) * 0.9 ); /* This is all a little bit stupid and I'm sure there's a more principled way to do it */
|
||||
height: calc( var(--column-height) - var(--base-unit) );
|
||||
|
||||
border: 1px solid var(--spot-color);
|
||||
|
||||
background-color: hsla(var(--paper-hue), calc(var(--paper-saturation) * 2.0), var(--paper-lightness), 1.0);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
text-align: left;
|
||||
|
||||
background-color: var(--shade-color-origin);
|
||||
border: 1px solid var(--spot-color);
|
||||
box-shadow: 0 0 var(--base-unit-half) 1px var(--shade-color-destination);
|
||||
transition: opacity 0.1s;
|
||||
|
||||
box-shadow: 0 0 var(--base-unit-half) 1px var(--spot-color);
|
||||
text-align: left;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
nav.visible {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
nav.invisible {
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
nav div.toc {
|
||||
position: relative;
|
||||
width: calc( var(--column-width) * 0.9 );
|
||||
height: calc( var(--column-height) - var(--base-unit) * 2.0 );
|
||||
|
||||
padding: var(--base-unit);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
padding: var(--base-unit);
|
||||
}
|
||||
|
||||
nav div.close-button {
|
||||
@ -249,43 +178,31 @@ nav div.close-button:hover {
|
||||
}
|
||||
|
||||
nav div.controls {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
|
||||
/* this is getting a bit silly... */
|
||||
top: calc( var(--vertical-padding) +
|
||||
var(--column-height) - var(--base-unit) * 2.0 );
|
||||
left: calc( 50vw - var(--column-width) * 0.45);
|
||||
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
top: calc( var(--vertical-padding) + var(--column-height) - var(--base-unit) * 2.0 ); /* this is getting a bit silly... */
|
||||
left: calc( 50vw - var(--column-width) * 0.45);
|
||||
width: calc( var(--column-width) * 0.9 );
|
||||
height: calc( var(--base-unit) * 2.0 );
|
||||
|
||||
background-color: var(--shade-color-origin);
|
||||
border: 1px solid var(--spot-color);
|
||||
|
||||
background-color: hsla(var(--paper-hue), calc(var(--paper-saturation) * 2.0), var(--paper-lightness), 1.0);
|
||||
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
nav div.controls button {
|
||||
flex-shrink: 0;
|
||||
|
||||
margin: 0 var(--base-unit-half) 0 0;
|
||||
width: var(--base-unit);
|
||||
/*line-height: calc( var(--base-unit) * 2.0 );*/
|
||||
height: auto;
|
||||
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
width: var(--base-unit);
|
||||
height: auto;
|
||||
margin: 0 var(--base-unit-half) 0 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
text-align: center;
|
||||
color: var(--spot-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
nav div.controls button:last-child {
|
||||
@ -297,28 +214,25 @@ nav div.controls button:hover {
|
||||
}
|
||||
|
||||
nav h1 {
|
||||
margin: 0 0 var(--line-height) 0;
|
||||
width: calc( var(--column-width) * 0.9 - calc( var(--base-unit) * 2.0 ) );
|
||||
margin: 0 0 var(--line-height) 0;
|
||||
padding: 0;
|
||||
/* text-transform: uppercase; */
|
||||
font-style: italic;
|
||||
line-height: var(--line-height);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
nav ol {
|
||||
margin: 0;
|
||||
width: 90%;
|
||||
margin: 0 0 var(--line-height) 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin-bottom: var(--line-height);
|
||||
}
|
||||
|
||||
nav ol li {
|
||||
margin: 0 0 var(--line-height) 0;
|
||||
line-height: var(--line-height);
|
||||
font-size: 1rem;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
nav ol li:last-of-type {
|
||||
@ -326,18 +240,15 @@ nav ol li:last-of-type {
|
||||
}
|
||||
|
||||
div.bookmark {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 100000;
|
||||
display: none;
|
||||
top: calc( var(--vertical-padding) * -2.5 ); /* now THAT is a magic number */
|
||||
left: calc( var(--column-width) / 2.0 );
|
||||
width: var(--base-unit);
|
||||
height: calc( var(--base-unit) * 2.0 );
|
||||
top: calc( var(--vertical-padding) * -2.5 ); /* now THAT is a stupid magic number */
|
||||
left: calc( var(--column-width) / 2.0 );
|
||||
transform: translateX(-50%);
|
||||
fill: var(--spot-color);
|
||||
|
||||
/* https://stackoverflow.com/questions/58404417/mobile-safari-not-rendering-fixed-element-outside-of-viewport-unless-it-has-no-c */
|
||||
/* computers... */
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
/* GENERAL STYLES */
|
||||
@ -345,14 +256,11 @@ div.bookmark {
|
||||
h2 {
|
||||
margin: calc( var(--line-height) * 6.0 ) 0 calc( var(--line-height) * 2.0 ) 0;
|
||||
padding: 0;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
|
||||
break-before: column;
|
||||
font-family: var(--heading-text-font-stack);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
column-break-before: always;
|
||||
break-before: column;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
}
|
||||
|
||||
a, a:link, a:visited {
|
||||
@ -379,40 +287,31 @@ p.spacetime {
|
||||
}
|
||||
|
||||
small {
|
||||
text-transform: lowercase;
|
||||
font-size: 1.025rem;
|
||||
font-feature-settings: "kern", "liga", "ss11", "smcp";
|
||||
font-variant: small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "ss11", "smcp";
|
||||
hyphens: none;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
/* this was sort of interesting but, nah */
|
||||
/* transform: translateX( var(--base-unit-half) ); */
|
||||
/* width: calc(var(--column-width) + var(--base-unit)); */
|
||||
break-before: column;
|
||||
break-after: column;
|
||||
width: var(--column-width);
|
||||
height: var(--column-height);
|
||||
max-height: var(--column-height);
|
||||
|
||||
overflow: hidden;
|
||||
-webkit-column-break-before: always;
|
||||
-webkit-column-break-inside: avoid;
|
||||
|
||||
break-before: column;
|
||||
/*max-width: 100%;*/
|
||||
mix-blend-mode: multiply;
|
||||
object-fit: contain; /* contain? */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: var(--base-unit) auto var(--base-unit) auto;
|
||||
break-after: avoid-column;
|
||||
width: 50%;
|
||||
margin: var(--base-unit) auto var(--base-unit) auto;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--spot-color);
|
||||
break-after: avoid-column;
|
||||
/* break-after: column; */
|
||||
}
|
||||
|
||||
p.last-page {
|
||||
@ -422,63 +321,54 @@ p.last-page {
|
||||
p.last-page::after {
|
||||
display: block;
|
||||
height: var(--column-height);
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
padding: var(--base-unit);
|
||||
font-style: italic;
|
||||
break-before: avoid-column;
|
||||
margin: 0;
|
||||
padding: var(--base-unit);
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* BOOK BLOCK LAYOUT */
|
||||
|
||||
div.book {
|
||||
position: relative;
|
||||
|
||||
scroll-snap-align: start;
|
||||
column-gap: var(--base-unit);
|
||||
column-fill: auto;
|
||||
column-count: auto;
|
||||
column-width: var(--column-width);
|
||||
|
||||
margin: var(--base-unit-half);
|
||||
width: var(--column-width); /* must match column-width, or am fucked */
|
||||
|
||||
width: var(--column-width);
|
||||
height: var(--column-height);
|
||||
margin: var(--base-unit-half);
|
||||
}
|
||||
|
||||
div.book div.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
gap: var(--line-height);
|
||||
width: var(--column-width);
|
||||
height: calc( var(--column-height) - 1px ); /* full 100vh was causing an extra page break */
|
||||
|
||||
height: var(--column-height);
|
||||
overflow: hidden; /* hacky, prevents weird flow problems */
|
||||
text-align: center;
|
||||
/* break-after: column; */
|
||||
}
|
||||
|
||||
div.book div.title h1 {
|
||||
height: auto;
|
||||
|
||||
flex-grow: 0;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: lowercase;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
|
||||
font-family: var(--heading-text-font-stack);
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
font-variant: small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
|
||||
text-transform: lowercase;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@ -488,126 +378,64 @@ div.book div.title h1 span {
|
||||
|
||||
div.book div.title h2 {
|
||||
flex-grow: 0;
|
||||
margin-top: var(--line-height);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.book h1 {
|
||||
height: calc( var(--column-height) - 1px);
|
||||
|
||||
break-before: column;
|
||||
overflow: hidden; /* hacky */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: lowercase;
|
||||
line-height: var(--column-height);
|
||||
|
||||
font-family: var(--heading-text-font-stack);
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
font-variant: small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
|
||||
color: var(--spot-color);
|
||||
|
||||
text-align: center;
|
||||
break-before: column;
|
||||
text-transform: lowercase;
|
||||
line-height: var(--column-height);
|
||||
color: var(--spot-color);
|
||||
}
|
||||
|
||||
/* these are the "shades" that obscure text on the sides of the screen in wider browsers */
|
||||
|
||||
/* originally, I had some SVG arrows hanging around but I don't think they're necessary */
|
||||
|
||||
/* for svg encoding: https://yoksel.github.io/url-encoder/ */
|
||||
/* thus, commented out */
|
||||
|
||||
/*svg original:
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 90" xml:space="preserve">
|
||||
<g>
|
||||
<rect x="0" y="0" width="60" height="90" style="fill: rgba(255, 255, 255, 0.75);" />
|
||||
<polygon points="30,45 60,30 60,60" style="fill: rgba(0, 0, 0, 0.125);" />
|
||||
</g>
|
||||
</svg>
|
||||
*/
|
||||
|
||||
div.book::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
width: calc( ( 100vw - var(--column-width) - var(--base-unit) ) / 2.0 );
|
||||
height: 100vh;
|
||||
|
||||
/* specific to left shade */
|
||||
left: 0;
|
||||
background: linear-gradient(to right,
|
||||
var(--shade-color-origin) 0%,
|
||||
var(--shade-color-origin) 95%,
|
||||
var(--shade-color-destination) 100%);
|
||||
|
||||
/* i just don't think this is necessary...
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='100%25' height='100%25' viewBox='0 0 60 90' xml:space='preserve'%3E%3Cg%3E%3Crect x='0' y='0' width='60' height='90' style='fill: rgba(255, 255, 255, 0.75);' /%3E%3Cpolygon points='30,45 60,30 60,60' style='fill: rgba(0, 0, 0, 0.125);' /%3E%3C/g%3E%3C/svg%3E");
|
||||
*/
|
||||
background: linear-gradient(to right, var(--shade-color-origin) 0%, var(--shade-color-origin) 95%, var(--shade-color-destination) 100%);
|
||||
content: "";
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
div.book::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
right: 0;
|
||||
width: calc( ( 100vw - var(--column-width) - var(--base-unit) ) / 2.0 );
|
||||
height: 100vh;
|
||||
|
||||
/* specific to right shade */
|
||||
right: 0;
|
||||
background: linear-gradient(to left,
|
||||
var(--shade-color-origin) 0%,
|
||||
var(--shade-color-origin) 95%,
|
||||
var(--shade-color-destination) 100%);
|
||||
}
|
||||
|
||||
/* TO MAKE SNAP-SCROLL WORK ON MOBILE */
|
||||
|
||||
/* inspiration:
|
||||
https://github.com/jpamental/moby-dick/pull/5/commits/ec022061684ae4c233fba047fb341b41deeead6c */
|
||||
|
||||
div.shadow-page-container {
|
||||
display: none;
|
||||
position: relative;
|
||||
/* margin: var(--base-unit-half); */
|
||||
width: calc( 100vw * var(--page-count));
|
||||
}
|
||||
|
||||
div.shadow-page {
|
||||
background-color: transparent;
|
||||
float: left;
|
||||
height: 1px;
|
||||
margin-left: 0;
|
||||
margin-right: var(--column-gap);
|
||||
width: var(--column-width);
|
||||
scroll-snap-align: start;
|
||||
position: relative;
|
||||
z-index: -10;
|
||||
background: linear-gradient(to left, var(--shade-color-origin) 0%, var(--shade-color-origin) 95%, var(--shade-color-destination) 100%);
|
||||
content: "";
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* PRINT STYLES */
|
||||
/* this is a mess... */
|
||||
/* This is a mess... */
|
||||
|
||||
div.print-cover {
|
||||
display: none;
|
||||
|
||||
page-break-after: always;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
div.print-cover div.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -615,15 +443,14 @@ div.print-cover div.title h1 {
|
||||
flex-grow: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: lowercase;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
|
||||
font-family: var(--heading-text-font-stack);
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
font-variant:small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
text-transform: lowercase;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
}
|
||||
|
||||
div.print-cover div.title h1 span {
|
||||
@ -638,62 +465,37 @@ div.print-cover div.title h2 {
|
||||
/* RESPONSIVE STUFF */
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
|
||||
:root {
|
||||
--column-width: calc(100vw - var(--base-unit));
|
||||
/* this is quite blunt */
|
||||
/* but it's to compensate for mobile browser chrome */
|
||||
/* maybe there's a more elegant solution? */
|
||||
--column-height: 65vh;
|
||||
}
|
||||
|
||||
body {
|
||||
height: calc( var(--column-height) + var(--vertical-padding) * 2.0 );
|
||||
/* having this set at 100vh was causing that weird mobile slip problem */
|
||||
|
||||
/* this is really interesting: */
|
||||
scroll-snap-type: x mandatory;
|
||||
/* idea from: https://github.com/jpamental/moby-dick/pull/5 */
|
||||
/* with thanks to kyle gach */
|
||||
}
|
||||
|
||||
div.shadow-page-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.book::before, div.book::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
|
||||
div.book {
|
||||
margin-left: calc(50vw - var(--column-width) / 2.0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-height: 1000px) {
|
||||
|
||||
:root {
|
||||
--vertical-padding: calc( var(--base-unit) * 2.0 );
|
||||
}
|
||||
|
||||
div.bookmark {
|
||||
top: calc( var(--vertical-padding) * -1.5 ); /* now THAT is a stupid magic number */
|
||||
top: calc( var(--vertical-padding) * -1.5 ); /* Now THAT is a stupid magic number */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
font-size: 16pt;
|
||||
overflow: visible !important; /* BLERF this fixed a lot of my print style woes */
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
div.book::before, div.book::after, nav, button.toc-button, img.cover, div.last-page, div.bookmark, div.tutorial {
|
||||
@ -713,9 +515,9 @@ div.print-cover div.title h2 {
|
||||
height: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
background-color: rgb(255, 255, 255);
|
||||
line-height: var(--print-line-height);
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
div.print-cover {
|
||||
@ -723,41 +525,24 @@ div.print-cover div.title h2 {
|
||||
}
|
||||
|
||||
div.book {
|
||||
|
||||
/* i really wanted columns to work for printing but... they do not */
|
||||
column-count: 0;
|
||||
column-width: auto;
|
||||
columns: 100% 1;
|
||||
column-gap: 0;
|
||||
column-fill: auto;
|
||||
|
||||
columns: 100% 1;
|
||||
|
||||
margin: 0;
|
||||
column-count: 0;
|
||||
column-width: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
/*
|
||||
column-width: auto;
|
||||
column-count: 2;
|
||||
column-gap: var(--base-unit);
|
||||
column-fill: auto;
|
||||
*/
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
break-before: page !important; /* This isn't working :( */
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--print-line-height);
|
||||
line-height: var(--print-line-height);
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
/* this isn't working :( */
|
||||
|
||||
break-before: page !important;
|
||||
line-height: var(--print-line-height);
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -765,11 +550,10 @@ div.print-cover div.title h2 {
|
||||
}
|
||||
|
||||
small {
|
||||
/* small caps weren't working correctly when actually printed, so! */
|
||||
text-transform: none;
|
||||
font-size: 1.0rem;
|
||||
font-weight: 400;
|
||||
font-variant: none;
|
||||
font-variant-caps: none;
|
||||
text-transform: none; /* Small caps weren't working correctly when actually printed, so! */
|
||||
}
|
||||
}
|
||||
@ -1,807 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: "Linux Biolinum";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src: url("/web/font/LinBiolinum_R.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gentium Book Basic";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src: url("/web/font/GenBkBasR.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gentium Book Basic";
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
src: url("/web/font/GenBkBasI.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gentium Book Basic";
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
src: url("/web/font/GenBkBasB.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Gentium Book Basic";
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
src: url("/web/font/GenBkBasBI.woff") format("woff");
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Baseline defaults for all devices */
|
||||
--base-unit: 5vh;
|
||||
--column-width: 50vw;
|
||||
}
|
||||
|
||||
@supports (width: clamp(28px, 5vh, 56px)) {
|
||||
:root {
|
||||
/* Baseline defaults for all devices and browsers that support clamp() */
|
||||
/* Edge Chromium on Android has an issue with supporting clamp() for widths */
|
||||
--base-unit: clamp(28px, 5vh, 56px);
|
||||
--column-width: clamp(480px, 50vw, 640px);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--base-unit-half: calc( var(--base-unit) / 2.0 );
|
||||
|
||||
--font-size: var(--base-unit-half);
|
||||
--line-height: 1.4rem;
|
||||
--print-line-height: 1.4rem;
|
||||
|
||||
--vertical-padding: var(--base-unit);
|
||||
|
||||
/* this 4.0 is a bit cryptic; we are making space for the toc button:; */
|
||||
--column-height: calc(100vh - calc(var(--vertical-padding) * 4.0));
|
||||
--column-gap: var(--base-unit);
|
||||
|
||||
--paper-hue: 100;
|
||||
--paper-saturation: 50%;
|
||||
--paper-lightness: 99%;
|
||||
--paper-color: hsla( var(--paper-hue), var(--paper-saturation), var(--paper-lightness), 1.0 );
|
||||
|
||||
/* these are for the "shades" that obscure text on the sides of the screen in wider browsers */
|
||||
--shade-color-destination: hsla(var(--paper-hue), var(--paper-saturation), var(--paper-lightness), 0.0);
|
||||
--shade-color-origin: hsla(var(--paper-hue), var(--paper-saturation), var(--paper-lightness), 0.75);
|
||||
|
||||
--spot-color: hsla(240, 50%, 25%, 1.0);
|
||||
--selection-color: hsla(240, 50%, 75%, 1.0);
|
||||
--text-color: rgb(5, 5, 5);
|
||||
|
||||
--page-count: 1;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme:dark) {
|
||||
:root {
|
||||
--paper-lightness: 1%;
|
||||
--spot-color: hsla(240, 50%, 50%, 1.0);
|
||||
--selection-color: hsla(240, 50%, 75%, 1.0);
|
||||
--text-color: rgb(250, 250, 250);
|
||||
}
|
||||
img {
|
||||
mix-blend-mode: unset;
|
||||
}
|
||||
}
|
||||
|
||||
::-moz-selection { background: var(--selection-color); }
|
||||
::selection { background: var(--selection-color); }
|
||||
|
||||
/* reset */
|
||||
button {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: hidden; /* the key, always */
|
||||
font-size: var(--font-size);
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/* ss11 gives us the more normal 1 digit */
|
||||
font-feature-settings: "kern", "liga", "ss11";
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
height: 100vh; /* so scrollbar appears at bottom */
|
||||
|
||||
background-color: var(--paper-color);
|
||||
padding: var(--vertical-padding) 0 0 0;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
||||
/* to justify or not to justify? */
|
||||
text-align: left; /* sigh */
|
||||
line-height: var(--line-height);
|
||||
|
||||
color: var(--text-color);
|
||||
font-family: "Gentium Book Basic", serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
div.tutorial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
width: var(--column-width);
|
||||
height: calc( var(--column-height) - 1px ); /* full 100vh was causing an extra page break */
|
||||
|
||||
text-align: center;
|
||||
|
||||
break-after: column;
|
||||
}
|
||||
|
||||
div.tutorial h2 {
|
||||
height: auto;
|
||||
flex-grow: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--line-height);
|
||||
}
|
||||
|
||||
div.tutorial p {
|
||||
flex-grow: 0;
|
||||
margin-bottom: var(--line-height);
|
||||
}
|
||||
|
||||
button.toc-button {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
left: 50vw;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
z-index: 100000;
|
||||
width: calc( var(--base-unit) * 2.0 );
|
||||
height: var(--base-unit);
|
||||
|
||||
border: 1px solid var(--text-color);
|
||||
background-color: var(--paper-color);
|
||||
color: inherit;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
button.toc-button:hover {
|
||||
border: 1px solid var(--spot-color);
|
||||
color: var(--spot-color);
|
||||
}
|
||||
|
||||
button.toc-button svg {
|
||||
fill: currentColor;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
|
||||
top: calc( var(--vertical-padding) + var(--base-unit) );
|
||||
/* the toc is 90% of the page's width */
|
||||
left: calc( 50vw - var(--column-width) * 0.45);
|
||||
|
||||
z-index: 10000;
|
||||
/* this is all a little bit stupid and I'm sure there's a more
|
||||
principled way to do it */
|
||||
width: calc( var(--column-width) * 0.9 );
|
||||
height: calc( var(--column-height) - var(--base-unit) );
|
||||
|
||||
border: 1px solid var(--spot-color);
|
||||
|
||||
background-color: hsla(var(--paper-hue), calc(var(--paper-saturation) * 2.0), var(--paper-lightness), 1.0);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
|
||||
text-align: left;
|
||||
|
||||
transition: opacity 0.1s;
|
||||
|
||||
box-shadow: 0 0 var(--base-unit-half) 1px var(--spot-color);
|
||||
}
|
||||
|
||||
nav.visible {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
nav.invisible {
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
nav div.toc {
|
||||
width: calc( var(--column-width) * 0.9 );
|
||||
height: calc( var(--column-height) - var(--base-unit) * 2.0 );
|
||||
|
||||
padding: var(--base-unit);
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
nav div.close-button {
|
||||
position: fixed;
|
||||
top: calc( var(--vertical-padding) + var(--base-unit) + var(--base-unit));
|
||||
right: calc( 50vw + var(--base-unit) - var(--column-width) * 0.45);
|
||||
width: var(--base-unit-half);
|
||||
height: var(--base-unit-half);
|
||||
stroke: var(--spot-color);
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
nav div.close-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav div.controls {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
|
||||
/* this is getting a bit silly... */
|
||||
top: calc( var(--vertical-padding) +
|
||||
var(--column-height) - var(--base-unit) * 2.0 );
|
||||
left: calc( 50vw - var(--column-width) * 0.45);
|
||||
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
|
||||
width: calc( var(--column-width) * 0.9 );
|
||||
height: calc( var(--base-unit) * 2.0 );
|
||||
|
||||
border: 1px solid var(--spot-color);
|
||||
|
||||
background-color: hsla(var(--paper-hue), calc(var(--paper-saturation) * 2.0), var(--paper-lightness), 1.0);
|
||||
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
nav div.controls button {
|
||||
flex-shrink: 0;
|
||||
|
||||
margin: 0 var(--base-unit-half) 0 0;
|
||||
width: var(--base-unit);
|
||||
/*line-height: calc( var(--base-unit) * 2.0 );*/
|
||||
height: auto;
|
||||
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: var(--spot-color);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
nav div.controls button:last-child {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
nav div.controls button:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
nav h1 {
|
||||
margin: 0 0 var(--line-height) 0;
|
||||
width: calc( var(--column-width) * 0.9 - calc( var(--base-unit) * 2.0 ) );
|
||||
padding: 0;
|
||||
/* text-transform: uppercase; */
|
||||
font-style: italic;
|
||||
line-height: var(--line-height);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
nav ol {
|
||||
margin: 0;
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
margin-bottom: var(--line-height);
|
||||
}
|
||||
|
||||
nav ol li {
|
||||
margin: 0 0 var(--line-height) 0;
|
||||
line-height: var(--line-height);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
nav ol li:last-of-type {
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
div.bookmark {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 100000;
|
||||
width: var(--base-unit);
|
||||
height: calc( var(--base-unit) * 2.0 );
|
||||
top: calc( var(--vertical-padding) * -2.5 ); /* now THAT is a stupid magic number */
|
||||
left: calc( var(--column-width) / 2.0 );
|
||||
transform: translateX(-50%);
|
||||
fill: var(--spot-color);
|
||||
|
||||
/* https://stackoverflow.com/questions/58404417/mobile-safari-not-rendering-fixed-element-outside-of-viewport-unless-it-has-no-c */
|
||||
/* computers... */
|
||||
}
|
||||
|
||||
/* GENERAL STYLES */
|
||||
|
||||
table {
|
||||
margin: 0.5rem auto;
|
||||
text-align: center;
|
||||
border: 1px solid var(--spot-color);
|
||||
box-shadow: 1px 1px 5px var(--selection-color);
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
text-indent: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
blockquote p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Linux Biolinum", sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: calc( var(--line-height) * 6.0 ) 0 calc( var(--line-height) * 2.0 ) 0;
|
||||
padding: 0;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
font-family: "Linux Biolinum", sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
column-break-before: always;
|
||||
break-before: column;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a, a:link, a:visited {
|
||||
color: var(--spot-color);
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-indent: var(--base-unit-half);
|
||||
}
|
||||
|
||||
span.nobr {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
p.spacetime {
|
||||
margin-top: var(--line-height);
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
small {
|
||||
text-transform: lowercase;
|
||||
font-size: 1.025rem;
|
||||
font-variant: small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "ss11", "smcp";
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
/* this was sort of interesting but, nah */
|
||||
/* transform: translateX( var(--base-unit-half) ); */
|
||||
/* width: calc(var(--column-width) + var(--base-unit)); */
|
||||
width: var(--column-width);
|
||||
height: var(--column-height);
|
||||
max-height: var(--column-height);
|
||||
|
||||
overflow: hidden;
|
||||
-webkit-column-break-before: always;
|
||||
-webkit-column-break-inside: avoid;
|
||||
|
||||
break-before: column;
|
||||
/*max-width: 100%;*/
|
||||
mix-blend-mode: multiply;
|
||||
object-fit: contain; /* contain? */
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: var(--base-unit) auto var(--base-unit) auto;
|
||||
width: 50%;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--spot-color);
|
||||
break-after: avoid-column;
|
||||
/* break-after: column; */
|
||||
}
|
||||
|
||||
p.last-page {
|
||||
text-indent: 0;
|
||||
break-before: column;
|
||||
}
|
||||
|
||||
p.last-page::after {
|
||||
display: block;
|
||||
height: var(--column-height);
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
padding: var(--base-unit);
|
||||
font-style: italic;
|
||||
break-before: avoid-column;
|
||||
}
|
||||
|
||||
/* BOOK BLOCK LAYOUT */
|
||||
|
||||
div.book {
|
||||
position: relative;
|
||||
|
||||
scroll-snap-align: start;
|
||||
column-gap: var(--base-unit);
|
||||
column-fill: auto;
|
||||
column-count: auto;
|
||||
column-width: var(--column-width);
|
||||
|
||||
margin: var(--base-unit-half);
|
||||
width: var(--column-width); /* must match column-width, or am fucked */
|
||||
|
||||
height: var(--column-height);
|
||||
}
|
||||
|
||||
div.book div.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
width: var(--column-width);
|
||||
height: calc( var(--column-height) - 1px ); /* full 100vh was causing an extra page break */
|
||||
|
||||
text-align: center;
|
||||
font-family: "Linux Biolinum", sans-serif;
|
||||
/* break-after: column; */
|
||||
}
|
||||
|
||||
div.book div.title h1 {
|
||||
height: auto;
|
||||
|
||||
flex-grow: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: lowercase;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
font-variant: small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
div.book div.title h1 span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.book div.title h2 {
|
||||
flex-grow: 0;
|
||||
margin-top: var(--line-height);
|
||||
}
|
||||
|
||||
div.book h1 {
|
||||
height: calc( var(--column-height) - 1px);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: lowercase;
|
||||
line-height: var(--column-height);
|
||||
|
||||
font-family: "Linux Biolinum", sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
font-variant: small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
|
||||
color: var(--spot-color);
|
||||
|
||||
text-align: center;
|
||||
break-before: column;
|
||||
}
|
||||
|
||||
/* these are the "shades" that obscure text on the sides of the screen in wider browsers */
|
||||
|
||||
/* originally, I had some SVG arrows hanging around but I don't think they're necessary */
|
||||
|
||||
/* for svg encoding: https://yoksel.github.io/url-encoder/ */
|
||||
/* thus, commented out */
|
||||
|
||||
/*svg original:
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 60 90" xml:space="preserve">
|
||||
<g>
|
||||
<rect x="0" y="0" width="60" height="90" style="fill: rgba(255, 255, 255, 0.75);" />
|
||||
<polygon points="30,45 60,30 60,60" style="fill: rgba(0, 0, 0, 0.125);" />
|
||||
</g>
|
||||
</svg>
|
||||
*/
|
||||
|
||||
div.book::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: calc( ( 100vw - var(--column-width) - var(--base-unit) ) / 2.0 );
|
||||
height: 100vh;
|
||||
|
||||
/* specific to left shade */
|
||||
left: 0;
|
||||
background: linear-gradient(to right,
|
||||
var(--shade-color-origin) 0%,
|
||||
var(--shade-color-origin) 95%,
|
||||
var(--shade-color-destination) 100%);
|
||||
|
||||
/* i just don't think this is necessary...
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='100%25' height='100%25' viewBox='0 0 60 90' xml:space='preserve'%3E%3Cg%3E%3Crect x='0' y='0' width='60' height='90' style='fill: rgba(255, 255, 255, 0.75);' /%3E%3Cpolygon points='30,45 60,30 60,60' style='fill: rgba(0, 0, 0, 0.125);' /%3E%3C/g%3E%3C/svg%3E");
|
||||
*/
|
||||
}
|
||||
|
||||
div.book::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
width: calc( ( 100vw - var(--column-width) - var(--base-unit) ) / 2.0 );
|
||||
height: 100vh;
|
||||
|
||||
/* specific to right shade */
|
||||
right: 0;
|
||||
background: linear-gradient(to left,
|
||||
var(--shade-color-origin) 0%,
|
||||
var(--shade-color-origin) 95%,
|
||||
var(--shade-color-destination) 100%);
|
||||
}
|
||||
|
||||
/* TO MAKE SNAP-SCROLL WORK ON MOBILE */
|
||||
|
||||
/* inspiration:
|
||||
https://github.com/jpamental/moby-dick/pull/5/commits/ec022061684ae4c233fba047fb341b41deeead6c */
|
||||
|
||||
div.shadow-page-container {
|
||||
display: none;
|
||||
position: relative;
|
||||
/* margin: var(--base-unit-half); */
|
||||
width: calc( 100vw * var(--page-count));
|
||||
}
|
||||
|
||||
div.shadow-page {
|
||||
background-color: transparent;
|
||||
float: left;
|
||||
height: 1px;
|
||||
margin-left: 0;
|
||||
margin-right: var(--column-gap);
|
||||
width: var(--column-width);
|
||||
scroll-snap-align: start;
|
||||
position: relative;
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
/* PRINT STYLES */
|
||||
/* this is a mess... */
|
||||
|
||||
div.print-cover {
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
div.print-cover div.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.print-cover div.title h1 {
|
||||
flex-grow: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-transform: lowercase;
|
||||
line-height: calc( var(--line-height) * 2.0 );
|
||||
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
font-variant:small-caps;
|
||||
font-variant-caps: small-caps;
|
||||
font-feature-settings: "kern", "liga", "smcp", "ss11";
|
||||
}
|
||||
|
||||
div.print-cover div.title h1 span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.print-cover div.title h2 {
|
||||
flex-grow: 0;
|
||||
margin-top: var(--line-height);
|
||||
}
|
||||
|
||||
/* RESPONSIVE STUFF */
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
|
||||
:root {
|
||||
--column-width: calc(100vw - var(--base-unit));
|
||||
/* this is quite blunt */
|
||||
/* but it's to compensate for mobile browser chrome */
|
||||
/* maybe there's a more elegant solution? */
|
||||
--column-height: 65vh;
|
||||
}
|
||||
|
||||
body {
|
||||
height: calc( var(--column-height) + var(--vertical-padding) * 2.0 );
|
||||
/* having this set at 100vh was causing that weird mobile slip problem */
|
||||
|
||||
/* this is really interesting: */
|
||||
scroll-snap-type: x mandatory;
|
||||
/* idea from: https://github.com/jpamental/moby-dick/pull/5 */
|
||||
/* with thanks to kyle gach */
|
||||
}
|
||||
|
||||
div.shadow-page-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.book::before, div.book::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
|
||||
div.book {
|
||||
margin-left: calc(50vw - var(--column-width) / 2.0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-height: 1000px) {
|
||||
|
||||
:root {
|
||||
--vertical-padding: calc( var(--base-unit) * 2.0 );
|
||||
}
|
||||
|
||||
div.bookmark {
|
||||
top: calc( var(--vertical-padding) * -1.5 ); /* now THAT is a stupid magic number */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
font-size: 16pt;
|
||||
overflow: visible !important; /* BLERF this fixed a lot of my print style woes */
|
||||
}
|
||||
|
||||
div.book::before, div.book::after, nav, button.toc-button, img.cover, div.last-page, div.bookmark, div.tutorial {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.book div.title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 1.5in;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
line-height: var(--print-line-height);
|
||||
color: rgb(0, 0, 0);
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
div.print-cover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.book {
|
||||
|
||||
/* i really wanted columns to work for printing but... they do not */
|
||||
column-count: 0;
|
||||
column-width: auto;
|
||||
column-gap: 0;
|
||||
column-fill: auto;
|
||||
|
||||
columns: 100% 1;
|
||||
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
/*
|
||||
column-width: auto;
|
||||
column-count: 2;
|
||||
column-gap: var(--base-unit);
|
||||
column-fill: auto;
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--print-line-height);
|
||||
line-height: var(--print-line-height);
|
||||
font-size: 1rem;
|
||||
|
||||
/* this isn't working :( */
|
||||
|
||||
break-before: page !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
break-after: avoid-page !important;
|
||||
}
|
||||
|
||||
small {
|
||||
/* small caps weren't working correctly when actually printed, so! */
|
||||
text-transform: none;
|
||||
font-size: 1.0rem;
|
||||
font-weight: 400;
|
||||
font-variant: none;
|
||||
font-variant-caps: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 306 KiB |
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user