--- /dev/null
+@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400&family=Noto+Sans:wght@400;700&display=swap');
+
+html, body, p, ol, ul, li, dl, dt, dd,
+blockquote, figure, fieldset, legend, textarea,
+pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+ padding: 0;
+}
+
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+p, blockquote, ul, ol, code,
+dl, table, pre, details {
+ margin-bottom: 16px;
+ margin-top: 0;
+}
+
+ul {
+ padding-left: 2em;
+ list-style: disc;
+}
+
+ul ul {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+ol {
+ padding-left: 2em;
+ list-style: decimal;
+}
+
+li p:first-of-type {
+ margin: 0;
+}
+
+li p {
+ margin: 16px 0;
+}
+
+li code {
+ margin: 16px 0;
+}
+
+html {
+ scroll-padding-top: 4rem; /* because we use a sticky header */
+}
+
+body {
+ background: #151515;
+ color: #dedede;
+ font-family: "Noto Sans",sans-serif;
+ font-size: 106%;
+ line-height: 1.5;
+ word-wrap: break-word;
+}
+
+h1 {
+ font-size: 2em;
+}
+
+h2, h3, h4, h5, h6 {
+ padding-bottom: 0.3em;
+ margin-top: 24px;
+ margin-bottom: 16px;
+ font-weight: bold;
+ line-height: 1.25;
+}
+
+h2, h3 {
+ border-bottom: 1px solid #1d272b;
+}
+
+h2 {font-size: 2em;}
+h3 {font-size: 1.5em;}
+h4 {font-size: 1.25em;}
+h5 {font-size: 1em;}
+h6 {font-size: .875em;}
+
+a {
+ color: #ffd787;
+ cursor: pointer;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+a:visited {
+ color: #ffd787;
+}
+
+img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ border: 1px solid;
+}
+
+/* ------- '.one' classes used by 'one-ox' org backend ------- */
+
+.one-hl {
+ font-family: 'Fira Mono', monospace;
+ font-size: 80%;
+ border-radius: 6px;
+}
+
+.one-hl-inline {
+ background: #31424a;
+ padding: 0.2em 0.4em;
+ margin: 0;
+ white-space: break-spaces;
+}
+
+.one-hl-block {
+ background: #161f22;
+ color: #c5c5c5;
+ display: block;
+ overflow: auto;
+ padding: 16px;
+ line-height: 1.45;
+}
+
+.one-blockquote {
+ background: #202d31;
+ border-left: 0.3em solid #31424a;
+ margin: 0px auto 16px;
+ padding: 1em 1em;
+ width: 90%;
+}
+
+.one-blockquote > p:last-child {
+ margin-bottom: 0;
+}
+
+.one-hl-results {
+ background: #202d31 ;
+ border-left: 2px solid #c5c5c5;
+ display: block;
+ margin: auto;
+ padding: 0.5em 1em;
+ overflow: auto;
+ width: 98%;
+}
+
+.one-hl-negation-char { color: #ff6c60} /* font-lock-negation-char-face */
+.one-hl-warning { color: #fd971f} /* font-lock-warning-face */
+.one-hl-variable-name { color: #fd971f} /* font-lock-variable-name-face */
+.one-hl-doc { color: #d3b2a1} /* font-lock-doc-face */
+.one-hl-doc-string { color: #d3b2a1} /* font-lock-doc-string-face */
+.one-hl-string { color: #d3b2a1} /* font-lock-string-face */
+.one-hl-function-name { color: #02d2da} /* font-lock-function-name-face */
+.one-hl-builtin { color: #b2a1d3} /* font-lock-builtin-face */
+.one-hl-type { color: #457f8b} /* font-lock-type-face */
+.one-hl-keyword { color: #f92672} /* font-lock-keyword-face */
+.one-hl-preprocessor { color: #f92672} /* font-lock-preprocessor-face */
+.one-hl-comment-delimiter { color: #8c8c8c} /* font-lock-comment-delimiter-face */
+.one-hl-comment { color: #8c8c8c} /* font-lock-comment-face */
+.one-hl-constant { color: #f5ebb6} /* font-lock-constant-face */
+.one-hl-reference { color: #f5ebb6} /* font-lock-reference-face */
+.one-hl-regexp-grouping-backslash { color: #966046} /* font-lock-regexp-grouping-backslash */
+.one-hl-regexp-grouping-construct { color: #aa86ee} /* font-lock-regexp-grouping-construct */
+.one-hl-number { color: #eedc82} /* font-lock-number-face */
+
+.one-hl-sh-quoted-exec { color: #62bd9c} /* sh-quoted-exec */
+
+/* -------- scrollbar -------- */
+
+::-webkit-scrollbar {
+ width: 1em;
+ height: 1em;
+}
+
+::-webkit-scrollbar-track {
+ background: #202d31;
+}
+
+::-webkit-scrollbar-thumb {
+ background: #31424a;
+ border-radius: 0.5em;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: #31424a;
+}
+
+/* -------- specific to the default render functions -------- */
+
+.header {
+ color: #ffffff;
+ font-size: 2em;
+ font-weight: bold;
+ padding: 0 16px 0 16px;
+ background: #151515;
+ width: 100%;
+ height: 3.5rem;
+ position: fixed;
+ top: 0;
+ left: 0;
+ border-bottom: 1px solid #1d272b;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.header > a {
+ color: inherit;
+ cursor: pointer;
+ text-decoration: none;
+}
+
+.header > a:visited {
+ color: inherit;
+}
+
+.content {
+ margin: 3.5rem auto;
+ padding-top: 1.8rem;
+ max-width: 740px;
+ padding: 0 16px;
+}
+
+.title {
+ text-align: center;
+ padding: 1.8rem 0;
+}
+
+.title-empty {
+ padding-top: 1rem;
+}
+
+/* -------- one-default-home -------- */
+
+#home {
+ margin: 5rem 0 1.5rem 0;
+}
+
+/* -------- one-default-home-list-pages -------- */
+
+#home-list-pages {
+ margin: 5rem 0 1.5rem 0;
+}
+
+#pages ul {
+ padding: 0;
+ list-style: none;
+}
+
+#pages a {
+ display: block;
+ line-height: 1.2em;
+ font-size: 1.2em;
+ color: #dedede;
+ border-bottom: 1px solid #1d272b;
+ padding: 1em 0.3em;
+}
+
+#pages a:hover {
+ text-decoration: none;
+ background: #31424a;
+ color: #ffffff;
+}
+
+/* -------- one-default, one-default-with-toc, one-default-with-sidebar, one-default-doc -------- */
+
+.nav {
+ border-top: 1px solid #c5c5c5;
+ margin-top: 3em;
+ padding: 2em 0;
+ display: flex;
+ justify-content: center;
+ gap: 0.5em;
+ font-weight: bold;
+}
+
+.nav a {
+ display: block;
+ background: #dedede;
+ border-radius: 6px;
+ padding: 0.2em 0.8em;
+ color: #151515;
+ width: 20%;
+ text-align: center;
+}
+
+@media (max-width:600px) {
+ .nav a {
+ width: auto;
+ }
+}
+
+/* -------- one-default-with-toc, one-default-doc -------- */
+
+.toc {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1.8rem;
+ color: #d1d1d1;
+}
+
+.toc > div {
+ padding: 0 1em;
+}
+
+.toc a {
+ color: #d1d1d1;
+}
+
+.toc > div > div:first-child {
+ text-decoration: underline 1px;
+ text-align: center;
+ font-size: 1.2em;
+ margin-bottom: 16px;
+}
+
+/* --------- one-default-with-sidebar, one-default-doc --------- */
+
+#sidebar-header {
+ color: #ffffff;
+ font-size: 2em;
+ font-weight: bold;
+ padding: 0 16px 0 16px;
+ background: #151515;
+ width: 100%;
+ height: 3.5rem;
+ position: fixed;
+ top: 0;
+ left: 0;
+ border-bottom: 1px solid #1d272b;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#sidebar-header > a {
+ color: inherit;
+ cursor: pointer;
+ text-decoration: none;
+}
+
+#sidebar-header > a:visited {
+ color: inherit;
+}
+
+#hamburger {
+ cursor: pointer;
+ height: 1em;
+ fill: #dedede;
+ display: none;
+ font-weight: normal;
+ margin-right: 0.3em;
+}
+
+#sidebar-content {
+ margin: 3.5rem auto;
+ display: flex;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1140px;
+ width: 100%;
+ padding: 1em 16px;
+}
+
+#sidebar {
+ border-right: 2px solid #31424a;
+ top: 4.5rem;
+ position: sticky;
+ padding-top: 2.2em;
+ padding-bottom: 6em;
+ width: 250px;
+ max-height: 100vh;
+ overflow-y: auto;
+}
+
+#sidebar a {
+ display: block;
+ color: #dedede;
+}
+
+#sidebar a:hover {
+ text-decoration: none;
+}
+
+#sidebar ul {
+ list-style: none;
+ padding:0;
+}
+
+#sidebar li {
+ padding: 0.5em 0.6em;
+}
+
+#sidebar li:hover {
+ background: #31424a;
+}
+
+article {
+ padding: 0 1.5em;
+ max-width: 640px;
+ width: 100%;
+}
+
+#sidebar-left {
+ width: 0;
+ height: 100%;
+ position: fixed;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ transition: 0.25s;
+ background: #2c444f;
+ overflow: hidden; /* to make the children disappear when width is 0 */
+ overflow-y: auto;
+}
+
+#sidebar-left > div:first-child {
+ height: 3.5rem;
+ font-size: 2em;
+ font-weight: bold;
+ border-bottom: 1px solid #b8b8b8;
+ padding-left: 16px;
+ margin-bottom: 16px;
+ display: flex;
+ align-items: center;
+}
+
+#sidebar-left > ul {
+ padding: 0 16px 0 16px;
+}
+
+#sidebar-left > ul ul {
+ padding-left: 0.8em;
+ margin-left: 3px;
+ border-left: 1px solid #b8b8b8;
+}
+
+#sidebar-left a {
+ color: #dedede;
+ text-decoration: none;
+}
+
+#sidebar-left li {
+ padding: 0.5em 0;
+ list-style-type: none;
+}
+
+#sidebar-main {
+ display: none;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ background: #080808;
+ opacity: 0.80;
+ z-index: 2;
+}
+
+@media (max-width: 840px) {
+ #hamburger {
+ display: block;
+ }
+ #sidebar {
+ display: none;
+ }
+ #sidebar-content {
+ justify-content: center;
+ }
+ #sidebar-header {
+ justify-content: left;
+ }
+ article {
+ padding: 0;
+ }
+}
+
+/* Local Variables: */
+/* css-indent-offset: 2 */
+/* End: */
--- /dev/null
+* shtarkov.net
+:PROPERTIES:
+:ONE: one-default-home-list-pages
+:CUSTOM_ID: /
+:END:
+
+[[./assets/cat.png][Cat]]
+
+* List all website's pages on the home page
+:PROPERTIES:
+:ONE: one-default-home-list-pages
+:CUSTOM_ID: /blog/default-home-list-pages/
+:END:
+
+This page is rendered with the default render function
+~one-default-home-list-pages~ specified in ~ONE~ org property which lists
+below all the pages on the website. You can use it instead of
+~one-default-home~ for your home page.
+
+* The default page
+:PROPERTIES:
+:ONE: one-default
+:CUSTOM_ID: /blog/default/
+:END:
+
+This page is rendered with the default render function ~one-default~
+specified in ~ONE~ org property.
+
+** Do you want a table of content?
+
+As you can see, ~one-default~ doesn't add a table of content (TOC). If
+you want a default render function that adds the TOC to the page you can
+use the render function ~one-default-with-toc~ presented in [[#/blog/one-default-with-toc/][The default
+page with a TOC]].
+
+** Headline foo
+*** Headline bar
+
+Some content.
+
+*** Headline baz
+
+#+BEGIN_SRC bash :results verbatim
+tree
+#+END_SRC
+
+#+RESULTS:
+#+begin_example
+.
+├── assets
+│ └── one.css
+├── one.org
+└── public
+ ├── blog
+ │ ├── default
+ │ │ └── index.html
+ │ ├── default-home-list-pages
+ │ │ └── index.html
+ │ ├── one-default-doc
+ │ │ └── index.html
+ │ ├── one-default-with-sidebar
+ │ │ └── index.html
+ │ └── one-default-with-toc
+ │ └── index.html
+ ├── index.html
+ └── one.css
+
+8 directories, 9 files
+#+end_example
+
+* The default page with a TOC
+:PROPERTIES:
+:ONE: one-default-with-toc
+:CUSTOM_ID: /blog/one-default-with-toc/
+:END:
+
+This page is rendered with the render function ~one-default-with-toc~
+specified in the org property ~ONE~.
+
+** Do you want a sidebar?
+
+Perhaps you want a sidebar listing all the pages on your website, as
+many modern documentation sites do. If so, you can use the default
+render function ~one-default-with-sidebar~ presented in [[#/blog/one-default-with-sidebar/][The default page
+with a sidebar]].
+
+** Headline foo
+*** Headline bar
+
+Some content.
+
+*** Headline baz
+
+#+BEGIN_SRC bash :results verbatim
+tree
+#+END_SRC
+
+#+RESULTS:
+#+begin_example
+.
+├── assets
+│ └── one.css
+├── one.org
+└── public
+ ├── blog
+ │ ├── default
+ │ │ └── index.html
+ │ ├── default-home-list-pages
+ │ │ └── index.html
+ │ ├── one-default-doc
+ │ │ └── index.html
+ │ ├── one-default-with-sidebar
+ │ │ └── index.html
+ │ └── one-default-with-toc
+ │ └── index.html
+ ├── index.html
+ └── one.css
+
+8 directories, 9 files
+#+end_example
+
+* The default page with a sidebar
+:PROPERTIES:
+:ONE: one-default-with-sidebar
+:CUSTOM_ID: /blog/one-default-with-sidebar/
+:END:
+
+This page is rendered with the render function ~one-default-with-sidebar~
+specified in the org property ~ONE~.
+
+** Do you want a sidebar and a TOC?
+
+Perhaps you want a sidebar listing all the pages on your website and a
+table of content, as many modern documentation sites do. If so, you
+can use the default render function ~one-default-doc~ presented in [[#/blog/one-default-doc/][The
+default page with TOC and sidebar]].
+
+** Headline foo
+*** Headline bar
+
+Some content.
+
+*** Headline baz
+
+#+BEGIN_SRC bash :results verbatim
+tree
+#+END_SRC
+
+#+RESULTS:
+#+begin_example
+.
+├── assets
+│ └── one.css
+├── one.org
+└── public
+ ├── blog
+ │ ├── default
+ │ │ └── index.html
+ │ ├── default-home-list-pages
+ │ │ └── index.html
+ │ ├── one-default-doc
+ │ │ └── index.html
+ │ ├── one-default-with-sidebar
+ │ │ └── index.html
+ │ └── one-default-with-toc
+ │ └── index.html
+ ├── index.html
+ └── one.css
+
+8 directories, 9 files
+#+end_example
+
+* The default page with TOC and sidebar
+:PROPERTIES:
+:ONE: one-default-doc
+:CUSTOM_ID: /blog/one-default-doc/
+:END:
+
+This page is rendered with the function ~one-default-doc~ specified
+in the org property ~ONE~.
+
+** Do you want to know more about one.el?
+
+Check the documentation at https://one.tonyaldon.com.
+
+** Headline foo
+*** Headline bar
+
+Some content.
+
+*** Headline baz
+
+#+BEGIN_SRC bash :results verbatim
+tree
+#+END_SRC
+
+#+RESULTS:
+#+begin_example
+.
+├── assets
+│ └── one.css
+├── one.org
+└── public
+ ├── blog
+ │ ├── default
+ │ │ └── index.html
+ │ ├── default-home-list-pages
+ │ │ └── index.html
+ │ ├── one-default-doc
+ │ │ └── index.html
+ │ ├── one-default-with-sidebar
+ │ │ └── index.html
+ │ └── one-default-with-toc
+ │ └── index.html
+ ├── index.html
+ └── one.css
+
+8 directories, 9 files
+#+end_example
projects / shtarkov.net.git / commitdiff
