diff options
| -rw-r--r-- | COPY-TO-ROOT-SASS/abridge.scss | 2 | ||||
| -rw-r--r-- | README.md | 7 | ||||
| -rw-r--r-- | config.toml | 6 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | sass/abridge.scss | 144 | ||||
| -rw-r--r-- | static/js/abridge-nosearch.min.js | 1 | ||||
| -rw-r--r-- | templates/macros/head.html | 4 | ||||
| -rw-r--r-- | templates/macros/macros.html | 16 |
8 files changed, 101 insertions, 83 deletions
diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss index 855d919..89689b4 100644 --- a/COPY-TO-ROOT-SASS/abridge.scss +++ b/COPY-TO-ROOT-SASS/abridge.scss @@ -174,7 +174,7 @@ //$top: true,//back to top button using CSS //$search: true,//search feature //$toc: true,//Table of Contents, page index / recent posts block - //$zola: true,//Zola Specific + //$modifiers: true,//tiny modifier classes for sizing and spacing //$misc: false, //$grid: false,//Infinity Grid, column based layouts. //$syntax: true,//syntax highlighting for code blocks @@ -5,8 +5,6 @@ Abridge is a fast and lightweight Zola theme using semantic html, only ~6kb css before the svg icons and syntax highlighting css, no mandatory JS[*](https://github.com/Jieiku/abridge#contributing-and-philosophy), and perfect [Lighthouse](https://pagespeed.web.dev/report?url=abridge.netlify.app), [YellowLabTools](https://yellowlab.tools/), and [Observatory](https://observatory.mozilla.org/analyze/abridge.netlify.app) scores. -There is also [Abridge-minimal](https://github.com/jieiku/abridge.css) Theme which is used to showcase the [abridge.css framework](https://github.com/Jieiku/abridge.css/tree/master/dist) - Here is a [Zola Themes Benchmarks](https://github.com/Jieiku/zola-themes-benchmarks/blob/main/README.md) Page. Maintenance of this project is made possible by all the <a href="https://github.com/Jieiku/abridge/graphs/contributors">contributors</a> and <a href="https://github.com/sponsors/Jieiku">sponsors</a>. If you'd like to sponsor this project and have your avatar or company logo appear below <a href="https://github.com/sponsors/Jieiku">click here</a>. 💖 @@ -15,8 +13,9 @@ Maintenance of this project is made possible by all the <a href="https://github. --- -**[View demo](https://abridge.netlify.app/)** +**[View Abridge demo](https://abridge.netlify.app/)** +**[View Abridge.css demo](https://abridgecss.netlify.app/)** [[abridge.css framework](https://github.com/Jieiku/abridge.css/tree/master/dist)] </div> ## Requirements @@ -63,6 +62,7 @@ git submodule add https://github.com/jieiku/abridge.git themes/abridge Copy some files from the theme directory to your project's root directory: ```bash +touch templates/.gitkeep rsync themes/abridge/config.toml config.toml rsync themes/abridge/COPY-TO-ROOT-SASS/* sass/ rsync themes/abridge/netlify.toml netlify.toml @@ -70,6 +70,7 @@ rsync themes/abridge/package.json package.json rsync -r themes/abridge/content/static content/ ``` +- `templates/.gitkeep` the templates directory is required in your base site. [#2150](https://github.com/getzola/zola/issues/2150) - `config.toml` base configuration with all config values - `COPY-TO-ROOT-SASS/abridge.scss` overrides to customize Abridge variables. - `netlify.toml` settings to deploy your repo with netlfiy diff --git a/config.toml b/config.toml index 09c414d..0dcf736 100644 --- a/config.toml +++ b/config.toml @@ -4,13 +4,13 @@ base_url = "https://abridge.netlify.app" #base_url = "/home/jieiku/.dev/abridge/public" # Usable site directly from disk, Including Search! # Also set index_format = "elasticlunr_javascript", and in [extra] uglyurls = true, integrity = false, js_bundle = false +title = "Abridge" +description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." default_language = "en" + compile_sass = true minify_html = false build_search_index = true - -title = "Abridge" -description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No Mandatory JS." generate_feed = true taxonomies = [ {name = "categories", feed = true}, diff --git a/package.json b/package.json index d8355d9..45ecd6f 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "license": "MIT", "homepage": "https://github.com/Jieiku/abridge", "scripts": { - "all": "npm run theme && npm run theme-light && npm run pwa-minify && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch && npm run abridge-bundle-elasticlunr", + "all": "npm run theme && npm run theme-light && npm run pwa-minify && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch && npm run abridge-bundle-nosearch && npm run abridge-bundle-elasticlunr", "nonbundles": "npm run theme && npm run theme-light && npm run pwa-minify && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch", "theme": "uglifyjs static/js/theme.js -c -m -o static/js/theme.min.js", "theme-light": "uglifyjs static/js/theme_light.js -c -m -o static/js/theme_light.min.js", @@ -17,7 +17,7 @@ "search-elasticlunr": "uglifyjs static/js/elasticlunr.min.js static/js/search.js -c -m -o static/js/search_elasticlunr.min.js", "search-stork": "uglifyjs static/js/stork.js static/js/stork_config.js -c -m -o static/js/search_stork.min.js", "search-tinysearch": "uglifyjs static/js/tinysearch.js -c -m -o static/js/search_tinysearch.min.js", - "abridge-bundle-nosearch": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js", + "abridge-bundle-nosearch": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge-nosearch.min.js", "abridge-bundle-elasticlunr": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_elasticlunr.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js", "abridge-bundle-tinysearch": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_tinysearch.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js", "abridge-bundle-stork": "uglifyjs static/js/prestyle.js static/js/theme_button.js static/js/search_stork.min.js static/js/email.js static/js/codecopy.js -c -m -o static/js/abridge.min.js", diff --git a/sass/abridge.scss b/sass/abridge.scss index 889ce78..3dfed1d 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -199,7 +199,7 @@ $form: true !default;//Form elements (non-button) $top: true !default;//back to top button using CSS $search: true !default;//search feature $toc: true !default;//Table of Contents, page index / recent posts block -$zola: true !default;//Zola Specific +$modifiers: true !default;//tiny modifier classes for sizing and spacing $imgswap: true !default;//Image Swap on hover/click $misc: false !default; $grid: false !default;//Infinity Grid, column based layouts. @@ -874,6 +874,61 @@ $syntax: true !default;//syntax highlighting for code blocks font-size: 1rem; padding: .2rem; } + + // add header to code blocks + pre code[data-lang]::before { + content: attr(data-lang); + padding: .3rem; + display: block; + background-color: var(--c3); + color: var(--h1); + width: 100%; + position: absolute; + top: 0; + left: 0; + padding-left: 1rem; + text-transform: uppercase; + } + // Table Override, this is used for numbered code blocks linenos and hl_lines + code { + table { + font-size: .8rem; + margin: 0; + // Highlighted text + color: var(--h1); + mark { + display: block; + color: unset; + padding: 0; + background-color: var(--h0); + filter: brightness(var(--ha)); + } + } + td, th, tr { + padding: 0; + border-bottom: none; + } + tbody td:first-child { + text-align: center; + user-select: none; + min-width: 60px; + } + tbody tr:nth-child(even), thead tr { + background-color: unset; + } + } + // code copy button + .cc { + cursor: pointer; + z-index: 9; + position: absolute; + top: .2rem; + right: .5rem; + } + .cc:hover { + background: var(--a3); + opacity: 1; + } } @if $hr { // https://github.com/picocss/pico @@ -1143,71 +1198,6 @@ $syntax: true !default;//syntax highlighting for code blocks } } } -@if $zola { - .sum, .sum p {margin: .2rem 0} - .s95 {font-size: .95em} - .s90 {font-size: .90em} - .s85 {font-size: .85em} - .s80 {font-size: .80em} - .s75 {font-size: .75em} - .s70 {font-size: .70em} - .hpad {padding: 0 .2rem} - .rpad {padding-right: .2rem} - .si {font-size: 1.5em} - pre code[data-lang]::before { - content: attr(data-lang); - padding: .3rem; - display: block; - background-color: var(--c3); - color: var(--h1); - width: 100%; - position: absolute; - top: 0; - left: 0; - padding-left: 1rem; - text-transform: uppercase; - } - // code copy button - .cc { - cursor: pointer; - z-index: 9; - position: absolute; - top: .2rem; - right: .5rem; - } - .cc:hover { - background: var(--a3); - opacity: 1; - } - // Table Override, this is used for Zola's linenos and hl_lines - code { - table { - font-size: .8rem; - margin: 0; - // Highlighted text - color: var(--h1); - mark { - display: block; - color: unset; - padding: 0; - background-color: var(--h0); - filter: brightness(var(--ha)); - } - } - td, th, tr { - padding: 0; - border-bottom: none; - } - tbody td:first-child { - text-align: center; - user-select: none; - min-width: 60px; - } - tbody tr:nth-child(even), thead tr { - background-color: unset; - } - } -} @if $imgswap { .img-swap-div { .img-main { @@ -1323,6 +1313,28 @@ $syntax: true !default;//syntax highlighting for code blocks color: var(--a3); opacity: 1; } +} @else { + .copy::before { + content: "\1F5D0"; + } + @if $search { + .x::before { + content: "X"; + color: var(--cr); + } + } +} +@if $modifiers { + .sum, .sum p {margin: .2rem 0} + .s95 {font-size: .95em} + .s90 {font-size: .90em} + .s85 {font-size: .85em} + .s80 {font-size: .80em} + .s75 {font-size: .75em} + .s70 {font-size: .70em} + .hpad {padding: 0 .2rem} + .rpad {padding-right: .2rem} + .si {font-size: 1.5em} } @if $syntax { // Unstyled Text Color, and background color diff --git a/static/js/abridge-nosearch.min.js b/static/js/abridge-nosearch.min.js new file mode 100644 index 0000000..7ae9810 --- /dev/null +++ b/static/js/abridge-nosearch.min.js @@ -0,0 +1 @@ +const items=document.querySelectorAll(".preStyle"),changeIcon=(items.forEach(e=>{e.rel="stylesheet"}),document.getElementById("mode")&&document.getElementById("mode").addEventListener("click",()=>{document.documentElement.classList.toggle("switch"),localStorage.setItem("theme",document.documentElement.classList.contains("switch")?"switch":"default")}),!function(){for(var e=document.getElementsByClassName("m-protected"),t=0;t<e.length;t++){var c=e[t].getAttribute("href"),c=atob(c.substring(1));e[t].href="mailto:"+c}}(),(e,t)=>{e.classList.add(t),setTimeout(()=>e.classList.remove(t),2500)}),copyCodeAndChangeIcon=async(t,e)=>{e=(e.querySelector("table")?getTableCode:getNonTableCode)(e);try{await navigator.clipboard.writeText(e),changeIcon(t,"yes")}catch(e){changeIcon(t,"err")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{const t=document.createElement("div");t.className="cc svgs svgh copy",t.innerHTML=" ",e.prepend(t),t.addEventListener("click",()=>copyCodeAndChangeIcon(t,e))});
\ No newline at end of file diff --git a/templates/macros/head.html b/templates/macros/head.html index 2c85f16..673954b 100644 --- a/templates/macros/head.html +++ b/templates/macros/head.html @@ -95,7 +95,11 @@ {%- if config.extra.js_bundle %} + {%- if config.build_search_index %} <script defer src="{{ get_url(path='js/abridge.min.js', trailing_slash=false, cachebust=true) | safe }}"{%- if config.extra.integrity | default(value=true) %} integrity="sha384-{{ get_hash(path='js/abridge.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script> + {%- else %} + <script defer src="{{ get_url(path='js/abridge-nosearch.min.js', trailing_slash=false, cachebust=true) | safe }}"{%- if config.extra.integrity | default(value=true) %} integrity="sha384-{{ get_hash(path='js/abridge-nosearch.min.js', sha_type=384, base64=true) | safe }}"{%- endif %}></script> + {%- endif %} {%- if config.build_search_index %} {%- if search_library == "elasticlunr" %} diff --git a/templates/macros/macros.html b/templates/macros/macros.html index fb18345..1a033cf 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -205,13 +205,13 @@ {%- if paginator.previous -%} <a class="on outp" href="{{ paginator.first | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}" title="First Page"> {%- if icon_first -%}<i class="{{ icon_first }}" alt="First Page"></i> - {%- else -%}❰ + {%- else -%}« {%- endif -%} </a> {%- else -%} <span class="off outp"> {%- if icon_first -%}<i class="{{ icon_first }}" alt="First Page"></i> - {%- else -%}❰ + {%- else -%}« {%- endif -%} </span> {%- endif -%} @@ -219,13 +219,13 @@ {%- if paginator.previous -%} <a class="on outp" href="{{ paginator.previous | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}" title="Previous Page"> {%- if icon_prev -%}<i class="{{ icon_prev }}" alt="Previous Page"></i> - {%- else -%}❬ + {%- else -%}‹ {%- endif -%} </a> {%- else -%} <span class="off outp"> {%- if icon_prev -%}<i class="{{ icon_prev }}" alt="Previous Page"></i> - {%- else -%}❬ + {%- else -%}‹ {%- endif -%} </span> {%- endif -%} @@ -243,13 +243,13 @@ {%- if paginator.next -%} <a class="on outp" href="{{ paginator.next | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}" title="Next Page"> {%- if icon_next -%}<i class="{{ icon_next }}" alt="Next Page"></i> - {%- else -%}❭ + {%- else -%}› {%- endif -%} </a> {%- else -%} <span class="off outp"> {%- if icon_next -%}<i class="{{ icon_next }}" alt="Next Page"></i> - {%- else -%}❭ + {%- else -%}› {%- endif -%} </span> {%- endif -%} @@ -257,13 +257,13 @@ {%- if paginator.next -%} <a class="on outp" href="{{ paginator.last | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}" title="Last Page"> {%- if icon_last -%}<i class="{{ icon_last }}" alt="Last Page"></i> - {%- else -%}❱ + {%- else -%}» {%- endif -%} </a> {%- else -%} <span class="off outp"> {%- if icon_last -%}<i class="{{ icon_last }}" alt="Last Page"></i> - {%- else -%}❱ + {%- else -%}» {%- endif -%} </span> {%- endif -%} |