1 files changed, 295 insertions, 0 deletions
diff --git a/html/styles.css b/html/styles.css
new file mode 100644
index 0000000..8cd39c3
--- /dev/null
+++ b/html/styles.css
@@ -0,0 +1,295 @@
+body {
+  font-family: serif;
+  --main-background: #fff;
+  --main-foreground: #333;
+  --toolbar-background-hover: #eee;
+  --toolbar-background-active: #ccc;
+  --toolbar-border: rgba(12, 12, 13, 0.2);
+  --toolbar-box-shadow: rgba(12, 12, 13, 0.1);
+  --anchor-link: darkblue;
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--main-background);
+  z-index: -1;
+}
+
+.content {
+  max-width: 50em;
+  padding: 1em;
+  margin: auto;
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  /*
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #cacaca,0 0 0 4px #eee;
+  */
+
+  border: 1px solid var(--toolbar-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px var(--toolbar-box-shadow);
+
+  line-height: 1.9;
+
+  background-color: var(--main-background);
+  color: var(--main-foreground);
+}
+
+.mono {
+  font-family:'Cascadia Code Webfont';
+}
+
+div.figure {
+  display: inline-block;
+  text-align:center;
+  margin: 1em;
+  max-width: min(100%, 30em);
+  padding: 0;
+  overflow-x:hidden;
+  border: 1px solid var(--toolbar-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 8px 0 var(--toolbar-box-shadow), 0 6px 20px 0 var(--toolbar-box-shadow);
+}
+
+div.figure .caption {
+  display: block;
+  max-width: 100%;
+
+  margin: auto;
+  padding: .5em;
+}
+
+div.figure img {
+  display: block;
+  width: 110%;
+  margin: 0;
+}
+
+footer {
+  /*display: flex;
+  align-items: center;
+  flex-wrap: wrap;*/
+  display: block;
+  padding-top: 1em;
+  border-top: 1px solid var(--toolbar-border);
+  text-align: right;
+} 
+
+h1 {
+  text-align: center;
+  margin: 0 auto .5em auto;
+}
+
+h3 {
+  border-bottom: 1px solid var(--toolbar-border);
+}
+
+hr {
+  height: 0;
+  border: none;
+  border-bottom: 1px solid var(--toolbar-border);
+}
+
+p {
+  margin: 1em;
+}
+
+li {
+  margin: 0.3em;
+}
+
+a {
+  color: var(--anchor-link);
+}
+
+a.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+footer div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.validation-icons {
+  margin-left:auto;
+  text-align:right;
+}
+
+.footer-author {
+  display: block;
+  margin-left:auto;
+  text-align:right;
+}
+
+.validation-icons ~ .footer-author {
+  margin-left: 0;
+}
+
+.nav {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+  margin-bottom: 1em;
+}
+
+.prose-box-link-ctnr {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: auto;
+  margin-top: .4em;
+  margin-bottom: .9em;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.box, .box-link {
+  text-decoration: underline;
+  display: inline-block;
+  align-items: center;
+  /*inline-block;*/
+
+  background-color: var(--main-background);
+
+  padding: .3em;
+  margin: auto;
+
+  border: 1px solid var(--toolbar-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px var(--toolbar-box-shadow);
+  overflow-x: hidden;
+}
+
+.box-link a {
+}
+
+.box {
+  display: flex;
+  flex-direction:row;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: .2em;
+}
+
+a.box-link {
+  cursor: pointer;
+}
+
+.box-link {
+  text-decoration: underline;
+  display: block;
+}
+
+.nav a.box-link {
+  margin: 0.2em;
+  font-variant: small-caps;
+  text-decoration: none;
+}
+
+footer .box-link, footer .box {
+  text-decoration: none;
+  font-variant: small-caps;
+}
+
+.box-link:hover {
+  background-color: var(--toolbar-background-hover);
+}
+
+.i-am-having-fun-cb {
+  display: none;
+}
+
+.lbl {
+  cursor: pointer;
+
+  display: inline-block;
+  text-decoration: none;
+  font-variant: small-caps;
+  padding: 4px;
+  margin: .2em
+}
+
+#defaultfont-rb:checked ~ * {
+  font-family: inherit;
+  font-weight: normal;
+}
+
+#monofont-rb:checked ~ * {
+  font-family: 'Cascadia Code Webfont';
+  line-height: 2.1;
+}
+
+#dyslexicfont-rb:checked ~ * {
+  font-family: OpenDyslexic;
+  font-weight: normal;
+  line-height: 2.1;
+}
+
+footer label.lbl {
+  background-color: var(--main-background);
+}
+
+#maxwidth-cb:checked ~ .content {
+  max-width: 100%;
+  box-shadow: none;
+  border: none;
+  padding: 1em;
+}
+
+#sepia-cb:checked ~ * {
+  --main-background: #f4ecd8;
+  --main-foreground: #5b4636;
+  --toolbar-border: rgba(19, 14, 11, 0.2);
+  --toolbar-border-shadow: rgba(19, 14, 11, 0.1);
+  --toolbar-background-hover: #e4dcc8;
+  --toolbar-background-active: #d4ccb8;
+}
+
+#defaultfont-rb:checked ~ footer .defaultfont-rb {
+  background-color: var(--toolbar-background-active);
+}
+
+#monofont-rb:checked ~ footer .monofont-rb {
+  background-color: var(--toolbar-background-active);
+}
+
+#dyslexicfont-rb:checked ~ footer .dyslexicfont-rb {
+  background-color: var(--toolbar-background-active);
+}
+
+#maxwidth-cb:checked ~ footer .maxwidth-cb {
+  background-color: var(--toolbar-background-active);
+}
+
+#sepia-cb:checked ~ footer .sepia-cb {
+  background-color: var(--toolbar-background-active);
+}
+
+.link-to-top {
+  text-decoration: none;
+}
+
+@media only screen and (max-width: 50em) {
+  .content {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  div label.maxwidth-cb {
+    background-color: var(--toolbar-background-active);
+  }
+}