From 70c7b91f81456b22be35ac94c875ee09c9d72640 Mon Sep 17 00:00:00 2001 From: slashformotion <45801817+slashformotion@users.noreply.github.com> Date: Fri, 20 Aug 2021 23:21:47 +0200 Subject: [PATCH] Convert css to scss entirely (#24) * Convert css to scss entirely Fixes #15 * tufte css is now a scss file --- .gitignore | 2 + Makefile | 33 + assets/scss/components/code-highlight.scss | 53 ++ assets/scss/components/header.scss | 25 + assets/scss/components/meta.scss | 19 + assets/scss/components/nav.scss | 32 + assets/scss/components/toc.scss | 47 ++ assets/scss/general.scss | 114 +++ assets/scss/highlight-dark.scss | 2 +- assets/scss/highlight-light.scss | 2 +- assets/scss/hugo-tufte.scss | 342 +-------- assets/scss/pages/footer.scss | 46 ++ assets/scss/{ => syntax}/syntax-dark.scss | 180 ++--- assets/scss/{ => syntax}/syntax-light.scss | 0 assets/scss/vendor/_normalize.scss | 3 + assets/scss/vendor/normalize/_import-now.scss | 11 + .../vendor/normalize/_normalize-mixin.scss | 666 ++++++++++++++++++ assets/scss/vendor/normalize/_variables.scss | 36 + .../vendor/normalize/_vertical-rhythm.scss | 61 ++ assets/scss/vendor/tufte.scss | 458 ++++++++++++ layouts/partials/header.includes.html | 2 - package.json | 18 + static/css/hugo-tufte-override.css | 0 static/css/tufte.css | 455 ------------ 24 files changed, 1729 insertions(+), 878 deletions(-) create mode 100644 Makefile create mode 100644 assets/scss/components/code-highlight.scss create mode 100644 assets/scss/components/header.scss create mode 100644 assets/scss/components/meta.scss create mode 100644 assets/scss/components/nav.scss create mode 100644 assets/scss/components/toc.scss create mode 100644 assets/scss/general.scss create mode 100644 assets/scss/pages/footer.scss rename assets/scss/{ => syntax}/syntax-dark.scss (98%) rename assets/scss/{ => syntax}/syntax-light.scss (100%) create mode 100644 assets/scss/vendor/_normalize.scss create mode 100644 assets/scss/vendor/normalize/_import-now.scss create mode 100644 assets/scss/vendor/normalize/_normalize-mixin.scss create mode 100644 assets/scss/vendor/normalize/_variables.scss create mode 100644 assets/scss/vendor/normalize/_vertical-rhythm.scss create mode 100644 assets/scss/vendor/tufte.scss create mode 100644 package.json delete mode 100644 static/css/hugo-tufte-override.css delete mode 100644 static/css/tufte.css diff --git a/.gitignore b/.gitignore index 6149cbc..67ccb74 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ exampleSite/public/* *.patch exampleSite/resources/_gen/ +node_modules +package-lock.json \ No newline at end of file diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..db250f8 --- /dev/null +++ b/Makefile @@ -0,0 +1,33 @@ +# VARIABLE +NPM := npm +SCSS_DIR := "assets/scss/vendor" + +# LIST OF THE COMMANDS +help: + @echo "Commands available:" + @echo "- 'rebuild': rebuild the public directory in the 'exampleSite'" + @echo "- 'vendor': copy the files from the 'node_modules' folder to the 'assets' directory (Please note that the 'node_modules' folder need to exist)" + @echo "- 'install-npm': install (or reinstall) the nodes modules" + @echo "- 'install': shortcut for 'make install-npm && make vendor'" + +# COMMANDS +install-npm: + @rm -r node_modules + @rm package-lock.json + @$(NPM) install + @sudo $(NPM) install -g postcss-cli #needs to install globally + @echo "NPM INSTALL" +vendor: + @mkdir -p $(SCSS_DIR) + @cp -r node_modules/normalize-scss/sass/** $(SCSS_DIR) + @echo "VENDORING" +rebuild: + @rm -rf exampleSite/public + @cd exampleSite && hugo && cd .. + @echo "SITE REBUILT" +install: + @make install-npm + @make vendor + +chroma: + hugo gen chromastyles --style=monokai > assets/scss/syntax/syntax-dark.scss \ No newline at end of file diff --git a/assets/scss/components/code-highlight.scss b/assets/scss/components/code-highlight.scss new file mode 100644 index 0000000..7a87645 --- /dev/null +++ b/assets/scss/components/code-highlight.scss @@ -0,0 +1,53 @@ +$ht-code-border-radius: .4em; +.highlight { + width: 55%; + overflow-x: scroll; + border-radius: $ht-code-border-radius; + + &>div.chroma>table.lntable{ + margin: $ht-code-border-radius 0 $ht-code-border-radius 0; + & td:first-of-type { + & span:not(& span>span) { + padding: 0 .75em 0 .5em; + } + } + } + &>.chroma>code { + + width: max-content; + margin-top: .5em; + margin-bottom: .5em; + margin-left: .5em; + &>span.hl{ + margin-left: -.5em; + padding-left: .5em; + } + } + + .chroma .hl { + // border-radius: $ht-code-border-radius / 2; + display: block; + } + + &::-webkit-scrollbar { + border-radius: $ht-code-border-radius; + width: 10px; + height: 1rem; + } + &::-webkit-scrollbar-thumb { + border-radius: $ht-code-border-radius; + } +} + +.highlight .lntable { + overflow: initial; +} + +.highlight pre { + margin: 0; +} + +.highlight pre code { + display: block; + font-size: 1rem; +} diff --git a/assets/scss/components/header.scss b/assets/scss/components/header.scss new file mode 100644 index 0000000..a528897 --- /dev/null +++ b/assets/scss/components/header.scss @@ -0,0 +1,25 @@ +header.brand { + margin-top: 0.5em; +} + +/* Main brand title */ +header.brand h1 { + margin: 0; + font-weight: 400; + color: rgba(65, 70, 75, 1); +} + +header.brand h2 { + margin: 0; + padding-top: 0rem; + /*font-style: normal;*/ + /*font-weight: 200;*/ + color: rgba(100, 105, 110, 1); +} + +header.brand hr { + text-align: left; + margin-left: 0; + width: 75%; + border-color: rgba(250, 250, 250, 0.25); +} diff --git a/assets/scss/components/meta.scss b/assets/scss/components/meta.scss new file mode 100644 index 0000000..be8cef5 --- /dev/null +++ b/assets/scss/components/meta.scss @@ -0,0 +1,19 @@ +/* Content meta-data such as author, publication date, etc. */ +.content-meta { + display: block; + /*color: rgba(155, 155, 155, 1);*/ + color: rgba(100, 105, 110, 1); + font-size: 1.1rem; + margin-top: 1em; +} + +.content-meta .author { + /*color: rgb(90, 20, 55)*/ + color: rgba(65, 70, 75, 1); +} + +.post-avatar { + border-radius: 50px; + float: right; + margin-left: 1em; +} \ No newline at end of file diff --git a/assets/scss/components/nav.scss b/assets/scss/components/nav.scss new file mode 100644 index 0000000..558082c --- /dev/null +++ b/assets/scss/components/nav.scss @@ -0,0 +1,32 @@ + +nav.menu ul { + list-style: none; + display: block; + /*text-align:center;*/ + margin-top: 0.75rem; + padding: 0; + max-width: 45rem; + /* Width is the same as tufte.css body */ + font-size: 0.9rem; + width: 87.5%; +} + +nav.menu li { + display: inline-block; + margin-right: 1rem; +} + +nav.menu li a { + text-decoration: none; + background: transparent; + color: rgba(65, 70, 75, 1); + letter-spacing: 0.05em; + text-transform: uppercase; +} + +nav.menu li a:hover, +nav.menu li a:active, +nav.menu li a:focus { + background: inherit; + color: darkgray; +} \ No newline at end of file diff --git a/assets/scss/components/toc.scss b/assets/scss/components/toc.scss new file mode 100644 index 0000000..f0ea1cd --- /dev/null +++ b/assets/scss/components/toc.scss @@ -0,0 +1,47 @@ +/* We utilize the html5 summary tags in order to create a post archive */ +/* with built-in folding. */ +details { + border-radius: 3px; +} + +details summary { + vertical-align: top; + padding: .3em .5em; + outline: none; + /*color: rgba(65, 70, 75, 1);*/ +} + +details summary.year { + font-size: 1.5rem; +} + +// details[open] summary { +// } + + +/* Table of Contents */ +.toc summary { + font-size: 1.5rem; + margin-bottom: -1.5rem; + padding-left: 0; +} + +.toc { + // float: right; + /*padding: 0rem 1rem 1rem 1rem;*/ + /*margin-top: 1rem;*/ + // border-left: 1px solid #eee; +} + +.toc ul { + list-style: none; + display: block; + /*margin-top: 0.75rem;*/ + padding: 0; + width: 87.5%; +} + +.toc li { + line-height: 0.5rem; + margin: 1rem; +} diff --git a/assets/scss/general.scss b/assets/scss/general.scss new file mode 100644 index 0000000..ed3e4d5 --- /dev/null +++ b/assets/scss/general.scss @@ -0,0 +1,114 @@ +/* ------------------------------------------------------------------------ */ +/* hugo-tufte.css */ +/* Contains extensions to the original tufte.css styles to */ +/* accomodate a blog-like site. */ +/* ------------------------------------------------------------------------ */ + +@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@351&display=swap"); + +/* When setting the primary font stack, apply it to the Pure grid units along */ +/* with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use */ +/* specific font stacks to ensure the greatest OS/browser compatibility. */ +html, +button, +input, +select, +textarea, +p, +nav, +section, +article, +header, +footer, +.pure-g [class*="pure-u"] { + font-family: "et-book", -apple-system, "San Francisco", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Open Sans", "Helvetica Neue", "Lucida Grand", sans-serif; +} + +p { + text-align: justify; +} + +code { + font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 1.125rem; + line-height: 1.6; +} + +.sidenote, +.marginnote { + margin-right: -55%; + width: 45%; +} + + +/* ------------------------------------------------------------------------ */ +/* Generic content, such as the index list pages */ +/* ------------------------------------------------------------------------ */ + +/* Content Title styling. This is mostly to avoid underlying links. */ +h1.content-title { + /*max-width: 50rem;*/ +} +h1.content-title a:link, +h1.content-title a:visited { + background: transparent; + text-decoration: none; + color: inherit; +} +h1.content-title a:hover, +h1.content-title a:focus { + color: darkgray; +} + + + +/* ------------------------------------------------------------------------ */ +/* Styling for listing pages. */ +/* ------------------------------------------------------------------------ */ +.list-page { + ul { + list-style-type: none; + margin: -0.25em; + width: 87.5%; + max-width: 45rem; + } + li { + margin: 0; + /*font-size: 95%;*/ + } +} +.list-page .list-date { + display: inline; + font-size: 0.75em; + /* padding-right: 2em; */ + /* margin-right: 2em; */ +} + +table:not(.lntable) { + margin-top: 1em; + font-size: 1.4rem; + width: auto; /* making booktabs style tables the unstyled default in case someone uses Markdown styling */ + /* margin: 0 auto; */ + /* border-spacing: 0px; */ + border-top: 2px solid #111; + border-bottom: 2px solid #111; +} + +table:not(.lntable) th, +table:not(.lntable) td { + font-size: 1.25rem; + line-height: 1.71428571; +} + +table:not(.lntable) td { + padding-right: 0.75em; +} + +table.lntable { + td.lntd { + padding: 0em; + } + border-spacing: 0; + padding: 0; +} diff --git a/assets/scss/highlight-dark.scss b/assets/scss/highlight-dark.scss index 1016174..e31ab70 100644 --- a/assets/scss/highlight-dark.scss +++ b/assets/scss/highlight-dark.scss @@ -1,6 +1,6 @@ $ht-code-bgcolor: #282a36; -@import "syntax-dark.scss"; +@import "syntax/syntax-dark.scss"; .highlight { &::-webkit-scrollbar { diff --git a/assets/scss/highlight-light.scss b/assets/scss/highlight-light.scss index 5a1303d..772c046 100644 --- a/assets/scss/highlight-light.scss +++ b/assets/scss/highlight-light.scss @@ -1,6 +1,6 @@ $ht-code-bgcolor: #dde2ff; -@import "syntax-light.scss"; +@import "syntax/syntax-light.scss"; .highlight { &::-webkit-scrollbar { diff --git a/assets/scss/hugo-tufte.scss b/assets/scss/hugo-tufte.scss index d31dd42..27cb552 100644 --- a/assets/scss/hugo-tufte.scss +++ b/assets/scss/hugo-tufte.scss @@ -1,333 +1,17 @@ -/* ------------------------------------------------------------------------ */ -/* hugo-tufte.css */ -/* Contains extensions to the original tufte.css styles to */ -/* accomodate a blog-like site. */ -/* ------------------------------------------------------------------------ */ +// VENDOR +@import "vendor/normalize/import-now"; +@import "vendor/tufte.scss"; -@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@351&display=swap'); +// OUR CODE +@import "general"; -/* When setting the primary font stack, apply it to the Pure grid units along */ -/* with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use */ -/* specific font stacks to ensure the greatest OS/browser compatibility. */ -html, button, input, select, textarea, p, nav, section, article, header, footer, .pure-g [class *= "pure-u"] { - font-family: "et-book", -apple-system, "San Francisco", "Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Open Sans","Helvetica Neue", "Lucida Grand", sans-serif; -} +/// PAGES +@import "pages/footer"; -p { - text-align: justify; -} - -code { - font-family: "Fira Code", Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 1.125rem; - line-height: 1.6; -} - -$ht-code-border-radius: .4em; -.highlight { - width: 55%; - overflow-x: scroll; - border-radius: $ht-code-border-radius; - - &>div.chroma>table.lntable{ - margin: $ht-code-border-radius 0 $ht-code-border-radius 0; - & td:first-of-type { - & span:not(& span>span) { - padding: 0 .75em 0 .5em; - } - } - } - &>.chroma>code { - - width: max-content; - margin-top: .5em; - margin-bottom: .5em; - margin-left: .5em; - &>span.hl{ - margin-left: -.5em; - padding-left: .5em; - } - } - - .chroma .hl { - // border-radius: $ht-code-border-radius / 2; - display: block; - } - - &::-webkit-scrollbar { - border-radius: $ht-code-border-radius; - width: 10px; - height: 1rem; - } - &::-webkit-scrollbar-thumb { - border-radius: $ht-code-border-radius; - } -} - -.highlight .lntable { - overflow: initial; -} - -.highlight pre { - margin: 0; -} - -.highlight pre code { - display: block; - font-size: 1rem; -} - -.sidenote, .marginnote { - margin-right: -55%; - width: 45%; -} - -/* ------------------------------------------------------------------------ */ -/* Brand details, such as a sidebar or top display. */ -/* ------------------------------------------------------------------------ */ -header.brand{ - margin-top: 0.5em; -} - -/* Main brand title */ -header.brand h1 { - margin: 0; - font-weight: 400; - color: rgba(65, 70, 75, 1); -} - -header.brand h2 { - margin: 0; - padding-top: 0rem; - /*font-style: normal;*/ - /*font-weight: 200;*/ - color: rgba(100, 105, 110, 1); -} - -header.brand hr { - text-align: left; - margin-left: 0; - width: 75%; - border-color: rgba(250, 250, 250, 0.25); -} - -nav.menu ul { - list-style: none; - display: block; - /*text-align:center;*/ - margin-top: 0.75rem; - padding: 0; - max-width: 45rem; - /* Width is the same as tufte.css body */ - font-size: .9rem; - width: 87.5%; -} - -nav.menu li { - display: inline-block; - margin-right: 1rem; -} - -nav.menu li a { - text-decoration: none; - background: transparent; - color: rgba(65, 70, 75, 1); - letter-spacing: 0.05em; - text-transform: uppercase; -} - -nav.menu li a:hover, -nav.menu li a:active, -nav.menu li a:focus { - background: inherit; - color: darkgray; -} - -/* ------------------------------------------------------------------------ */ -/* Generic content, such as the index list pages */ -/* ------------------------------------------------------------------------ */ - -/* Content Title styling. This is mostly to avoid underlying links. */ -h1.content-title { - /*max-width: 50rem;*/ -} -h1.content-title a:link, -h1.content-title a:visited { - background: transparent; - text-decoration: none; - color: inherit; -} -h1.content-title a:hover, -h1.content-title a:focus { - color: darkgray; -} - -/* Content meta-data such as author, publication date, etc. */ -.content-meta { - display: block; - /*color: rgba(155, 155, 155, 1);*/ - color: rgba(100, 105, 110, 1); - font-size: 1.1rem; - margin-top: 1em; -} - -.content-meta .author { - /*color: rgb(90, 20, 55)*/ - color: rgba(65, 70, 75, 1); -} - - -.post-avatar { - border-radius: 50px; - float: right; - margin-left: 1em; -} - -/* ------------------------------------------------------------------------ */ - /* Styling for listing pages. */ -/* ------------------------------------------------------------------------ */ -.list-page { - ul { - list-style-type: none; - margin: -0.25em; - width: 87.5%; - max-width: 45rem; - } - li { - margin: 0; - /*font-size: 95%;*/ -} -} -.list-page -.list-date { - display: inline; - font-size: 0.75em; - /* padding-right: 2em; */ - /* margin-right: 2em; */ -} - -/* Table of Contents */ -.toc summary { - font-size: 1.5rem; - margin-bottom: -1.5rem; - padding-left: 0; -} - -.toc { - /*float: right;*/ - /*padding: 0rem 1rem 1rem 1rem;*/ - /*margin-top: 1rem;*/ - /*border-left: 1px solid #eee;*/ -} - -.toc ul { - list-style: none; - display: block; - /*margin-top: 0.75rem;*/ - padding: 0; - width: 87.5%; -} - -.toc li { - line-height: 0.5rem; - margin: 1rem; -} - -table:not(.lntable) { - margin-top: 1em; - font-size: 1.4rem; - width: auto; /* making booktabs style tables the unstyled default in case someone uses Markdown styling */ - /* margin: 0 auto; */ - /* border-spacing: 0px; */ - border-top: 2px solid #111; - border-bottom: 2px solid #111; -} - -table:not(.lntable) th, table:not(.lntable) td{ - font-size: 1.25rem; - line-height: 1.71428571; -} - -table:not(.lntable) td { - padding-right: 0.75em; -} - -table.lntable -{ - td.lntd { - padding: 0em; - } - border-spacing: 0; - padding: 0; -} - -/* Footer, but with a different name to avoid conflicts with tufte.css */ -footer.page-footer{ - padding-top: 1em; - margin-top: 3em; - color: #aaa; - width: 95%; - max-width: 45rem; -} -footer.page-footer p { - font-size: 1.2rem; - margin: 0em; - /* light font looked odd on chrome */ - /*font-weight: lighter;*/ -} -footer.page-footer a { - color: rgba(65, 70, 75, 1); - text-decoration: none; - background: transparent; -} -footer.page-footer hr { - text-align: left; - margin-left: 0; - width: 100%; - border-color: rgba(250, 250, 250, 0.25); -} - -footer.page-footer ul.page-footer-menu { - list-style: none; - display: block; - /*text-align:center;*/ - margin: 0; - padding: 0; - width: unset; -} - -footer.page-footer ul.page-footer-menu li { - display: inline-block; - margin-right: 0.5rem; - // font-size: 55%; -} - -.copyright { -} -.copyright p { - font-size: 90%; -} - -/* ------------------------------------------------------------------------ */ -/* Post Archive. */ -/* ------------------------------------------------------------------------ */ -/* We utilize the html5 summary tags in order to create a post archive */ -/* with built-in folding. */ -details { - border-radius: 3px; -} - -details summary { - vertical-align: top; - padding: .3em .5em; - outline: none; - /*color: rgba(65, 70, 75, 1);*/ -} - -details summary.year { - font-size: 1.5rem; -} - -details[open] summary { -} +/// COMPONENTS +@import "components/code-highlight"; +@import "components/toc"; +@import "components/nav"; +@import "components/header"; +@import "components/meta"; diff --git a/assets/scss/pages/footer.scss b/assets/scss/pages/footer.scss new file mode 100644 index 0000000..c036f6a --- /dev/null +++ b/assets/scss/pages/footer.scss @@ -0,0 +1,46 @@ +/* Footer, but with a different name to avoid conflicts with tufte.css */ +footer.page-footer{ + padding-top: 1em; + margin-top: 3em; + color: #aaa; + width: 95%; + max-width: 45rem; +} +footer.page-footer p { + font-size: 1.2rem; + margin: 0em; + /* light font looked odd on chrome */ + /*font-weight: lighter;*/ +} +footer.page-footer a { + color: rgba(65, 70, 75, 1); + text-decoration: none; + background: transparent; +} +footer.page-footer hr { + text-align: left; + margin-left: 0; + width: 100%; + border-color: rgba(250, 250, 250, 0.25); +} + +footer.page-footer ul.page-footer-menu { + list-style: none; + display: block; + /*text-align:center;*/ + margin: 0; + padding: 0; + width: unset; +} + +footer.page-footer ul.page-footer-menu li { + display: inline-block; + margin-right: 0.5rem; + // font-size: 55%; +} + +.copyright { +} +.copyright p { + font-size: 90%; +} diff --git a/assets/scss/syntax-dark.scss b/assets/scss/syntax/syntax-dark.scss similarity index 98% rename from assets/scss/syntax-dark.scss rename to assets/scss/syntax/syntax-dark.scss index 5cd9360..6ac2598 100644 --- a/assets/scss/syntax-dark.scss +++ b/assets/scss/syntax/syntax-dark.scss @@ -1,91 +1,91 @@ -/* Dracula Theme v1.2.5 - * - * https://github.com/zenorocha/dracula-theme - * - * Copyright 2016, All rights reserved - * - * Code licensed under the MIT license - * http://zenorocha.mit-license.org - * - * @author Rob G - * @author Chris Bracco - * @author Zeno Rocha - */ - - .highlight .hl { background-color: scale-color($ht-code-bgcolor, $lightness: 32%, $saturation: -40%) } - .highlight { background: $ht-code-bgcolor; color: #f8f8f2 } - .highlight .c { color: #6272a4 } /* Comment */ - .highlight .err { color: #f8f8f2 } /* Error */ - .highlight .g { color: #f8f8f2 } /* Generic */ - .highlight .k { color: #ff79c6 } /* Keyword */ - .highlight .l { color: #f8f8f2 } /* Literal */ - .highlight .n { color: #f8f8f2 } /* Name */ - .highlight .o { color: #ff79c6 } /* Operator */ - .highlight .x { color: #f8f8f2 } /* Other */ - .highlight .p { color: #f8f8f2 } /* Punctuation */ - .highlight .ch { color: #6272a4 } /* Comment.Hashbang */ - .highlight .cm { color: #6272a4 } /* Comment.Multiline */ - .highlight .cp { color: #ff79c6 } /* Comment.Preproc */ - .highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */ - .highlight .c1 { color: #6272a4 } /* Comment.Single */ - .highlight .cs { color: #6272a4 } /* Comment.Special */ - .highlight .gd { color: #8b080b } /* Generic.Deleted */ - .highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */ - .highlight .gr { color: #f8f8f2 } /* Generic.Error */ - .highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */ - .highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */ - .highlight .go { color: #44475a } /* Generic.Output */ - .highlight .gp { color: #f8f8f2 } /* Generic.Prompt */ - .highlight .gs { color: #f8f8f2 } /* Generic.Strong */ - .highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */ - .highlight .gt { color: #f8f8f2 } /* Generic.Traceback */ - .highlight .kc { color: #ff79c6 } /* Keyword.Constant */ - .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */ - .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */ - .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */ - .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */ - .highlight .kt { color: #8be9fd } /* Keyword.Type */ - .highlight .ld { color: #f8f8f2 } /* Literal.Date */ - .highlight .m { color: #bd93f9 } /* Literal.Number */ - .highlight .s { color: #f1fa8c } /* Literal.String */ - .highlight .na { color: #50fa7b } /* Name.Attribute */ - .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */ - .highlight .nc { color: #50fa7b } /* Name.Class */ - .highlight .no { color: #f8f8f2 } /* Name.Constant */ - .highlight .nd { color: #f8f8f2 } /* Name.Decorator */ - .highlight .ni { color: #f8f8f2 } /* Name.Entity */ - .highlight .ne { color: #f8f8f2 } /* Name.Exception */ - .highlight .nf { color: #50fa7b } /* Name.Function */ - .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */ - .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ - .highlight .nx { color: #f8f8f2 } /* Name.Other */ - .highlight .py { color: #f8f8f2 } /* Name.Property */ - .highlight .nt { color: #ff79c6 } /* Name.Tag */ - .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */ - .highlight .ow { color: #ff79c6 } /* Operator.Word */ - .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ - .highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */ - .highlight .mf { color: #bd93f9 } /* Literal.Number.Float */ - .highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */ - .highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */ - .highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */ - .highlight .sa { color: #f1fa8c } /* Literal.String.Affix */ - .highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */ - .highlight .sc { color: #f1fa8c } /* Literal.String.Char */ - .highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */ - .highlight .sd { color: #f1fa8c } /* Literal.String.Doc */ - .highlight .s2 { color: #f1fa8c } /* Literal.String.Double */ - .highlight .se { color: #f1fa8c } /* Literal.String.Escape */ - .highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */ - .highlight .si { color: #f1fa8c } /* Literal.String.Interpol */ - .highlight .sx { color: #f1fa8c } /* Literal.String.Other */ - .highlight .sr { color: #f1fa8c } /* Literal.String.Regex */ - .highlight .s1 { color: #f1fa8c } /* Literal.String.Single */ - .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */ - .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */ - .highlight .fm { color: #50fa7b } /* Name.Function.Magic */ - .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */ - .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */ - .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */ - .highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */ +/* Dracula Theme v1.2.5 + * + * https://github.com/zenorocha/dracula-theme + * + * Copyright 2016, All rights reserved + * + * Code licensed under the MIT license + * http://zenorocha.mit-license.org + * + * @author Rob G + * @author Chris Bracco + * @author Zeno Rocha + */ + + .highlight .hl { background-color: scale-color($ht-code-bgcolor, $lightness: 32%, $saturation: -40%) } + .highlight { background: $ht-code-bgcolor; color: #f8f8f2 } + .highlight .c { color: #6272a4 } /* Comment */ + .highlight .err { color: #f8f8f2 } /* Error */ + .highlight .g { color: #f8f8f2 } /* Generic */ + .highlight .k { color: #ff79c6 } /* Keyword */ + .highlight .l { color: #f8f8f2 } /* Literal */ + .highlight .n { color: #f8f8f2 } /* Name */ + .highlight .o { color: #ff79c6 } /* Operator */ + .highlight .x { color: #f8f8f2 } /* Other */ + .highlight .p { color: #f8f8f2 } /* Punctuation */ + .highlight .ch { color: #6272a4 } /* Comment.Hashbang */ + .highlight .cm { color: #6272a4 } /* Comment.Multiline */ + .highlight .cp { color: #ff79c6 } /* Comment.Preproc */ + .highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */ + .highlight .c1 { color: #6272a4 } /* Comment.Single */ + .highlight .cs { color: #6272a4 } /* Comment.Special */ + .highlight .gd { color: #8b080b } /* Generic.Deleted */ + .highlight .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */ + .highlight .gr { color: #f8f8f2 } /* Generic.Error */ + .highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */ + .highlight .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */ + .highlight .go { color: #44475a } /* Generic.Output */ + .highlight .gp { color: #f8f8f2 } /* Generic.Prompt */ + .highlight .gs { color: #f8f8f2 } /* Generic.Strong */ + .highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */ + .highlight .gt { color: #f8f8f2 } /* Generic.Traceback */ + .highlight .kc { color: #ff79c6 } /* Keyword.Constant */ + .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */ + .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */ + .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */ + .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */ + .highlight .kt { color: #8be9fd } /* Keyword.Type */ + .highlight .ld { color: #f8f8f2 } /* Literal.Date */ + .highlight .m { color: #bd93f9 } /* Literal.Number */ + .highlight .s { color: #f1fa8c } /* Literal.String */ + .highlight .na { color: #50fa7b } /* Name.Attribute */ + .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */ + .highlight .nc { color: #50fa7b } /* Name.Class */ + .highlight .no { color: #f8f8f2 } /* Name.Constant */ + .highlight .nd { color: #f8f8f2 } /* Name.Decorator */ + .highlight .ni { color: #f8f8f2 } /* Name.Entity */ + .highlight .ne { color: #f8f8f2 } /* Name.Exception */ + .highlight .nf { color: #50fa7b } /* Name.Function */ + .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */ + .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ + .highlight .nx { color: #f8f8f2 } /* Name.Other */ + .highlight .py { color: #f8f8f2 } /* Name.Property */ + .highlight .nt { color: #ff79c6 } /* Name.Tag */ + .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */ + .highlight .ow { color: #ff79c6 } /* Operator.Word */ + .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ + .highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */ + .highlight .mf { color: #bd93f9 } /* Literal.Number.Float */ + .highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */ + .highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */ + .highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */ + .highlight .sa { color: #f1fa8c } /* Literal.String.Affix */ + .highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */ + .highlight .sc { color: #f1fa8c } /* Literal.String.Char */ + .highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */ + .highlight .sd { color: #f1fa8c } /* Literal.String.Doc */ + .highlight .s2 { color: #f1fa8c } /* Literal.String.Double */ + .highlight .se { color: #f1fa8c } /* Literal.String.Escape */ + .highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */ + .highlight .si { color: #f1fa8c } /* Literal.String.Interpol */ + .highlight .sx { color: #f1fa8c } /* Literal.String.Other */ + .highlight .sr { color: #f1fa8c } /* Literal.String.Regex */ + .highlight .s1 { color: #f1fa8c } /* Literal.String.Single */ + .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */ + .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */ + .highlight .fm { color: #50fa7b } /* Name.Function.Magic */ + .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */ + .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */ + .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */ + .highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */ .highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */ \ No newline at end of file diff --git a/assets/scss/syntax-light.scss b/assets/scss/syntax/syntax-light.scss similarity index 100% rename from assets/scss/syntax-light.scss rename to assets/scss/syntax/syntax-light.scss diff --git a/assets/scss/vendor/_normalize.scss b/assets/scss/vendor/_normalize.scss new file mode 100644 index 0000000..fd669eb --- /dev/null +++ b/assets/scss/vendor/_normalize.scss @@ -0,0 +1,3 @@ +@import 'normalize/variables'; +@import 'normalize/vertical-rhythm'; +@import 'normalize/normalize-mixin'; diff --git a/assets/scss/vendor/normalize/_import-now.scss b/assets/scss/vendor/normalize/_import-now.scss new file mode 100644 index 0000000..aac5d2b --- /dev/null +++ b/assets/scss/vendor/normalize/_import-now.scss @@ -0,0 +1,11 @@ +// Import Now +// +// If you import this module directly, it will immediately output all the CSS +// needed to normalize default HTML elements across all browsers. +// +// ``` +// @import "normalize/import-now"; +// ``` + +@import '../normalize'; +@include normalize(); diff --git a/assets/scss/vendor/normalize/_normalize-mixin.scss b/assets/scss/vendor/normalize/_normalize-mixin.scss new file mode 100644 index 0000000..a366f7b --- /dev/null +++ b/assets/scss/vendor/normalize/_normalize-mixin.scss @@ -0,0 +1,666 @@ +// Helper function for the normalize() mixin. +@function _normalize-include($section, $exclude: null) { + // Initialize the global variables needed by this function. + @if not global_variable_exists(_normalize-include) { + $_normalize-include: () !global; + $_normalize-exclude: () !global; + } + // Since we are given 2 parameters, set the global variables. + @if $exclude != null { + $include: $section; + // Sass doesn't have static variables, so the work-around is to stuff these + // values into global variables so we can access them in future calls. + $_normalize-include: if(type-of($include) == 'list', $include, ($include)) !global; + $_normalize-exclude: if(type-of($exclude) == 'list', $exclude, ($exclude)) !global; + @return true; + } + + // Check if $section is in the $include list. + @if index($_normalize-include, $section) { + @return true; + } + // If $include is set to (all), make sure $section is not in $exclude. + @else if not index($_normalize-exclude, $section) and index($_normalize-include, all) { + @return true; + } + @return false; +} + +@mixin normalize($include: (all), $exclude: ()) { + // Initialize the helper function by passing it this mixin's parameters. + $init: _normalize-include($include, $exclude); + + // If we've customized any font variables, we'll need extra properties. + @if $base-line-height != 24px + or $base-unit != 'em' + or $h2-font-size != 1.5 * $base-font-size + or $h3-font-size != 1.17 * $base-font-size + or $h4-font-size != 1 * $base-font-size + or $h5-font-size != 0.83 * $base-font-size + or $h6-font-size != 0.67 * $base-font-size { + $normalize-vertical-rhythm: true !global; + } + + /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ + + @if _normalize-include(document) { + /* Document + ========================================================================== */ + + /** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + + html { + @if $base-font-family { + /* Change the default font family in all browsers (opinionated). */ + font-family: $base-font-family; + } + @if $base-font-size != 16px or $normalize-vertical-rhythm { + // Correct old browser bug that prevented accessible resizing of text + // when root font-size is set with px or em. + font-size: ($base-font-size / 16px) * 100%; + } + @if $normalize-vertical-rhythm { + line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */ + } + @else { + line-height: 1.15; /* 1 */ + } + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + } + + @if _normalize-include(sections) { + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers (opinionated). + */ + + body { + margin: 0; + } + + /** + * Add the correct display in IE 9-. + */ + + article, + aside, + footer, + header, + nav, + section { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + @include normalize-font-size($h1-font-size); + @if $normalize-vertical-rhythm { + @include normalize-line-height($h1-font-size); + } + + @if $normalize-vertical-rhythm { + /* Set 1 unit of vertical rhythm on the top and bottom margins. */ + @include normalize-margin(1 0, $h1-font-size); + } + @else { + margin: 0.67em 0; + } + } + + @if $normalize-vertical-rhythm { + h2 { + @include normalize-font-size($h2-font-size); + @include normalize-line-height($h2-font-size); + @include normalize-margin(1 0, $h2-font-size); + } + + h3 { + @include normalize-font-size($h3-font-size); + @include normalize-line-height($h3-font-size); + @include normalize-margin(1 0, $h3-font-size); + } + + h4 { + @include normalize-font-size($h4-font-size); + @include normalize-line-height($h4-font-size); + @include normalize-margin(1 0, $h4-font-size); + } + + h5 { + @include normalize-font-size($h5-font-size); + @include normalize-line-height($h5-font-size); + @include normalize-margin(1 0, $h5-font-size); + } + + h6 { + @include normalize-font-size($h6-font-size); + @include normalize-line-height($h6-font-size); + @include normalize-margin(1 0, $h6-font-size); + } + } + } + + @if _normalize-include(grouping) { + /* Grouping content + ========================================================================== */ + + @if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + blockquote { + @include normalize-margin(1 $indent-amount); + } + + dl, + ol, + ul { + @include normalize-margin(1 0); + } + + /** + * Turn off margins on nested lists. + */ + + ol, + ul { + ol, + ul { + margin: 0; + } + } + + dd { + margin: 0 0 0 $indent-amount; + } + + ol, + ul { + padding: 0 0 0 $indent-amount; + } + } + + /** + * Add the correct display in IE 9-. + */ + + figcaption, + figure { + display: block; + } + + /** + * Add the correct margin in IE 8. + */ + + figure { + @if $normalize-vertical-rhythm { + @include normalize-margin(1 $indent-amount); + } + @else { + margin: 1em $indent-amount; + } + } + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * Add the correct display in IE. + */ + + main { + display: block; + } + + @if $normalize-vertical-rhythm { + /** + * Set 1 unit of vertical rhythm on the top and bottom margin. + */ + + p, + pre { + @include normalize-margin(1 0); + } + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + } + + @if _normalize-include(links) { + /* Links + ========================================================================== */ + + /** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + + a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ + } + } + + @if _normalize-include(text) { + /* Text-level semantics + ========================================================================== */ + + /** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + + b, + strong { + font-weight: inherit; + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font style in Android 4.3-. + */ + + dfn { + font-style: italic; + } + + /** + * Add the correct background and color in IE 9-. + */ + + mark { + background-color: #ff0; + color: #000; + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + } + + @if _normalize-include(embedded) { + /* Embedded content + ========================================================================== */ + + /** + * Add the correct display in IE 9-. + */ + + audio, + video { + display: inline-block; + } + + /** + * Add the correct display in iOS 4-7. + */ + + audio:not([controls]) { + display: none; + height: 0; + } + + /** + * Remove the border on images inside links in IE 10-. + */ + + img { + border-style: none; + } + + /** + * Hide the overflow in IE. + */ + + svg:not(:root) { + overflow: hidden; + } + } + + @if _normalize-include(forms) { + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: if($base-font-family, $base-font-family, sans-serif); /* 1 */ + font-size: 100%; /* 1 */ + @if $normalize-vertical-rhythm { + line-height: ($base-line-height / $base-font-size) * 1em; /* 1 */ + } + @else { + line-height: 1.15; /* 1 */ + } + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + */ + + button { + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + + button, + html [type="button"], /* 1 */ + [type="reset"], + [type="submit"] { + -webkit-appearance: button; /* 2 */ + } + + button, + [type="button"], + [type="reset"], + [type="submit"] { + + /** + * Remove the inner border and padding in Firefox. + */ + + &::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + &:-moz-focusring { + outline: 1px dotted ButtonText; + } + } + + /** + * Show the overflow in Edge. + */ + + input { + overflow: visible; + } + + /** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + + /** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + + &::-webkit-search-cancel-button, + &::-webkit-search-decoration { + -webkit-appearance: none; + } + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + color: inherit; /* 2 */ + white-space: normal; /* 1 */ + } + + /** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ + } + + /** + * Remove the default vertical scrollbar in IE. + */ + + textarea { + overflow: auto; + } + } + + @if _normalize-include(interactive) { + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* + * Add the correct display in IE 9-. + */ + + menu { + display: block; + + @if $normalize-vertical-rhythm { + /* + * 1. Set 1 unit of vertical rhythm on the top and bottom margin. + * 2. Set consistent space for the list style image. + */ + + @include normalize-margin(1 0); /* 1 */ + padding: 0 0 0 $indent-amount; /* 2 */ + + /** + * Turn off margins on nested lists. + */ + + menu &, + ol &, + ul & { + margin: 0; + } + } + } + } + + @if _normalize-include(scripting) { + /* Scripting + ========================================================================== */ + + /** + * Add the correct display in IE 9-. + */ + + canvas { + display: inline-block; + } + + /** + * Add the correct display in IE. + */ + + template { + display: none; + } + } + + @if _normalize-include(hidden) { + /* Hidden + ========================================================================== */ + + /** + * Add the correct display in IE 10-. + */ + + [hidden] { + display: none; + } + } +} diff --git a/assets/scss/vendor/normalize/_variables.scss b/assets/scss/vendor/normalize/_variables.scss new file mode 100644 index 0000000..10d05ed --- /dev/null +++ b/assets/scss/vendor/normalize/_variables.scss @@ -0,0 +1,36 @@ +// +// Variables +// +// You can override the default values by setting the variables in your Sass +// before importing the normalize-scss library. + +// The font size set on the root html element. +$base-font-size: 16px !default; + +// The base line height determines the basic unit of vertical rhythm. +$base-line-height: 24px !default; + +// The length unit in which to output vertical rhythm values. +// Supported values: px, em, rem. +$base-unit: 'em' !default; + +// The default font family. +$base-font-family: null !default; + +// The font sizes for h1-h6. +$h1-font-size: 2 * $base-font-size !default; +$h2-font-size: 1.5 * $base-font-size !default; +$h3-font-size: 1.17 * $base-font-size !default; +$h4-font-size: 1 * $base-font-size !default; +$h5-font-size: 0.83 * $base-font-size !default; +$h6-font-size: 0.67 * $base-font-size !default; + +// The amount lists and blockquotes are indented. +$indent-amount: 40px !default; + +// The following variable controls whether normalize-scss will output +// font-sizes, line-heights and block-level top/bottom margins that form a basic +// vertical rhythm on the page, which differs from the original Normalize.css. +// However, changing any of the variables above will cause +// $normalize-vertical-rhythm to be automatically set to true. +$normalize-vertical-rhythm: false !default; diff --git a/assets/scss/vendor/normalize/_vertical-rhythm.scss b/assets/scss/vendor/normalize/_vertical-rhythm.scss new file mode 100644 index 0000000..4f53647 --- /dev/null +++ b/assets/scss/vendor/normalize/_vertical-rhythm.scss @@ -0,0 +1,61 @@ +// +// Vertical Rhythm +// +// This is the minimal amount of code needed to create vertical rhythm in our +// CSS. If you are looking for a robust solution, look at the excellent Typey +// library. @see https://github.com/jptaranto/typey + +@function normalize-rhythm($value, $relative-to: $base-font-size, $unit: $base-unit) { + @if unit($value) != px { + @error "The normalize vertical-rhythm module only supports px inputs. The typey library is better."; + } + @if $unit == rem { + @return ($value / $base-font-size) * 1rem; + } + @else if $unit == em { + @return ($value / $relative-to) * 1em; + } + @else { // $unit == px + @return $value; + } +} + +@mixin normalize-font-size($value, $relative-to: $base-font-size) { + @if unit($value) != 'px' { + @error "normalize-font-size() only supports px inputs. The typey library is better."; + } + font-size: normalize-rhythm($value, $relative-to); +} + +@mixin normalize-rhythm($property, $values, $relative-to: $base-font-size) { + $value-list: $values; + $sep: space; + @if type-of($values) == 'list' { + $sep: list-separator($values); + } + @else { + $value-list: append((), $values); + } + + $normalized-values: (); + @each $value in $value-list { + @if unitless($value) and $value != 0 { + $value: $value * normalize-rhythm($base-line-height, $relative-to); + } + $normalized-values: append($normalized-values, $value, $sep); + } + #{$property}: $normalized-values; +} + +@mixin normalize-margin($values, $relative-to: $base-font-size) { + @include normalize-rhythm(margin, $values, $relative-to); +} + +@mixin normalize-line-height($font-size, $min-line-padding: 2px) { + $lines: ceil($font-size / $base-line-height); + // If lines are cramped include some extra leading. + @if ($lines * $base-line-height - $font-size) < ($min-line-padding * 2) { + $lines: $lines + 1; + } + @include normalize-rhythm(line-height, $lines, $font-size); +} diff --git a/assets/scss/vendor/tufte.scss b/assets/scss/vendor/tufte.scss new file mode 100644 index 0000000..ab9e0e7 --- /dev/null +++ b/assets/scss/vendor/tufte.scss @@ -0,0 +1,458 @@ +/* You can find the original at https://github.com/edwardtufte/tufte-css */ + +/* Import ET Book styles + adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ + +@charset "UTF-8"; + +@font-face { + font-family: "et-book"; + src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot"); + src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), + url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), + url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), + url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "et-book"; + src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot"); + src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") + format("embedded-opentype"), + url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") + format("woff"), + url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") + format("truetype"), + url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") + format("svg"); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: "et-book"; + src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot"); + src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), + url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), + url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), + url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: "et-book-roman-old-style"; + src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot"); + src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") + format("embedded-opentype"), + url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), + url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), + url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg"); + font-weight: normal; + font-style: normal; +} + +/* Tufte CSS styles */ +html { + font-size: 15px; +} + +body { + width: 87.5%; + margin-left: auto; + margin-right: auto; + padding-left: 12.5%; + font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; + background-color: #fffff8; + color: #111; + max-width: 1400px; + counter-reset: sidenote-counter; +} + +h1 { + font-weight: 400; + margin-top: 4rem; + margin-bottom: 1.5rem; + font-size: 3.2rem; + line-height: 1; +} + +h2 { + font-style: italic; + font-weight: 400; + margin-top: 2.1rem; + margin-bottom: 0; + font-size: 2.2rem; + line-height: 1; +} + +h3 { + font-style: italic; + font-weight: 400; + font-size: 1.7rem; + margin-top: 2rem; + margin-bottom: 0; + line-height: 1; +} + +p.subtitle { + font-style: italic; + margin-top: 1rem; + margin-bottom: 1rem; + font-size: 1.8rem; + display: block; + line-height: 1; +} + +.numeral { + font-family: et-book-roman-old-style; +} + +.danger { + color: red; +} + +article { + position: relative; + padding: 5rem 0rem; +} + +section { + padding-top: 1rem; + padding-bottom: 1rem; +} + +p, +ol, +ul { + font-size: 1.4rem; +} + +p { + line-height: 2rem; + margin-top: 1.4rem; + margin-bottom: 1.4rem; + padding-right: 0; + vertical-align: baseline; +} + +/* Chapter Epigraphs */ +div.epigraph { + margin: 5em 0; +} + +div.epigraph > blockquote { + margin-top: 3em; + margin-bottom: 3em; +} + +div.epigraph > blockquote, +div.epigraph > blockquote > p { + font-style: italic; +} + +div.epigraph > blockquote > footer { + font-style: normal; +} + +div.epigraph > blockquote > footer > cite { + font-style: italic; +} + +/* end chapter epigraphs styles */ + +blockquote { + font-size: 1.4rem; +} + +blockquote p { + width: 50%; +} + +blockquote footer { + width: 50%; + font-size: 1.1rem; + text-align: right; +} + +ol, +ul { + width: 45%; + -webkit-padding-start: 5%; + -webkit-padding-end: 5%; +} + +li { + padding: 0.5rem 0; +} + +figure { + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + max-width: 55%; + -webkit-margin-start: 0; + -webkit-margin-end: 0; + margin: 0 0 3em 0; +} + +figcaption { + float: right; + clear: right; + margin-right: -48%; + margin-top: 0; + margin-bottom: 0; + font-size: 1.1rem; + line-height: 1.6; + vertical-align: baseline; + position: relative; + max-width: 40%; +} + +figure.fullwidth figcaption { + margin-right: 24%; +} + +/* Links: replicate underline that clears descenders */ +a:link, +a:visited { + color: inherit; +} + +a:link { + text-decoration: none; + background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), + -webkit-linear-gradient(#333, #333); + background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333); + -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-size: 0.05em 1px, 0.05em 1px, 1px 1px; + background-repeat: no-repeat, no-repeat, repeat-x; + text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, + -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, + -0.15em 0 #fffff8; + background-position: 0% 93%, 100% 93%, 0% 93%; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + a:link { + background-position-y: 87%, 87%, 87%; + } +} + +a:link::selection { + text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, + -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, + -0.15em 0 #b4d5fe; + background: #b4d5fe; +} + +a:link::-moz-selection { + text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, + -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, + -0.15em 0 #b4d5fe; + background: #b4d5fe; +} + +/* Sidenotes, margin notes, figures, captions */ +img { + max-width: 100%; +} + +.sidenote, +.marginnote { + float: right; + clear: right; + margin-right: -60%; + width: 50%; + margin-top: 0; + margin-bottom: 0; + font-size: 1.1rem; + line-height: 1.3; + vertical-align: baseline; + position: relative; +} + +.table-caption { + float: right; + clear: right; + margin-right: -60%; + width: 50%; + margin-top: 0; + margin-bottom: 0; + font-size: 1rem; + line-height: 1.6; +} + +.sidenote-number { + counter-increment: sidenote-counter; +} + +.sidenote-number:after, +.sidenote:before { + content: counter(sidenote-counter) " "; + font-family: et-book-roman-old-style; + position: relative; + vertical-align: baseline; +} + +.sidenote-number:after { + content: counter(sidenote-counter); + font-size: 1rem; + top: -0.5rem; + left: 0.1rem; +} + +.sidenote:before { + content: counter(sidenote-counter) " "; + top: -0.5rem; +} + +p, +footer, +table, +div.table-wrapper-small, +div.supertable-wrapper > p, +div.booktabs-wrapper { + width: 55%; +} + +div.fullwidth, +table.fullwidth { + width: 100%; +} + +div.table-wrapper { + overflow-x: scroll; + font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; +} + +@media screen and (max-width: 760px) { + p, + footer { + width: 90%; + } + pre.code { + width: 87.5%; + } + ul { + width: 85%; + } + figure { + max-width: 90%; + } + figcaption, + figure.fullwidth figcaption { + margin-right: 0%; + max-width: none; + } + blockquote p, + blockquote footer { + width: 90%; + } +} + +.sans { + font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; + letter-spacing: 0.03em; +} + +.code { + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + font-size: 1.125rem; + line-height: 1.6; +} + +h1 .code, +h2 .code, +h3 .code { + font-size: 0.8em; +} + +.marginnote .code, +.sidenote .code { + font-size: 1rem; +} + +pre.code { + width: 52.5%; + padding-left: 2.5%; + overflow-x: scroll; +} + +.fullwidth { + max-width: 90%; + clear: both; +} + +span.newthought { + font-variant: small-caps; + font-size: 1.2em; +} + +input.margin-toggle { + display: none; +} + +label.sidenote-number { + display: inline; +} + +label.margin-toggle:not(.sidenote-number) { + display: none; +} + +@media (max-width: 760px) { + label.margin-toggle:not(.sidenote-number) { + display: inline; + } + .sidenote, + .marginnote { + display: none; + } + .margin-toggle:checked + .sidenote, + .margin-toggle:checked + .marginnote { + display: block; + float: left; + left: 1rem; + clear: both; + width: 95%; + margin: 1rem 2.5%; + vertical-align: baseline; + position: relative; + } + label { + cursor: pointer; + } + pre.code { + width: 90%; + padding: 0; + } + .table-caption { + display: block; + float: right; + clear: both; + width: 98%; + margin-top: 1rem; + margin-bottom: 0.5rem; + margin-left: 1%; + margin-right: 1%; + vertical-align: baseline; + position: relative; + } + div.table-wrapper, + table, + table.booktabs { + width: 85%; + } + div.table-wrapper { + border-right: 1px solid #efefef; + } + img { + width: 100%; + } +} diff --git a/layouts/partials/header.includes.html b/layouts/partials/header.includes.html index abbfe76..bde71dd 100644 --- a/layouts/partials/header.includes.html +++ b/layouts/partials/header.includes.html @@ -30,8 +30,6 @@ {{ end }} - - {{ $htoptions := (dict "targetPath" "/css/hugo-tufte.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $htstyle := resources.Get "scss/hugo-tufte.scss" | resources.ToCSS $htoptions }} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f4c13c5 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "hugo-tufte", + "version": "0.1.2", + "description": "Content centric Hugo blogging theme styled with Tufte-Css", + "repository": { + "type": "git", + "url": "git+https://github.com/slashformotion/hugo-tufte.git" + }, + "author": "Slashformotion", + "license": "MIT", + "bugs": { + "url": "https://github.com/slashformotion/hugo-tufte/issues" + }, + "homepage": "https://github.com/slashformotion/hugo-tufte#readme", + "dependencies": { + "normalize-scss": "^7.0.1" + } +} diff --git a/static/css/hugo-tufte-override.css b/static/css/hugo-tufte-override.css deleted file mode 100644 index e69de29..0000000 diff --git a/static/css/tufte.css b/static/css/tufte.css deleted file mode 100644 index cc27a92..0000000 --- a/static/css/tufte.css +++ /dev/null @@ -1,455 +0,0 @@ -/* Import ET Book styles - adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */ - -@charset "UTF-8"; - -@font-face { - font-family: "et-book"; - src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot"); - src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"), - url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"), - url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"), - url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "et-book"; - src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot"); - src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") - format("embedded-opentype"), - url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"), - url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") - format("truetype"), - url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") - format("svg"); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: "et-book"; - src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot"); - src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"), - url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"), - url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"), - url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg"); - font-weight: bold; - font-style: normal; -} - -@font-face { - font-family: "et-book-roman-old-style"; - src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot"); - src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") - format("embedded-opentype"), - url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"), - url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"), - url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg"); - font-weight: normal; - font-style: normal; -} - -/* Tufte CSS styles */ -html { - font-size: 15px; -} - -body { - width: 87.5%; - margin-left: auto; - margin-right: auto; - padding-left: 12.5%; - font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; - background-color: #fffff8; - color: #111; - max-width: 1400px; - counter-reset: sidenote-counter; -} - -h1 { - font-weight: 400; - margin-top: 4rem; - margin-bottom: 1.5rem; - font-size: 3.2rem; - line-height: 1; -} - -h2 { - font-style: italic; - font-weight: 400; - margin-top: 2.1rem; - margin-bottom: 0; - font-size: 2.2rem; - line-height: 1; -} - -h3 { - font-style: italic; - font-weight: 400; - font-size: 1.7rem; - margin-top: 2rem; - margin-bottom: 0; - line-height: 1; -} - -p.subtitle { - font-style: italic; - margin-top: 1rem; - margin-bottom: 1rem; - font-size: 1.8rem; - display: block; - line-height: 1; -} - -.numeral { - font-family: et-book-roman-old-style; -} - -.danger { - color: red; -} - -article { - position: relative; - padding: 5rem 0rem; -} - -section { - padding-top: 1rem; - padding-bottom: 1rem; -} - -p, -ol, -ul { - font-size: 1.4rem; -} - -p { - line-height: 2rem; - margin-top: 1.4rem; - margin-bottom: 1.4rem; - padding-right: 0; - vertical-align: baseline; -} - -/* Chapter Epigraphs */ -div.epigraph { - margin: 5em 0; -} - -div.epigraph > blockquote { - margin-top: 3em; - margin-bottom: 3em; -} - -div.epigraph > blockquote, -div.epigraph > blockquote > p { - font-style: italic; -} - -div.epigraph > blockquote > footer { - font-style: normal; -} - -div.epigraph > blockquote > footer > cite { - font-style: italic; -} - -/* end chapter epigraphs styles */ - -blockquote { - font-size: 1.4rem; -} - -blockquote p { - width: 50%; -} - -blockquote footer { - width: 50%; - font-size: 1.1rem; - text-align: right; -} - -ol, -ul { - width: 45%; - -webkit-padding-start: 5%; - -webkit-padding-end: 5%; -} - -li { - padding: 0.5rem 0; -} - -figure { - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - max-width: 55%; - -webkit-margin-start: 0; - -webkit-margin-end: 0; - margin: 0 0 3em 0; -} - -figcaption { - float: right; - clear: right; - margin-right: -48%; - margin-top: 0; - margin-bottom: 0; - font-size: 1.1rem; - line-height: 1.6; - vertical-align: baseline; - position: relative; - max-width: 40%; -} - -figure.fullwidth figcaption { - margin-right: 24%; -} - -/* Links: replicate underline that clears descenders */ -a:link, -a:visited { - color: inherit; -} - -a:link { - text-decoration: none; - background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), - -webkit-linear-gradient(#333, #333); - background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(#333, #333); - -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-size: 0.05em 1px, 0.05em 1px, 1px 1px; - background-repeat: no-repeat, no-repeat, repeat-x; - text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, - -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, - -0.15em 0 #fffff8; - background-position: 0% 93%, 100% 93%, 0% 93%; -} - -@media screen and (-webkit-min-device-pixel-ratio: 0) { - a:link { - background-position-y: 87%, 87%, 87%; - } -} - -a:link::selection { - text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, - -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, - -0.15em 0 #b4d5fe; - background: #b4d5fe; -} - -a:link::-moz-selection { - text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, - -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, - -0.15em 0 #b4d5fe; - background: #b4d5fe; -} - -/* Sidenotes, margin notes, figures, captions */ -img { - max-width: 100%; -} - -.sidenote, -.marginnote { - float: right; - clear: right; - margin-right: -60%; - width: 50%; - margin-top: 0; - margin-bottom: 0; - font-size: 1.1rem; - line-height: 1.3; - vertical-align: baseline; - position: relative; -} - -.table-caption { - float: right; - clear: right; - margin-right: -60%; - width: 50%; - margin-top: 0; - margin-bottom: 0; - font-size: 1rem; - line-height: 1.6; -} - -.sidenote-number { - counter-increment: sidenote-counter; -} - -.sidenote-number:after, -.sidenote:before { - content: counter(sidenote-counter) " "; - font-family: et-book-roman-old-style; - position: relative; - vertical-align: baseline; -} - -.sidenote-number:after { - content: counter(sidenote-counter); - font-size: 1rem; - top: -0.5rem; - left: 0.1rem; -} - -.sidenote:before { - content: counter(sidenote-counter) " "; - top: -0.5rem; -} - -p, -footer, -table, -div.table-wrapper-small, -div.supertable-wrapper > p, -div.booktabs-wrapper { - width: 55%; -} - -div.fullwidth, -table.fullwidth { - width: 100%; -} - -div.table-wrapper { - overflow-x: scroll; - font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; -} - -@media screen and (max-width: 760px) { - p, - footer { - width: 90%; - } - pre.code { - width: 87.5%; - } - ul { - width: 85%; - } - figure { - max-width: 90%; - } - figcaption, - figure.fullwidth figcaption { - margin-right: 0%; - max-width: none; - } - blockquote p, - blockquote footer { - width: 90%; - } -} - -.sans { - font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; - letter-spacing: 0.03em; -} - -.code { - font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 1.125rem; - line-height: 1.6; -} - -h1 .code, -h2 .code, -h3 .code { - font-size: 0.8em; -} - -.marginnote .code, -.sidenote .code { - font-size: 1rem; -} - -pre.code { - width: 52.5%; - padding-left: 2.5%; - overflow-x: scroll; -} - -.fullwidth { - max-width: 90%; - clear: both; -} - -span.newthought { - font-variant: small-caps; - font-size: 1.2em; -} - -input.margin-toggle { - display: none; -} - -label.sidenote-number { - display: inline; -} - -label.margin-toggle:not(.sidenote-number) { - display: none; -} - -@media (max-width: 760px) { - label.margin-toggle:not(.sidenote-number) { - display: inline; - } - .sidenote, - .marginnote { - display: none; - } - .margin-toggle:checked + .sidenote, - .margin-toggle:checked + .marginnote { - display: block; - float: left; - left: 1rem; - clear: both; - width: 95%; - margin: 1rem 2.5%; - vertical-align: baseline; - position: relative; - } - label { - cursor: pointer; - } - pre.code { - width: 90%; - padding: 0; - } - .table-caption { - display: block; - float: right; - clear: both; - width: 98%; - margin-top: 1rem; - margin-bottom: 0.5rem; - margin-left: 1%; - margin-right: 1%; - vertical-align: baseline; - position: relative; - } - div.table-wrapper, - table, - table.booktabs { - width: 85%; - } - div.table-wrapper { - border-right: 1px solid #efefef; - } - img { - width: 100%; - } -}