Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@avidrucker
avidrucker committed Jul 3, 2024
1 parent 9d12462 commit c72b777
Show file tree
Hide file tree
Showing 9 changed files with 46 additions and 46 deletions.
2 changes: 1 addition & 1 deletion 8 Bit Console.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"frontHtml":"<section\n class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100\"\n>\n <section\n class=\"bg-mid-gray pa4 pv3 br4 measure h-100 overflow-hidden mr-auto ml-auto w-100\"\n >\n <section\n class=\"pa3 bg-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n >\n <p class=\"ma0 f1 ml2 dib mr-auto shift-up-left pointer lh-audio\">\n {{audio}}\n </p>\n <p class=\"ma0 f3 pt2 lh-title\">\n What is the meaning of what is being said?\n </p>\n </section>\n </section>\n</section>\n","backHtml":"<section\n class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100\"\n>\n <section\n class=\"bg-mid-gray pa4 pv3 br4 measure h-100 overflow-hidden mr-auto ml-auto w-100\"\n >\n <section\n class=\"pa3 bg-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n >\n <p class=\"ma0 f1 ml2 shift-up-left pointer mr-auto dib lh-audio\">\n {{audio}}\n </p>\n <h1 class=\"ma0 dark-green f1 lh-title\">{{term}}</h1>\n <p class=\"ma0 f2 lh-title\">{{reading}}</p>\n <p class=\"ma0 f3 lh-title\">{{translation}}</p>\n <p class=\"ma0 f3 lh-title\">{{transliteration}}</p>\n <p class=\"ma0 f3 lh-title pb2\">{{Tags}}</p>\n\n <div class=\"off-screen\">\n <!-- 2 Bit Console Color Filter -->\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n color-interpolation=\"sRGB\"\n color-interpolation-filters=\"sRGB\"\n >\n <defs>\n <filter\n id=\"colorFilter\"\n x=\"-10%\"\n y=\"-10%\"\n width=\"120%\"\n height=\"120%\"\n >\n <!-- Convert to Grayscale -->\n <feColorMatrix\n type=\"matrix\"\n 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 />\n <!-- Apply discrete color mapping -->\n <feComponentTransfer>\n <feFuncR\n type=\"discrete\"\n tableValues=\"0.06 0.19 0.545 0.608\"\n ></feFuncR>\n <feFuncG\n type=\"discrete\"\n tableValues=\"0.22 0.384 0.675 0.737\"\n ></feFuncG>\n <feFuncB\n type=\"discrete\"\n tableValues=\"0.06 0.19 0.059 0.059\"\n ></feFuncB>\n </feComponentTransfer>\n </filter>\n </defs>\n </svg>\n </div>\n\n <svg\n id=\"dynamic-svg\"\n class=\"measure-narrow\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250 250\"\n color-interpolation-filters=\"sRGB\"\n >\n <foreignObject\n class=\"green-filter\"\n width=\"100%\"\n height=\"100%\"\n style=\"display:inline-block\"\n ><div id=\"dynamic-img\" class=\"f3 image-wrapper\">\n {{picture}}\n </div></foreignObject\n >\n </svg>\n </section>\n </section>\n</section>\n","cardCss":"@import url(\"https://fonts.googleapis.com/css2?family=DotGothic16&display=swap\");\n\n@font-face {\n font-family: UnifontMedium;\n src: url(UnifontMedium.woff) format(\"woff\");\n}\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.unifont-medium {\n font-family: \"UnifontMedium\", mono;\n font-weight: normal;\n font-style: normal;\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.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\n.green-filter:hover {\n filter: url(); /* intentionally left blank */\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\n.shift-up-left {\n transform: translate(-0.5rem, -0.25rem);\n}\n\n.lh-audio {\n height: 1rem;\n}\n","designName":"8 Bit Console"}
{"frontHtml":"<section\n class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100\"\n>\n <section\n class=\"bg-mid-gray pa4 pv3 br4 measure h-100 overflow-hidden mr-auto ml-auto w-100\"\n >\n <section\n class=\"pa3 bg-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n >\n <p class=\"ma0 f1 ml2 dib mr-auto shift-up-left pointer lh-audio\">\n {{audio}}\n </p>\n <p class=\"ma0 f3 pt2 lh-title\">\n What is the meaning of what is being said?\n </p>\n </section>\n </section>\n</section>\n","backHtml":"<section\n class=\"medium-green unifont-medium ml-auto mr-auto pa3 flex flex-column h-100\"\n>\n <section\n class=\"bg-mid-gray pa4 pv3 br4 measure h-100 overflow-hidden mr-auto ml-auto w-100\"\n >\n <section\n class=\"pa3 bg-green br4 h-100 overflow-y-scroll invisible-scrollbar w-100\"\n >\n <p class=\"ma0 f1 ml2 shift-up-left pointer mr-auto dib lh-audio\">\n {{audio}}\n </p>\n <h1 class=\"ma0 dark-green f1 lh-title\">{{term}}</h1>\n <p class=\"ma0 f2 lh-title\">{{reading}}</p>\n <p class=\"ma0 f3 lh-title\">{{translation}}</p>\n <p class=\"ma0 f3 lh-title\">{{transliteration}}</p>\n <p class=\"ma0 f3 lh-title pb2\">{{Tags}}</p>\n\n <div class=\"off-screen\">\n <!-- 2 Bit Console Color Filter -->\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n color-interpolation=\"sRGB\"\n color-interpolation-filters=\"sRGB\"\n >\n <defs>\n <filter\n id=\"colorFilter\"\n x=\"-10%\"\n y=\"-10%\"\n width=\"120%\"\n height=\"120%\"\n >\n <!-- Convert to Grayscale -->\n <feColorMatrix\n type=\"matrix\"\n 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 />\n <!-- Apply discrete color mapping -->\n <feComponentTransfer>\n <feFuncR\n type=\"discrete\"\n tableValues=\"0.06 0.19 0.545 0.608\"\n ></feFuncR>\n <feFuncG\n type=\"discrete\"\n tableValues=\"0.22 0.384 0.675 0.737\"\n ></feFuncG>\n <feFuncB\n type=\"discrete\"\n tableValues=\"0.06 0.19 0.059 0.059\"\n ></feFuncB>\n </feComponentTransfer>\n </filter>\n </defs>\n </svg>\n </div>\n\n <svg\n id=\"dynamic-svg\"\n class=\"measure-narrow\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 250 250\"\n color-interpolation-filters=\"sRGB\"\n >\n <foreignObject\n class=\"green-filter\"\n width=\"100%\"\n height=\"100%\"\n style=\"display:inline-block\"\n ><div id=\"dynamic-img\" class=\"f3 image-wrapper\">\n {{picture}}\n </div></foreignObject\n >\n </svg>\n </section>\n </section>\n</section>\n","cardCss":"@import url(\"https://fonts.googleapis.com/css2?family=DotGothic16&display=swap\");\n\n/* https://fontlibrary.org/en/font/gnu-unifont */\n@font-face {\n font-family: UnifontMedium;\n src: url(UnifontMedium.woff) format(\"woff\");\n}\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.unifont-medium {\n font-family: \"UnifontMedium\", mono;\n font-weight: normal;\n font-style: normal;\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.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\n.green-filter:hover {\n filter: url(); /* intentionally left blank */\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\n.shift-up-left {\n transform: translate(-0.5rem, -0.25rem);\n}\n\n.lh-audio {\n height: 1rem;\n}\n","designName":"8 Bit Console"}
2 changes: 1 addition & 1 deletion Blackboard and Chalk.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"frontHtml":"<div class=\"visually-hidden\">\n <svg width=\"600\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Define the filter -->\n <defs>\n <filter id=\"chalkEffect\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"1\"\n numOctaves=\"4\"\n result=\"noise\"\n />\n <feComponentTransfer in=\"noise\" result=\"adjustedNoise\">\n <feFuncA type=\"discrete\" tableValues=\"0 1 0\" />\n </feComponentTransfer>\n <feComposite in=\"SourceGraphic\" in2=\"adjustedNoise\" operator=\"in\" />\n </filter>\n </defs>\n </svg>\n</div>\n\n<section\n class=\"default-chalk chalkduster tc flex flex-column justify-center min-h-100 pa2\"\n>\n <p class=\"ma0 f3 dib mr-auto ml-auto pointer chalk-filter\">{{audio}}</p>\n <p\n class=\"ma0 f3 pt2 lh-copy chalk-light-blue measure-narrow balance mr-auto ml-auto\"\n >\n What is the meaning of what is being said?\n </p>\n</section>\n","backHtml":"<div class=\"visually-hidden\">\n<svg width=\"600\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Define the filter -->\n <defs>\n <filter id=\"chalkEffect\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence type=\"fractalNoise\" baseFrequency=\"1\" numOctaves=\"4\" result=\"noise\"/>\n <feComponentTransfer in=\"noise\" result=\"adjustedNoise\">\n <feFuncA type=\"discrete\" tableValues=\"0 1 0\"/>\n </feComponentTransfer>\n <feComposite in=\"SourceGraphic\" in2=\"adjustedNoise\" operator=\"in\"/>\n </filter>\n</defs>\n</svg>\n</div>\n\n<section class=\"default-chalk chalkduster tc flex flex-column justify-center min-h-100 pt3\">\n<p class=\"ma0 dib ml-auto mr-auto f3 pointer chalk-filter\">{{audio}}</p>\n\n<section className=\"pa2\">\n<h1 class=\"ma0 f1 pt1 chalk-filter chalk-yellow m-plus-rounded-1c-bold\">{{term}}</h1>\n<p class=\"ma0 f2 chalk-filter chalk-light-blue m-plus-rounded-1c-bold\">{{reading}}</p>\n<p class=\"ma0 f3 chalk-light-green\">{{translation}}</p>\n<p class=\"ma0 f3 chalk-pink\">{{transliteration}}</p>\n<p class=\"ma0 f5 chalk-light-green pb1\">{{Tags}}</p>\n<div class=\"ph2 pt1 relative measure-narrow mr-auto ml-auto\">\n<div class=\"br4 absolute left-0 top-0 right-0 bottom-0 z-999 top-wrapper pt1 ph2\">\n{{picture}}\n</div>\n<div class=\"img-wrapper br4 chalk-filter\">\n{{picture}}\n</div>\n</dvi>\n</section>\n</section>","cardCss":"@import url(\"https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap\");\n\n:root {\n --chalk-bg-color: #3b383f;\n --default-chalk: #ededed;\n --chalk-yellow: #fff58a;\n --chalk-light-blue: #a1c9f0;\n --chalk-light-green: #a8f0d6;\n --chalk-pink: #ffabc4;\n}\n\n.m-plus-rounded-1c-bold {\n font-family: \"M PLUS Rounded 1c\", sans-serif;\n font-weight: 700;\n font-style: normal;\n}\n\n/* https://font.download/font/chalkduster */\n@font-face {\n font-family: Chalkduster;\n src: url(Chalkduster.woff) format(\"woff\");\n}\n\n.chalkduster {\n font-family: Chalkduster, cursive;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n background-color: var(--chalk-bg-color);\n background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),\n url(bg_blackboard_l_opt.jpg);\n background-position: center;\n background-size: cover;\n}\n\n.default-chalk {\n color: var(--default-chalk);\n}\n\n.chalk-yellow {\n color: var(--chalk-yellow);\n}\n\n.chalk-light-blue {\n color: var(--chalk-light-blue);\n}\n\n.chalk-light-green {\n color: var(--chalk-light-green);\n}\n\n.chalk-pink {\n color: var(--chalk-pink);\n}\n\n.img-wrapper {\n position: relative;\n display: inline-block;\n height: auto;\n mix-blend-mode: lighten;\n filter: saturate(1.25);\n border-radius: 15px;\n}\n\n.img-wrapper img {\n display: block;\n width: 100%;\n height: auto;\n border-radius: 1rem;\n line-height: 0;\n}\n\n.img-wrapper::before,\n.img-wrapper::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 15px;\n}\n\n.img-wrapper::after {\n background-color: white;\n opacity: 5%;\n}\n\n.img-wrapper:hover::after {\n opacity: 0;\n}\n\n.img-wrapper:hover::before {\n opacity: 1;\n mix-blend-mode: normal;\n}\n\n.img-wrapper:hover {\n mix-blend-mode: normal;\n filter: saturate(1);\n}\n\n.chalk-filter {\n filter: url(#chalkEffect);\n}\n\n.top-wrapper img {\n border-radius: 15px;\n line-height: 0;\n}\n\n.top-wrapper {\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n}\n\n.top-wrapper:hover {\n opacity: 1;\n}\n","designName":"Blackboard and Chalk"}
{"frontHtml":"<div class=\"visually-hidden\">\n <svg width=\"600\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Define the filter -->\n <defs>\n <filter id=\"chalkEffect\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"1\"\n numOctaves=\"4\"\n result=\"noise\"\n />\n <feComponentTransfer in=\"noise\" result=\"adjustedNoise\">\n <feFuncA type=\"discrete\" tableValues=\"0 1 0\" />\n </feComponentTransfer>\n <feComposite in=\"SourceGraphic\" in2=\"adjustedNoise\" operator=\"in\" />\n </filter>\n </defs>\n </svg>\n</div>\n\n<section\n class=\"default-chalk chalkduster tc flex flex-column justify-center min-h-100 pa3\"\n>\n <p class=\"ma0 f3 dib mr-auto ml-auto pointer chalk-filter\">{{audio}}</p>\n <p\n class=\"ma0 f3 pt2 lh-copy chalk-light-blue measure-narrow balance mr-auto ml-auto\"\n >\n What is the meaning of what is being said?\n </p>\n</section>\n","backHtml":"<div class=\"visually-hidden\">\n <svg width=\"600\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\">\n <!-- Define the filter -->\n <defs>\n <filter id=\"chalkEffect\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\n <feTurbulence\n type=\"fractalNoise\"\n baseFrequency=\"1\"\n numOctaves=\"4\"\n result=\"noise\"\n />\n <feComponentTransfer in=\"noise\" result=\"adjustedNoise\">\n <feFuncA type=\"discrete\" tableValues=\"0 1 0\" />\n </feComponentTransfer>\n <feComposite in=\"SourceGraphic\" in2=\"adjustedNoise\" operator=\"in\" />\n </filter>\n </defs>\n </svg>\n</div>\n\n<section\n class=\"default-chalk chalkduster tc flex flex-column justify-center min-h-100 pa3\"\n>\n <p class=\"ma0 dib ml-auto mr-auto f3 pointer chalk-filter\">{{audio}}</p>\n\n <section className=\"pa2\">\n <h1 class=\"ma0 f1 pt1 chalk-filter chalk-yellow m-plus-rounded-1c-bold\">\n {{term}}\n </h1>\n <p class=\"ma0 f2 chalk-filter chalk-light-blue m-plus-rounded-1c-bold\">\n {{reading}}\n </p>\n <p class=\"ma0 f3 chalk-light-green\">{{translation}}</p>\n <p class=\"ma0 f3 chalk-pink\">{{transliteration}}</p>\n <p class=\"ma0 f5 chalk-light-green\">{{Tags}}</p>\n <div class=\"relative pt2 measure-narrow mr-auto ml-auto\">\n <div\n class=\"absolute left-0 top-0 right-0 bottom-0 w-100 z-999 top-wrapper pt2\"\n >\n {{picture}}\n </div>\n <div class=\"img-wrapper br4 chalk-filter v-align-mid\">{{picture}}</div>\n </div>\n </section>\n</section>\n","cardCss":"@import url(\"https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap\");\n\n:root {\n --chalk-bg-color: #3b383f;\n --default-chalk: #ededed;\n --chalk-yellow: #fff58a;\n --chalk-light-blue: #a1c9f0;\n --chalk-light-green: #a8f0d6;\n --chalk-pink: #ffabc4;\n}\n\n.m-plus-rounded-1c-bold {\n font-family: \"M PLUS Rounded 1c\", sans-serif;\n font-weight: 700;\n font-style: normal;\n}\n\n/* https://font.download/font/chalkduster */\n@font-face {\n font-family: Chalkduster;\n src: url(Chalkduster.woff) format(\"woff\");\n}\n\n.chalkduster {\n font-family: Chalkduster, cursive;\n}\n\n/*.card is primarily for styling the background of both front and back cards*/\n.card {\n background-color: var(--chalk-bg-color);\n background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),\n url(bg_blackboard_l_opt.jpg);\n background-position: center;\n background-size: cover;\n}\n\n.default-chalk {\n color: var(--default-chalk);\n}\n\n.chalk-yellow {\n color: var(--chalk-yellow);\n}\n\n.chalk-light-blue {\n color: var(--chalk-light-blue);\n}\n\n.chalk-light-green {\n color: var(--chalk-light-green);\n}\n\n.chalk-pink {\n color: var(--chalk-pink);\n}\n\n.img-wrapper {\n position: relative;\n display: inline-block;\n height: auto;\n mix-blend-mode: lighten;\n filter: saturate(1.25);\n border-radius: 15px;\n}\n\n.img-wrapper img {\n display: block;\n width: 100%;\n height: auto;\n border-radius: 1rem;\n line-height: 0;\n}\n\n.img-wrapper::before,\n.img-wrapper::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 15px;\n}\n\n.img-wrapper::after {\n background-color: white;\n opacity: 5%;\n}\n\n.img-wrapper:hover::after {\n opacity: 0;\n}\n\n.img-wrapper:hover::before {\n opacity: 1;\n mix-blend-mode: normal;\n}\n\n.img-wrapper:hover {\n mix-blend-mode: normal;\n filter: saturate(1);\n}\n\n.chalk-filter {\n filter: url(#chalkEffect);\n}\n\n.top-wrapper img {\n border-radius: 15px;\n line-height: 0;\n}\n\n.top-wrapper {\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n}\n\n.top-wrapper:hover {\n opacity: 1;\n}\n\n.v-align-mid {\n vertical-align: middle;\n}\n","designName":"Blackboard and Chalk"}
Loading

0 comments on commit c72b777

Please sign in to comment.