emsenn.net

@charset "UTF-8";

:root {
  --body-font: sans-serif;
  --header-font: sans-serif;
  --code-font: monospace;
  --primary-color: #ffe;
  --primary-dim-color: #eed;
  --secondary-color: #312;
  --secondary-dim-color: #756;
  --link-color: #880;
  --link-hover-color: #aa2;
  --link-visited-color: #934;
  --link-visited-hover-color: #b56;
  --external-link-color: #008;
  --external-link-hover-color: #60b;
  --external-link-visited-color: #172;
  --external-link-visited-hover-color: #394;
}
@media(prefers-color-scheme:light){
  :root {
     --body-font: sans-serif;
     --header-font: sans-serif;
     --code-font: monospace;
     --primary-color: #756;
     --primary-dim-color: #312;
     --secondary-color: #eed;
     --secondary-dim-color: #ffe;
     --link-color: #880;
     --link-hover-color: #aa2;
     --link-visited-color: #934;
     --link-visited-hover-color: #b56;
  }}
body {
  position: relative;
  min-height: 100%;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  margin: 0 auto;
  font-family: sans-serif;
}
main, #content {
  background-color: var(--primary-dim-color);
  border-left: 1.5em dotted var(--primary-color);
  padding: 1em;
}
header {
  border-bottom: 0.8em dotted var(--secondary-dim-color);
}
h1 { font-size: 2em; margin-bottom: 0; }
h2 {
  border-bottom: 0.3em dotted var(--secondary-dim-color);
}
h2, h3, h4, h5, h6, p, table, ul, ol, .org-src-container {
  width: 60%;
}
aside {
  float: right;
  width: 35%;
}
aside p { width: 100%; }
@media screen and (max-width:760px) {
  h2, h3, h4, h5, h6, p, table, ul, ol, .org-src-container {
     width: 90%;
  }
  aside {
     float: inherit;
     width: 90%;
     border-top: 0.2em dotted var(--secondary-dim-color);
     border-bottom: 0.2em dotted VAR(--secondary-dim-color);
     font-size: 0.8em;
         }
}

footer, #postamble, #preamble {
  padding: 0.5em;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 0.1em solid #444;
}
thead { font-family: sans-serif; }
th, td {
  padding: 0 0.3em;
  border: 0.01em solid #444;
}
img {
  max-width: 80vw;
  vertical-align: middle;
}
pre, .src {
  padding: 0.5em;
  border: 0.1em solid #444;
  white-space: pre-wrap;
  overflow-x: scroll;
  text-overflow: clip;
  scrollbar-width: none;
}
pre::-webkit-scrollbar, .src::-webkit-scrollbar {
  display: none;
}


dt {
  font-weight: normal;
  display: inline-block;
  border-bottom: 0.1rem dotted #444;
}
#text-index dt { border-bottom: none; }
h2, h3, h4, h5, h6, h7, h8, h9, h10 {
  display: block;
  font-family: sans-serif;
  margin: 0.2em auto 0.5em 0;
}
a, .link {
  text-decoration: none;
  color: #880;
  display: inline;
  position: relative;
  border-bottom: 0.1rem dotted;
  line-height: 1.2;
  transition: border 0.3s;
}
a:hover {
  color: #aa2;
  outline-style: none;
  border-bottom: 0.1rem solid;
}
a:visited, .visited-link { color: #934; }
a:visited:hover { color: #b56; }
a:focus {
  outline-style: none;
  border-bottom: 0.1rem solid;
}
::selection { background-color: #777; color: #eee; }
a::selection { background-color: #ccc; }
.org-todo {
  background-color: #ddd;
  color: #333;
  font-size: .8rem;
  float: right;
}
.org-src-container + .example {
  margin-left: 8em;
}
a[href^="https://"]:not([href*="emsenn.net"]):after, a[href^="https://"]:not([href*="emsenn.net"]):visited:after, .external-link:after, .visited-external-link:after {
  content: "^";
  font-size: 0.5em;
  vertical-align: super;
}
a[href^="https://"]:not([href*="emsenn.net"]), .external-link {
  color: var(--external-link-color);
}
a[href^="https://"]:not([href*="emsenn.net"]):hover{
  color: var(--external-link-hover-color);
}
a[href^="https://"]:not([href*="emsenn.net"]):visited, .visited-external-link {
  color: var(--external-link-visited-color);
}
a[href^="https://"]:not([href*="emsenn.net"]):visited:hover{
  color: var(--external-link-visited-hover-color);
}
blockquote {
  border: 0.1em dashed var(--secondary-dim-color);
  padding-left: 0.2em;
}
label.org-src-name {
  margin: 0 0 0 3em;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 0;
}
.skip-to-content {
  opacity: 0;
  position: absolute;
  left: 0.2em;
}
.skip-to-content:focus{
  opacity: 1;
  background-color: var(--secondary-dim-color);
  color: var(--primary-color);
}
ul { max-width: 85%; }
.footpara { display: inline; font-size: 0.8rem; }

<a href="#content" class="skip-to-content">skip to content</a>
<section class="nav"><strong>emsenn's digital garden</strong> 
  <a href="./index.html">
    Homepage</a> | 
  <a href="./theindex.html">
    Index</a>
  <p>This Website was cultivated as a public asset with <a href="https://ko-fi.com/emsenn">support</a> from people like you. <strong><em>Thank you!</em></strong></p>
  <details>
    <summary>Click this sentence for information about my Website.</summary>
    <p>Click each sentence below for more info:</p>
    <ul>
      <li><details>
          <summary>This website was created by Emacs and Org-mode</summary>
          <p>See <a href="https://emsenn.net/gnoponemacs.html">my Emacs configuration</a> to learn how.</p>
      </details></li>
      <li><details>
          <summary>Its content was written by hand.</summary>
          <p>This means there might be mistakes! 
      </details></li>
      <li><details>
          <summary>It uses style to add information to the pages.</summary>
          <ul>
            <li><details>
                <summary>Click this sentence to see how links are styled:</summary>
                <table>
                  <thead><tr>
                      <th scope="col">Color</th>
                      <th scope="col">Link type</th>
                  </tr></thead>
                  <tbody>
                    <tr><td class="link">Sample</td>
                      <td>Unvisited local resource</td></tr>
                    <tr><td class="visited-link">Sample</td>
                      <td>Visited local resource</td></tr>
                    <tr><td class="external-link">Sample</td>
                      <td>Unvisited external resource</td></tr>
                    <tr><td class="visited-external-link">Sample</td>
                      <td>Visited external resource</td></tr>
                  </tbody>
                </table>
            </details></li>
          </ul>
      </details></li>
    </ul>
  </details>
</section>