basscss-jekyll-theme 0.1.0

data/_sass/basscss-addons/colors.scss

@@ -0,0 +1,27 @@
+/* Basscss Colors */
+
+@import 'basscss-lib/colors-variables';
+
+.black  { color: var(--black) }
+.gray   { color: var(--gray) }
+.silver { color: var(--silver) }
+.white  { color: var(--white) }
+
+.aqua  { color: var(--aqua) }
+.blue  { color: var(--blue) }
+.navy  { color: var(--navy) }
+.teal  { color: var(--teal) }
+.green { color: var(--green) }
+.olive { color: var(--olive) }
+.lime  { color: var(--lime) }
+
+.yellow  { color: var(--yellow) }
+.orange  { color: var(--orange) }
+.red     { color: var(--red) }
+.fuchsia { color: var(--fuchsia) }
+.purple  { color: var(--purple) }
+.maroon  { color: var(--maroon) }
+
+.color-inherit { color: inherit }
+.muted { opacity: .5 }
+

data/_sass/basscss-addons/darken.scss

@@ -0,0 +1,14 @@
+/* Basscss Darken */
+
+.bg-darken-1 { background-color: var(--darken-1) }
+.bg-darken-2 { background-color: var(--darken-2) }
+.bg-darken-3 { background-color: var(--darken-3) }
+.bg-darken-4 { background-color: var(--darken-4) }
+
+:root {
+  --darken-1: rgba(0, 0, 0, .0625);
+  --darken-2: rgba(0, 0, 0, .125);
+  --darken-3: rgba(0, 0, 0, .25);
+  --darken-4: rgba(0, 0, 0, .5);
+}
+

data/_sass/basscss-addons/debug-grid.scss

@@ -0,0 +1,14 @@
+/* Basscss Debug Grid */
+
+.debug-grid {
+  background-image:
+    linear-gradient(transparent 7px, var(--debug-grid-color) 8px),
+    linear-gradient(90deg, transparent 7px, var(--debug-grid-color) 8px);
+  background-position: calc(50% - 4px) top;
+  background-size: 8px 8px;
+}
+
+:root {
+  --debug-grid-color: rgba(0, 255, 255, .25);
+}
+

data/_sass/basscss-addons/forms.scss

