-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3ac529b
commit 04bafa5
Showing
6 changed files
with
6 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| {"frontHtml":"<section class=\"medium-green dotgothic16 ml-auto mr-auto measure bg-green ph2 flex flex-column vh-75 mt4 br4 lh-copy overflow-y-scroll invisible-scrollbar\">\n<p class=\"ma0 f3 ph2 pt2\">{{audio}}</p>\n<p class=\"ma0 f3 ph2\">What is the meaning of what is being said?</p>\n</section>","backHtml":"<section class=\"medium-green dotgothic16 ml-auto mr-auto measure bg-green ph2 flex flex-column vh-75 mt4 br4 lh-copy overflow-y-scroll invisible-scrollbar\">\n<section class=\"ph2\">\n<p class=\"ma0 f2 pt2 dark-green\">{{audio}}</p>\n<h1 class=\"ma0 dark-green f3\">{{term}}</h1>\n<p class=\"ma0 f3\">{{reading}}</p>\n<p class=\"ma0 f3\">{{translation}}</p>\n<p class=\"ma0 f3\">{{transliteration}}</p>\n<p class=\"ma0 f3\">{{Tags}}</p>\n\n<div style=\"display:none;\">\n <!-- 2 Bit Console Color Filter -->\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <filter id=\"colorFilter\">\n <!-- Convert to Grayscale -->\n <feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0\n 0.3333 0.3333 0.3333 0 0\n 0.3333 0.3333 0.3333 0 0\n 0 0 0 1 0\"/>\n <!-- Apply discrete color mapping -->\n <feComponentTransfer>\n <feFuncR type=\"discrete\" tableValues=\"0.06 0.19 0.545 0.608\"></feFuncR>\n <feFuncG type=\"discrete\" tableValues=\"0.22 0.384 0.675 0.737\"></feFuncG>\n <feFuncB type=\"discrete\" tableValues=\"0.06 0.19 0.059 0.059\"></feFuncB>\n </feComponentTransfer>\n </filter>\n </defs>\n</svg>\n</div>\n\n<svg class=\"green-filter\" x=\"0px\" y=\"0px\" viewBox=\"0 0 500 500\" color-interpolation-filters=\"sRGB\">\n <defs>\n<filter id=\"pixelate2\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\">\n <feGaussianBlur stdDeviation=\"0\" in=\"SourceGraphic\" result=\"smoothed\" />\n <feImage width=\"10\" height=\"10\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVAgdY1ywgOEDAwKxgJhIgFQ+AP/vCNK2s+8LAAAAAElFTkSuQmCC\" result=\"displacement-map\" />\n <feTile in=\"displacement-map\" result=\"pixelate-map\" />\n <feDisplacementMap in=\"smoothed\" in2=\"pixelate-map\" xChannelSelector=\"R\" yChannelSelector=\"G\" scale=\"1\" result=\"pre-final\"/>\n <feComposite operator=\"in\" in2=\"SourceGraphic\"/>\n</filter>\n </defs>\n\n<foreignObject filter=\"url(#pixelate2)\" width=\"500\" height=\"500\" style=\"display:inline-block\"><div class=\"f3\">{{picture}}</div></foreignObject>\n\n</svg>\n\n</section>\n</section>","cardCss":"@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');\n\n:root {\n --dark-green: #0F380F;\n --medium-green: #306230;\n --green: #8BAC0F;\n --light-green: #9BBC0F;\n --light-gray: #CBCBCB;\n}\n\n.dotgothic16 {\n font-family: \"DotGothic16\", sans-serif;\n}\n\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n background-color: var(--light-gray);\n overflow-y: hidden;\n}\n\n\n.dark-green {\n color: var(--dark-green);\n}\n\n.medium-green {\n color: var(--medium-green);\n}\n\n.bg-green {\n background-color: var(--green);\n}\n\n.bg-light-gray {\n background-color: var(--light-gray);\n}\n\n.green-filter {\n filter: url(#colorFilter);\n}\n","designName":"8 Bit Console"} | ||
| {"frontHtml":"<section class=\"medium-green dotgothic16 ml-auto mr-auto measure bg-green ph2 flex flex-column vh-75 mt4 br4 lh-copy overflow-y-scroll invisible-scrollbar\">\n<p class=\"ma0 f3 ph2 pt2\">{{audio}}</p>\n<p class=\"ma0 f3 ph2\">What is the meaning of what is being said?</p>\n</section>","backHtml":"<section class=\"medium-green dotgothic16 ml-auto mr-auto measure ph2 flex flex-column h-100 pv4 lh-title\">\n<section class=\"ph2 bg-green br4 overflow-y-scroll invisible-scrollbar h-100\">\n<p class=\"ma0 f2 pt2 dark-green\">{{audio}}</p>\n<h1 class=\"ma0 dark-green f3\">{{term}}</h1>\n<p class=\"ma0 f3\">{{reading}}</p>\n<p class=\"ma0 f3\">{{translation}}</p>\n<p class=\"ma0 f3\">{{transliteration}}</p>\n<p class=\"ma0 f3\">{{Tags}}</p> \n\n<div style=\"display:none;\">\n <!-- 2 Bit Console Color Filter -->\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <filter id=\"colorFilter\">\n <!-- Convert to Grayscale -->\n <feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0\n 0.3333 0.3333 0.3333 0 0\n 0.3333 0.3333 0.3333 0 0\n 0 0 0 1 0\"/>\n <!-- Apply discrete color mapping -->\n <feComponentTransfer>\n <feFuncR type=\"discrete\" tableValues=\"0.06 0.19 0.545 0.608\"></feFuncR>\n <feFuncG type=\"discrete\" tableValues=\"0.22 0.384 0.675 0.737\"></feFuncG>\n <feFuncB type=\"discrete\" tableValues=\"0.06 0.19 0.059 0.059\"></feFuncB>\n </feComponentTransfer>\n </filter>\n </defs>\n</svg>\n</div>\n\n<svg id=\"dynamic-svg\" class=\"green-filter\" x=\"0px\" y=\"0px\" viewBox=\"0 0 250 250\" color-interpolation-filters=\"sRGB\">\n <defs>\n<filter id=\"pixelate2\" x=\"0%\" y=\"0%\" width=\"100%\" height=\"100%\">\n <feGaussianBlur stdDeviation=\"0\" in=\"SourceGraphic\" result=\"smoothed\" />\n <feImage width=\"10\" height=\"10\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVAgdY1ywgOEDAwKxgJhIgFQ+AP/vCNK2s+8LAAAAAElFTkSuQmCC\" result=\"displacement-map\" />\n <feTile in=\"displacement-map\" result=\"pixelate-map\" />\n <feDisplacementMap in=\"smoothed\" in2=\"pixelate-map\" xChannelSelector=\"R\" yChannelSelector=\"G\" scale=\"1\" result=\"pre-final\"/>\n <feComposite operator=\"in\" in2=\"SourceGraphic\"/>\n</filter>\n </defs>\n\n<foreignObject class=\"fo\" filter=\"url(#pixelate2)\" width=\"100%\" height=\"100%\" style=\"display:inline-block\"><div id=\"dynamic-img\" class=\"f3 image-wrapper\" >{{picture}}</div></foreignObject>\n\n</svg>\n\n</section>\n</section>","cardCss":"@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');\n\n:root {\n --dark-green: #0F380F;\n --medium-green: #306230;\n --green: #8BAC0F;\n --light-green: #9BBC0F;\n --light-gray: #CBCBCB;\n}\n\n.dotgothic16 {\n font-family: \"DotGothic16\", sans-serif;\n}\n\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n background-color: var(--light-gray);\n overflow-y: hidden;\n}\n\n\n.dark-green {\n color: var(--dark-green);\n}\n\n.medium-green {\n color: var(--medium-green);\n}\n\n.bg-green {\n background-color: var(--green);\n}\n\n.bg-light-gray {\n background-color: var(--light-gray);\n}\n\n.green-filter {\n filter: url(#colorFilter);\n width: 50%;\n}\n\n.image-wrapper img {\n display: block;\n height: auto;\n}\n\n.image-wrapper {\n display: inline-block;\n height: auto;\n}\n","designName":"8 Bit Console"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| {"frontHtml":"<section class=\"m-plus-1p h-100 lh-copy\">\n<header class=\"\">\n<p class=\"ma0 f3 pt4 ph3\">{{audio}}</p>\n</header>\n<p class=\"ma0 f3 ph3 roboto-mono\">What is the meaning of what is being said?</p>\n</section>","backHtml":"<section class=\"m-plus-1p h-100 lh-copy\">\n<header>\n<p class=\"ma0 f3 pt4 pl3\">{{audio}}</p>\n</header>\n<section class=\"pl3\">\n<h1 class=\"ma0 f3\">{{term}}</h1>\n<p class=\"ma0 f3\">{{reading}}</p>\n<p class=\"ma0 f4 roboto-mono\">{{translation}}</p>\n<p class=\"ma0 f4 roboto-mono\">{{transliteration}}</p>\n<p class=\"ma0 f4 roboto-mono pb2\">{{Tags}}</p>\n<div class=\"pr3\">\n<div class=\"ba b--white bw1 dib\">\n<div class=\"white-pencil-effect o-80-until-hover\">{{picture}}</div></div></div>\n</section>\n</section>","cardCss":"@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');\n\n@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]&display=swap');\n\n:root {\n \n}\n\n.m-plus-1p {\n font-family: \"M PLUS 1p\", sans-serif;\n}\n\n.roboto-mono {\n font-family: \"Roboto Mono\", monospace;\n font-optical-sizing: auto;\n}\n\n.card {\n background-color: #0047AB;\n color: white;\n background-size: 2.5rem 2.5rem;\n background-image:\n linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px);\n}\n\n.white-pencil-effect {\n \n filter: brightness(2) grayscale(1);\n mix-blend-mode: screen;\n position: relative;\n opacity: 80%;\n}\n\n.white-pencil-effect::before {\n content: \"\";\n display: block;\n position: absolute;\n background-image: url(sketch_lines.jpg);\n background-size: cover;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n filter: invert(1);\n mix-blend-mode: multiply;\n}\n\n.white-pencil-effect:hover {\n filter: brightness(1) grayscale(0);\n mix-blend-mode: normal;\n opacity: 100%;\n}\n\n.white-pencil-effect:hover::before {\n opacity: 0;\n}\n\n.white-pencil-effect img {\n display: block;\n}\n\n.hide-on-hover {\n opacity: 25%;\n}\n\n.hide-on-hover:hover {\n opacity: 0;\n}\n\n\n\n","designName":"Blueprint Theme"} | ||
| {"frontHtml":"<section class=\"m-plus-1p h-100 lh-copy\">\n<header class=\"\">\n<p class=\"ma0 f3 pt4 ph3\">{{audio}}</p>\n</header>\n<p class=\"ma0 f3 ph3 roboto-mono\">What is the meaning of what is being said?</p>\n</section>","backHtml":"<section class=\"m-plus-1p h-100 lh-copy pt3\">\n<header>\n<p class=\"ma0 f3 pt4 pl3 shift-up-left\">{{audio}}</p>\n</header>\n<section class=\"pl3\">\n<h1 class=\"ma0 f3\">{{term}}</h1>\n<p class=\"ma0 f3\">{{reading}}</p>\n<p class=\"ma0 f3 roboto-mono lh-english\">{{translation}}</p>\n<p class=\"ma0 f3 roboto-mono lh-english\">{{transliteration}}</p>\n<p class=\"ma0 f3 roboto-mono pb2 lh-english\">{{Tags}}</p>\n<div class=\"pr3\">\n<div class=\"ba b--white bw1 dib\">\n<div class=\"white-pencil-effect o-80-until-hover\">{{picture}}</div></div></div>\n</section>\n</section>","cardCss":"@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');\n\n@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]&display=swap');\n\n:root {\n \n}\n\n.m-plus-1p {\n font-family: \"M PLUS 1p\", sans-serif;\n}\n\n.roboto-mono {\n font-family: \"Roboto Mono\", monospace;\n font-optical-sizing: auto;\n}\n\n.card {\n background-color: #0047AB;\n color: white;\n background-size: 2.5rem 2.5rem;\n background-image:\n linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px),\n linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px);\n}\n\n.white-pencil-effect {\n \n filter: brightness(2) grayscale(1);\n mix-blend-mode: screen;\n position: relative;\n opacity: 80%;\n}\n\n.white-pencil-effect::before {\n content: \"\";\n display: block;\n position: absolute;\n background-image: url(sketch_lines.jpg);\n background-size: cover;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n filter: invert(1);\n mix-blend-mode: multiply;\n}\n\n.white-pencil-effect:hover {\n filter: brightness(1) grayscale(0);\n mix-blend-mode: normal;\n opacity: 100%;\n}\n\n.white-pencil-effect:hover::before {\n opacity: 0;\n}\n\n.white-pencil-effect img {\n display: block;\n}\n\n.hide-on-hover {\n opacity: 25%;\n}\n\n.hide-on-hover:hover {\n opacity: 0;\n}\n\n.lh-english {\n line-height: 2.6rem;\n}\n\n.shift-up-left {\n transform: translate(-0.5rem, -0.25rem);\n}\n\n\n","designName":"Blueprint Theme"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| {"frontHtml":"<section class=\"matrix-green courier-prime flex flex-column pv2 min-h-100 lh-copy\">\n<p class=\"ma0 f3 ph2\">{{audio}}</p>\n<p class=\"ma0 f3 ph2\">What is the meaning of what is being said?</p>\n</section>","backHtml":"<section class=\"matrix-green courier-prime ph2 flex flex-column min-h-100 lh-copy\">\n<p class=\"ma0 f3 pt2\">{{audio}}</p>\n<h1 class=\"ma0 f3 m-plus-1-code\">{{term}}</h1>\n<p class=\"ma0 f3 m-plus-1-code\">{{reading}}</p>\n<p class=\"ma0 f3\">{{translation}}</p>\n<p class=\"ma0 f3\">{{transliteration}}</p>\n<p class=\"ma0 f3\">{{Tags}}</p>\n\n<div class=\"image-overlay matrix measure-narrow\">\n {{picture}}\n <img src=\"code_rain.jpg\">\n</div>\n\n</section>\n","cardCss":"@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');\n\n@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:[email protected]&display=swap');\n\n:root {\n --matrix-green: lime;\n}\n\n.courier-prime {\n font-family: \"Courier Prime\", mono;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n background-color: black;\n}\n\n.m-plus-1-code {\n font-family: \"M PLUS 1 Code\", monospace;\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n.matrix-green {\n color: var(--matrix-green);\n}\n\n.matrix {\n position: relative;\n display: inline-block;\n}\n\n.matrix::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 150, 0, 0.25); /* Orange color with some opacity */\n mix-blend-mode: overlay;\n pointer-events: none;\n}\n\n.image-overlay {\n position: relative;\n display: inline-block;\n overflow: hidden;\n}\n\n.image-overlay img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%; /* Ensures overlay size matches the base image */\n height: auto;\n display: block; /* Removes any extra space below the image */\n}\n\n.image-overlay img:first-child {\n position: relative; /* Keeps the base image in the normal flow */\n}\n\n.image-overlay img:last-child {\n mix-blend-mode: hard-light;\n opacity: 0.25;\n}","designName":"Code Rain"} | ||
| {"frontHtml":"<section class=\"matrix-green courier-prime flex flex-column pv2 min-h-100 lh-title\">\n<p class=\"ma0 f3 ph2\">{{audio}}</p>\n<p class=\"ma0 f3 ph2\">What is the meaning of what is being said?</p>\n</section>","backHtml":"<section class=\"matrix-green courier-prime ph2 flex flex-column min-h-100 lh-title\">\n<p class=\"ma0 f3 pt2\">{{audio}}</p>\n<h1 class=\"ma0 f3 lh-copy m-plus-1-code\">{{term}}</h1>\n<p class=\"ma0 f3 lh-copy m-plus-1-code\">{{reading}}</p>\n<p class=\"ma0 f3\">{{translation}}</p>\n<p class=\"ma0 f3\">{{transliteration}}</p>\n<p class=\"ma0 f3\">{{Tags}}</p>\n\n<div class=\"image-overlay matrix measure-narrow\">\n {{picture}}\n <img src=\"code_rain.jpg\">\n</div>\n\n</section>\n","cardCss":"@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');\n\n@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:[email protected]&display=swap');\n\n:root {\n --matrix-green: lime;\n}\n\n.courier-prime {\n font-family: \"Courier Prime\", mono;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n background-color: black;\n}\n\n.m-plus-1-code {\n font-family: \"M PLUS 1 Code\", monospace;\n font-optical-sizing: auto;\n font-style: normal;\n}\n\n.matrix-green {\n color: var(--matrix-green);\n}\n\n.matrix {\n position: relative;\n display: inline-block;\n}\n\n.matrix::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 150, 0, 0.25); /* Orange color with some opacity */\n mix-blend-mode: overlay;\n pointer-events: none;\n}\n\n.image-overlay {\n position: relative;\n display: inline-block;\n overflow: hidden;\n}\n\n.image-overlay img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%; /* Ensures overlay size matches the base image */\n height: auto;\n display: block; /* Removes any extra space below the image */\n}\n\n.image-overlay img:first-child {\n position: relative; /* Keeps the base image in the normal flow */\n}\n\n.image-overlay img:last-child {\n mix-blend-mode: hard-light;\n opacity: 0.25;\n}","designName":"Code Rain"} |
Oops, something went wrong.