Merge branch 'master' into two

src/assets/select-arrow.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="62.5" width="116.9">
+    <path d="M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z"/>
+</svg>

src/parts/_base.css

@@ -5,6 +5,7 @@ body {
   max-width: 800px;
   margin: 20px auto;
   padding: 0 10px;
+  word-wrap: break-word;
 
   color: var(--text-main);
   background: var(--background-body);

src/parts/_core.css

@@ -1,6 +1,7 @@
 @import '_base.css';
 @import '_typography.css';
 @import '_forms.css';
+@import '_range.css';
 @import '_links.css';
 @import '_code.css';
 @import '_misc.css';

src/parts/_forms.css

@@ -1,7 +1,9 @@
-button,
+button, select,
 input[type='submit'],
 input[type='button'],
-input[type='checkbox'] {
+input[type='checkbox'],
+input[type='range'],
+input[type='radio'] {
   cursor: pointer;
 }
 
@@ -11,9 +13,9 @@ select {
 }
 
 input,
-select,
 button,
-textarea {
+textarea,
+select {
   color: var(--form-text);
   background-color: var(--background);
 
@@ -29,7 +31,7 @@ textarea {
   outline: none;
 }
 
-input:not([type='checkbox']):not([type='radio']),
+input,
 select,
 button,
 textarea {
@@ -43,6 +45,21 @@ textarea {
   resize: vertical;
 }
 
+select {
+  background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
+  padding-right: 35px;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -63,10 +80,46 @@ textarea:focus {
   box-shadow: 0 0 0 2px var(--focus);
 }
 
+input[type='checkbox'],
+input[type='radio'] {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  margin-right: 2px;
+}
+
+input[type='radio'] {
+  border-radius: 50%;
+}
+
+input[type='checkbox']:checked,
+input[type='radio']:checked {
+  background: var(--button-hover);
+}
+
+input[type='checkbox']:checked::before,
+input[type='radio']:checked::before {
+  content: '•';
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+input[type='checkbox']:checked::before {
+  content: '✔';
+  transform: translateY(-50%) translateY(0.5px) translateX(-6px);
+}
+
 input[type='checkbox']:active,
 input[type='radio']:active,
 input[type='submit']:active,
 input[type='button']:active,
+input[type='range']:active,
 button:active {
   transform: translateY(2px);
 }
@@ -82,3 +135,16 @@ textarea:disabled {
 ::placeholder {
   color: var(--form-placeholder);
 }
+
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}

src/parts/_misc.css

@@ -20,10 +20,14 @@ th {
   text-align: left;
 }
 
-th {
+thead {
   border-bottom: 1px solid var(--border);
 }
 
+tfoot {
+  border-top: 1px solid var(--border);
+}
+
 tbody tr:nth-child(even) {
   background-color: var(--background-alt);
 }
@@ -50,3 +54,48 @@ tbody tr:nth-child(even) {
 ::selection {
   background-color: var(--selection);
 }
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: var(--text-main);
+}
+
+footer {
+  border-top: 1px solid var(--background);
+  padding-top: 10px;
+  font-size: 0.8em;
+  color: var(--text-muted);
+}

src/parts/_range.css

@@ -0,0 +1,87 @@
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: var(--background);
+}

src/parts/_typography.css

@@ -34,15 +34,15 @@ th {
   font-weight: 600;
 }
 
-q:before {
+q::before {
    content: none;
 }
 
-q:after {
+q::after {
    content: none;
 }
 
-blockquote , q{
+blockquote, q {
   border-left: 4px solid var(--focus);
   margin: 1.5em 0em;
   padding: 0.5em 1em;
@@ -50,8 +50,8 @@ blockquote , q{
 }
 
 blockquote > footer {
-  margin-top: 10px;
   font-style: normal;
+  border: 0;
 }
 
 blockquote cite {
@@ -62,15 +62,15 @@ address {
   font-style: normal;
 }
 
-a[href^='mailto']::before {
+a[href^='mailto\:']::before {
   content: '📧 ';
 }
 
-a[href^='tel']::before {
+a[href^='tel\:']::before {
   content: '📞 ';
 }
 
-a[href^='sms']::before {
+a[href^='sms\:']::before {
   content: '💬 ';
 }
 
@@ -79,4 +79,4 @@ mark {
   border-radius: 2px;
   padding: 0px 2px 0px 2px;
   color: #000000;
-}
+}

src/variables-dark.css

@@ -2,26 +2,21 @@
   --background-body: #202b38;
   --background: #161f27;
   --background-alt: #1a242f;
-
   --selection: #161f27;
-
   --text-main: #dbdbdb;
-  --text-bright: #ffffff;
-
+  --text-bright: #fff;
+  --text-muted: #717880;
   --links: #41adff;
   --focus: #0096bfab;
   --border: #dbdbdb;
   --code: #ffbe85;
-
   --animation-duration: 0.1s;
   --button-hover: #324759;
-
   --scrollbar-thumb: var(--button-hover);
   --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%));
-
   --form-placeholder: #a9a9a9;
-  --form-text: #ffffff;
-
+  --form-text: #fff;
   --variable: #d941e2;
   --highlight: #efdb43;
+  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
 }

src/variables-light.css

@@ -1,27 +1,22 @@
 :root {
-  --background-body: #ffffff;
+  --background-body: #fff;
   --background: #efefef;
   --background-alt: #f7f7f7;
-
   --selection: #9e9e9e;
-
   --text-main: #363636;
-  --text-bright: #000000;
-
+  --text-bright: #000;
+  --text-muted: #999;
   --links: #0076d1;
   --focus: #0096bfab;
   --border: #dbdbdb;
-  --code: #000000;
-
+  --code: #000;
   --animation-duration: 0.1s;
-  --button-hover: #dddddd;
-
+  --button-hover: #ddd;
   --scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%));
   --scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%));
-
   --form-placeholder: #949494;
-  --form-text: #000000;
-
+  --form-text: #000;
   --variable: #39a33c;
-  --highlight: #ffff00;
+  --highlight: #ff0;
+  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
 }