Merge branch 'master' into feat/select

src/parts/_code.css

@@ -1,9 +1,9 @@
-code,
-kbd {
-  background: var(--background);
+code, samp, time {
+  background:  var(--background);
   color: var(--code);
   padding: 2.5px 5px;
   border-radius: 6px;
+  font-size: 1em;
 }
 
 pre > code {
@@ -11,3 +11,17 @@ pre > code {
   display: block;
   overflow-x: auto;
 }
+
+var {
+  color: var(--variable);
+  font-style: normal;
+  font-family: monospace;
+}
+
+kbd {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-main);
+  padding: 2px 4px 2px 4px;
+}

src/parts/_typography.css

@@ -34,7 +34,15 @@ th {
   font-weight: 600;
 }
 
-blockquote {
+q:before {
+   content: none;
+}
+
+q:after {
+   content: none;
+}
+
+blockquote , q{
   border-left: 4px solid var(--focus);
   margin: 1.5em 0em;
   padding: 0.5em 1em;
@@ -64,4 +72,11 @@ a[href^='tel']::before {
 
 a[href^='sms']::before {
   content: '💬 ';
+}
+
+mark {
+  background-color: var(--highlight);
+  border-radius: 2px;
+  padding: 0px 2px 0px 2px;
+  color: #000000;
 }

src/variables-dark.css

@@ -22,5 +22,8 @@
   --form-placeholder: #a9a9a9;
   --form-text: #ffffff;
 
+  --variable: #d941e2;
+  --highlight: #efdb43;
+
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
 }

src/variables-light.css

@@ -22,5 +22,8 @@
   --form-placeholder: #949494;
   --form-text: #000000;
 
+  --variable: #39a33c;
+  --highlight: #ffff00;
+
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
 }