diff --git a/dist/dark-legacy.css b/dist/dark-legacy.css new file mode 100755 index 0000000..c56386c --- /dev/null +++ b/dist/dark-legacy.css @@ -0,0 +1,10 @@ +/** + * Dark-themed version for legacy browsers: + * Loads the compiled, standalone version of the dark theme, + * but overrides it with the compiled, standalone version of the light theme + * if a system-wide theme preference is set on the user's device. + */ +@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css"); +@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css") (prefers-color-scheme: light); + +/*# sourceMappingURL=dark-legacy.css.map */ diff --git a/dist/dark-legacy.css.map b/dist/dark-legacy.css.map new file mode 100644 index 0000000..6ce20e6 --- /dev/null +++ b/dist/dark-legacy.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["builds/dark-legacy.scss","builds/dark-legacy.css"],"names":[],"mappings":"AAAA;;;;;ECKE;ADEF,qFAAY;AACZ,oHAAmH","file":"dark-legacy.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css') (prefers-color-scheme: light);\n","/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n@import url(\"https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css\");\n@import url(\"https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css\") (prefers-color-scheme: light);\n"]} \ No newline at end of file diff --git a/dist/dark-legacy.min.css b/dist/dark-legacy.min.css new file mode 100755 index 0000000..b8558b0 --- /dev/null +++ b/dist/dark-legacy.min.css @@ -0,0 +1,2 @@ +@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css") (prefers-color-scheme: light); +/*# sourceMappingURL=dark-legacy.min.css.map */ diff --git a/dist/dark-legacy.min.css.map b/dist/dark-legacy.min.css.map new file mode 100644 index 0000000..b9cc9d7 --- /dev/null +++ b/dist/dark-legacy.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["builds/dark-legacy.scss"],"names":[],"mappings":"AAOA,qFAAY,CACZ,oHAAmH","file":"dark-legacy.min.css","sourcesContent":["/**\n * Dark-themed version for legacy browsers:\n * Loads the compiled, standalone version of the dark theme,\n * but overrides it with the compiled, standalone version of the light theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css') (prefers-color-scheme: light);\n"]} \ No newline at end of file diff --git a/dist/dark.css b/dist/dark.css index a13ecb7..164eba5 100644 --- a/dist/dark.css +++ b/dist/dark.css @@ -1,17 +1,65 @@ @charset "UTF-8"; +/** + * Dark-themed version: + * uses dark theme by default but switches to light theme + * if a system-wide theme preference is set on the user's device. + * + * Variables will remain uncompiled so the theme can update dynamically + * at runtime in the browser. + */ +/* To use this file from Sass, import `_variables/_variables-dark` */ +:root { + --background: #202b38; + --background-alt: #161f27; + --selection: #161f27; + --text-main: #dbdbdb; + --text-bright: #ffffff; + --links: #41adff; + --focus: #0096bfab; + --border: #dbdbdb; + --code: #ffbe85; + --animation-duration: 0.1s; + --button-hover: #324759; + --scrollbar-thumb: #324759; + --scrollbar-thumb-hover: #415c73; + --form-placeholder: #a9a9a9; + --form-text: #ffffff; +} + +@media (prefers-color-scheme: light) { + /* To use this file from Sass, import `_variables/_variables-light` */ + :root { + --background: #ffffff; + --background-alt: #efefef; + --selection: #9e9e9e; + --text-main: #363636; + --text-bright: #000000; + --links: #0076d1; + --focus: #0096bfab; + --border: #dbdbdb; + --code: #000000; + --animation-duration: 0.1s; + --button-hover: #dddddd; + --scrollbar-thumb: #d5d5d5; + --scrollbar-thumb-hover: #c4c4c4; + --form-placeholder: #949494; + --form-text: #000000; + } +} + body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; line-height: 1.4; max-width: 800px; margin: 20px auto; padding: 0 10px; - color: #dbdbdb; - background: #202b38; + color: var(--text-main); + background: var(--background); text-rendering: optimizeLegibility; } button, input, textarea { - transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; + transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease; } h1 { @@ -35,7 +83,7 @@ h4, h5, h6, strong { - color: #ffffff; + color: var(--text-bright); } h1, @@ -51,7 +99,7 @@ th { } blockquote { - border-left: 4px solid #0096bfab; + border-left: 4px solid var(--focus); margin: 1.5em 0em; padding: 0.5em 1em; font-style: italic; @@ -95,8 +143,8 @@ select { } input, select, button, textarea { - color: #ffffff; - background-color: #161f27; + color: var(--form-text); + background-color: var(--background-alt); font-family: inherit; font-size: inherit; margin-right: 6px; @@ -127,14 +175,14 @@ button, input[type='submit'], input[type='button'] { button:hover, input[type='submit']:hover, input[type='button']:hover { - background: #324759; + background: var(--button-hover); } input:focus, select:focus, button:focus, textarea:focus { - box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); } input[type='checkbox']:active, @@ -154,24 +202,24 @@ textarea:disabled { } ::-webkit-input-placeholder { - color: #a9a9a9; + color: var(--form-placeholder); } :-ms-input-placeholder { - color: #a9a9a9; + color: var(--form-placeholder); } ::-ms-input-placeholder { - color: #a9a9a9; + color: var(--form-placeholder); } ::placeholder { - color: #a9a9a9; + color: var(--form-placeholder); } a { text-decoration: none; - color: #41adff; + color: var(--links); } a:hover { @@ -179,8 +227,8 @@ a:hover { } code, kbd { - background: #161f27; - color: #ffbe85; + background: var(--background-alt); + color: var(--code); padding: 5px; border-radius: 6px; } @@ -198,7 +246,7 @@ img { hr { border: none; - border-top: 1px solid #dbdbdb; + border-top: 1px solid var(--border); } table { @@ -213,11 +261,11 @@ td, th { } th { - border-bottom: 1px solid #dbdbdb; + border-bottom: 1px solid var(--border); } tbody tr:nth-child(even) { - background-color: #161f27; + background-color: var(--background-alt); } ::-webkit-scrollbar { @@ -226,25 +274,25 @@ tbody tr:nth-child(even) { } ::-webkit-scrollbar-track { - background: #161f27; + background: var(--background-alt); border-radius: 6px; } ::-webkit-scrollbar-thumb { - background: #324759; + background: var(--scrollbar-thumb); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { - background: #415c73; + background: var(--scrollbar-thumb-hover); } ::-moz-selection { - background-color: #161f27; + background-color: var(--selection); } ::selection { - background-color: #161f27; + background-color: var(--selection); } /*# sourceMappingURL=dark.css.map */ diff --git a/dist/dark.css.map b/dist/dark.css.map index 54925b1..2f3f806 100644 --- a/dist/dark.css.map +++ b/dist/dark.css.map @@ -1 +1 @@ -{"version":3,"sources":["dark.css","parts/_base.scss","dark.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;EACE,yKAAyK;EACzK,gBAAgB;EAEhB,gBAAgB;EAChB,iBAAiB;EACjB,eAAe;EAEf,cCHiB;EDIjB,mBCTkB;EDWlB,kCAAkC;ADDpC;;ACIA;EACE,kIAI8C;ADLhD;;AGdA;EACE,gBAAgB;EAChB,aAAa;AHiBf;;AGdA;;;;;;EAME,mBAAmB;AHiBrB;;AGdA;;;;;;;EAOE,cDfmB;AFgCrB;;AGdA;;;;;;;;;EASE,gBAAgB;AHiBlB;;AGdA;EACE,gCD5Be;EC6Bf,iBAAiB;EACjB,kBAAkB;EAClB,kBAAkB;AHiBpB;;AGdA;EACE,gBAAgB;EAChB,kBAAkB;AHiBpB;;AGdA;EACE,kBAAkB;AHiBpB;;AGdA;EACE,kBAAkB;AHiBpB;;AGdA;EACE,cAAS;AHiBX;;AGdA;EACE,cAAS;AHiBX;;AGdA;EACE,cAAS;AHiBX;;AIlFA;;;;EAIE,eAAe;AJqFjB;;AIlFA;;EAEE,cAAc;AJqFhB;;AIlFA;EACE,cFOiB;EENjB,yBFbsB;EEetB,oBAAoB;EACpB,kBAAkB;EAElB,iBAAiB;EACjB,kBAAkB;EAClB,aAAa;EAEb,YAAY;EACZ,kBAAkB;EAClB,aAAa;AJkFf;;AI/EA;;EAEE,wBAAwB;AJkF1B;;AI/EA;EACE,eAAe;EACf,WAAW;EACX,sBAAsB;EACtB,gBAAgB;AJkFlB;;AI/EA;EACE,mBAAmB;EACnB,kBAAkB;AJkFpB;;AI/EA;;;EAGE,mBFnCoB;AFqHtB;;AI/EA;;;;EAIE,+BF9Ce;AFgIjB;;AI/EA;;;;;EAKE,0BAA0B;AJkF5B;;AI/EA;;;;EAIE,mBAAmB;EACnB,WAAW;AJkFb;;AI/EA;EACE,cFxDwB;AF0I1B;;AInFA;EACE,cFxDwB;AF0I1B;;AInFA;EACE,cFxDwB;AF0I1B;;AInFA;EACE,cFxDwB;AF0I1B;;AK7JA;EACE,qBAAqB;EACrB,cHMa;AF0Jf;;AK7JA;EACE,0BAA0B;ALgK5B;;AMtKA;EACE,mBJAsB;EICtB,cJSY;EIRZ,YAAY;EACZ,kBAAkB;ANyKpB;;AMtKA;EACE,aAAa;EACb,cAAc;EACd,gBAAgB;ANyKlB;;AOnLA;EACE,eAAe;EACf,YAAY;APsLd;;AOnLA;EACE,YAAY;EACZ,6BLGc;AFmLhB;;AOnLA;EACE,yBAAyB;EACzB,mBAAmB;EACnB,WAAW;APsLb;;AOnLA;EACE,YAAY;EACZ,gBAAgB;APsLlB;;AOnLA;EACE,gCLZc;AFkMhB;;AOnLA;EACE,yBLzBsB;AF+MxB;;AOnLA;EACE,YAAY;EACZ,WAAW;APsLb;;AOnLA;EACE,mBLlCsB;EKmCtB,kBAAkB;APsLpB;;AOnLA;EACE,mBL3BoB;EK4BpB,kBAAkB;APsLpB;;AOnLA;EACE,mBL5BgD;AFkNlD;;AOnLA;EACE,yBL9CiB;AFoOnB;;AOvLA;EACE,yBL9CiB;AFoOnB","file":"dark.css","sourcesContent":["@charset \"UTF-8\";\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: #dbdbdb;\n background: #202b38;\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: #ffffff;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid #0096bfab;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: #ffffff;\n background-color: #161f27;\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: #324759;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px #0096bfab;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: #a9a9a9;\n}\n\na {\n text-decoration: none;\n color: #41adff;\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: #161f27;\n color: #ffbe85;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid #dbdbdb;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid #dbdbdb;\n}\n\ntbody tr:nth-child(even) {\n background-color: #161f27;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: #161f27;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #324759;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #415c73;\n}\n\n::selection {\n background-color: #161f27;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: $text-main;\n background: $background;\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color $animation-duration linear,\n border-color $animation-duration linear,\n color $animation-duration linear,\n box-shadow $animation-duration linear,\n transform $animation-duration ease;\n}\n","$background: #202b38 !default;\n$background-alt: #161f27 !default;\n\n$selection: #161f27 !default;\n\n$text-main: #dbdbdb !default;\n$text-bright: #ffffff !default;\n\n$links: #41adff !default;\n$focus: #0096bfab !default;\n$border: #dbdbdb !default;\n$code: #ffbe85 !default;\n\n$button-hover: #324759 !default;\n$animation-duration: 0.1s !default;\n\n$scrollbar-thumb: $button-hover;\n$scrollbar-thumb-hover: lighten($button-hover, 8%);\n\n$form-placeholder: #a9a9a9 !default;\n$form-text: #ffffff !default;\n\n@import 'parts/core';","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: $text-bright;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid $focus;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: $form-text;\n background-color: $background-alt;\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: $button-hover;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px $focus;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: $form-placeholder;\n}","a {\n text-decoration: none;\n color: $links;\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: $background-alt;\n color: $code;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid $border;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid $border;\n}\n\ntbody tr:nth-child(even) {\n background-color: $background-alt;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: $background-alt;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: $scrollbar-thumb;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: $scrollbar-thumb-hover;\n}\n\n::selection {\n background-color: $selection;\n}"]} \ No newline at end of file +{"version":3,"sources":["builds/dark.css","builds/dark.scss","_variables/_variables-dark.scss","_variables/_variables-light.scss","parts/_base.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"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","file":"dark.css","sourcesContent":["@charset \"UTF-8\";\n/**\n * Dark-themed version:\n * uses dark theme by default but switches to light theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n/* To use this file from Sass, import `_variables/_variables-dark` */\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n --selection: #161f27;\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n --animation-duration: 0.1s;\n --button-hover: #324759;\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #415c73;\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n\n@media (prefers-color-scheme: light) {\n /* To use this file from Sass, import `_variables/_variables-light` */\n :root {\n --background: #ffffff;\n --background-alt: #efefef;\n --selection: #9e9e9e;\n --text-main: #363636;\n --text-bright: #000000;\n --links: #0076d1;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #000000;\n --animation-duration: 0.1s;\n --button-hover: #dddddd;\n --scrollbar-thumb: #d5d5d5;\n --scrollbar-thumb-hover: #c4c4c4;\n --form-placeholder: #949494;\n --form-text: #000000;\n }\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","/**\n * Dark-themed version:\n * uses dark theme by default but switches to light theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n\n@import '../_variables/_variables-dark';\n\n@media (prefers-color-scheme: light) {\n @import '../_variables/_variables-light';\n}\n\n@import '../parts/core';\n","/* To use this file from Sass, import `_variables/_variables-dark` */\n\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n\n --selection: #161f27;\n\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n\n --animation-duration: 0.1s;\n --button-hover: #324759;\n\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #{lighten(#324759, 8%)};\n\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n","/* To use this file from Sass, import `_variables/_variables-light` */\n\n:root {\n--background: #ffffff;\n--background-alt: #efefef;\n\n--selection: #9e9e9e;\n\n--text-main: #363636;\n--text-bright: #000000;\n\n--links: #0076d1;\n--focus: #0096bfab;\n--border: #dbdbdb;\n--code: #000000;\n\n--animation-duration: 0.1s;\n--button-hover: #dddddd;\n\n--scrollbar-thumb: #{darken( #dddddd, 3% )};\n--scrollbar-thumb-hover: #{darken( #dddddd, 10% )};\n\n--form-placeholder: #949494;\n--form-text: #000000;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/dist/dark.min.css b/dist/dark.min.css index e139b05..87fcb41 100644 --- a/dist/dark.min.css +++ b/dist/dark.min.css @@ -1,2 +1,2 @@ -@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}::-moz-selection{background-color:#161f27}::selection{background-color:#161f27} +@charset "UTF-8";:root{--background:#202b38;--background-alt:#161f27;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:#324759;--scrollbar-thumb-hover:#415c73;--form-placeholder:#a9a9a9;--form-text:#fff}@media (prefers-color-scheme:light){:root{--background:#fff;--background-alt:#efefef;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#d5d5d5;--scrollbar-thumb-hover:#c4c4c4;--form-placeholder:#949494;--form-text:#000}}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background-alt);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background-alt);color:var(--code);padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background-alt);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)} /*# sourceMappingURL=dark.min.css.map */ diff --git a/dist/dark.min.css.map b/dist/dark.min.css.map index acdd384..559edac 100644 --- a/dist/dark.min.css.map +++ b/dist/dark.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["parts/_typography.scss","dark.css","parts/_base.scss","dark.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAwDA,gBCkBA,CC1EA,KACE,6IAAyK,CACzK,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,aCHiB,CDIjB,kBCTkB,CDWlB,iCDDF,CCIA,sBACE,wHDDF,CDdA,GACE,eAAgB,CAChB,YCiBF,CDdA,kBAME,kBCiBF,CDdA,yBAOE,UCiBF,CDdA,8BASE,eCiBF,CDdA,WACE,yCG5Be,CH6Bf,cAAiB,CACjB,gBAAkB,CAClB,iBCiBF,CDdA,kBACE,eAAgB,CAChB,iBCiBF,CDVA,wBACE,iBCiBF,CDdA,uBACE,aCiBF,CDdA,oBACE,aCiBF,CDdA,oBACE,aCiBF,CGlFA,kEAIE,cHqFF,CGlFA,oDAEE,aHqFF,CGlFA,6BACE,UDOiB,CCNjB,wBDbsB,CCetB,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YHkFF,CG/EA,oEAEE,uBHkFF,CG/EA,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eHkFF,CG/EA,6CACE,kBAAmB,CACnB,iBHkFF,CG/EA,+DAGE,kBHkFF,CG/EA,qDAIE,wCHkFF,CG/EA,uHAKE,yBHkFF,CG/EA,iEAIE,kBAAmB,CACnB,UHkFF,CG/EA,4BACE,aHkFF,CGnFA,uBACE,aHkFF,CGnFA,wBACE,aHkFF,CGnFA,cACE,aHkFF,CI7JA,EACE,oBAAqB,CACrB,aJgKF,CI7JA,QACE,yBJgKF,CKtKA,SACE,kBHAsB,CGCtB,aHSY,CGRZ,WAAY,CACZ,iBLyKF,CKtKA,SACE,YAAa,CACb,aAAc,CACd,eLyKF,CMnLA,IACE,cAAe,CACf,WNsLF,CMnLA,GAEE,WJGc,CIHd,4BNsLF,CMnLA,MACE,wBAAyB,CACzB,kBAAmB,CACnB,UNsLF,CMnLA,MACE,WAAY,CACZ,eNsLF,CMnLA,GACE,+BNsLF,CMnLA,uBACE,wBNsLF,CMnLA,oBACE,WAAY,CACZ,UNsLF,CMnLA,0BACE,kBJlCsB,CImCtB,iBAXF,CAcA,0BACE,kBJ3BoB,CI4BpB,iBNsLF,CMnLA,gCACE,kBAXF,CAcA,iBACE,wBNsLF,CMvLA,YACE,wBNsLF","file":"dark.min.css","sourcesContent":["h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: $text-bright;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid $focus;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","@charset \"UTF-8\";\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: #dbdbdb;\n background: #202b38;\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: #ffffff;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid #0096bfab;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: #ffffff;\n background-color: #161f27;\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: #324759;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px #0096bfab;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: #a9a9a9;\n}\n\na {\n text-decoration: none;\n color: #41adff;\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: #161f27;\n color: #ffbe85;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid #dbdbdb;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid #dbdbdb;\n}\n\ntbody tr:nth-child(even) {\n background-color: #161f27;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: #161f27;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #324759;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #415c73;\n}\n\n::selection {\n background-color: #161f27;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: $text-main;\n background: $background;\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color $animation-duration linear,\n border-color $animation-duration linear,\n color $animation-duration linear,\n box-shadow $animation-duration linear,\n transform $animation-duration ease;\n}\n","$background: #202b38 !default;\n$background-alt: #161f27 !default;\n\n$selection: #161f27 !default;\n\n$text-main: #dbdbdb !default;\n$text-bright: #ffffff !default;\n\n$links: #41adff !default;\n$focus: #0096bfab !default;\n$border: #dbdbdb !default;\n$code: #ffbe85 !default;\n\n$button-hover: #324759 !default;\n$animation-duration: 0.1s !default;\n\n$scrollbar-thumb: $button-hover;\n$scrollbar-thumb-hover: lighten($button-hover, 8%);\n\n$form-placeholder: #a9a9a9 !default;\n$form-text: #ffffff !default;\n\n@import 'parts/core';","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: $form-text;\n background-color: $background-alt;\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: $button-hover;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px $focus;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: $form-placeholder;\n}","a {\n text-decoration: none;\n color: $links;\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: $background-alt;\n color: $code;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid $border;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid $border;\n}\n\ntbody tr:nth-child(even) {\n background-color: $background-alt;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: $background-alt;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: $scrollbar-thumb;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: $scrollbar-thumb-hover;\n}\n\n::selection {\n background-color: $selection;\n}"]} \ No newline at end of file +{"version":3,"sources":["parts/_typography.scss","builds/dark.css","_variables/_variables-dark.scss","builds/dark.scss","_variables/_variables-light.scss","parts/_base.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAwDA,gBCkEA,CCxHA,MACE,oBAAa,CACb,wBAAiB,CAEjB,mBAAY,CAEZ,mBAAY,CACZ,kBAAc,CAEd,eAAQ,CACR,4BAAQ,CACR,gBAAS,CACT,cAAO,CAEP,yBAAqB,CACrB,sBAAe,CAEf,yBAAkB,CAClB,+BAAwB,CAExB,0BAAmB,CACnB,gBDGF,CEfA,oCCTA,MACA,iBAAa,CACb,wBAAiB,CAEjB,mBAAY,CAEZ,mBAAY,CACZ,kBAAc,CAEd,eAAQ,CACR,4BAAQ,CACR,gBAAS,CACT,WAAO,CAEP,yBAAqB,CACrB,mBAAe,CAEf,yBAAkB,CAClB,+BAAwB,CAExB,0BAAmB,CACnB,gBHuBE,CACF,CI/CA,KACE,6IAAyK,CACzK,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,sBAAuB,CACvB,4BAA6B,CAE7B,iCJ+CF,CI5CA,sBACE,sOJ+CF,CD9DA,GACE,eAAgB,CAChB,YCiEF,CD9DA,kBAME,kBCiEF,CD9DA,yBAOE,wBCiEF,CD9DA,8BASE,eCiEF,CD9DA,WACE,kCAAmC,CACnC,cAAiB,CACjB,gBAAkB,CAClB,iBCiEF,CD9DA,kBACE,eAAgB,CAChB,iBCiEF,CD1DA,wBACE,iBCiEF,CD9DA,uBACE,aCiEF,CD9DA,oBACE,aCiEF,CD9DA,oBACE,aCiEF,CKlIA,kEAIE,cLqIF,CKlIA,oDAEE,aLqIF,CKlIA,6BACE,sBAAuB,CACvB,sCAAuC,CAEvC,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YLkIF,CK/HA,oEAEE,uBLkIF,CK/HA,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eLkIF,CK/HA,6CACE,kBAAmB,CACnB,iBLkIF,CK/HA,+DAGE,8BLkIF,CK/HA,qDAIE,iCLkIF,CK/HA,uHAKE,yBLkIF,CK/HA,iEAIE,kBAAmB,CACnB,ULkIF,CK/HA,4BACE,6BLkIF,CKnIA,uBACE,6BLkIF,CKnIA,wBACE,6BLkIF,CKnIA,cACE,6BLkIF,CM7MA,EACE,oBAAqB,CACrB,kBNgNF,CM7MA,QACE,yBNgNF,COtNA,SACE,gCAAiC,CACjC,iBAAkB,CAClB,WAAY,CACZ,iBPyNF,COtNA,SACE,YAAa,CACb,aAAc,CACd,ePyNF,CQnOA,IACE,cAAe,CACf,WRsOF,CQnOA,GACE,WAAY,CACZ,kCRsOF,CQnOA,MACE,wBAAyB,CACzB,kBAAmB,CACnB,URsOF,CQnOA,MACE,WAAY,CACZ,eRsOF,CQnOA,GACE,qCRsOF,CQnOA,uBACE,sCRsOF,CQnOA,oBACE,WAAY,CACZ,URsOF,CQnOA,0BACE,gCAAiC,CACjC,iBRsOF,CQnOA,0BACE,iCAAkC,CAClC,iBRsOF,CQnOA,gCACE,uCRsOF,CQnOA,iBACE,iCRsOF,CQvOA,YACE,iCRsOF","file":"dark.min.css","sourcesContent":["h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","@charset \"UTF-8\";\n/**\n * Dark-themed version:\n * uses dark theme by default but switches to light theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n/* To use this file from Sass, import `_variables/_variables-dark` */\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n --selection: #161f27;\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n --animation-duration: 0.1s;\n --button-hover: #324759;\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #415c73;\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n\n@media (prefers-color-scheme: light) {\n /* To use this file from Sass, import `_variables/_variables-light` */\n :root {\n --background: #ffffff;\n --background-alt: #efefef;\n --selection: #9e9e9e;\n --text-main: #363636;\n --text-bright: #000000;\n --links: #0076d1;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #000000;\n --animation-duration: 0.1s;\n --button-hover: #dddddd;\n --scrollbar-thumb: #d5d5d5;\n --scrollbar-thumb-hover: #c4c4c4;\n --form-placeholder: #949494;\n --form-text: #000000;\n }\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","/* To use this file from Sass, import `_variables/_variables-dark` */\n\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n\n --selection: #161f27;\n\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n\n --animation-duration: 0.1s;\n --button-hover: #324759;\n\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #{lighten(#324759, 8%)};\n\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n","/**\n * Dark-themed version:\n * uses dark theme by default but switches to light theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n\n@import '../_variables/_variables-dark';\n\n@media (prefers-color-scheme: light) {\n @import '../_variables/_variables-light';\n}\n\n@import '../parts/core';\n","/* To use this file from Sass, import `_variables/_variables-light` */\n\n:root {\n--background: #ffffff;\n--background-alt: #efefef;\n\n--selection: #9e9e9e;\n\n--text-main: #363636;\n--text-bright: #000000;\n\n--links: #0076d1;\n--focus: #0096bfab;\n--border: #dbdbdb;\n--code: #000000;\n\n--animation-duration: 0.1s;\n--button-hover: #dddddd;\n\n--scrollbar-thumb: #{darken( #dddddd, 3% )};\n--scrollbar-thumb-hover: #{darken( #dddddd, 10% )};\n\n--form-placeholder: #949494;\n--form-text: #000000;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/dist/dark.standalone.css b/dist/dark.standalone.css new file mode 100755 index 0000000..56f6603 --- /dev/null +++ b/dist/dark.standalone.css @@ -0,0 +1,344 @@ +@charset "UTF-8"; +/** + * Standalone dark-themed version. + * Includes dark variables and core, compiled at build time so the final output + * will only include regular CSS, no variables. + */ +/* To use this file from Sass, import `_variables/_variables-dark` */ + +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + line-height: 1.4; + max-width: 800px; + margin: 20px auto; + padding: 0 10px; + color: #dbdbdb; + background: #202b38; + text-rendering: optimizeLegibility; +} + +button { + transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; +} + +input { + transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; +} + +textarea { + transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; +} + +h1 { + font-size: 2.2em; + margin-top: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 12px; +} + +h1 { + color: #ffffff; +} + +h2 { + color: #ffffff; +} + +h3 { + color: #ffffff; +} + +h4 { + color: #ffffff; +} + +h5 { + color: #ffffff; +} + +h6 { + color: #ffffff; +} + +strong { + color: #ffffff; +} + +h1, +h2, +h3, +h4, +h5, +h6, +b, +strong, +th { + font-weight: 600; +} + +blockquote { + border-left: 4px solid #0096bfab; + margin: 1.5em 0em; + padding: 0.5em 1em; + font-style: italic; +} + +blockquote > footer { + margin-top: 10px; + font-style: normal; +} + +blockquote cite { + font-style: normal; +} + +address { + font-style: normal; +} + +a[href^='mailto']::before { + content: '📧 '; +} + +a[href^='tel']::before { + content: '📞 '; +} + +a[href^='sms']::before { + content: '💬 '; +} + +button, +input[type='submit'], +input[type='button'], +input[type='checkbox'] { + cursor: pointer; +} + +input:not([type='checkbox']):not([type='radio']), +select { + display: block; +} + +input { + color: #ffffff; + background-color: #161f27; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +select { + color: #ffffff; + background-color: #161f27; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +button { + color: #ffffff; + background-color: #161f27; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +textarea { + color: #ffffff; + background-color: #161f27; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +input:not([type='checkbox']):not([type='radio']), +select, button, textarea { + -webkit-appearance: none; +} + +textarea { + margin-right: 0; + width: 100%; + box-sizing: border-box; + resize: vertical; +} + +button, input[type='submit'], input[type='button'] { + padding-right: 30px; + padding-left: 30px; +} + +button:hover { + background: #324759; +} + +input[type='submit']:hover { + background: #324759; +} + +input[type='button']:hover { + background: #324759; +} + +input:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +select:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +button:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +textarea:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +input[type='checkbox']:active, +input[type='radio']:active, +input[type='submit']:active, +input[type='button']:active, +button:active { + transform: translateY(2px); +} + +input:disabled, +select:disabled, +button:disabled, +textarea:disabled { + cursor: not-allowed; + opacity: .5; +} + +::-webkit-input-placeholder { + color: #a9a9a9; +} + +:-ms-input-placeholder { + color: #a9a9a9; +} + +::-ms-input-placeholder { + color: #a9a9a9; +} + +::placeholder { + color: #a9a9a9; +} + +a { + text-decoration: none; + color: #41adff; +} + +a:hover { + text-decoration: underline; +} + +code { + background: #161f27; + color: #ffbe85; + padding: 5px; + border-radius: 6px; +} + +kbd { + background: #161f27; + color: #ffbe85; + padding: 5px; + border-radius: 6px; +} + +pre > code { + padding: 10px; + display: block; + overflow-x: auto; +} + +img { + max-width: 100%; + height: auto; +} + +hr { + border: none; + border-top: 1px solid #dbdbdb; +} + +table { + border-collapse: collapse; + margin-bottom: 10px; + width: 100%; +} + +td, th { + padding: 6px; + text-align: left; +} + +th { + border-bottom: 1px solid #dbdbdb; +} + +tbody tr:nth-child(even) { + background-color: #161f27; +} + +::-webkit-scrollbar { + height: 10px; + width: 10px; +} + +::-webkit-scrollbar-track { + background: #161f27; + border-radius: 6px; +} + +::-webkit-scrollbar-thumb { + background: #324759; + border-radius: 6px; +} + +::-webkit-scrollbar-thumb:hover { + background: #415c73; +} + +::-moz-selection { + background-color: #161f27; +} + +::selection { + background-color: #161f27; +} + +/*# sourceMappingURL=dark.standalone.css.map */ diff --git a/dist/dark.standalone.css.map b/dist/dark.standalone.css.map new file mode 100644 index 0000000..ee5f6ac --- /dev/null +++ b/dist/dark.standalone.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["builds/dark.standalone.css","builds/dark.standalone.scss","_variables/_variables-dark.scss","parts/_base.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"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","file":"dark.standalone.css","sourcesContent":["@charset \"UTF-8\";\n/**\n * Standalone dark-themed version.\n * Includes dark variables and core, compiled at build time so the final output\n * will only include regular CSS, no variables.\n */\n/* To use this file from Sass, import `_variables/_variables-dark` */\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n --selection: #161f27;\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n --animation-duration: 0.1s;\n --button-hover: #324759;\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #415c73;\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","/**\n * Standalone dark-themed version.\n * Includes dark variables and core, compiled at build time so the final output\n * will only include regular CSS, no variables.\n */\n\n@import '../_variables/variables-dark';\n@import '../parts/core';\n","/* To use this file from Sass, import `_variables/_variables-dark` */\n\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n\n --selection: #161f27;\n\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n\n --animation-duration: 0.1s;\n --button-hover: #324759;\n\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #{lighten(#324759, 8%)};\n\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/dist/dark.standalone.min.css b/dist/dark.standalone.min.css new file mode 100755 index 0000000..6d51d62 --- /dev/null +++ b/dist/dark.standalone.min.css @@ -0,0 +1,2 @@ +@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}::-moz-selection{background-color:#161f27}::selection{background-color:#161f27} +/*# sourceMappingURL=dark.standalone.min.css.map */ diff --git a/dist/dark.standalone.min.css.map b/dist/dark.standalone.min.css.map new file mode 100644 index 0000000..75e071c --- /dev/null +++ b/dist/dark.standalone.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["parts/_typography.scss","builds/dark.standalone.css","parts/_base.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAwDA,gBC0CA,CClGA,KACE,6IAAyK,CACzK,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,aAAuB,CACvB,kBAA6B,CAE7B,iCDuBF,CCpBA,sBACE,wHDuBF,CDtCA,GACE,eAAgB,CAChB,YCyCF,CDtCA,kBAME,kBCyCF,CDtCA,yBAOE,UCyCF,CDtCA,8BASE,eCyCF,CDtCA,WACE,yCAAmC,CACnC,cAAiB,CACjB,gBAAkB,CAClB,iBCyCF,CDtCA,kBACE,eAAgB,CAChB,iBCyCF,CDlCA,wBACE,iBCyCF,CDtCA,uBACE,aCyCF,CDtCA,oBACE,aCyCF,CDtCA,oBACE,aCyCF,CE1GA,kEAIE,cF6GF,CE1GA,oDAEE,aF6GF,CE1GA,6BACE,UAAuB,CACvB,wBAAuC,CAEvC,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YF0GF,CEvGA,oEAEE,uBF0GF,CEvGA,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eF0GF,CEvGA,6CACE,kBAAmB,CACnB,iBF0GF,CEvGA,+DAGE,kBF0GF,CEvGA,qDAIE,wCF0GF,CEvGA,uHAKE,yBF0GF,CEvGA,iEAIE,kBAAmB,CACnB,UF0GF,CEvGA,4BACE,aF0GF,CE3GA,uBACE,aF0GF,CE3GA,wBACE,aF0GF,CE3GA,cACE,aF0GF,CGrLA,EACE,oBAAqB,CACrB,aHwLF,CGrLA,QACE,yBHwLF,CI9LA,SACE,kBAAiC,CACjC,aAAkB,CAClB,WAAY,CACZ,iBJiMF,CI9LA,SACE,YAAa,CACb,aAAc,CACd,eJiMF,CK3MA,IACE,cAAe,CACf,WL8MF,CK3MA,GAEE,WAAmC,CAAnC,4BL8MF,CK3MA,MACE,wBAAyB,CACzB,kBAAmB,CACnB,UL8MF,CK3MA,MACE,WAAY,CACZ,eL8MF,CK3MA,GACE,+BL8MF,CK3MA,uBACE,wBL8MF,CK3MA,oBACE,WAAY,CACZ,UL8MF,CK3MA,0BACE,kBAAiC,CACjC,iBL8MF,CK3MA,0BACE,kBAAkC,CAClC,iBL8MF,CK3MA,gCACE,kBL8MF,CK3MA,iBACE,wBL8MF,CK/MA,YACE,wBL8MF","file":"dark.standalone.min.css","sourcesContent":["h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","@charset \"UTF-8\";\n/**\n * Standalone dark-themed version.\n * Includes dark variables and core, compiled at build time so the final output\n * will only include regular CSS, no variables.\n */\n/* To use this file from Sass, import `_variables/_variables-dark` */\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n --selection: #161f27;\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n --animation-duration: 0.1s;\n --button-hover: #324759;\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #415c73;\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/dist/light-legacy.css b/dist/light-legacy.css new file mode 100755 index 0000000..83b0401 --- /dev/null +++ b/dist/light-legacy.css @@ -0,0 +1,10 @@ +/** + * Light-themed version for legacy browsers: + * Loads the compiled, standalone version of the light theme at runtime, + * but overrides it with the compiled, standalone version of the dark theme + * if a system-wide theme preference is set on the user's device. + */ +@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css"); +@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css") (prefers-color-scheme: dark); + +/*# sourceMappingURL=light-legacy.css.map */ diff --git a/dist/light-legacy.css.map b/dist/light-legacy.css.map new file mode 100644 index 0000000..f7a6339 --- /dev/null +++ b/dist/light-legacy.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["builds/light-legacy.scss","builds/light-legacy.css"],"names":[],"mappings":"AAAA;;;;;ECKE;ADEF,sFAAY;AACZ,kHAAiH","file":"light-legacy.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css') (prefers-color-scheme: dark);\n","/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n@import url(\"https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css\");\n@import url(\"https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css\") (prefers-color-scheme: dark);\n"]} \ No newline at end of file diff --git a/dist/light-legacy.min.css b/dist/light-legacy.min.css new file mode 100755 index 0000000..db050a6 --- /dev/null +++ b/dist/light-legacy.min.css @@ -0,0 +1,2 @@ +@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css");@import url("https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css") (prefers-color-scheme: dark); +/*# sourceMappingURL=light-legacy.min.css.map */ diff --git a/dist/light-legacy.min.css.map b/dist/light-legacy.min.css.map new file mode 100644 index 0000000..f266bc1 --- /dev/null +++ b/dist/light-legacy.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["builds/light-legacy.scss"],"names":[],"mappings":"AAOA,sFAAY,CACZ,kHAAiH","file":"light-legacy.min.css","sourcesContent":["/**\n * Light-themed version for legacy browsers:\n * Loads the compiled, standalone version of the light theme at runtime,\n * but overrides it with the compiled, standalone version of the dark theme\n * if a system-wide theme preference is set on the user's device.\n */\n\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css');\n@import url('https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css') (prefers-color-scheme: dark);\n"]} \ No newline at end of file diff --git a/dist/light.css b/dist/light.css index 921caf8..f57d3a4 100644 --- a/dist/light.css +++ b/dist/light.css @@ -1,17 +1,65 @@ @charset "UTF-8"; +/** + * Light-themed version: + * uses light theme by default but switches to dark theme + * if a system-wide theme preference is set on the user's device. + * + * Variables will remain uncompiled so the theme can update dynamically + * at runtime in the browser. + */ +/* To use this file from Sass, import `_variables/_variables-light` */ +:root { + --background: #ffffff; + --background-alt: #efefef; + --selection: #9e9e9e; + --text-main: #363636; + --text-bright: #000000; + --links: #0076d1; + --focus: #0096bfab; + --border: #dbdbdb; + --code: #000000; + --animation-duration: 0.1s; + --button-hover: #dddddd; + --scrollbar-thumb: #d5d5d5; + --scrollbar-thumb-hover: #c4c4c4; + --form-placeholder: #949494; + --form-text: #000000; +} + +@media (prefers-color-scheme: dark) { + /* To use this file from Sass, import `_variables/_variables-dark` */ + :root { + --background: #202b38; + --background-alt: #161f27; + --selection: #161f27; + --text-main: #dbdbdb; + --text-bright: #ffffff; + --links: #41adff; + --focus: #0096bfab; + --border: #dbdbdb; + --code: #ffbe85; + --animation-duration: 0.1s; + --button-hover: #324759; + --scrollbar-thumb: #324759; + --scrollbar-thumb-hover: #415c73; + --form-placeholder: #a9a9a9; + --form-text: #ffffff; + } +} + body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; line-height: 1.4; max-width: 800px; margin: 20px auto; padding: 0 10px; - color: #363636; - background: #ffffff; + color: var(--text-main); + background: var(--background); text-rendering: optimizeLegibility; } button, input, textarea { - transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; + transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease; } h1 { @@ -35,7 +83,7 @@ h4, h5, h6, strong { - color: #000000; + color: var(--text-bright); } h1, @@ -51,7 +99,7 @@ th { } blockquote { - border-left: 4px solid #0096bfab; + border-left: 4px solid var(--focus); margin: 1.5em 0em; padding: 0.5em 1em; font-style: italic; @@ -95,8 +143,8 @@ select { } input, select, button, textarea { - color: #000000; - background-color: #efefef; + color: var(--form-text); + background-color: var(--background-alt); font-family: inherit; font-size: inherit; margin-right: 6px; @@ -127,14 +175,14 @@ button, input[type='submit'], input[type='button'] { button:hover, input[type='submit']:hover, input[type='button']:hover { - background: #dddddd; + background: var(--button-hover); } input:focus, select:focus, button:focus, textarea:focus { - box-shadow: 0 0 0 2px #0096bfab; + box-shadow: 0 0 0 2px var(--focus); } input[type='checkbox']:active, @@ -154,24 +202,24 @@ textarea:disabled { } ::-webkit-input-placeholder { - color: #949494; + color: var(--form-placeholder); } :-ms-input-placeholder { - color: #949494; + color: var(--form-placeholder); } ::-ms-input-placeholder { - color: #949494; + color: var(--form-placeholder); } ::placeholder { - color: #949494; + color: var(--form-placeholder); } a { text-decoration: none; - color: #0076d1; + color: var(--links); } a:hover { @@ -179,8 +227,8 @@ a:hover { } code, kbd { - background: #efefef; - color: #000000; + background: var(--background-alt); + color: var(--code); padding: 5px; border-radius: 6px; } @@ -198,7 +246,7 @@ img { hr { border: none; - border-top: 1px solid #dbdbdb; + border-top: 1px solid var(--border); } table { @@ -213,11 +261,11 @@ td, th { } th { - border-bottom: 1px solid #dbdbdb; + border-bottom: 1px solid var(--border); } tbody tr:nth-child(even) { - background-color: #efefef; + background-color: var(--background-alt); } ::-webkit-scrollbar { @@ -226,25 +274,25 @@ tbody tr:nth-child(even) { } ::-webkit-scrollbar-track { - background: #efefef; + background: var(--background-alt); border-radius: 6px; } ::-webkit-scrollbar-thumb { - background: #d5d5d5; + background: var(--scrollbar-thumb); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { - background: #c4c4c4; + background: var(--scrollbar-thumb-hover); } ::-moz-selection { - background-color: #9e9e9e; + background-color: var(--selection); } ::selection { - background-color: #9e9e9e; + background-color: var(--selection); } /*# sourceMappingURL=light.css.map */ diff --git a/dist/light.css.map b/dist/light.css.map index 3fce7d2..05e91e0 100644 --- a/dist/light.css.map +++ b/dist/light.css.map @@ -1 +1 @@ -{"version":3,"sources":["light.css","parts/_base.scss","light.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB;EACE,yKAAyK;EACzK,gBAAgB;EAEhB,gBAAgB;EAChB,iBAAiB;EACjB,eAAe;EAEf,cCHiB;EDIjB,mBCTkB;EDWlB,kCAAkC;ADDpC;;ACIA;EACE,kIAI8C;ADLhD;;AGdA;EACE,gBAAgB;EAChB,aAAa;AHiBf;;AGdA;;;;;;EAME,mBAAmB;AHiBrB;;AGdA;;;;;;;EAOE,cDfmB;AFgCrB;;AGdA;;;;;;;;;EASE,gBAAgB;AHiBlB;;AGdA;EACE,gCD5Be;EC6Bf,iBAAiB;EACjB,kBAAkB;EAClB,kBAAkB;AHiBpB;;AGdA;EACE,gBAAgB;EAChB,kBAAkB;AHiBpB;;AGdA;EACE,kBAAkB;AHiBpB;;AGdA;EACE,kBAAkB;AHiBpB;;AGdA;EACE,cAAS;AHiBX;;AGdA;EACE,cAAS;AHiBX;;AGdA;EACE,cAAS;AHiBX;;AIlFA;;;;EAIE,eAAe;AJqFjB;;AIlFA;;EAEE,cAAc;AJqFhB;;AIlFA;EACE,cFOiB;EENjB,yBFbsB;EEetB,oBAAoB;EACpB,kBAAkB;EAElB,iBAAiB;EACjB,kBAAkB;EAClB,aAAa;EAEb,YAAY;EACZ,kBAAkB;EAClB,aAAa;AJkFf;;AI/EA;;EAEE,wBAAwB;AJkF1B;;AI/EA;EACE,eAAe;EACf,WAAW;EACX,sBAAsB;EACtB,gBAAgB;AJkFlB;;AI/EA;EACE,mBAAmB;EACnB,kBAAkB;AJkFpB;;AI/EA;;;EAGE,mBFnCoB;AFqHtB;;AI/EA;;;;EAIE,+BF9Ce;AFgIjB;;AI/EA;;;;;EAKE,0BAA0B;AJkF5B;;AI/EA;;;;EAIE,mBAAmB;EACnB,WAAW;AJkFb;;AI/EA;EACE,cFxDwB;AF0I1B;;AInFA;EACE,cFxDwB;AF0I1B;;AInFA;EACE,cFxDwB;AF0I1B;;AInFA;EACE,cFxDwB;AF0I1B;;AK7JA;EACE,qBAAqB;EACrB,cHMa;AF0Jf;;AK7JA;EACE,0BAA0B;ALgK5B;;AMtKA;EACE,mBJAsB;EICtB,cJSY;EIRZ,YAAY;EACZ,kBAAkB;ANyKpB;;AMtKA;EACE,aAAa;EACb,cAAc;EACd,gBAAgB;ANyKlB;;AOnLA;EACE,eAAe;EACf,YAAY;APsLd;;AOnLA;EACE,YAAY;EACZ,6BLGc;AFmLhB;;AOnLA;EACE,yBAAyB;EACzB,mBAAmB;EACnB,WAAW;APsLb;;AOnLA;EACE,YAAY;EACZ,gBAAgB;APsLlB;;AOnLA;EACE,gCLZc;AFkMhB;;AOnLA;EACE,yBLzBsB;AF+MxB;;AOnLA;EACE,YAAY;EACZ,WAAW;APsLb;;AOnLA;EACE,mBLlCsB;EKmCtB,kBAAkB;APsLpB;;AOnLA;EACE,mBLxByC;EKyBzC,kBAAkB;APsLpB;;AOnLA;EACE,mBL5BgD;AFkNlD;;AOnLA;EACE,yBL9CiB;AFoOnB;;AOvLA;EACE,yBL9CiB;AFoOnB","file":"light.css","sourcesContent":["@charset \"UTF-8\";\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: #363636;\n background: #ffffff;\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: #000000;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid #0096bfab;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: #000000;\n background-color: #efefef;\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: #dddddd;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px #0096bfab;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: #949494;\n}\n\na {\n text-decoration: none;\n color: #0076d1;\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: #efefef;\n color: #000000;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid #dbdbdb;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid #dbdbdb;\n}\n\ntbody tr:nth-child(even) {\n background-color: #efefef;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: #efefef;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #d5d5d5;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #c4c4c4;\n}\n\n::selection {\n background-color: #9e9e9e;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: $text-main;\n background: $background;\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color $animation-duration linear,\n border-color $animation-duration linear,\n color $animation-duration linear,\n box-shadow $animation-duration linear,\n transform $animation-duration ease;\n}\n","$background: #ffffff !default;\n$background-alt: #efefef !default;\n\n$selection: #9e9e9e !default;\n\n$text-main: #363636 !default;\n$text-bright: #000000 !default;\n\n$links: #0076d1 !default;\n$focus: #0096bfab !default;\n$border: #dbdbdb !default;\n$code: #000000 !default;\n\n$button-hover: #dddddd !default;\n$animation-duration: 0.1s !default;\n\n$scrollbar-thumb: darken($button-hover, 3%);\n$scrollbar-thumb-hover: darken($button-hover, 10%);\n\n$form-placeholder: #949494 !default;\n$form-text: #000000 !default;\n\n@import 'parts/core';","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: $text-bright;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid $focus;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: $form-text;\n background-color: $background-alt;\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: $button-hover;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px $focus;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: $form-placeholder;\n}","a {\n text-decoration: none;\n color: $links;\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: $background-alt;\n color: $code;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid $border;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid $border;\n}\n\ntbody tr:nth-child(even) {\n background-color: $background-alt;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: $background-alt;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: $scrollbar-thumb;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: $scrollbar-thumb-hover;\n}\n\n::selection {\n background-color: $selection;\n}"]} \ No newline at end of file +{"version":3,"sources":["builds/light.css","builds/light.scss","_variables/_variables-light.scss","_variables/_variables-dark.scss","parts/_base.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"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","file":"light.css","sourcesContent":["@charset \"UTF-8\";\n/**\n * Light-themed version:\n * uses light theme by default but switches to dark theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n/* To use this file from Sass, import `_variables/_variables-light` */\n:root {\n --background: #ffffff;\n --background-alt: #efefef;\n --selection: #9e9e9e;\n --text-main: #363636;\n --text-bright: #000000;\n --links: #0076d1;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #000000;\n --animation-duration: 0.1s;\n --button-hover: #dddddd;\n --scrollbar-thumb: #d5d5d5;\n --scrollbar-thumb-hover: #c4c4c4;\n --form-placeholder: #949494;\n --form-text: #000000;\n}\n\n@media (prefers-color-scheme: dark) {\n /* To use this file from Sass, import `_variables/_variables-dark` */\n :root {\n --background: #202b38;\n --background-alt: #161f27;\n --selection: #161f27;\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n --animation-duration: 0.1s;\n --button-hover: #324759;\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #415c73;\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n }\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","/**\n * Light-themed version:\n * uses light theme by default but switches to dark theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n\n@import '../_variables/variables-light';\n\n@media (prefers-color-scheme: dark) {\n @import '../_variables/variables-dark';\n}\n\n@import '../parts/core';","/* To use this file from Sass, import `_variables/_variables-light` */\n\n:root {\n--background: #ffffff;\n--background-alt: #efefef;\n\n--selection: #9e9e9e;\n\n--text-main: #363636;\n--text-bright: #000000;\n\n--links: #0076d1;\n--focus: #0096bfab;\n--border: #dbdbdb;\n--code: #000000;\n\n--animation-duration: 0.1s;\n--button-hover: #dddddd;\n\n--scrollbar-thumb: #{darken( #dddddd, 3% )};\n--scrollbar-thumb-hover: #{darken( #dddddd, 10% )};\n\n--form-placeholder: #949494;\n--form-text: #000000;\n}\n","/* To use this file from Sass, import `_variables/_variables-dark` */\n\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n\n --selection: #161f27;\n\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n\n --animation-duration: 0.1s;\n --button-hover: #324759;\n\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #{lighten(#324759, 8%)};\n\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/dist/light.min.css b/dist/light.min.css index 6c8d56e..95505f3 100644 --- a/dist/light.min.css +++ b/dist/light.min.css @@ -1,2 +1,2 @@ -@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}::-moz-selection{background-color:#9e9e9e}::selection{background-color:#9e9e9e} +@charset "UTF-8";:root{--background:#fff;--background-alt:#efefef;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#d5d5d5;--scrollbar-thumb-hover:#c4c4c4;--form-placeholder:#949494;--form-text:#000}@media (prefers-color-scheme:dark){:root{--background:#202b38;--background-alt:#161f27;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:#324759;--scrollbar-thumb-hover:#415c73;--form-placeholder:#a9a9a9;--form-text:#fff}}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background-alt);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background-alt);color:var(--code);padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background-alt);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)} /*# sourceMappingURL=light.min.css.map */ diff --git a/dist/light.min.css.map b/dist/light.min.css.map index 7d63e6f..c5777cb 100644 --- a/dist/light.min.css.map +++ b/dist/light.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["parts/_typography.scss","light.css","parts/_base.scss","light.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAwDA,gBCkBA,CC1EA,KACE,6IAAyK,CACzK,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,aCHiB,CDIjB,eCTkB,CDWlB,iCDDF,CCIA,sBACE,wHDDF,CDdA,GACE,eAAgB,CAChB,YCiBF,CDdA,kBAME,kBCiBF,CDdA,yBAOE,UCiBF,CDdA,8BASE,eCiBF,CDdA,WACE,yCG5Be,CH6Bf,cAAiB,CACjB,gBAAkB,CAClB,iBCiBF,CDdA,kBACE,eAAgB,CAChB,iBCiBF,CDVA,wBACE,iBCiBF,CDdA,uBACE,aCiBF,CDdA,oBACE,aCiBF,CDdA,oBACE,aCiBF,CGlFA,kEAIE,cHqFF,CGlFA,oDAEE,aHqFF,CGlFA,6BACE,UDOiB,CCNjB,wBDbsB,CCetB,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YHkFF,CG/EA,oEAEE,uBHkFF,CG/EA,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eHkFF,CG/EA,6CACE,kBAAmB,CACnB,iBHkFF,CG/EA,+DAGE,eHkFF,CG/EA,qDAIE,wCHkFF,CG/EA,uHAKE,yBHkFF,CG/EA,iEAIE,kBAAmB,CACnB,UHkFF,CG/EA,4BACE,aHkFF,CGnFA,uBACE,aHkFF,CGnFA,wBACE,aHkFF,CGnFA,cACE,aHkFF,CI7JA,EACE,oBAAqB,CACrB,aJgKF,CI7JA,QACE,yBJgKF,CKtKA,SACE,kBHAsB,CGCtB,UHSY,CGRZ,WAAY,CACZ,iBLyKF,CKtKA,SACE,YAAa,CACb,aAAc,CACd,eLyKF,CMnLA,IACE,cAAe,CACf,WNsLF,CMnLA,GAEE,WJGc,CIHd,4BNsLF,CMnLA,MACE,wBAAyB,CACzB,kBAAmB,CACnB,UNsLF,CMnLA,MACE,WAAY,CACZ,eNsLF,CMnLA,GACE,+BNsLF,CMnLA,uBACE,wBNsLF,CMnLA,oBACE,WAAY,CACZ,UNsLF,CMnLA,0BACE,kBJlCsB,CImCtB,iBAXF,CAcA,0BACE,kBJxByC,CIyBzC,iBNsLF,CMnLA,gCACE,kBAXF,CAcA,iBACE,wBNsLF,CMvLA,YACE,wBNsLF","file":"light.min.css","sourcesContent":["h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: $text-bright;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid $focus;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","@charset \"UTF-8\";\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: #363636;\n background: #ffffff;\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: #000000;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid #0096bfab;\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: #000000;\n background-color: #efefef;\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: #dddddd;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px #0096bfab;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: #949494;\n}\n\na {\n text-decoration: none;\n color: #0076d1;\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: #efefef;\n color: #000000;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid #dbdbdb;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid #dbdbdb;\n}\n\ntbody tr:nth-child(even) {\n background-color: #efefef;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: #efefef;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: #d5d5d5;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: #c4c4c4;\n}\n\n::selection {\n background-color: #9e9e9e;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: $text-main;\n background: $background;\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color $animation-duration linear,\n border-color $animation-duration linear,\n color $animation-duration linear,\n box-shadow $animation-duration linear,\n transform $animation-duration ease;\n}\n","$background: #ffffff !default;\n$background-alt: #efefef !default;\n\n$selection: #9e9e9e !default;\n\n$text-main: #363636 !default;\n$text-bright: #000000 !default;\n\n$links: #0076d1 !default;\n$focus: #0096bfab !default;\n$border: #dbdbdb !default;\n$code: #000000 !default;\n\n$button-hover: #dddddd !default;\n$animation-duration: 0.1s !default;\n\n$scrollbar-thumb: darken($button-hover, 3%);\n$scrollbar-thumb-hover: darken($button-hover, 10%);\n\n$form-placeholder: #949494 !default;\n$form-text: #000000 !default;\n\n@import 'parts/core';","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: $form-text;\n background-color: $background-alt;\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: $button-hover;\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px $focus;\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: $form-placeholder;\n}","a {\n text-decoration: none;\n color: $links;\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: $background-alt;\n color: $code;\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid $border;\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid $border;\n}\n\ntbody tr:nth-child(even) {\n background-color: $background-alt;\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: $background-alt;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: $scrollbar-thumb;\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: $scrollbar-thumb-hover;\n}\n\n::selection {\n background-color: $selection;\n}"]} \ No newline at end of file +{"version":3,"sources":["parts/_typography.scss","builds/light.css","_variables/_variables-light.scss","builds/light.scss","_variables/_variables-dark.scss","parts/_base.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAwDA,gBCkEA,CCxHA,MACA,iBAAa,CACb,wBAAiB,CAEjB,mBAAY,CAEZ,mBAAY,CACZ,kBAAc,CAEd,eAAQ,CACR,4BAAQ,CACR,gBAAS,CACT,WAAO,CAEP,yBAAqB,CACrB,mBAAe,CAEf,yBAAkB,CAClB,+BAAwB,CAExB,0BAAmB,CACnB,gBDGA,CEfA,mCCTA,MACE,oBAAa,CACb,wBAAiB,CAEjB,mBAAY,CAEZ,mBAAY,CACZ,kBAAc,CAEd,eAAQ,CACR,4BAAQ,CACR,gBAAS,CACT,cAAO,CAEP,yBAAqB,CACrB,sBAAe,CAEf,yBAAkB,CAClB,+BAAwB,CAExB,0BAAmB,CACnB,gBHuBA,CACF,CI/CA,KACE,6IAAyK,CACzK,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,sBAAuB,CACvB,4BAA6B,CAE7B,iCJ+CF,CI5CA,sBACE,sOJ+CF,CD9DA,GACE,eAAgB,CAChB,YCiEF,CD9DA,kBAME,kBCiEF,CD9DA,yBAOE,wBCiEF,CD9DA,8BASE,eCiEF,CD9DA,WACE,kCAAmC,CACnC,cAAiB,CACjB,gBAAkB,CAClB,iBCiEF,CD9DA,kBACE,eAAgB,CAChB,iBCiEF,CD1DA,wBACE,iBCiEF,CD9DA,uBACE,aCiEF,CD9DA,oBACE,aCiEF,CD9DA,oBACE,aCiEF,CKlIA,kEAIE,cLqIF,CKlIA,oDAEE,aLqIF,CKlIA,6BACE,sBAAuB,CACvB,sCAAuC,CAEvC,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YLkIF,CK/HA,oEAEE,uBLkIF,CK/HA,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eLkIF,CK/HA,6CACE,kBAAmB,CACnB,iBLkIF,CK/HA,+DAGE,8BLkIF,CK/HA,qDAIE,iCLkIF,CK/HA,uHAKE,yBLkIF,CK/HA,iEAIE,kBAAmB,CACnB,ULkIF,CK/HA,4BACE,6BLkIF,CKnIA,uBACE,6BLkIF,CKnIA,wBACE,6BLkIF,CKnIA,cACE,6BLkIF,CM7MA,EACE,oBAAqB,CACrB,kBNgNF,CM7MA,QACE,yBNgNF,COtNA,SACE,gCAAiC,CACjC,iBAAkB,CAClB,WAAY,CACZ,iBPyNF,COtNA,SACE,YAAa,CACb,aAAc,CACd,ePyNF,CQnOA,IACE,cAAe,CACf,WRsOF,CQnOA,GACE,WAAY,CACZ,kCRsOF,CQnOA,MACE,wBAAyB,CACzB,kBAAmB,CACnB,URsOF,CQnOA,MACE,WAAY,CACZ,eRsOF,CQnOA,GACE,qCRsOF,CQnOA,uBACE,sCRsOF,CQnOA,oBACE,WAAY,CACZ,URsOF,CQnOA,0BACE,gCAAiC,CACjC,iBRsOF,CQnOA,0BACE,iCAAkC,CAClC,iBRsOF,CQnOA,gCACE,uCRsOF,CQnOA,iBACE,iCRsOF,CQvOA,YACE,iCRsOF","file":"light.min.css","sourcesContent":["h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","@charset \"UTF-8\";\n/**\n * Light-themed version:\n * uses light theme by default but switches to dark theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n/* To use this file from Sass, import `_variables/_variables-light` */\n:root {\n --background: #ffffff;\n --background-alt: #efefef;\n --selection: #9e9e9e;\n --text-main: #363636;\n --text-bright: #000000;\n --links: #0076d1;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #000000;\n --animation-duration: 0.1s;\n --button-hover: #dddddd;\n --scrollbar-thumb: #d5d5d5;\n --scrollbar-thumb-hover: #c4c4c4;\n --form-placeholder: #949494;\n --form-text: #000000;\n}\n\n@media (prefers-color-scheme: dark) {\n /* To use this file from Sass, import `_variables/_variables-dark` */\n :root {\n --background: #202b38;\n --background-alt: #161f27;\n --selection: #161f27;\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n --animation-duration: 0.1s;\n --button-hover: #324759;\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #415c73;\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n }\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","/* To use this file from Sass, import `_variables/_variables-light` */\n\n:root {\n--background: #ffffff;\n--background-alt: #efefef;\n\n--selection: #9e9e9e;\n\n--text-main: #363636;\n--text-bright: #000000;\n\n--links: #0076d1;\n--focus: #0096bfab;\n--border: #dbdbdb;\n--code: #000000;\n\n--animation-duration: 0.1s;\n--button-hover: #dddddd;\n\n--scrollbar-thumb: #{darken( #dddddd, 3% )};\n--scrollbar-thumb-hover: #{darken( #dddddd, 10% )};\n\n--form-placeholder: #949494;\n--form-text: #000000;\n}\n","/**\n * Light-themed version:\n * uses light theme by default but switches to dark theme\n * if a system-wide theme preference is set on the user's device.\n *\n * Variables will remain uncompiled so the theme can update dynamically\n * at runtime in the browser.\n */\n\n@import '../_variables/variables-light';\n\n@media (prefers-color-scheme: dark) {\n @import '../_variables/variables-dark';\n}\n\n@import '../parts/core';","/* To use this file from Sass, import `_variables/_variables-dark` */\n\n:root {\n --background: #202b38;\n --background-alt: #161f27;\n\n --selection: #161f27;\n\n --text-main: #dbdbdb;\n --text-bright: #ffffff;\n\n --links: #41adff;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #ffbe85;\n\n --animation-duration: 0.1s;\n --button-hover: #324759;\n\n --scrollbar-thumb: #324759;\n --scrollbar-thumb-hover: #{lighten(#324759, 8%)};\n\n --form-placeholder: #a9a9a9;\n --form-text: #ffffff;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/dist/light.standalone.css b/dist/light.standalone.css new file mode 100755 index 0000000..ae474f3 --- /dev/null +++ b/dist/light.standalone.css @@ -0,0 +1,344 @@ +@charset "UTF-8"; +/** + * Standalone light-themed version. + * Includes light variables and core, compiled at build time so the final output + * will only include regular CSS, no variables. + */ +/* To use this file from Sass, import `_variables/_variables-light` */ + +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + line-height: 1.4; + max-width: 800px; + margin: 20px auto; + padding: 0 10px; + color: #363636; + background: #ffffff; + text-rendering: optimizeLegibility; +} + +button { + transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; +} + +input { + transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; +} + +textarea { + transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; +} + +h1 { + font-size: 2.2em; + margin-top: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 12px; +} + +h1 { + color: #000000; +} + +h2 { + color: #000000; +} + +h3 { + color: #000000; +} + +h4 { + color: #000000; +} + +h5 { + color: #000000; +} + +h6 { + color: #000000; +} + +strong { + color: #000000; +} + +h1, +h2, +h3, +h4, +h5, +h6, +b, +strong, +th { + font-weight: 600; +} + +blockquote { + border-left: 4px solid #0096bfab; + margin: 1.5em 0em; + padding: 0.5em 1em; + font-style: italic; +} + +blockquote > footer { + margin-top: 10px; + font-style: normal; +} + +blockquote cite { + font-style: normal; +} + +address { + font-style: normal; +} + +a[href^='mailto']::before { + content: '📧 '; +} + +a[href^='tel']::before { + content: '📞 '; +} + +a[href^='sms']::before { + content: '💬 '; +} + +button, +input[type='submit'], +input[type='button'], +input[type='checkbox'] { + cursor: pointer; +} + +input:not([type='checkbox']):not([type='radio']), +select { + display: block; +} + +input { + color: #000000; + background-color: #efefef; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +select { + color: #000000; + background-color: #efefef; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +button { + color: #000000; + background-color: #efefef; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +textarea { + color: #000000; + background-color: #efefef; + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +input:not([type='checkbox']):not([type='radio']), +select, button, textarea { + -webkit-appearance: none; +} + +textarea { + margin-right: 0; + width: 100%; + box-sizing: border-box; + resize: vertical; +} + +button, input[type='submit'], input[type='button'] { + padding-right: 30px; + padding-left: 30px; +} + +button:hover { + background: #dddddd; +} + +input[type='submit']:hover { + background: #dddddd; +} + +input[type='button']:hover { + background: #dddddd; +} + +input:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +select:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +button:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +textarea:focus { + box-shadow: 0 0 0 2px #0096bfab; +} + +input[type='checkbox']:active, +input[type='radio']:active, +input[type='submit']:active, +input[type='button']:active, +button:active { + transform: translateY(2px); +} + +input:disabled, +select:disabled, +button:disabled, +textarea:disabled { + cursor: not-allowed; + opacity: .5; +} + +::-webkit-input-placeholder { + color: #949494; +} + +:-ms-input-placeholder { + color: #949494; +} + +::-ms-input-placeholder { + color: #949494; +} + +::placeholder { + color: #949494; +} + +a { + text-decoration: none; + color: #0076d1; +} + +a:hover { + text-decoration: underline; +} + +code { + background: #efefef; + color: #000000; + padding: 5px; + border-radius: 6px; +} + +kbd { + background: #efefef; + color: #000000; + padding: 5px; + border-radius: 6px; +} + +pre > code { + padding: 10px; + display: block; + overflow-x: auto; +} + +img { + max-width: 100%; + height: auto; +} + +hr { + border: none; + border-top: 1px solid #dbdbdb; +} + +table { + border-collapse: collapse; + margin-bottom: 10px; + width: 100%; +} + +td, th { + padding: 6px; + text-align: left; +} + +th { + border-bottom: 1px solid #dbdbdb; +} + +tbody tr:nth-child(even) { + background-color: #efefef; +} + +::-webkit-scrollbar { + height: 10px; + width: 10px; +} + +::-webkit-scrollbar-track { + background: #efefef; + border-radius: 6px; +} + +::-webkit-scrollbar-thumb { + background: #d5d5d5; + border-radius: 6px; +} + +::-webkit-scrollbar-thumb:hover { + background: #c4c4c4; +} + +::-moz-selection { + background-color: #9e9e9e; +} + +::selection { + background-color: #9e9e9e; +} + +/*# sourceMappingURL=light.standalone.css.map */ diff --git a/dist/light.standalone.css.map b/dist/light.standalone.css.map new file mode 100644 index 0000000..97a748a --- /dev/null +++ b/dist/light.standalone.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["builds/light.standalone.css","builds/light.standalone.scss","_variables/_variables-light.scss","parts/_base.scss","parts/_typography.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"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","file":"light.standalone.css","sourcesContent":["@charset \"UTF-8\";\n/**\n * Standalone light-themed version.\n * Includes light variables and core, compiled at build time so the final output\n * will only include regular CSS, no variables.\n */\n/* To use this file from Sass, import `_variables/_variables-light` */\n:root {\n --background: #ffffff;\n --background-alt: #efefef;\n --selection: #9e9e9e;\n --text-main: #363636;\n --text-bright: #000000;\n --links: #0076d1;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #000000;\n --animation-duration: 0.1s;\n --button-hover: #dddddd;\n --scrollbar-thumb: #d5d5d5;\n --scrollbar-thumb-hover: #c4c4c4;\n --form-placeholder: #949494;\n --form-text: #000000;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","/**\n * Standalone light-themed version.\n * Includes light variables and core, compiled at build time so the final output\n * will only include regular CSS, no variables.\n */\n\n@import '../_variables/variables-light';\n@import '../parts/core';\n","/* To use this file from Sass, import `_variables/_variables-light` */\n\n:root {\n--background: #ffffff;\n--background-alt: #efefef;\n\n--selection: #9e9e9e;\n\n--text-main: #363636;\n--text-bright: #000000;\n\n--links: #0076d1;\n--focus: #0096bfab;\n--border: #dbdbdb;\n--code: #000000;\n\n--animation-duration: 0.1s;\n--button-hover: #dddddd;\n\n--scrollbar-thumb: #{darken( #dddddd, 3% )};\n--scrollbar-thumb-hover: #{darken( #dddddd, 10% )};\n\n--form-placeholder: #949494;\n--form-text: #000000;\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/dist/light.standalone.min.css b/dist/light.standalone.min.css new file mode 100755 index 0000000..25c6e92 --- /dev/null +++ b/dist/light.standalone.min.css @@ -0,0 +1,2 @@ +@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}::-moz-selection{background-color:#9e9e9e}::selection{background-color:#9e9e9e} +/*# sourceMappingURL=light.standalone.min.css.map */ diff --git a/dist/light.standalone.min.css.map b/dist/light.standalone.min.css.map new file mode 100644 index 0000000..5ce7eab --- /dev/null +++ b/dist/light.standalone.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["parts/_typography.scss","builds/light.standalone.css","parts/_base.scss","parts/_forms.scss","parts/_links.scss","parts/_code.scss","parts/_misc.scss"],"names":[],"mappings":"AAwDA,gBC0CA,CClGA,KACE,6IAAyK,CACzK,eAAgB,CAEhB,eAAgB,CAChB,gBAAiB,CACjB,cAAe,CAEf,aAAuB,CACvB,eAA6B,CAE7B,iCDuBF,CCpBA,sBACE,wHDuBF,CDtCA,GACE,eAAgB,CAChB,YCyCF,CDtCA,kBAME,kBCyCF,CDtCA,yBAOE,UCyCF,CDtCA,8BASE,eCyCF,CDtCA,WACE,yCAAmC,CACnC,cAAiB,CACjB,gBAAkB,CAClB,iBCyCF,CDtCA,kBACE,eAAgB,CAChB,iBCyCF,CDlCA,wBACE,iBCyCF,CDtCA,uBACE,aCyCF,CDtCA,oBACE,aCyCF,CDtCA,oBACE,aCyCF,CE1GA,kEAIE,cF6GF,CE1GA,oDAEE,aF6GF,CE1GA,6BACE,UAAuB,CACvB,wBAAuC,CAEvC,mBAAoB,CACpB,iBAAkB,CAElB,gBAAiB,CACjB,iBAAkB,CAClB,YAAa,CAEb,WAAY,CACZ,iBAAkB,CAClB,YF0GF,CEvGA,oEAEE,uBF0GF,CEvGA,SACE,cAAe,CACf,UAAW,CACX,qBAAsB,CACtB,eF0GF,CEvGA,6CACE,kBAAmB,CACnB,iBF0GF,CEvGA,+DAGE,eF0GF,CEvGA,qDAIE,wCF0GF,CEvGA,uHAKE,yBF0GF,CEvGA,iEAIE,kBAAmB,CACnB,UF0GF,CEvGA,4BACE,aF0GF,CE3GA,uBACE,aF0GF,CE3GA,wBACE,aF0GF,CE3GA,cACE,aF0GF,CGrLA,EACE,oBAAqB,CACrB,aHwLF,CGrLA,QACE,yBHwLF,CI9LA,SACE,kBAAiC,CACjC,UAAkB,CAClB,WAAY,CACZ,iBJiMF,CI9LA,SACE,YAAa,CACb,aAAc,CACd,eJiMF,CK3MA,IACE,cAAe,CACf,WL8MF,CK3MA,GAEE,WAAmC,CAAnC,4BL8MF,CK3MA,MACE,wBAAyB,CACzB,kBAAmB,CACnB,UL8MF,CK3MA,MACE,WAAY,CACZ,eL8MF,CK3MA,GACE,+BL8MF,CK3MA,uBACE,wBL8MF,CK3MA,oBACE,WAAY,CACZ,UL8MF,CK3MA,0BACE,kBAAiC,CACjC,iBL8MF,CK3MA,0BACE,kBAAkC,CAClC,iBL8MF,CK3MA,gCACE,kBL8MF,CK3MA,iBACE,wBL8MF,CK/MA,YACE,wBL8MF","file":"light.standalone.min.css","sourcesContent":["h1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}","@charset \"UTF-8\";\n/**\n * Standalone light-themed version.\n * Includes light variables and core, compiled at build time so the final output\n * will only include regular CSS, no variables.\n */\n/* To use this file from Sass, import `_variables/_variables-light` */\n:root {\n --background: #ffffff;\n --background-alt: #efefef;\n --selection: #9e9e9e;\n --text-main: #363636;\n --text-bright: #000000;\n --links: #0076d1;\n --focus: #0096bfab;\n --border: #dbdbdb;\n --code: #000000;\n --animation-duration: 0.1s;\n --button-hover: #dddddd;\n --scrollbar-thumb: #d5d5d5;\n --scrollbar-thumb-hover: #c4c4c4;\n --form-placeholder: #949494;\n --form-text: #000000;\n}\n\nbody {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n color: var(--text-main);\n background: var(--background);\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;\n}\n\nh1 {\n font-size: 2.2em;\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-bottom: 12px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nstrong {\n color: var(--text-bright);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nb,\nstrong,\nth {\n font-weight: 600;\n}\n\nblockquote {\n border-left: 4px solid var(--focus);\n margin: 1.5em 0em;\n padding: 0.5em 1em;\n font-style: italic;\n}\n\nblockquote > footer {\n margin-top: 10px;\n font-style: normal;\n}\n\nblockquote cite {\n font-style: normal;\n}\n\naddress {\n font-style: normal;\n}\n\na[href^='mailto']::before {\n content: '📧 ';\n}\n\na[href^='tel']::before {\n content: '📞 ';\n}\n\na[href^='sms']::before {\n content: '💬 ';\n}\n\nbutton,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n font-family: inherit;\n font-size: inherit;\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}\n\na {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}\n\ncode, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}\n","body {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n line-height: 1.4;\n\n max-width: 800px;\n margin: 20px auto;\n padding: 0 10px;\n\n color: var(--text-main);\n background: var(--background);\n\n text-rendering: optimizeLegibility;\n}\n\nbutton, input, textarea {\n transition: background-color var(--animation-duration) linear,\n border-color var(--animation-duration) linear,\n color var(--animation-duration) linear,\n box-shadow var(--animation-duration) linear,\n transform var(--animation-duration) ease;\n}\n","button,\ninput[type='submit'],\ninput[type='button'],\ninput[type='checkbox'] {\n cursor: pointer;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect {\n display: block;\n}\n\ninput, select, button, textarea {\n color: var(--form-text);\n background-color: var(--background-alt);\n\n font-family: inherit;\n font-size: inherit;\n\n margin-right: 6px;\n margin-bottom: 6px;\n padding: 10px;\n\n border: none;\n border-radius: 6px;\n outline: none;\n}\n\ninput:not([type='checkbox']):not([type='radio']),\nselect, button, textarea {\n -webkit-appearance: none;\n}\n\ntextarea {\n margin-right: 0;\n width: 100%;\n box-sizing: border-box;\n resize: vertical;\n}\n\nbutton, input[type='submit'], input[type='button'] {\n padding-right: 30px;\n padding-left: 30px;\n}\n\nbutton:hover,\ninput[type='submit']:hover,\ninput[type='button']:hover {\n background: var(--button-hover);\n}\n\ninput:focus,\nselect:focus,\nbutton:focus,\ntextarea:focus {\n box-shadow: 0 0 0 2px var(--focus);\n}\n\ninput[type='checkbox']:active,\ninput[type='radio']:active,\ninput[type='submit']:active,\ninput[type='button']:active,\nbutton:active {\n transform: translateY(2px);\n}\n\ninput:disabled,\nselect:disabled,\nbutton:disabled,\ntextarea:disabled {\n cursor: not-allowed;\n opacity: .5;\n}\n\n::placeholder {\n color: var(--form-placeholder);\n}","a {\n text-decoration: none;\n color: var(--links);\n}\n\na:hover {\n text-decoration: underline;\n}","code, kbd {\n background: var(--background-alt);\n color: var(--code);\n padding: 5px;\n border-radius: 6px;\n}\n\npre > code {\n padding: 10px;\n display: block;\n overflow-x: auto;\n}","img {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n border: none;\n border-top: 1px solid var(--border);\n}\n\ntable {\n border-collapse: collapse;\n margin-bottom: 10px;\n width: 100%;\n}\n\ntd, th {\n padding: 6px;\n text-align: left;\n}\n\nth {\n border-bottom: 1px solid var(--border);\n}\n\ntbody tr:nth-child(even) {\n background-color: var(--background-alt);\n}\n\n::-webkit-scrollbar {\n height: 10px;\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: var(--background-alt);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb {\n background: var(--scrollbar-thumb);\n border-radius: 6px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: var(--scrollbar-thumb-hover);\n}\n\n::selection {\n background-color: var(--selection);\n}"]} \ No newline at end of file diff --git a/src/_variables/_variables-dark.scss b/src/_variables/_variables-dark.scss new file mode 100755 index 0000000..7c2d44c --- /dev/null +++ b/src/_variables/_variables-dark.scss @@ -0,0 +1,25 @@ +/* To use this file from Sass, import `_variables/_variables-dark` */ + +:root { + --background: #202b38; + --background-alt: #161f27; + + --selection: #161f27; + + --text-main: #dbdbdb; + --text-bright: #ffffff; + + --links: #41adff; + --focus: #0096bfab; + --border: #dbdbdb; + --code: #ffbe85; + + --animation-duration: 0.1s; + --button-hover: #324759; + + --scrollbar-thumb: #324759; + --scrollbar-thumb-hover: #{lighten(#324759, 8%)}; + + --form-placeholder: #a9a9a9; + --form-text: #ffffff; +} diff --git a/src/_variables/_variables-light.scss b/src/_variables/_variables-light.scss new file mode 100755 index 0000000..3467f8c --- /dev/null +++ b/src/_variables/_variables-light.scss @@ -0,0 +1,25 @@ +/* To use this file from Sass, import `_variables/_variables-light` */ + +:root { +--background: #ffffff; +--background-alt: #efefef; + +--selection: #9e9e9e; + +--text-main: #363636; +--text-bright: #000000; + +--links: #0076d1; +--focus: #0096bfab; +--border: #dbdbdb; +--code: #000000; + +--animation-duration: 0.1s; +--button-hover: #dddddd; + +--scrollbar-thumb: #{darken( #dddddd, 3% )}; +--scrollbar-thumb-hover: #{darken( #dddddd, 10% )}; + +--form-placeholder: #949494; +--form-text: #000000; +} diff --git a/src/variables-dark.scss b/src/variables-dark.scss index 49e5cdd..3412b13 100755 --- a/src/variables-dark.scss +++ b/src/variables-dark.scss @@ -1,4 +1,4 @@ -/* ! To use this file from Sass, import `_variables/_variables-dark` ! */ +/* To use this file from Sass, import `_variables/_variables-dark` */ :root { --background: #202b38; diff --git a/src/variables-light.scss b/src/variables-light.scss index 5ba5d4f..d5189df 100755 --- a/src/variables-light.scss +++ b/src/variables-light.scss @@ -1,4 +1,4 @@ -/* ! To use this file from Sass, import `_variables/_variables-light` ! */ +/* To use this file from Sass, import `_variables/_variables-light` */ :root { --background: #ffffff;