Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Customize footnotes #144

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/scss/pages/about.scss
Original file line number Diff line number Diff line change
Expand Up @@ -56,5 +56,5 @@ main {
.social-icons {
justify-content: flex-start;
padding-top: 1rem;
margin-left: -0.8rem; // offset to negate icon's padding to align with text above
margin-left: -0.8rem; // offset to negate icon's padding to align with text above
}
84 changes: 82 additions & 2 deletions assets/scss/pages/post.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,10 @@ $tocBreakpoint: 1024px;
font-size: 1rem;

a {
color: $darkGrey;
text-decoration: underline;
text-decoration: none;
color: $primary;
margin-left: 0.2rem;
font-size: 0.75rem;
}
}

Expand Down Expand Up @@ -239,3 +241,81 @@ table {
border: 1px double $greyTableBorder;
}
}

/* footnote customization */

// Footnote ([1])
.footnote-ref {
text-decoration: none;
color: $primary;
font-family: "monospace";
border-radius: 3px;
font-size: 0.75rem;
&:hover {
background: lighten($primary, 38%);
}
&::before {
content: "[";
}
&::after {
content: "]";
}
}

// Return to footnote (↩︎)
.footnote-backref {
text-decoration: none;
color: $primary;
padding: 0rem 0.2rem 0rem 0.2rem;
font-size: 0.85rem;
&:hover {
background: lighten($primary, 38%);
}
}

// Line separating post content from the footnotes at the bottom

.footnotes {
> hr {
color: $grey;
border-top: 1px;
margin: 1rem 0;
}
}

// Footnote highlighting

@keyframes footnote_highlight {
0% {
opacity: 0.55;
}
100% {
opacity: 0.05;
}
}

.footnotes li,
.footnote-backref {
position: relative;

&::after {
position: absolute;
z-index: -1;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $primary;
opacity: 0;
border-radius: 0px;
}

&:target,
&:focus {
&::after {
animation: footnote_highlight ease 2s;
opacity: 0.05;
}
}
}
9 changes: 9 additions & 0 deletions exampleSite/content/blog/markdown-syntax.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,15 @@ The blockquote element represents content that is quoted from another source, op

[^1]: The above quote is often attributed to Leonardo da Vinci but there is no concrete evidence to support this.

## Footnotes

Both simple footnotes[^2] and longer footnotes[^longnote] are supported.

[^2]: This is a simple footnote.

[^longnote]: This is a longer footnote with multiple paragraphs.

Include paragraphs into the footnote by indenting them. Include as many paragraphs as are needed.

