pocket-theme 0.4.1

data/_sass/_c-elements.scss

@@ -0,0 +1,142 @@
+html {
+	font-size: clamp(112.5%, 2.2vw, 125%);
+	scroll-behavior: smooth;
+}
+
+a {
+	text-decoration-thickness: var(--text-decoration-thickness);
+}
+
+a:link {
+	color: var(--link);
+}
+
+a:visited {
+	color: var(--visited);
+}
+
+a:hover,
+a:active,
+a:focus {
+	color: var(--hover);
+}
+
+code {
+	font-size: var(--font-size-code);
+}
+
+code {
+    font-size: var(--font-size-code);
+    font-family: var(--monospace);
+    color: var(--code-color);
+}
+
+figure {
+    margin: 0;
+}
+
+pre {
+    overflow: auto;
+    padding: 0.75rem 1.5rem;
+    background-color: var(--pre-bg);
+    color: var(--pre-foreground);
+    border: 1px solid var(--border-img-color);
+    line-height: var(--lh-title);
+}
+
+pre code {
+    color: var(--pre-foreground);
+}
+
+table {
+    border-collapse: collapse;
+    overflow: auto;
+}
+
+td,
+th {
+    border: 1px solid var(--border-form-color);
+    padding: 0.5rem;
+    text-align: left;
+}
+
+th {
+    font-weight: 600;
+}
+
+blockquote {
+    margin: 0;
+    padding-left: 1.5rem;
+    font-size: 0.875rem;
+}
+
+hr {
+    padding: 0;
+    margin: 2rem 0;
+    border: 0.1rem double var(--accent);
+}
+
+svg {
+    max-width: 1em !important;
+    height: auto !important;
+}
+
+
+article h2,
+article h3,
+article h4,
+article h5,
+article h6,
+article dt,
+.c-article h2,
+.c-article h3,
+.c-article h4,
+.c-article h5,
+.c-article h6,
+.c-article dt {
+	margin-top: var(--article-heading-mt);
+	margin-bottom: var(--article-heading-mb);
+	text-align: var(--article-heading-font-alignment);
+	line-height: var(--lh-title);
+	hyphens: manual;
+	-webkit-hyphens: manual;
+}
+
+article h2,
+.c-article h2 {
+	font-size: var(--article-font-size-h2)
+}
+
+article h3,
+.c-article h3 {
+	font-size: var(--article-font-size-h3)
+}
+
+article dt,
+.c-article dt {
+    font-style: italic;
+}
+
+video {
+  width: 100% !important;
+  height: auto !important;
+}
+
+.c-responsive-embed {
+    position: relative;
+    padding-bottom: 56.25%;
+    padding-top: 30px;
+    height: 0;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+}
+
+.c-responsive-embed iframe,
+.c-responsive-embed object,
+.c-responsive-embed embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}

data/_sass/_c-tokens.scss

