improve styling

index.html

@@ -5,128 +5,147 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>MarkLink document-in-a-URL</title>
+  <link rel="stylesheet" type="text/css" href="styles/hljs-github-light.css" media="prefers-color-scheme: light">
+  <link rel="stylesheet" type="text/css" href="styles/hljs-monokai-dark.css" media="prefers-color-scheme: dark">
   <style>
-    * { box-sizing: border-box; }
+* {
-    html, body {
+  box-sizing: border-box;
-      height: 100%;
-      margin: 0;
-    }
-    body {
-      display: flex;
-      flex-direction: column;
-      padding: 1em;
-      background: #23241f;
-      color: #f8f8f2;
-    }
-    input[type=radio] {
-      position: fixed;
-      bottom: 110%;
-    }
-    #renderview:checked ~ .edit, #renderedit:checked ~ .view { display: none; }
-    label {
-      margin: 0 0 0.5em auto;
-      flex-grow: 0;
-      color: #33F;
-      text-decoration: underline;
-      cursor: pointer;
-      -webkit-user-select: none; /* Safari */        
-      -moz-user-select: none; /* Firefox */
-      -ms-user-select: none; /* IE10+/Edge */
-      user-select: none; /* Standard */
-    }
-    textarea {
-      flex-grow: 1;
-      resize: none;
-    }
-  </style>
-  <style>
-/*
-
-Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
-
-*/
-
-.hljs {
-  background: #23241f;
-  color: #f8f8f2;
 }
 
-.hljs-tag,
+html,
-.hljs-subst {
+body {
-  color: #f8f8f2;
+  height: 100%;
+  margin: 0;
 }
 
-.hljs-strong,
+body {
-.hljs-emphasis {
+  --color-text: hsl(210, 12%, 16%);
-  color: #a8a8a2;
+  --color-background: white;
+  --color-accent: hsla(210, 12%, 16%, 0.3);
+  --color-code-background: hsla(210, 12%, 16%, 0.1);
+  --color-link: #33F;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  background: var(--color-background);
+  color: var(--color-text);
+  font-family: sans-serif;
 }
 
-.hljs-bullet,
+@media (prefers-color-scheme: dark) {
-.hljs-quote,
+  body {
-.hljs-number,
+    --color-text: hsl(60, 30%, 96%);
-.hljs-regexp,
+    --color-background: #1e1f1c;
-.hljs-literal,
+    --color-accent: hsla(60, 30%, 96%, 0.3);
-.hljs-link {
+    --color-code-background: hsla(60, 30%, 96%, 0.1);
-  color: #ae81ff;
+    --color-link: #9AF;
+  }
 }
 
-.hljs-code,
+input[type=radio] {
-.hljs-title,
+  position: fixed;
-.hljs-section,
+  bottom: 110%;
-.hljs-selector-class {
-  color: #a6e22e;
 }
 
-.hljs-strong {
+#renderview:checked~.edit,
-  font-weight: bold;
+#renderedit:checked~.view {
+  display: none;
 }
 
-.hljs-emphasis {
+a[href] {
-  font-style: italic;
+  color: var(--color-link);
 }
 
-.hljs-keyword,
+label {
-.hljs-selector-tag,
+  margin: 0 0 0.5em auto;
-.hljs-name,
+  flex-grow: 0;
-.hljs-attr {
+  color: var(--color-link);
-  color: #f92672;
+  text-decoration: underline;
+  cursor: pointer;
+  -webkit-user-select: none;
+  /* Safari */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* IE10+/Edge */
+  user-select: none;
+  /* Standard */
 }
 
-.hljs-symbol,
+textarea {
-.hljs-attribute {
+  flex-grow: 1;
-  color: #66d9ef;
+  resize: none;
 }
 
-.hljs-params,
+/* Markdown styles */
-.hljs-title.class_,
+main.view {
-.hljs-class .hljs-title {
+  font-size: 18px;
-  color: #f8f8f2;
+  color: var(--color-text);
+  font-family: 'Open Sans Condensed', sans-serif;
+  font-weight: 300;
+  margin: 0 auto;
+  max-width: 48rem;
+  line-height: 1.45;
+  padding: .25rem;
 }
 
-.hljs-string,
+h1,
-.hljs-type,
+h2,
-.hljs-built_in,
+h3,
-.hljs-selector-id,
+h4,
-.hljs-selector-attr,
+h5,
-.hljs-selector-pseudo,
+h6 {
-.hljs-addition,
+  font-family: Arimo, Helvetica, sans-serif;
-.hljs-variable,
-.hljs-template-variable {
-  color: #e6db74;
 }
 
-.hljs-comment,
+h1,
-.hljs-deletion,
+h2,
-.hljs-meta {
+h3 {
-  color: #75715e;
+  border-bottom: 2px solid var(--color-accent);
+  margin-bottom: 1.15rem;
+  padding-bottom: .5rem;
+  text-align: left;
+}
+
+hr {
+  border-color: var(--color-accent);
+}
+
+blockquote {
+  border-left: 8px solid var(--color-accent);
+  padding: 0.5rem 1rem;
+  margin-inline: 0;
+}
+blockquote > :first-child {
+  margin-top: 0;
+}
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+ol, ul {
+  padding-left: 1em;
+}
+
+code {
+  background-color: var(--color-code-background);
+}
+
+pre>code {
+  background-color: transparent;
+}
+
+pre, .hljs {
+  padding: 0.5rem 0.75rem;
+  background-color: var(--color-code-background);
 }
   </style>
 </head>
 <body>
   <input type="radio" name="renderstyle" id="renderview" />
   <input type="radio" name="renderstyle" id="renderedit" checked />
-  <label class="view" for="renderedit">Edit</label>
   <label class="edit" for="renderview">View</label>
+  <label class="view" for="renderedit">Edit</label>
   <div class="edit">URL length: <span id="urlLengthDisplay">0</span> characters</div>
   <main class="view" id="main">
   </main>

styles/hljs-github-light.css

@@ -0,0 +1,116 @@
+/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+
+/* .hljs {
+  color: #24292e;
+  background: #ffffff;
+} */
+
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49;
+}
+
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1;
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5;
+}
+
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62;
+}
+
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209;
+}
+
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d;
+}
+
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a;
+}
+
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e;
+}
+
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold;
+}
+
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f;
+}
+
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic;
+}
+
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold;
+}
+
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4;
+}
+
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0;
+}

styles/hljs-monokai-dark.css

@@ -0,0 +1,80 @@
+/*
+
+Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
+
+*/
+
+/* .hljs {
+  background: #23241f;
+  color: #f8f8f2;
+} */
+
+.hljs-tag,
+.hljs-subst {
+  color: #f8f8f2;
+}
+
+.hljs-strong,
+.hljs-emphasis {
+  color: #a8a8a2;
+}
+
+.hljs-bullet,
+.hljs-quote,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-link {
+  color: #ae81ff;
+}
+
+.hljs-code,
+.hljs-title,
+.hljs-section,
+.hljs-selector-class {
+  color: #a6e22e;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-attr {
+  color: #f92672;
+}
+
+.hljs-symbol,
+.hljs-attribute {
+  color: #66d9ef;
+}
+
+.hljs-params,
+.hljs-title.class_,
+.hljs-class .hljs-title {
+  color: #f8f8f2;
+}
+
+.hljs-string,
+.hljs-type,
+.hljs-built_in,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-variable {
+  color: #e6db74;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}