@@ -0,0 +1,46 @@
+/* Basscss Forms */
+
+.label {
+  font-size: .875rem;
+  font-weight: bold;
+  display: block;
+  margin-bottom: .5rem;
+}
+
+.input {
+  font-family: inherit;
+  font-size: inherit;
+  display: block;
+  width: 100%;
+  height: 2.5rem;
+  padding: .5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+.select {
+  font-family: inherit;
+  font-size: inherit;
+  display: block;
+  width: 100%;
+  height: 2.5rem;
+  padding: .5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}
+
+.textarea {
+  font-family: inherit;
+  font-size: inherit;
+  display: block;
+  width: 100%;
+  padding: .5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-sizing: border-box;
+}

data/_sass/basscss-addons/highlight-dark.scss

@@ -0,0 +1,141 @@
+/* Basscss Highlight */
+
+@import "colors.css/myth/variables";
+
+.highlight-dark .hljs {
+  color: white;
+  -webkit-text-size-adjust: none;
+}
+
+.highlight-dark .hljs-comment,
+.highlight-dark .diff .hljs-header,
+.highlight-dark .hljs-javadoc {
+  color: var(--hljs-comment);
+  font-style: italic;
+}
+
+.highlight-dark .hljs-keyword,
+.highlight-dark .css .rule .hljs-keyword,
+.highlight-dark .hljs-winutils,
+.highlight-dark .nginx .hljs-title,
+.highlight-dark .hljs-subst,
+.highlight-dark .hljs-request,
+.highlight-dark .hljs-status {
+  color: var(--hljs-keyword);
+  font-weight: bold;
+}
+
+.highlight-dark .hljs-number,
+.highlight-dark .hljs-hexcolor,
+.highlight-dark .ruby .hljs-constant {
+  color: var(--hljs-number);
+}
+
+.highlight-dark .hljs-string,
+.highlight-dark .hljs-tag .hljs-value,
+.highlight-dark .hljs-phpdoc,
+.highlight-dark .hljs-dartdoc,
+.highlight-dark .tex .hljs-formula {
+  color: var(--hljs-string);
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: var(--hljs-title);
+  font-weight: bold;
+}
+
+.highlight-dark .hljs-list .hljs-keyword,
+.highlight-dark .hljs-subst {
+  font-weight: normal;
+}
+
+.highlight-dark .hljs-class .hljs-title,
+.highlight-dark .hljs-type,
+.highlight-dark .vhdl .hljs-literal,
+.highlight-dark .tex .hljs-command {
+  color: var(--hljs-type);
+  font-weight: bold;
+}
+
+.highlight-dark .hljs-tag,
+.highlight-dark .hljs-tag .hljs-title,
+.highlight-dark .hljs-rules .hljs-property,
+.highlight-dark .django .hljs-tag .hljs-keyword {
+  color: var(--hljs-tag);
+  font-weight: normal;
+}
+
+.highlight-dark .hljs-attribute,
+.highlight-dark .hljs-variable,
+.highlight-dark .lisp .hljs-body {
+  color: var(--hljs-attribute);
+}
+
+.highlight-dark .hljs-regexp {
+  color: var(--hljs-regexp);
+}
+
+.highlight-dark .hljs-symbol,
+.highlight-dark .ruby .hljs-symbol .hljs-string,
+.highlight-dark .lisp .hljs-keyword,
+.highlight-dark .clojure .hljs-keyword,
+.highlight-dark .scheme .hljs-keyword,
+.highlight-dark .tex .hljs-special,
+.highlight-dark .hljs-prompt {
+  color: var(--hljs-symbol);
+}
+
+.highlight-dark .hljs-built_in {
+  color: var(--hljs-built-in);
+}
+
+.highlight-dark .hljs-preprocessor,
+.highlight-dark .hljs-pragma,
+.highlight-dark .hljs-pi,
+.highlight-dark .hljs-doctype,
+.highlight-dark .hljs-shebang,
+.highlight-dark .hljs-cdata {
+  color: var(--hljs-preprocessor);
+  font-weight: bold;
+}
+
+.highlight-dark .hljs-deletion {
+  background: var(--hljs-deletion);
+}
+
+.highlight-dark .hljs-addition {
+  background: var(--hljs-addition);
+}
+
+.highlight-dark .diff .hljs-change {
+  background: var(--hljs-change);
+}
+
+.highlight-dark .hljs-chunk {
+  color: var(--hljs-chunk);
+}
+
+
+:root {
+  /* Mapped colors */
+  --hljs-comment: var(--silver);
+  --hljs-keyword: white;
+  --hljs-number: var(--lime);
+  --hljs-string: var(--red);
+  --hljs-title: var(--red);
+  --hljs-type: var(--aqua);
+  --hljs-tag: var(--aqua);
+  --hljs-attribute: var(--lime);
+  --hljs-regexp: var(--lime);
+  --hljs-symbol: var(--fuchsia);
+  --hljs-built-in: var(--aqua);
+  --hljs-preprocessor: var(--silver);
+  --hljs-deletion: var(--fuchsia);
+  --hljs-addition: var(--lime);
+  --hljs-change: var(--aqua);
+  --hljs-chunk: var(--gray);
+
+}
+

data/_sass/basscss-addons/highlight.scss

@@ -0,0 +1,139 @@
+/* Basscss Highlight */
+
+@import "colors.css/src/_variables.css";
+
+.hljs {
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: var(--hljs-comment);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: var(--hljs-keyword);
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: var(--hljs-number);
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.hljs-dartdoc,
+.tex .hljs-formula {
+  color: var(--hljs-string);
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: var(--hljs-title);
+  font-weight: bold;
+}
+
+.hljs-list .hljs-keyword,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: var(--hljs-type);
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: var(--hljs-tag);
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: var(--hljs-attribute);
+}
+
+.hljs-regexp {
+  color: var(--hljs-regexp);
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.clojure .hljs-keyword,
+.scheme .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: var(--hljs-symbol);
+}
+
+.hljs-built_in {
+  color: var(--hljs-built-in);
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: var(--hljs-preprocessor);
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: var(--hljs-deletion);
+}
+
+.hljs-addition {
+  background: var(--hljs-addition);
+}
+
+.diff .hljs-change {
+  background: var(--hljs-change);
+}
+
+.hljs-chunk {
+  color: var(--hljs-chunk);
+}
+
+
+/* Mapped colors */
+:root {
+  --hljs-comment: var(--gray);
+  --hljs-keyword: var(--black);
+  --hljs-number: var(--olive);
+  --hljs-string: var(--blue);
+  --hljs-title: var(--blue);
+  --hljs-type: var(--navy);
+  --hljs-tag: var(--navy);
+  --hljs-attribute: var(--olive);
+  --hljs-regexp: var(--olive);
+  --hljs-symbol: var(--purple);
+  --hljs-built-in: var(--navy);
+  --hljs-preprocessor: var(--gray);
+  --hljs-deletion: var(--fuchsia);
+  --hljs-addition: var(--lime);
+  --hljs-change: var(--navy);
+  --hljs-chunk: var(--silver);
+}
+

data/_sass/basscss-addons/input-range.scss

@@ -0,0 +1,77 @@
+/* Basscss Input Range */
+
+.input-range {
+  vertical-align: middle;
+  background-color: transparent;
+  padding-top: var(--form-field-padding-y);
+  padding-bottom: var(--form-field-padding-y);
+  color: inherit;
+  background-color: transparent;
+  -webkit-appearance: none;
+}
+
+.input-range::-webkit-slider-thumb {
+  position: relative;
+  width: var(--range-thumb-width);
+  height: var(--range-thumb-height);
+  cursor: pointer;
+  margin-top: var(--range-thumb-offset);
+  border-radius: var(--border-radius);
+  background-color: currentcolor;
+  -webkit-appearance: none;
+}
+
+/* Touch screen friendly pseudo element */
+.input-range::-webkit-slider-thumb:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc( -.5 * var(--range-thumb-pseudo-size) + (.5 * var(--range-thumb-height)) );
+  left: calc( (-.5 * var(--range-thumb-pseudo-size)) + (.5 * var(--range-thumb-width)) );
+  width: var(--range-thumb-pseudo-size);
+  height: var(--range-thumb-pseudo-size);
+  opacity: 0;
+}
+
+.input-range::-moz-range-thumb {
+  width: var(--range-thumb-width);
+  height: var(--range-thumb-height);
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  border-color: transparent;
+  border-width: 0;
+  background-color: currentcolor;
+}
+
+.input-range::-webkit-slider-runnable-track {
+  height: var(--range-track-height);
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  background-color: var(--darken-3);
+}
+
+.input-range::-moz-range-track {
+  height: var(--range-track-height);
+  cursor: pointer;
+  border-radius: var(--border-radius);
+  background-color: var(--darken-3);
+}
+
+.input-range:focus {
+  outline: none;
+}
+
+:root {
+  --form-field-padding-x: .5rem;
+  --form-field-padding-y: .5rem;
+  --form-field-height: 2.25rem;
+  --border-radius: 3px;
+  --darken-3: rgba(0, 0, 0, .25);
+
+  --range-thumb-width: var(--form-field-padding-x);
+  --range-thumb-height: calc( var(--form-field-height) - (var(--form-field-padding-y) * 2) );
+  --range-track-height: calc( var(--form-field-padding-y) / 2 );
+  --range-thumb-offset: calc( var(--range-thumb-height) / -2 + (var(--range-track-height) / 2) );
+  --range-thumb-pseudo-size: var(--form-field-height);
+}
+