@@ -0,0 +1,132 @@
+:root {
+
+    // Tachyons palette
+    --t-black: #000000;
+    --t-near-black: #111111;
+    --t-dark-gray: #333333;
+    --t-mid-gray: #555555;
+    --t-gray: #777777;
+    --t-silver: #999999;
+    --t-light-silver: #AAAAAA;
+    --t-moon-gray: #CCCCCC;
+    --t-light-gray: #EEEEEE;
+    --t-near-white: #F4F4F4;
+    --t-white: #FFFFFF;
+    --t-dark-red: #E7040F;
+    --t-red: #FF4136;
+    --t-light-red: #FF725C;
+    --t-orange: #FF6300;
+    --t-gold: #FFB700;
+    --t-yellow: #FFD700;
+    --t-dortmund: #FFFF00;
+    --t-light-yellow: #FBF1A9;
+    --t-purple: #5E2CA5;
+    --t-light-purple: #A463F2;
+    --t-dark-pink: #D5008F;
+    --t-hot-pink: #FF41B4;
+    --t-pink: #FF80CC;
+    --t-light-pink: #FFA3D7;
+    --t-dark-green: #137752;
+    --t-green: #19A974;
+    --t-light-green: #9EEBCF;
+    --t-navy: #001B44;
+    --t-dark-blue: #00449E;
+    --t-blue: #357EDD;
+    --t-light-blue: #96CCFF;
+    --t-lightest-blue: #CDECFF;
+    --t-washed-blue: #F6FFFE;
+    --t-washed-green: #E8FDF5;
+    --t-washed-yellow: #FFFCEB;
+    --t-washed-red: #FFDFDF;
+
+    // Typeface
+    --serif: Georgia, serif;
+    --sans-serif: -apple-system, BlinkMacSystemFont, "segoe ui", "helvetica neue", helvetica, ubuntu, roboto, noto, sans-serif;
+    --font-size: 112.5%;
+    --font-size-m: 118.75%;
+    --font-size-l: 131.25%;
+    --font-size-code: 87.5%;
+    --lh-copy: 1.5;
+    --lh-title: 1.2;
+    --text-decoration-thickness: 2px;
+    --title-heading-font-family: var(--sans-serif);
+    --title-heading-weight: bold;
+    --title-heading-font-style: normal;
+    --article-heading-font-family: var(--sans-serif);
+    --article-heading-weight: bold;
+    --article-heading-mt: 2.25rem;
+    --article-heading-mb: 1rem;
+    --article-heading-font-style: normal;
+    --article-heading-font-alignment: left;
+    --article-font-size-h2: 1.25rem;
+    --article-font-size-h3: 1rem;
+
+    // Layout
+    --measure: 38rem;
+    --half-measure: calc(var(--measure) / 2);
+    --one-and-a-half-measure: calc(var(--measure) * 1.5);
+    --bleed-width: calc(100% + 2rem);
+    --bleed-width-ns: calc(100% + 4rem);
+    --bleed-width-l: 90vw;
+    --pull-left: -1rem;
+    --pull-left-ns: -2rem;
+    --pull-left-l: 0;
+
+    // Colours
+    --klein-browser-blue: #0000EE;
+    --accent: var(--t-blue);
+    --link: var(--t-black);
+    --visited: var(--t-mid-gray);
+    --hover: var(--t-black);
+    --nav-link: var(--t-black);
+    --nav-link-hover: var(--accent);
+    --text-decoration-color: var(--accent);
+    --foreground: var(--t-dark-gray);
+    --bg: var(--t-white);
+    --header-foreground: var(--t-dark-gray);
+    --header-bg: var(--t-white);
+    --bg-secondary: var(--t-near-white);
+    --pre-foreground: var(--t-washed-green);
+    --pre-bg: var(--t-near-black);
+    --title-color: var(--t-black);
+    --article-heading-color: var(--t-black);
+    --bg-button: var(--t-moon-gray);
+    --bg-button--hover: var(--t-light-gray);
+    --foreground-button: var(--foreground);
+    --code-color: var(--t-dark-red);
+
+    // Rules and borders
+    --border-img-color: var(--t-moon-gray);
+    --border-form-color: var(--t-light-silver);
+    --compulsory: var(--t-dark-red)
+
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+
+    // Colours
+    --accent: #F5B042;
+    --link: var(--t-white);
+    --visited: var(--t-light-silver);
+    --hover: var(--t-white);
+    --nav-link: var(--t-white);
+    --text-decoration-color: var(--accent);
+    --foreground: var(--t-moon-gray);
+    --bg: var(--t-dark-gray);
+    --header-foreground: var(--t-moon-gray);
+    --header-bg: var(--t-black);
+    --bg-secondary: var(--mid-gray);
+    --pre-bg: var(--t-black);
+    --title-color: var(--t-near-white);
+    --article-heading-color: var(--t-near-white);
+    --compulsory: var(--t-light-pink);
+    --foreground-button: var(--t-dark-gray);
+    --code-color: var(--t-gold);
+
+    // Rules and borders
+    --border-img-color: var(--t-gray);
+    --border-form-color: var(--t-gray);
+
+    }
+}

data/_sass/_c.scss

@@ -0,0 +1,57 @@
+@media screen, projection {
+
+.c-sans-serif {
+    font-family: var(--sans-serif);
+}
+
+.c-measure {
+    max-width: var(--measure);
+}
+
+.c-foreground,
+a.c-foreground {
+    color: var(--foreground);
+}
+
+.c-bg {
+    background-color: var(--bg);
+}
+
+.c-lh-copy {
+    line-height: var(--lh-copy);
+}
+
+.c-lh-title {
+    line-height: var(--lh-title);
+}
+
+.c-accent,
+a.c-accent {
+    color: var(--accent);
+}
+
+.c-link,
+a.c-link {
+    color: var(--link);
+}
+
+.c-hyphens {
+    hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
+
+// Some empty media queries
+// Use these if you want to make responsive custom classes
+
+@media #{$breakpoint-not-small} {
+}
+
+@media #{$breakpoint-medium} {
+}
+
+@media #{$breakpoint-large} {
+}
+
+
+} // End the enclosing screen/projection media query

data/_sass/_clears.scss

