diff --git a/Makefile b/Makefile index fa2f1b4..9e92575 100644 --- a/Makefile +++ b/Makefile @@ -27,12 +27,9 @@ dir: org-roam.info @printf "Generating $@\n" @$(MAKEINFO) --html --no-split $(MANUAL_HTML_ARGS) $< -html-dir: - @printf "Generating org-roam/*.html\n" - @$(MAKEINFO) --html $(MANUAL_HTML_ARGS) org-roam.texi - mv org-roam manual - cp -r assets manual - cp -r images manual +html-dir: + @$(MAKEINFO) --html --no-split $(MANUAL_HTML_ARGS) org-roam.texi + mv org-roam.html manual.html %.pdf: %.texi @printf "Generating $@\n" diff --git a/assets/page.css b/assets/page.css index dd72d4e..7ad9f63 100644 --- a/assets/page.css +++ b/assets/page.css @@ -1,442 +1,41 @@ -/* Import Inter font */ -/* More info at https://github.com/xz/fonts */ -@import url("https://fonts.xz.style/serve/inter.css"); - -:root { - --nc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - --nc-font-mono: "Courier New", Courier, "Ubuntu Mono", "Liberation Mono", - monospace; - --nc-tx-1: #000000; - --nc-tx-2: #1a1a1a; - --nc-bg-1: #ffffff; - --nc-bg-2: #f6f8fa; - --nc-bg-3: #e5e7eb; - --nc-lk-1: #0070f3; - --nc-lk-2: #0366d6; - --nc-lk-tx: #ffffff; - --nc-ac-1: #79ffe1; - --nc-ac-tx: #0c4047; -} - -@media (prefers-color-scheme: dark) { - :root { - --nc-tx-1: #ffffff; - --nc-tx-2: #eeeeee; - --nc-bg-1: #000000; - --nc-bg-2: #111111; - --nc-bg-3: #222222; - --nc-lk-1: #3291ff; - --nc-lk-2: #0070f3; - --nc-lk-tx: #ffffff; - --nc-ac-1: #7928ca; - --nc-ac-tx: #ffffff; - } -} - -* { - /* Reset margins and padding */ - margin: 0; - padding: 0; -} - -address, -area, -article, -aside, -audio, -blockquote, -datalist, -details, -dl, -fieldset, -figure, -form, -input, -iframe, -img, -meter, -nav, -ol, -optgroup, -option, -output, -p, -pre, -progress, -ruby, -section, -table, -textarea, -ul, -video { - /* Margins for most elements */ - margin-bottom: 1rem; -} - -html, -input, -select, -button { - /* Set body font family and some finicky elements */ - font-family: var(--nc-font-sans); -} - body { - /* Center body in page */ - margin: 0 auto; - max-width: 750px; - padding: 2rem; - border-radius: 6px; - overflow-x: hidden; - background: var(--nc-bg-1); - - /* Main body text */ - color: var(--nc-tx-2); - font-size: 1.03rem; - line-height: 1.5; + margin: 5ex 10ex; + max-width: 80ex; + line-height: 1.5; + font-family: sans-serif; } -::selection { - /* Set background color for selected text */ - background: var(--nc-ac-1); - color: var(--nc-ac-tx); +h1, h2, h3 { + font-weight: normal; } -p { - margin-bottom: 1rem; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - line-height: 1; - color: var(--nc-tx-1); - padding-top: 0.875rem; -} - -h1, -h2, -h3 { - color: var(--nc-tx-1); - padding-bottom: 2px; - margin-bottom: 8px; - border-bottom: 1px solid var(--nc-bg-2); -} - -h4, -h5, -h6 { - margin-bottom: 0.3rem; -} - -h1 { - font-size: 2.25rem; -} - -h2 { - font-size: 1.85rem; -} - -h3 { - font-size: 1.55rem; -} - -h4 { - font-size: 1.25rem; -} - -h5 { - font-size: 1rem; -} - -h6 { - font-size: 0.875rem; -} - -a { - color: var(--nc-lk-1); -} - -a:hover { - color: var(--nc-lk-2); -} - -abbr:hover { - /* Set the '?' cursor while hovering an abbreviation */ - cursor: help; -} - -blockquote { - padding: 1.5rem; - background: var(--nc-bg-2); - border-left: 5px solid var(--nc-bg-3); -} - -abbr { - cursor: help; -} - -blockquote *:last-child { - padding-bottom: 0; - margin-bottom: 0; -} - -header { - background: var(--nc-bg-2); - border-bottom: 1px solid var(--nc-bg-3); - padding: 2rem 1.5rem; - - /* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */ - - margin: -2rem calc(0px - (50vw - 50%)) 2rem; - - /* Shorthand for: - - margin-top: -2rem; - margin-bottom: 2rem; - - margin-left: calc(0px - (50vw - 50%)); - margin-right: calc(0px - (50vw - 50%)); */ - - padding-left: calc(50vw - 50%); - padding-right: calc(50vw - 50%); -} - -header h1, -header h2, -header h3 { - padding-bottom: 0; - border-bottom: 0; -} - -header > *:first-child { - margin-top: 0; - padding-top: 0; -} - -header > *:last-child { - margin-bottom: 0; -} - -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - font-size: 1rem; - display: inline-block; - padding: 6px 12px; - text-align: center; - text-decoration: none; - white-space: nowrap; - background: var(--nc-lk-1); - color: var(--nc-lk-tx); - border: 0; - border-radius: 4px; - box-sizing: border-box; - cursor: pointer; - color: var(--nc-lk-tx); -} - -.button[disabled], -button[disabled], -input[type="submit"][disabled], -input[type="reset"][disabled], -input[type="button"][disabled] { - cursor: default; - opacity: 0.5; - - /* Set the [X] cursor while hovering a disabled link */ - cursor: not-allowed; -} - -.button:focus, -.button:hover, -button:focus, -button:hover, -input[type="submit"]:focus, -input[type="submit"]:hover, -input[type="reset"]:focus, -input[type="reset"]:hover, -input[type="button"]:focus, -input[type="button"]:hover { - background: var(--nc-lk-2); -} - -code, -pre, -kbd, -samp { - /* Set the font family for monospaced elements */ - font-family: var(--nc-font-mono); -} - -code, -samp, -kbd, -pre { - /* The main preformatted style. This is changed slightly across different cases. */ - background: var(--nc-bg-2); - border: 1px solid var(--nc-bg-3); - border-radius: 4px; - padding: 3px 6px; - font-size: 0.9rem; -} - -kbd { - /* Makes the kbd element look like a keyboard key */ - border-bottom: 3px solid var(--nc-bg-3); +pre, code { + font-family: x, monospace; } pre { - padding: 1rem 1.4rem; - max-width: 100%; - overflow: auto; + padding: 1ex; + background: #eee; + border: solid 1px #ddd; + min-width: 0; + font-size: 90%; + overflow: auto; } -pre code { - /* When is in a 
, reset it's formatting to blend in */
-  background: inherit;
-  font-size: inherit;
-  color: inherit;
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
-code pre {
-  /* When 
 is in a , reset it's formatting to blend in */
-  display: inline;
-  background: inherit;
-  font-size: inherit;
-  color: inherit;
-  border: 0;
-  padding: 0;
-  margin: 0;
-}
-
-details {
-  /* Make the 
 look more "clickable" */
-  padding: 0.6rem 1rem;
-  background: var(--nc-bg-2);
-  border: 1px solid var(--nc-bg-3);
-  border-radius: 4px;
-}
-
-summary {
-  /* Makes the  look more like a "clickable" link with the pointer cursor */
-  cursor: pointer;
-  font-weight: bold;
-}
-
-details[open] {
-  /* Adjust the 
 padding while open */
-  padding-bottom: 0.75rem;
-}
-
-details[open] summary {
-  /* Adjust the 
 padding while open */
-  margin-bottom: 6px;
-}
-
-details[open] > *:last-child {
-  /* Resets the bottom margin of the last element in the 
 while 
 is opened. This prevents double margins/paddings. */
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: bold;
-}
-
-dd::before {
-  /* Add an arrow to data table definitions */
-  content: "→ ";
-}
-
-hr {
-  /* Reset the border of the 
 separator, then set a better line */
-  border: 0;
-  border-bottom: 1px solid var(--nc-bg-3);
-  margin: 1rem auto;
-}
-
-fieldset {
-  margin-top: 1rem;
-  padding: 2rem;
-  border: 1px solid var(--nc-bg-3);
-  border-radius: 4px;
-}
-
-legend {
-  padding: auto 0.5rem;
-}
-
-textarea {
-  /* Don't let the