## Tables

Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@charset "UTF-8";button,button[type=button],button[type=reset],button[type=submit]{-webkit-appearance:button}input,input[type=text],input[type=email]{-webkit-appearance:none;-moz-appearance:none;appearance:none}html,body{background-color:#fff;color:#111;height:100%}html{box-sizing:border-box}*,*:before,*:after{padding:0;margin:0;box-sizing:inherit}html{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:95%}@media screen and (min-width:800px){html{font-size:100%}}@media screen and (min-width:1400px){html{font-size:115%}}h1,h2,h3,h4,h5,h6{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}h1{font-size:2.121rem;line-height:2.25rem;margin-top:2.25rem}h2{font-size:1.414rem}h3{font-size:1.17833333rem}h4{font-size:.98194444rem}h5{font-size:.81828704rem}p{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}ul,ol{padding-left:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem}ul li,ol li{line-height:1.5rem}ul ul,ul ol,ol ul,ol ol{margin-top:0;margin-bottom:0}blockquote{margin-top:1.5rem;margin-bottom:1.5rem;line-height:1.5rem;color:#111}blockquote::before{position:absolute;content:"\201C";font-size:6em;font-family:roboto,serif;margin-top:.1em;margin-left:-.2em;z-index:-1;color:#ededed}blockquote cite{font-style:italic;font-size:.95em;color:#717171}blockquote cite::before{content:"— "}pre{line-height:1.45;margin-top:1.5rem;padding:16px;word-wrap:normal;overflow:auto;background-color:#f6f8fa;border-radius:3px}code{font-size:85%;font-family:sfmono-regular,Consolas,Menlo,monospace;padding:.2em .4em;margin:0;background-color:rgba(27,31,35,.05);border-radius:3px}pre>code{word-break:normal;white-space:pre}pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.lead{font-size:1.414rem}abbr[title]{text-decoration:underline double}.burger__container{height:4rem;display:flex;align-items:center;padding:0 1.5rem;position:fixed;width:100%;background:#fff;z-index:2}@media screen and (min-width:800px){.burger__container{display:none}}.burger{position:relative;width:28px;height:28px;cursor:pointer}.burger__meat{position:absolute;width:28px;height:2px;background:#111;top:calc(50% - 2px/2);left:calc(50% - 28px/2);transition:all 150ms ease-in}.burger__meat--1{transform:translateY(-10px)}.burger__meat--2{width:calc(28px - 6px)}.burger__meat--3{transform:translateY(10px)}.nav--active .burger__meat--1{transform:rotate(45deg)}.nav--active .burger__meat--2{opacity:0}.nav--active .burger__meat--3{transform:rotate(-45deg)}.nav{font-size:16px;position:fixed;display:flex;justify-content:center;align-items:center;background:#fff;visibility:hidden;z-index:1}@media screen and (min-width:800px){.nav{display:block;visibility:visible;padding-top:3em;width:100px}}.nav--active .nav{visibility:visible;height:100%;width:100%}@media screen and (min-width:800px){.nav--active .nav{width:100px}}.nav__list{text-align:right;list-style:none;margin:0;padding:0;width:50%}@media screen and (min-width:800px){.nav__list{width:auto}}@media screen and (max-width:799px){.nav__list{transform:translateY(-25px);opacity:0}.nav--active .nav__list{transform:translateY(0);opacity:1;transition:all 500ms ease}}.nav__list li{margin-bottom:3em;line-height:1.5em}.nav__list li:last-of-type{margin-bottom:0}@media screen and (min-width:800px){.nav__list li{margin-bottom:1.75em}}.nav__list a{color:#9b9b9b;text-decoration:none;font-size:2em}.nav__list a.active{color:#111}.nav__list a:hover{color:#111}@media screen and (min-width:800px){.nav__list a{font-size:1em}}.social-icons{display:flex;justify-content:center}.social-icons__link{padding:.8rem}.social-icons__link:not(:last-child){margin-right:1em}.social-icons__link .social-icons__icon{width:1.4rem;height:1.4rem;background-size:contain;background-repeat:no-repeat}body.nav--active{overflow:hidden}main{padding:3rem 1.5rem 1rem}@media screen and (min-width:800px){main{padding-left:calc(1.5rem + 100px)}}@media screen and (max-width:799px){main{padding-top:calc(3rem + 4rem)}}code[class*=language-],pre[class*=language-]{color:#24292e;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.token.comment,.token.prolog,.token.doctype,.token.cdata,.token.plain-text{color:#6a737d}.token.atrule,.token.attr-value,.token.keyword,.token.operator{color:#d73a49}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#22863a}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#032f62}.token.function,.token.class-name{color:#6f42c1}.language-jsx .token.punctuation,.language-jsx .token.tag .token.punctuation,.language-jsx .token.tag .token.script,.language-jsx .token.plain-text{color:#24292e}.language-jsx .token.tag .token.attr-name{color:#6f42c1}.language-jsx .token.tag .token.class-name{color:#005cc5}.language-jsx .token.tag .token.script-punctuation,.language-jsx .token.attr-value .token.punctuation:first-child{color:#d73a49}.language-jsx .token.attr-value{color:#032f62}.language-jsx span[class=comment]{color:pink}.language-html .token.tag .token.punctuation{color:#24292e}.language-html .token.tag .token.attr-name{color:#6f42c1}.language-html .token.tag .token.attr-value,.language-html .token.tag .token.attr-value .token.punctuation:not(:first-child){color:#032f62}.language-css .token.selector{color:#6f42c1}.language-css .token.property{color:#005cc5}.flex-wrapper{display:flex}.post__container{flex-grow:1;min-width:0}.post{width:100%;max-width:34rem;margin:0 auto}.post h2,.post h3{position:relative;padding-top:10px}.post h2 .anchor,.post h3 .anchor{top:.5rem;text-decoration:none;position:absolute;left:-1rem;color:#9b9b9b;font-size:1.2rem;font-weight:400}.post h2 .anchor:hover,.post h3 .anchor:hover{color:#717171}.post blockquote{width:95%;margin:0 auto;font-size:1rem}.post blockquote a{color:#717171;text-decoration:underline}.post img{width:100%;max-width:500px;margin:0 auto;display:block}#post__title{margin-top:0;margin-bottom:.5rem}.post__date{color:#9b9b9b;font-size:.8rem}.post__footer{padding-top:3rem}.toc-container{position:sticky;align-self:start;top:3rem;max-width:350px}@media screen and (max-width:1024px){.toc-container{display:none}}.toc-post-title{font-size:.9rem;margin-bottom:.8rem}#TableOfContents ul{list-style:none;margin:0}#TableOfContents a{text-decoration:none;color:#9b9b9b;font-size:.9rem}#TableOfContents a.active{color:#333}.tags__list{padding-right:1.5rem;margin:1.5rem 0 0;list-style:none;display:flex;justify-content:flex-end}.tag__item{margin-right:1rem;display:inline-block}.tag__item:last-child{margin-right:0}.tag__link{display:inline-block;text-decoration:none;padding:.2em .4em;border-radius:3px;background:#f2e3ff;color:#9013fe;font-size:.8rem}.tag__link:hover{background:#ebd4ff}.gif{margin-top:1.5rem}.gif img{max-width:375px}.pagination{display:flex;flex-direction:column;margin-top:1.5rem}@media screen and (min-width:600px){.pagination{flex-direction:row;justify-content:space-between}}.pagination__item{text-decoration:none;display:flex;flex-direction:column}.pagination__item:nth-child(2){margin-top:1.5rem}@media screen and (min-width:600px){.pagination__item{width:275px;padding:15px;border-radius:4px}.pagination__item:first-of-type{padding-right:15px}.pagination__item:last-of-type{margin-top:0}.pagination__item:hover{background-color:#f6f9fc}}.pagination__label{color:#9b9b9b;font-size:.8rem}.pagination__title{color:#111;font-weight:700;margin-top:.25rem}footer{text-align:center;padding:0 1.5rem;background:#fff}footer p{margin-top:1rem;color:#9b9b9b;font-size:.65rem}.post__content ul{list-style:none}.post__content ul li{margin-bottom:.5rem}.post__content ul li::before{content:"-";color:#717171;position:absolute;margin-left:-15px}.twitter-tweet.twitter-tweet-rendered{margin:1.5rem auto!important;width:375px!important}table{max-width:100%;border-spacing:0}table thead{background:#f7f7f7}table th,table td{padding:.5em 1em;border:1px double #eee}
@charset "UTF-8";button,button[type=button],button[type=reset],button[type=submit]{-webkit-appearance:button}input,input[type=text],input[type=email]{-webkit-appearance:none;-moz-appearance:none;appearance:none}html,body{background-color:#fff;color:#111;height:100%}html{box-sizing:border-box}*,*:before,*:after{padding:0;margin:0;box-sizing:inherit}html{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,sans-serif;-webkit-font-smoothing:antialiased;font-size:95%}@media screen and (min-width:800px){html{font-size:100%}}@media screen and (min-width:1400px){html{font-size:115%}}h1,h2,h3,h4,h5,h6{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}h1{font-size:2.121rem;line-height:2.25rem;margin-top:2.25rem}h2{font-size:1.414rem}h3{font-size:1.17833333rem}h4{font-size:.98194444rem}h5{font-size:.81828704rem}p{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}ul,ol{padding-left:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem}ul li,ol li{line-height:1.5rem}ul ul,ul ol,ol ul,ol ol{margin-top:0;margin-bottom:0}blockquote{margin-top:1.5rem;margin-bottom:1.5rem;line-height:1.5rem;color:#111}blockquote::before{position:absolute;content:"\201C";font-size:6em;font-family:roboto,serif;margin-top:.1em;margin-left:-.2em;z-index:-1;color:#ededed}blockquote cite{font-style:italic;font-size:.95em;color:#717171}blockquote cite::before{content:"— "}pre{line-height:1.45;margin-top:1.5rem;padding:16px;word-wrap:normal;overflow:auto;background-color:#f6f8fa;border-radius:3px}code{font-size:85%;font-family:sfmono-regular,Consolas,Menlo,monospace;padding:.2em .4em;margin:0;background-color:rgba(27,31,35,.05);border-radius:3px}pre>code{word-break:normal;white-space:pre}pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.lead{font-size:1.414rem}abbr[title]{text-decoration:underline double}.burger__container{height:4rem;display:flex;align-items:center;padding:0 1.5rem;position:fixed;width:100%;background:#fff;z-index:2}@media screen and (min-width:800px){.burger__container{display:none}}.burger{position:relative;width:28px;height:28px;cursor:pointer}.burger__meat{position:absolute;width:28px;height:2px;background:#111;top:calc(50% - 2px/2);left:calc(50% - 28px/2);transition:all 150ms ease-in}.burger__meat--1{transform:translateY(-10px)}.burger__meat--2{width:calc(28px - 6px)}.burger__meat--3{transform:translateY(10px)}.nav--active .burger__meat--1{transform:rotate(45deg)}.nav--active .burger__meat--2{opacity:0}.nav--active .burger__meat--3{transform:rotate(-45deg)}.nav{font-size:16px;position:fixed;display:flex;justify-content:center;align-items:center;background:#fff;visibility:hidden;z-index:1}@media screen and (min-width:800px){.nav{display:block;visibility:visible;padding-top:3em;width:100px}}.nav--active .nav{visibility:visible;height:100%;width:100%}@media screen and (min-width:800px){.nav--active .nav{width:100px}}.nav__list{text-align:right;list-style:none;margin:0;padding:0;width:50%}@media screen and (min-width:800px){.nav__list{width:auto}}@media screen and (max-width:799px){.nav__list{transform:translateY(-25px);opacity:0}.nav--active .nav__list{transform:translateY(0);opacity:1;transition:all 500ms ease}}.nav__list li{margin-bottom:3em;line-height:1.5em}.nav__list li:last-of-type{margin-bottom:0}@media screen and (min-width:800px){.nav__list li{margin-bottom:1.75em}}.nav__list a{color:#9b9b9b;text-decoration:none;font-size:2em}.nav__list a.active{color:#111}.nav__list a:hover{color:#111}@media screen and (min-width:800px){.nav__list a{font-size:1em}}.social-icons{display:flex;justify-content:center}.social-icons__link{padding:.8rem}.social-icons__link:not(:last-child){margin-right:1em}.social-icons__link .social-icons__icon{width:1.4rem;height:1.4rem;background-size:contain;background-repeat:no-repeat}body.nav--active{overflow:hidden}main{padding:3rem 1.5rem 1rem}@media screen and (min-width:800px){main{padding-left:calc(1.5rem + 100px)}}@media screen and (max-width:799px){main{padding-top:calc(3rem + 4rem)}}code[class*=language-],pre[class*=language-]{color:#24292e;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.token.comment,.token.prolog,.token.doctype,.token.cdata,.token.plain-text{color:#6a737d}.token.atrule,.token.attr-value,.token.keyword,.token.operator{color:#d73a49}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#22863a}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#032f62}.token.function,.token.class-name{color:#6f42c1}.language-jsx .token.punctuation,.language-jsx .token.tag .token.punctuation,.language-jsx .token.tag .token.script,.language-jsx .token.plain-text{color:#24292e}.language-jsx .token.tag .token.attr-name{color:#6f42c1}.language-jsx .token.tag .token.class-name{color:#005cc5}.language-jsx .token.tag .token.script-punctuation,.language-jsx .token.attr-value .token.punctuation:first-child{color:#d73a49}.language-jsx .token.attr-value{color:#032f62}.language-jsx span[class=comment]{color:pink}.language-html .token.tag .token.punctuation{color:#24292e}.language-html .token.tag .token.attr-name{color:#6f42c1}.language-html .token.tag .token.attr-value,.language-html .token.tag .token.attr-value .token.punctuation:not(:first-child){color:#032f62}.language-css .token.selector{color:#6f42c1}.language-css .token.property{color:#005cc5}.flex-wrapper{display:flex}.post__container{flex-grow:1;min-width:0}.post{width:100%;max-width:34rem;margin:0 auto}.post h2,.post h3{position:relative;padding-top:10px}.post h2 .anchor,.post h3 .anchor{top:.5rem;text-decoration:none;position:absolute;left:-1rem;color:#9b9b9b;font-size:1.2rem;font-weight:400}.post h2 .anchor:hover,.post h3 .anchor:hover{color:#717171}.post blockquote{width:95%;margin:0 auto;font-size:1rem}.post blockquote a{text-decoration:none;color:#9013fe;margin-left:.2rem;font-size:.75rem}.post img{width:100%;max-width:500px;margin:0 auto;display:block}#post__title{margin-top:0;margin-bottom:.5rem}.post__date{color:#9b9b9b;font-size:.8rem}.post__footer{padding-top:3rem}.toc-container{position:sticky;align-self:start;top:3rem;max-width:350px}@media screen and (max-width:1024px){.toc-container{display:none}}.toc-post-title{font-size:.9rem;margin-bottom:.8rem}#TableOfContents ul{list-style:none;margin:0}#TableOfContents a{text-decoration:none;color:#9b9b9b;font-size:.9rem}#TableOfContents a.active{color:#333}.tags__list{padding-right:1.5rem;margin:1.5rem 0 0;list-style:none;display:flex;justify-content:flex-end}.tag__item{margin-right:1rem;display:inline-block}.tag__item:last-child{margin-right:0}.tag__link{display:inline-block;text-decoration:none;padding:.2em .4em;border-radius:3px;background:#f2e3ff;color:#9013fe;font-size:.8rem}.tag__link:hover{background:#ebd4ff}.gif{margin-top:1.5rem}.gif img{max-width:375px}.pagination{display:flex;flex-direction:column;margin-top:1.5rem}@media screen and (min-width:600px){.pagination{flex-direction:row;justify-content:space-between}}.pagination__item{text-decoration:none;display:flex;flex-direction:column}.pagination__item:nth-child(2){margin-top:1.5rem}@media screen and (min-width:600px){.pagination__item{width:275px;padding:15px;border-radius:4px}.pagination__item:first-of-type{padding-right:15px}.pagination__item:last-of-type{margin-top:0}.pagination__item:hover{background-color:#f6f9fc}}.pagination__label{color:#9b9b9b;font-size:.8rem}.pagination__title{color:#111;font-weight:700;margin-top:.25rem}footer{text-align:center;padding:0 1.5rem;background:#fff}footer p{margin-top:1rem;color:#9b9b9b;font-size:.65rem}.post__content ul{list-style:none}.post__content ul li{margin-bottom:.5rem}.post__content ul li::before{content:"-";color:#717171;position:absolute;margin-left:-15px}.twitter-tweet.twitter-tweet-rendered{margin:1.5rem auto!important;width:375px!important}table{max-width:100%;border-spacing:0}table thead{background:#f7f7f7}table th,table td{padding:.5em 1em;border:1px double #eee}.footnote-ref{text-decoration:none;color:#9013fe;font-family:monospace;border-radius:3px;font-size:.75rem}.footnote-ref:hover{background:#ebd4ff}.footnote-ref::before{content:"["}.footnote-ref::after{content:"]"}.footnote-backref{text-decoration:none;color:#9013fe;padding:0 .2rem;font-size:.85rem}.footnote-backref:hover{background:#ebd4ff}.footnotes>hr{color:#9b9b9b;border-top:1px;margin:1rem 0}@keyframes footnote_highlight{0%{opacity:.55}100%{opacity:.05}}.footnotes li,.footnote-backref{position:relative}.footnotes li::after,.footnote-backref::after{position:absolute;z-index:-1;content:"";top:0;left:0;right:0;bottom:0;background:#9013fe;opacity:0;border-radius:0}.footnotes li:target::after,.footnotes li:focus::after,.footnote-backref:target::after,.footnote-backref:focus::after{animation:footnote_highlight ease 2s;opacity:.05}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"Target":"css/post.min.b60e0932fe1c50c3d7c5b4f83ee9e4592363654d0f2abf05bbd0678d5b8a214c.css","MediaType":"text/css","Data":{"Integrity":"sha256-tg4JMv4cUMPXxbT4PunkWSNjZU0PKr8Fu9BnjVuKIUw="}}
{"Target":"css/post.min.4bfab51981eacff14d8616a3a7247734b5757287b011d7732dd451316ccb3e5e.css","MediaType":"text/css","Data":{"Integrity":"sha256-S/q1GYHqz/FNhhajpyR3NLV1coewEddzLdRRMWzLPl4="}}
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
{"Target":"css/tags.min.366a1c4761304f40d7ab2549c070344a1c8cfbfefc263bb2187aa968d9f66612.css","MediaType":"text/css","Data":{"Integrity":"sha256-NmocR2EwT0DXqyVJwHA0ShyM+/78JjuyGHqpaNn2ZhI="}}
{
"Target": "css/tags.min.366a1c4761304f40d7ab2549c070344a1c8cfbfefc263bb2187aa968d9f66612.css",
"MediaType": "text/css",
"Data": {"Integrity": "sha256-NmocR2EwT0DXqyVJwHA0ShyM+/78JjuyGHqpaNn2ZhI="}
}