@@ -0,0 +1,47 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   CLEARFIX
+   http://tachyons.io/docs/layout/clearfix/
+
+*/
+
+/* Nicolas Gallaghers Clearfix solution
+   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
+.cf:before,
+.cf:after { content: " "; display: table; }
+.cf:after { clear: both; }
+.cf {       *zoom: 1; }
+
+.cl { clear: left; }
+.cr { clear: right; }
+.cb { clear: both; }
+.cn { clear: none; }
+
+@media #{$breakpoint-not-small} {
+  .cl-ns { clear: left; }
+  .cr-ns { clear: right; }
+  .cb-ns { clear: both; }
+  .cn-ns { clear: none; }
+}
+
+@media #{$breakpoint-medium} {
+  .cl-m { clear: left; }
+  .cr-m { clear: right; }
+  .cb-m { clear: both; }
+  .cn-m { clear: none; }
+}
+
+@media #{$breakpoint-large} {
+  .cl-l { clear: left; }
+  .cr-l { clear: right; }
+  .cb-l { clear: both; }
+  .cn-l { clear: none; }
+}

data/_sass/_code.scss

@@ -0,0 +1,18 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   CODE
+
+*/
+
+.pre {
+  overflow-x: auto;
+  overflow-y: hidden;
+  overflow:   scroll;
+}

data/_sass/_colors.scss

@@ -0,0 +1,84 @@
+
+// Converted Variables
+
+$black: #000 !default;
+$near-black: #111 !default;
+$dark-gray:#333 !default;
+$mid-gray:#555 !default;
+$gray: #777 !default;
+$silver: #999 !default;
+$light-silver: #aaa !default;
+$moon-gray: #ccc !default;
+$light-gray: #eee !default;
+$near-white: #f4f4f4 !default;
+$white: #fff !default;
+
+$transparent:transparent !default;
+
+$black-90: rgba(0,0,0,.9) !default;
+$black-80: rgba(0,0,0,.8) !default;
+$black-70: rgba(0,0,0,.7) !default;
+$black-60: rgba(0,0,0,.6) !default;
+$black-50: rgba(0,0,0,.5) !default;
+$black-40: rgba(0,0,0,.4) !default;
+$black-30: rgba(0,0,0,.3) !default;
+$black-20: rgba(0,0,0,.2) !default;
+$black-10: rgba(0,0,0,.1) !default;
+$black-05: rgba(0,0,0,.05) !default;
+$black-025: rgba(0,0,0,.025) !default;
+$black-0125: rgba(0,0,0,.0125) !default;
+
+$white-90: rgba(255,255,255,.9) !default;
+$white-80: rgba(255,255,255,.8) !default;
+$white-70: rgba(255,255,255,.7) !default;
+$white-60: rgba(255,255,255,.6) !default;
+$white-50: rgba(255,255,255,.5) !default;
+$white-40: rgba(255,255,255,.4) !default;
+$white-30: rgba(255,255,255,.3) !default;
+$white-20: rgba(255,255,255,.2) !default;
+$white-10: rgba(255,255,255,.1) !default;
+$white-05: rgba(255,255,255,.05) !default;
+$white-025: rgba(255,255,255,.025) !default;
+$white-0125: rgba(255,255,255,.0125) !default;
+
+$dark-red:  #e7040f !default;
+$red:  #ff4136 !default;
+$light-red:  #ff725c !default;
+$orange:  #ff6300 !default;
+$gold:  #ffb700 !default;
+$yellow:  #ffd700 !default;
+$light-yellow:  #fbf1a9 !default;
+$purple:  #5e2ca5 !default;
+$light-purple:  #a463f2 !default;
+$dark-pink:  #d5008f !default;
+$hot-pink: #ff41b4 !default;
+$pink:  #ff80cc !default;
+$light-pink:  #ffa3d7 !default;
+$dark-green:  #137752 !default;
+$green:  #19a974 !default;
+$light-green:  #9eebcf !default;
+$navy:  #001b44 !default;
+$dark-blue:  #00449e !default;
+$blue:  #357edd !default;
+$light-blue:  #96ccff !default;
+$lightest-blue:  #cdecff !default;
+$washed-blue:  #f6fffe !default;
+$washed-green:  #e8fdf5 !default;
+$washed-yellow:  #fffceb !default;
+$washed-red:  #ffdfdf !default;
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   Tachyons
+   COLOR VARIABLES
+
+   Grayscale
+   - Solids
+   - Transparencies
+   Colors
+
+*/

data/_sass/_coordinates.scss

