Microcosm asked to add a todo section to their admin, and this is what I came up with after a few half-days of coding (thanks in large part to my good friend MooTools). They have two shops and a growing staff, and everybody spends quite a bit of time in the admin I built for them.
I’m a huge fan of The Hit List, which I believe is just about as perfect a task manager as you could ask for, and I obviously borrowed some ideas. If I had more time to fuss with this, and if it was something I’d be using regularly, I’d implement full keyboard control and mimic The Hit List even more.
Todo apps feel like the advanced “Hello, World” of programming exercises, akin to Tetris for game developers. I can’t believe it took me this long to get to make one.
diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..1ab3efa --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,4 @@ +// Adjust aspect-ratio for "fitvid" videos +document.querySelectorAll('iframe[src*="youtube"], iframe[src*="vimeo"]').forEach((video) => { + video.style.aspectRatio = `${video.getAttribute('width')} / ${video.getAttribute('height')}` +}); diff --git a/static/styles/style-light.css b/static/styles/style-light.css new file mode 100644 index 0000000..d7fb944 --- /dev/null +++ b/static/styles/style-light.css @@ -0,0 +1,1594 @@ +.inline { + display: inline; +} +.block { + display: block; +} +.inline-block { + display: inline-block; +} +.table { + display: table; +} +.table-cell { + display: table-cell; +} +.overflow-hidden { + overflow: hidden; +} +.overflow-scroll { + overflow: scroll; +} +.overflow-auto { + overflow: auto; +} +.clearfix:before, +.clearfix:after { + display: table; + content: " "; +} +.clearfix:after { + clear: both; +} +.left { + float: left; +} +.right { + float: right; +} +.fit { + max-width: 100%; +} +.truncate { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.max-width-1 { + max-width: 24rem; +} +.max-width-2 { + max-width: 32rem; +} +.max-width-3 { + max-width: 48rem; +} +.max-width-4 { + max-width: 64rem; +} +.border-box { + box-sizing: border-box; +} +.m0 { + margin: 0; +} +.mt0 { + margin-top: 0; +} +.mr0 { + margin-right: 0; +} +.mb0 { + margin-bottom: 0; +} +.ml0 { + margin-left: 0; +} +.mx0 { + margin-right: 0; + margin-left: 0; +} +.my0 { + margin-top: 0; + margin-bottom: 0; +} +.m1 { + margin: 0.5rem; +} +.mt1 { + margin-top: 0.5rem; +} +.mr1 { + margin-right: 0.5rem; +} +.mb1 { + margin-bottom: 0.5rem; +} +.ml1 { + margin-left: 0.5rem; +} +.mx1 { + margin-right: 0.5rem; + margin-left: 0.5rem; +} +.my1 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.m2 { + margin: 1rem; +} +.mt2 { + margin-top: 1rem; +} +.mr2 { + margin-right: 1rem; +} +.mb2 { + margin-bottom: 1rem; +} +.ml2 { + margin-left: 1rem; +} +.mx2 { + margin-right: 1rem; + margin-left: 1rem; +} +.my2 { + margin-top: 1rem; + margin-bottom: 1rem; +} +.m3 { + margin: 2rem; +} +.mt3 { + margin-top: 2rem; +} +.mr3 { + margin-right: 2rem; +} +.mb3 { + margin-bottom: 2rem; +} +.ml3 { + margin-left: 2rem; +} +.mx3 { + margin-right: 2rem; + margin-left: 2rem; +} +.my3 { + margin-top: 2rem; + margin-bottom: 2rem; +} +.m4 { + margin: 4rem; +} +.mt4 { + margin-top: 4rem; +} +.mr4 { + margin-right: 4rem; +} +.mb4 { + margin-bottom: 4rem; +} +.ml4 { + margin-left: 4rem; +} +.mx4 { + margin-right: 4rem; + margin-left: 4rem; +} +.my4 { + margin-top: 4rem; + margin-bottom: 4rem; +} +.mxn1 { + margin-right: -0.5rem; + margin-left: -0.5rem; +} +.mxn2 { + margin-right: -1rem; + margin-left: -1rem; +} +.mxn3 { + margin-right: -2rem; + margin-left: -2rem; +} +.mxn4 { + margin-right: -4rem; + margin-left: -4rem; +} +.ml-auto { + margin-left: auto; +} +.mr-auto { + margin-right: auto; +} +.mx-auto { + margin-right: auto; + margin-left: auto; +} +.p0 { + padding: 0; +} +.pt0 { + padding-top: 0; +} +.pr0 { + padding-right: 0; +} +.pb0 { + padding-bottom: 0; +} +.pl0 { + padding-left: 0; +} +.px0 { + padding-right: 0; + padding-left: 0; +} +.py0 { + padding-top: 0; + padding-bottom: 0; +} +.p1 { + padding: 0.5rem; +} +.pt1 { + padding-top: 0.5rem; +} +.pr1 { + padding-right: 0.5rem; +} +.pb1 { + padding-bottom: 0.5rem; +} +.pl1 { + padding-left: 0.5rem; +} +.py1 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.px1 { + padding-right: 0.5rem; + padding-left: 0.5rem; +} +.p2 { + padding: 1rem; +} +.pt2 { + padding-top: 1rem; +} +.pr2 { + padding-right: 1rem; +} +.pb2 { + padding-bottom: 1rem; +} +.pl2 { + padding-left: 1rem; +} +.py2 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.px2 { + padding-right: 1rem; + padding-left: 1rem; +} +.p3 { + padding: 2rem; +} +.pt3 { + padding-top: 2rem; +} +.pr3 { + padding-right: 2rem; +} +.pb3 { + padding-bottom: 2rem; +} +.pl3 { + padding-left: 2rem; +} +.py3 { + padding-top: 2rem; + padding-bottom: 2rem; +} +.px3 { + padding-right: 2rem; + padding-left: 2rem; +} +.p4 { + padding: 4rem; +} +.pt4 { + padding-top: 4rem; +} +.pr4 { + padding-right: 4rem; +} +.pb4 { + padding-bottom: 4rem; +} +.pl4 { + padding-left: 4rem; +} +.py4 { + padding-top: 4rem; + padding-bottom: 4rem; +} +.px4 { + padding-right: 4rem; + padding-left: 4rem; +} +body h1, +body .h1 { + display: block; + margin-top: 3rem; + margin-bottom: 1rem; + color: rgba(0,0,0, 0.75); + letter-spacing: 0.01em; + font-weight: 700; + font-style: normal; + font-size: 1.5em; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +body h2, +body .h2 { + position: relative; + display: block; + margin-top: 2rem; + margin-bottom: 0.5rem; + color: #111; + text-transform: none; + letter-spacing: normal; + font-weight: bold; + font-size: 1rem; +} +body h3 { + color: #111; + text-decoration: underline; + font-weight: bold; + font-size: 0.9rem; +} +body h4, +body h5, +body h6 { + display: inline; + text-decoration: none; + color: rgba(0,0,0, 0.5); + font-weight: bold; + font-size: 0.9rem; +} +body h3, +body h4, +body h5, +body h6 { + margin-top: 0.9rem; + margin-bottom: 0.5rem; +} +body hr { + border: 0.5px dashed rgba(0,0,0, 0.5); + opacity: 0.5; + margin: 0; + margin-top: 20px; + margin-bottom: 20px; +} +body strong { + font-weight: bold; +} +body em, +body cite { + font-style: italic; +} +body sup, +body sub { + position: relative; + vertical-align: baseline; + font-size: 0.75em; + line-height: 0; +} +body sup { + top: -0.5em; +} +body sub { + bottom: -0.2em; +} +body small { + font-size: 0.85em; +} +body acronym, +body abbr { + border-bottom: 1px dotted; +} +body ul, +body ol, +body dl { + line-height: 1.725; +} +body ul ul, +body ol ul, +body ul ol, +body ol ol { + margin-top: 0; + margin-bottom: 0; +} +body ol { + list-style: decimal; +} +body dt { + font-weight: bold; +} +body table { + width: 100%; + border-collapse: collapse; + text-align: left; + font-size: 12px; + overflow: auto; + display: block; +} +body th { + padding: 8px; + border-bottom: 1px dashed rgba(0,0,0, 0.5); + color: #111; + font-weight: bold; + font-size: 13px; +} +body td { + padding: 0 8px; + border-bottom: none; +} +@font-face { + font-style: normal; + font-family: "Meslo LG"; + src: local("Meslo LG S"), url("../lib/meslo-LG/MesloLGS-Regular.ttf") format("truetype"); +} +@font-face { + font-style: normal; + font-family: "JetBrains Mono"; + src: local("JetBrains Mono"), url("../lib/JetBrainsMono/ttf/JetBrainsMono-Regular.ttf") format("truetype"); +} +*, +*:before, +*:after { + box-sizing: border-box; +} +html { + margin: 0; + padding: 0; + height: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} +body { + margin: 0; + height: 100%; + background-color: #20FFFF; + color: #363533; + font-display: swap; + font-weight: 400; + font-size: 14px; + font-family: "JetBrains Mono", monospace; + line-height: 1.725; + text-rendering: geometricPrecision; + flex: 1; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +.content { + position: relative; + display: flex; + flex-direction: column; + min-height: 100%; + overflow-wrap: break-word; +} +.content p { +/* hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -webkit-hyphens: auto;*/ +} +.content code { +/* hyphens: manual; + -moz-hyphens: manual; + -ms-hyphens: manual; + -webkit-hyphens: manual;*/ +} +.content a { + color: #279522; + text-decoration: none; + background-image: linear-gradient(transparent, transparent 5px, #279522 5px, #279522); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +.content a:hover { + background-image: linear-gradient(transparent, transparent 4px, #21A31A 4px, #21A31A); +} +.content a.icon { + background: none; +} +.content a.icon:hover { + color: #2bbc8a; +} +.content h1 a, +.content .h1 a, +.content h2 a, +.content h3 a, +.content h4 a, +.content h5 a, +.content h6 a { + background: none; + color: inherit; + text-decoration: none; +} +.content h1 a:hover, +.content .h1 a:hover, +.content h2 a:hover, +.content h3 a:hover, +.content h4 a:hover, +.content h5 a:hover, +.content h6 a:hover { + background-image: linear-gradient(transparent, transparent 6px, #2bbc8a 6px, #2bbc8a); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +.content h6 a { + background: none; + color: inherit; + text-decoration: none; +} +.content h6 a:hover { + background-image: linear-gradient(transparent, transparent 6px, #2bbc8a 6px, #2bbc8a); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +@media (min-width: 540px) { + .image-wrap { + flex-direction: row; + margin-bottom: 2rem; + } + .image-wrap .image-block { + flex: 1 0 35%; + margin-right: 2rem; + } + .image-wrap p { + flex: 1 0 65%; + } +} +.max-width { + max-width: 48rem; +} +@media (max-width: 480px) { + .px3 { + padding-right: 1rem; + padding-left: 1rem; + } + .my4 { + margin-top: 2rem; + margin-bottom: 2rem; + } +} +@media (min-width: 480px) { + p { +/* text-align: justify;*/ + } +} +#header { + margin: 0 auto 2rem; + width: 100%; +} +#header h1, +#header .h1 { + margin-top: 0; + margin-bottom: 0; + color: #363533; + letter-spacing: 0.01em; + font-weight: 700; + font-style: normal; + font-size: 1.5rem; + line-height: 2rem; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +#header a { + background: none; + color: inherit; + text-decoration: none; +} +#header #logo { + display: inline-block; + float: left; + margin-right: 20px; + width: 50px; + height: 50px; + border-radius: 5px; + background-size: 50px 50px; + background-repeat: no-repeat; +/* filter: grayscale(100%); + -webkit-filter: grayscale(100%); +*/} +#header #nav { + color: rgba(0,0,0, 0.75); + letter-spacing: 0.01em; + font-weight: 200; + font-style: normal; + font-size: 0.8rem; +} +#header #nav ul { + margin: 0; + padding: 0; + list-style-type: none; + line-height: 15px; +} +#header #nav ul a { + margin-right: 15px; + color: rgba(0,0,0, 0.75); +} +#header #nav ul a:hover { + background-image: linear-gradient(transparent, transparent 5px, rgba(0,0,0, 0.75) 5px, rgba(0,0,0, 0.75)); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +#header #nav ul li { + display: inline-block; + margin-right: 15px; + border-right: 1px dotted; + border-color: rgba(0,0,0, 0.75); + vertical-align: middle; +} +#header #nav ul .icon { + display: none; +} +#header #nav ul li:last-child { + margin-right: 0; + border-right: 0; +} +#header #nav ul li:last-child a { + margin-right: 0; +} +#header:hover #logo { +/* filter: none; + -webkit-filter: none; +*/} +/*@media screen and (max-width: 480px) { + #header #title { + display: table; + margin-right: 5rem; + min-height: 50px; + } + #header #title h1 { + display: table-cell; + vertical-align: middle; + } + #header #nav ul a:hover { + background: none; + } + #header #nav ul li { + display: none; + border-right: 0; + } + #header #nav ul li.icon { + position: absolute; + top: 77px; + right: 1rem; + display: inline-block; + } + #header #nav ul.responsive li { + display: block; + } + #header #nav li:not(:first-child) { + padding-top: 1rem; + padding-left: 70px; + font-size: 1rem; + } +}*/ +#header-post { + position: fixed; + top: 2rem; + right: 0; + display: inline-block; + float: right; + z-index: 100; +} +#header-post a { + background: none; + color: inherit; + text-decoration: none; +} +#header-post a.icon { + background: none; +} +#header-post a.icon:hover { + color: #2bbc8a; +} +#header-post a[rel="next"] img { + transform: rotate(180deg); +} +#header-post a[href="/"] img { + transform: rotate(90deg); +} +#header-post a img { + display: block; + width: 25px; + height: 25px; +} +#header-post nav ul { + display: block; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + list-style-type: none; + padding-inline-start: 40px; +} +#header-post nav ul li { + display: list-item; + margin-right: 0px; +} +#header-post nav > ul { + margin-block-end: 1em; + margin-block-start: 1em; +} +#header-post ul { + display: inline-block; + margin: 0; + padding: 0; + list-style-type: none; +} +#header-post ul li { + display: inline-block; + vertical-align: middle; +} +#header-post ul li:last-child { + margin-right: 0; +} +#header-post #menu-icon { + float: right; + margin-right: 2rem; + margin-left: 15px; +} +#header-post #menu-icon:hover { + color: rgba(0,0,0, 0.75); +} +#header-post #menu-icon-tablet { + float: right; + margin-right: 2rem; + margin-left: 15px; +} +#header-post #menu-icon-tablet:hover { + color: rgba(0,0,0, 0.75); +} +#header-post #top-icon-tablet { + position: fixed; + right: 2rem; + bottom: 2rem; + margin-right: 2rem; + margin-left: 15px; +} +#header-post #top-icon-tablet:hover { + color: rgba(0,0,0, 0.75); +} +#header-post .active { + color: rgba(0,0,0, 0.75); +} +#header-post #menu { + /*visibility: hidden;*/ + margin-right: 2rem; +} +#header-post #nav { + color: rgba(0,0,0, 0.75); + letter-spacing: 0.01em; + font-weight: 200; + font-style: normal; + font-size: 0.8rem; +} +#header-post #nav ul { + line-height: 15px; +} +#header-post #nav ul a { + margin-right: 15px; + color: rgba(0,0,0, 0.75); +} +#header-post #nav ul a:hover { + background-image: linear-gradient(transparent, transparent 5px, rgba(0,0,0, 0.75) 5px, rgba(0,0,0, 0.75)); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +#header-post #nav ul li { + border-right: 1px dotted rgba(0,0,0, 0.75); +} +#header-post #nav ul li:last-child { + margin-right: 0; + border-right: 0; +} +#header-post #nav ul li:last-child a { + margin-right: 0; +} +#header-post #actions { + float: right; + margin-top: 2rem; + margin-right: 2rem; + width: 100%; + text-align: right; +} +#header-post #actions ul { + display: block; +} +#header-post #actions .info { + display: block; + font-style: italic; +} +#header-post #share { + clear: both; + padding-top: 1rem; + padding-right: 2rem; + text-align: right; +} +#header-post #share li { + display: block; + margin: 0; +} +#header-post #toc { + float: right; + clear: both; + overflow: auto; + margin-top: 1rem; + padding-right: 2rem; + max-width: 20em; + max-height: calc(95vh - 7rem); + text-align: right; +} +#header-post #toc a:hover { + color: #2bbc8a; +} +#header-post #toc nav > ul > li { + color: #363533; + font-size: 0.8rem; +} +#header-post #toc nav > ul > li:before { + color: rgba(0,0,0, 0.75); + content: "#"; + margin-right: 8px; +} +#header-post #toc nav > ul > li > ul > li { + color: rgba(0,0,0, 0.5); + font-size: 0.7rem; +} +#header-post #toc nav > ul > li > ul > li:before { + color: rgba(0,0,0, 0.75); + content: "·"; + font-weight: bold; + margin-right: 3px; +} +#header-post #toc nav > ul > li > ul > li > ul > li { + color: #525252; + font-size: 0.4rem; +} +#header-post #toc .toc-level-5 { + display: none; +} +#header-post #toc .toc-level-6 { + display: none; +} +#header-post #toc .toc-number { + display: none; +} +@media screen and (max-width: 500px) { + #header-post { + display: none; + } +} +@media screen and (max-width: 900px) { + #header-post #menu-icon { + display: none; + } + #header-post #actions { + display: none; + } +} +@media screen and (max-width: 1199px) { + #header-post #toc { + display: none; + } +} +@media screen and (min-width: 900px) { + #header-post #menu-icon-tablet { + display: none !important; + } + #header-post #top-icon-tablet { + display: none !important; + } +} +@media screen and (min-width: 1199px) { + #header-post #actions { + width: auto; + } + #header-post #actions ul { + display: inline-block; + float: right; + } + #header-post #actions .info { + display: inline; + float: left; + margin-right: 2rem; + font-style: italic; + } +} +#footer-post { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 5000000; + width: 100%; + border-top: 1px solid rgba(0,0,0, 0.5); + background: #dedcd9; + transition: opacity 0.2s; +} +#footer-post a { + background: none; + color: inherit; + text-decoration: none; +} +#footer-post a.icon { + background: none; +} +#footer-post a.icon:hover { + color: #2bbc8a; +} +#footer-post #nav-footer { + padding-right: 1rem; + padding-left: 1rem; + background: #cdcac6; + text-align: center; +} +#footer-post #nav-footer a { + color: rgba(0,0,0, 0.75); + font-size: 1em; +} +#footer-post #nav-footer a:hover { + background-image: linear-gradient(transparent, transparent 5px, rgba(0,0,0, 0.75) 5px, rgba(0,0,0, 0.75)); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +#footer-post #nav-footer ul { + display: table; + margin: 0; + padding: 0; + width: 100%; + list-style-type: none; +} +#footer-post #nav-footer ul li { + display: inline-table; + padding: 10px; + width: 20%; + vertical-align: middle; +} +#footer-post #actions-footer { + overflow: auto; + margin-top: 1rem; + margin-bottom: 1rem; + padding-right: 1rem; + padding-left: 1rem; + width: 100%; + text-align: center; + white-space: nowrap; +} +#footer-post #actions-footer a { + display: inline-block; + padding-left: 1rem; + color: rgba(0,0,0, 0.75); +} +#footer-post #share-footer { + padding-right: 1rem; + padding-left: 1rem; + background: #cdcac6; + text-align: center; +} +#footer-post #share-footer ul { + display: table; + margin: 0; + padding: 0; + width: 100%; + list-style-type: none; +} +#footer-post #share-footer ul li { + display: inline-table; + padding: 10px; + width: 20%; + vertical-align: middle; +} +#footer-post #toc-footer { + clear: both; + padding-top: 1rem; + padding-bottom: 1rem; + background: #cdcac6; + text-align: left; +} +#footer-post #toc-footer #TableOfContents ul { + margin: 0; + padding-left: 20px; + list-style-type: none; +} +#footer-post #toc-footer #TableOfContents ul li { + line-height: 30px; +} +#footer-post #toc-footer a:hover { + color: #2bbc8a; +} +#footer-post #toc-footer #TableOfContents > ul > li { + color: #363533; + font-size: 0.8rem; +} +#footer-post #toc-footer #TableOfContents > ul > li:before { + color: rgba(0,0,0, 0.75); + content: "#"; + margin-right: 8px; +} +#footer-post #toc-footer #TableOfContents > ul > li > ul > li { + color: rgba(0,0,0, 0.5); + font-size: 0.7rem; + line-height: 15px; +} +#footer-post #toc-footer #TableOfContents > ul > li > ul > li:before { + color: rgba(0,0,0, 0.75); + content: "·"; + font-weight: bold; + margin-right: 3px; +} +#footer-post #toc-footer #TableOfContents > ul > li > ul > li > ul > li { + display: none; +} +@media screen and (min-width: 500px) { + #footer-post-container { + display: none; + } +} +.post-list { + padding: 0; +} +.post-list .post-item { + margin-bottom: 1rem; + margin-left: 0; + list-style-type: none; +} +.post-list .post-item .meta { + display: block; + margin-right: 16px; + min-width: 100px; + color: rgba(0,0,0, 0.5); + font-size: 14px; +} +@media (min-width: 480px) { + .post-list .post-item { + display: flex; + margin-bottom: 5px; + } + .post-list .post-item .meta { + text-align: left; + } +} +.project-list { + padding: 0; + list-style: none; +} +.project-list .project-item { + margin-bottom: 5px; +} +.project-list .project-item p { + display: inline; +} +article header .posttitle { + margin-top: 0; + margin-bottom: 0; + text-transform: none; + font-size: 1.5em; + line-height: 1.25; +} +article header .meta { + margin-top: 0; + margin-bottom: 1rem; +} +article header .meta * { + color: rgba(0,0,0, 0.5); + font-size: 0.85rem; +} +article header .author { + text-transform: uppercase; + letter-spacing: 0.01em; + font-weight: 700; +} +article header .postdate { + display: inline; +} +article .content h2:before { + position: absolute; + top: -4px; + left: -1rem; + color: rgba(0,0,0, 0.75); + content: "#"; + font-weight: bold; + font-size: 1.2rem; +} +article .content img, +article .content video { + display: block; + margin: auto; + max-width: 100%; + height: auto; +} +article .content .video-container { + position: relative; + overflow: hidden; + padding-top: 56.25%; + height: 0; +} +article .content .video-container iframe, +article .content .video-container object, +article .content .video-container embed { + position: absolute; + top: 0; + left: 0; + margin-top: 0; + width: 100%; + height: 100%; +} +article .content blockquote { + margin: 1rem 10px; + padding: 0.5em 10px; + background: inherit; + color: #ab2251; + quotes: "\201C" "\201D" "\2018" "\2019"; + font-weight: bold; +} +article .content blockquote p { + margin: 0; +} +article .content blockquote:before { + margin-right: 0.25em; + color: #ab2251; + content: "\201C"; + vertical-align: -0.4em; + font-size: 2em; + line-height: 0.1em; +} +article .content blockquote footer { + margin: line-height 0; + color: rgba(0,0,0, 0.5); + font-size: 11px; +} +article .content blockquote footer a { + background-image: linear-gradient(transparent, transparent 5px, rgba(0,0,0, 0.5) 5px, rgba(0,0,0, 0.5)); + color: rgba(0,0,0, 0.5); +} +article .content blockquote footer a:hover { + background-image: linear-gradient(transparent, transparent 4px, #858585 4px, #858585); + color: #858585; +} +article .content blockquote footer cite:before { + padding: 0 0.5em; + content: "—"; +} +article .content .pullquote { + margin: 0; + width: 45%; + text-align: left; +} +article .content .pullquote.left { + margin-right: 1em; + margin-left: 0.5em; +} +article .content .pullquote.right { + margin-right: 0.5em; + margin-left: 1em; +} +article .content .caption { + position: relative; + display: block; + margin-top: 0.5em; + color: rgba(0,0,0, 0.5); + text-align: center; + font-size: 0.9em; +} +.posttitle { + text-transform: none; + font-size: 1.5em; + line-height: 1.25; +} +.article-tag .tag-link { + background-image: linear-gradient(transparent, transparent 10px, #2bbc8a 10px, #2bbc8a); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +.article-tag .tag-link:before { + content: "#"; +} +.article-category .category-link { + background-image: linear-gradient(transparent, transparent 10px, #2bbc8a 10px, #2bbc8a); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +@media (min-width: 480px) { + .article-tag, + .article-category { + display: inline; + } + .article-tag:before, + .article-category:before { + content: "|"; + } +} +#archive .post-list { + padding: 0; +} +#archive .post-list .post-item { + margin-bottom: 1rem; + margin-left: 0; + list-style-type: none; +} +#archive .post-list .post-item .meta { + display: block; + margin-right: 16px; + min-width: 100px; + color: rgba(0,0,0, 0.5); + font-size: 14px; +} +@media (min-width: 480px) { + #archive .post-list .post-item { + display: flex; + margin-bottom: 5px; + margin-left: 1rem; + } + #archive .post-list .post-item .meta { + text-align: left; + } +} +.blog-post-comments { + margin-top: 4rem; +} +#footer { + position: absolute; + bottom: 0; + margin-bottom: 10px; + width: 100%; + color: rgba(0,0,0, 0.5); + vertical-align: top; + text-align: center; + font-size: 11px; +} +#footer ul { + margin: 0; + padding: 0; + list-style: none; +} +#footer li { + display: inline-block; + margin-right: 15px; + border-right: 1px solid; + border-color: rgba(0,0,0, 0.5); + vertical-align: middle; +} +#footer li a { + margin-right: 15px; +} +#footer li:last-child { + margin-right: 0; + border-right: 0; +} +#footer li:last-child a { + margin-right: 0; +} +#footer a { + color: rgba(0,0,0, 0.5); + text-decoration: underline; + background-image: none; +} +#footer a:hover { + color: #858585; +} +#footer .footer-left { + height: 20px; + vertical-align: middle; + line-height: 20px; +} +@media (min-width: 39rem) { + #footer { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; + align-content: center; + margin-bottom: 20px; + } + #footer .footer-left { + align-self: flex-start; + margin-right: 20px; + } + #footer .footer-right { + align-self: flex-end; + } +} +.pagination { + display: inline-block; + margin-top: 2rem; + width: 100%; + text-align: center; +} +.pagination .page-number { + color: #363533; + font-size: 0.8rem; +} +.pagination a { + padding: 4px 6px; + border-radius: 5px; + background-image: none; + color: #363533; + text-decoration: none; +} +.pagination a:hover { + background-image: none; +} +.pagination a:hover:not(.active) { + color: #111; +} +.search-input { + padding: 4px 7px; + width: 100%; + outline: none; + border: solid 1px rgba(0,0,0, 0.5); + border-radius: 5px; + background-color: #e2e0de; + color: #363533; + font-size: 1.2rem; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; +} +.search-input:focus { + border: solid 1px rgba(0,0,0, 0.75); +} +#search-result ul.search-result-list { + padding: 0; + list-style-type: none; +} +#search-result li { + margin: 2em auto; +} +#search-result a.search-result-title { + background-image: none; + color: #363533; + text-transform: capitalize; + font-weight: bold; + line-height: 1.2; +} +#search-result p.search-result { + overflow: hidden; + margin: 0.4em auto; + max-height: 13em; +/* text-align: justify;*/ + font-size: 0.8em; +} +#search-result em.search-keyword { + border-bottom: 1px dashed #2bbc8a; + color: #2bbc8a; + font-weight: bold; +} +.search-no-result { + display: none; + padding-bottom: 0.5em; + color: #363533; +} +#tag-cloud .tag-cloud-title { + color: rgba(0,0,0, 0.5); +} +#tag-cloud .tag-cloud-tags { + clear: both; + text-align: center; +} +#tag-cloud .tag-cloud-tags a { + display: inline-block; + margin: 10px; +} +.tooltipped { + position: relative; +} +.tooltipped::after { + position: absolute; + z-index: 1000000; + display: none; + padding: 0.2em 0.5em; + -webkit-font-smoothing: subpixel-antialiased; + color: #e2e0de; + font-display: swap; + font-weight: 400; + font-size: 11.200000000000001px; + font-family: "JetBrains Mono", monospace; + line-height: 1.725; + text-rendering: geometricPrecision; + text-align: center; + word-wrap: break-word; + white-space: pre; + content: attr(aria-label); + background: #363533; + border-radius: 3px; + opacity: 0; +} +.tooltipped::before { + position: absolute; + z-index: 1000001; + display: none; + width: 0; + height: 0; + color: #363533; + pointer-events: none; + content: ''; + border: 6px solid transparent; + opacity: 0; +} +.tooltipped:hover::before, +.tooltipped:active::before, +.tooltipped:focus::before, +.tooltipped:hover::after, +.tooltipped:active::after, +.tooltipped:focus::after { + display: inline-block; + text-decoration: none; + animation-name: tooltip-appear; + animation-duration: 0.1s; + animation-fill-mode: forwards; + animation-timing-function: ease-in; +} +.tooltipped-s::after, +.tooltipped-sw::after { + top: 100%; + right: 50%; + margin-top: 6px; +} +.tooltipped-s::before, +.tooltipped-sw::before { + top: auto; + right: 50%; + bottom: -7px; + margin-right: -6px; + border-bottom-color: #363533; +} +.tooltipped-sw::after { + margin-right: -16px; +} +.tooltipped-s::after { + transform: translateX(50%); +} +@-moz-keyframes tooltip-appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-webkit-keyframes tooltip-appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-o-keyframes tooltip-appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes tooltip-appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +#categories .category-list-title { + color: rgba(0,0,0, 0.5); +} +#categories .category-list .category-list-item .category-list-count { + color: rgba(0,0,0, 0.5); +} +#categories .category-list .category-list-item .category-list-count:before { + content: " ("; +} +#categories .category-list .category-list-item .category-list-count:after { + content: ")"; +} +pre { + overflow-x: auto; + padding: 0; + border: 1px dotted rgba(0,0,0, 0.5); + border-radius: 4px; + font-size: 13px; + font-family: "JetBrains Mono", monospace; + line-height: 22px; + -webkit-border-radius: 4px; +} +pre code { + display: block; + padding: 10px 15px; + border: none; +} +pre code.hljs { + padding: 10px 15px; +} +code { + padding: 0 5px; + border: 1px dotted rgba(0,0,0, 0.5); + border-radius: 2px; + -webkit-border-radius: 2px; +} +.highlight { + overflow-x: auto; + margin: 1rem 0; + padding: 10px 15px; + border-radius: 4px; + background: #dedcd9; + font-family: "JetBrains Mono", monospace; + -webkit-border-radius: 4px; +} +.highlight figcaption { + margin: -5px 0 5px; + color: #757575; + font-size: 0.9em; + zoom: 1; +} +.highlight figcaption a { + float: right; + color: #757575; + font-style: italic; + font-size: 0.8em; + background-image: linear-gradient(transparent, transparent 10px, #2bbc8a 10px, #2bbc8a); + background-position: bottom; + background-size: 100% 6px; + background-repeat: repeat-x; +} +.highlight figcaption a:hover { + color: #919191; +} +.highlight figcaption:before, +.highlight figcaption content: "" { + display: table; +} +.highlight figcaption:after { + clear: both; +} +.highlight:hover .btn-copy { + opacity: 1; +} +.highlight .btn-copy { + font-size: 1.2rem; + position: absolute; + right: 20px; + opacity: 0; + transition: opacity 0.2s ease-in; +} +.highlight .btn-copy:hover { + color: rgba(0,0,0, 0.75); +} +.highlight pre { + margin: 0; + padding: 0; + border: none; + background: none; +} +.highlight table { + width: auto; +} +.highlight td.gutter { + text-align: right; + opacity: 0.2; +} +.highlight .line { + height: 22px; +} diff --git a/themes/cactus/layouts/posts/single.html b/themes/cactus/layouts/posts/single.html index ab29c7d..89a5c70 100644 --- a/themes/cactus/layouts/posts/single.html +++ b/themes/cactus/layouts/posts/single.html @@ -74,6 +74,7 @@