@@ -0,0 +1,153 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   COORDINATES
+   Docs: http://tachyons.io/docs/layout/position/
+
+   Use in combination with the position module.
+
+   Base:
+     top
+     bottom
+     right
+     left
+
+   Modifiers:
+     -0  = literal value 0
+     -1  = literal value 1
+     -2  = literal value 2
+     --1 = literal value -1
+     --2 = literal value -2
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.top-0    { top:    0; }
+.right-0  { right:  0; }
+.bottom-0 { bottom: 0; }
+.left-0   { left:   0; }
+
+.top-1    { top:    1rem; }
+.right-1  { right:  1rem; }
+.bottom-1 { bottom: 1rem; }
+.left-1   { left:   1rem; }
+
+.top-2    { top:    2rem; }
+.right-2  { right:  2rem; }
+.bottom-2 { bottom: 2rem; }
+.left-2   { left:   2rem; }
+
+.top--1    { top:    -1rem; }
+.right--1  { right:  -1rem; }
+.bottom--1 { bottom: -1rem; }
+.left--1   { left:   -1rem; }
+
+.top--2    { top:    -2rem; }
+.right--2  { right:  -2rem; }
+.bottom--2 { bottom: -2rem; }
+.left--2   { left:   -2rem; }
+
+
+.absolute--fill {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+@media #{$breakpoint-not-small} {
+  .top-0-ns     { top:   0; }
+  .left-0-ns    { left:  0; }
+  .right-0-ns   { right: 0; }
+  .bottom-0-ns  { bottom: 0; }
+  .top-1-ns     { top:   1rem; }
+  .left-1-ns    { left:  1rem; }
+  .right-1-ns   { right: 1rem; }
+  .bottom-1-ns  { bottom: 1rem; }
+  .top-2-ns     { top:   2rem; }
+  .left-2-ns    { left:  2rem; }
+  .right-2-ns   { right: 2rem; }
+  .bottom-2-ns  { bottom: 2rem; }
+  .top--1-ns    { top:    -1rem; }
+  .right--1-ns  { right:  -1rem; }
+  .bottom--1-ns { bottom: -1rem; }
+  .left--1-ns   { left:   -1rem; }
+  .top--2-ns    { top:    -2rem; }
+  .right--2-ns  { right:  -2rem; }
+  .bottom--2-ns { bottom: -2rem; }
+  .left--2-ns   { left:   -2rem; }
+  .absolute--fill-ns {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+@media #{$breakpoint-medium} {
+  .top-0-m     { top:   0; }
+  .left-0-m    { left:  0; }
+  .right-0-m   { right: 0; }
+  .bottom-0-m  { bottom: 0; }
+  .top-1-m     { top:   1rem; }
+  .left-1-m    { left:  1rem; }
+  .right-1-m   { right: 1rem; }
+  .bottom-1-m  { bottom: 1rem; }
+  .top-2-m     { top:   2rem; }
+  .left-2-m    { left:  2rem; }
+  .right-2-m   { right: 2rem; }
+  .bottom-2-m  { bottom: 2rem; }
+  .top--1-m    { top:    -1rem; }
+  .right--1-m  { right:  -1rem; }
+  .bottom--1-m { bottom: -1rem; }
+  .left--1-m   { left:   -1rem; }
+  .top--2-m    { top:    -2rem; }
+  .right--2-m  { right:  -2rem; }
+  .bottom--2-m { bottom: -2rem; }
+  .left--2-m   { left:   -2rem; }
+  .absolute--fill-m {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+@media #{$breakpoint-large} {
+  .top-0-l     { top:   0; }
+  .left-0-l    { left:  0; }
+  .right-0-l   { right: 0; }
+  .bottom-0-l  { bottom: 0; }
+  .top-1-l     { top:   1rem; }
+  .left-1-l    { left:  1rem; }
+  .right-1-l   { right: 1rem; }
+  .bottom-1-l  { bottom: 1rem; }
+  .top-2-l     { top:   2rem; }
+  .left-2-l    { left:  2rem; }
+  .right-2-l   { right: 2rem; }
+  .bottom-2-l  { bottom: 2rem; }
+  .top--1-l    { top:    -1rem; }
+  .right--1-l  { right:  -1rem; }
+  .bottom--1-l { bottom: -1rem; }
+  .left--1-l   { left:   -1rem; }
+  .top--2-l    { top:    -2rem; }
+  .right--2-l  { right:  -2rem; }
+  .bottom--2-l { bottom: -2rem; }
+  .left--2-l   { left:   -2rem; }
+  .absolute--fill-l {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}

data/_sass/_debug-children.scss

@@ -0,0 +1,21 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+  DEBUG CHILDREN
+  Docs: http://tachyons.io/docs/debug/
+
+  Just add the debug class to any element to see outlines on its
+  children.
+
+*/
+
+.debug * { outline: 1px solid gold; }
+.debug-white * { outline: 1px solid white; }
+.debug-black * { outline: 1px solid black; }
+

data/_sass/_debug-grid.scss

@@ -0,0 +1,33 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   DEBUG GRID
+   http://tachyons.io/docs/debug-grid/
+
+   Can be useful for debugging layout issues
+   or helping to make sure things line up perfectly.
+   Just tack one of these classes onto a parent element.
+
+*/
+
+.debug-grid {
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-16 {
+  background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-8-solid {
+  background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
+}
+
+.debug-grid-16-solid {
+  background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
+}