tastytea
/
blog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Enahnced theme, better AciiDoc-NOTE styling.

This commit is contained in:
tastytea 2019-03-08 22:22:09 +01:00
parent 0aaa0d6b9b
commit 06ce9d00f7
Signed by: tastytea
GPG Key ID: CFC39497F1B26E07
3 changed files with 85 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
themes/modify_slick.sh
View File

@ -13,6 +13,28 @@ for file in style.css style-compat.css; do
# Remove fonts, save >400KiB (~92,5%)
sed -Ei 's/@font-face\{[^\}]+\}//g' tastytea/static/assets/${file}
sed -i 's/#1d1f21/var(--bg-code)/g' tastytea/static/assets/${file} # Code Background
sed -i 's/#ffffff/var(--bg)/g' tastytea/static/assets/${file} # Background
sed -i 's/#fff/var(--bg)/g' tastytea/static/assets/${file} # Background
sed -i 's/#efefef/var(--hover)/g' tastytea/static/assets/${file} # Current Line
sed -i 's/#eee/var(--hover)/g' tastytea/static/assets/${file} # Current Line
sed -i 's/#d6d6d6/var(--sel)/g' tastytea/static/assets/${file} # Selection
sed -i 's/#4d4d4c/var(--fg)/g' tastytea/static/assets/${file} # Foreground
sed -i 's/#8e908c/var(--comment)/g' tastytea/static/assets/${file} # Comment
sed -i 's/#c82829/var(--red)/g' tastytea/static/assets/${file} # Red
sed -i 's/#f5871f/var(--orange)/g' tastytea/static/assets/${file} # Orange
sed -i 's/#eab700/var(--yellow)/g' tastytea/static/assets/${file} # Yellow
sed -i 's/#718c00/var(--green)/g' tastytea/static/assets/${file} # Green
sed -i 's/#3e999f/var(--aqua)/g' tastytea/static/assets/${file} # Aqua
sed -i 's/#4271ae/var(--blue)/g' tastytea/static/assets/${file} # Blue
sed -i 's/#8959a8/var(--purple)/g' tastytea/static/assets/${file} # Purple
sed -i 's/#000/#e2e0de/g' tastytea/static/assets/${file} # Menu links
# Set variables
sed -s -i 's/^/:root{--bg:#1d1f21;--bg-code:#101112;--bg-code-trans:#10111280;--hover:#282a2e;--sel:#373b41;--fg:#c5c8c6;--comment:#969896;--red:#CC6666;--orange:#de935f;--yellow:#f0c674;--green:#b5bd68;--aqua:#8abeb7;--blue:#81a2be;--purple:#b294bb;--note:#1d1d1d}/' tastytea/static/assets/${file}
# Increase font-size
sed -i 's/font-size:16px/font-size:18px/g' tastytea/static/assets/${file}
@ -20,7 +42,7 @@ for file in style.css style-compat.css; do
sed -i 's/body{margin:0}/body{max-width:100ch;margin:auto}/' tastytea/static/assets/${file}
# Add dark background to <code>
sed -i 's/$/p>code,td>code{background-color:#10111280}/' tastytea/static/assets/${file}
sed -i 's/$/p>code,td>code{background-color:var(--bg-code-trans)}/' tastytea/static/assets/${file}
# Reduce margin above listing blocks
sed -i 's/$/div.listingblock pre{margin-top:0.1em}/' tastytea/static/assets/${file}
@ -30,26 +52,10 @@ for file in style.css style-compat.css; do
# Style NOTE: (AsciiDoc)
sed -i 's/$/div.note>table,div.note td{border:0}/' tastytea/static/assets/${file}
sed -i 's/$/div.note td.icon{background-color:#282a2e;color:#b5bd68;border-radius:20%}/' tastytea/static/assets/${file}
sed -i 's/#1d1f21/#101112/g' tastytea/static/assets/${file} # Code Background
sed -i 's/#ffffff/#1d1f21/g' tastytea/static/assets/${file} # Background
sed -i 's/#fff/#1d1f21/g' tastytea/static/assets/${file} # Background
sed -i 's/#efefef/#282a2e/g' tastytea/static/assets/${file} # Current Line
sed -i 's/#eee/#282a2e/g' tastytea/static/assets/${file} # Current Line
sed -i 's/#d6d6d6/#373b41/g' tastytea/static/assets/${file} # Selection
sed -i 's/#4d4d4c/#c5c8c6/g' tastytea/static/assets/${file} # Foreground
sed -i 's/#8e908c/#969896/g' tastytea/static/assets/${file} # Comment
sed -i 's/#c82829/#cc6666/g' tastytea/static/assets/${file} # Red
sed -i 's/#f5871f/#de935f/g' tastytea/static/assets/${file} # Orange
sed -i 's/#eab700/#f0c674/g' tastytea/static/assets/${file} # Yellow
sed -i 's/#718c00/#b5bd68/g' tastytea/static/assets/${file} # Green
sed -i 's/#3e999f/#8abeb7/g' tastytea/static/assets/${file} # Aqua
sed -i 's/#4271ae/#81a2be/g' tastytea/static/assets/${file} # Blue
sed -i 's/#8959a8/#b294bb/g' tastytea/static/assets/${file} # Purple
sed -i 's/#000/#e2e0de/g' tastytea/static/assets/${file} # Some links
sed -i 's/$/div.note td.icon{color:var(--green);font-size:120%;border-right: 0.2em solid var(--hover)}/' tastytea/static/assets/${file}
sed -i 's/$/div.note table{background-color:var(--note)}/' tastytea/static/assets/${file}
sed -i 's/$/div.note td.icon div.title::after{content:":"}/' tastytea/static/assets/${file}
sed -i 's/$/div.note{margin-bottom:1em;margin-left: 1em}/' tastytea/static/assets/${file}
# Make CSS more readable
sed -i 's/}/}\n/g' tastytea/static/assets/${file}

54
themes/tastytea/static/assets/style-compat.css
View File

@ -1,3 +1,4 @@
:root {--bg:#1d1f21; --bg-code:#101112; --bg-code-trans:#10111280; --hover:#282a2e; --sel:#373b41; --fg:#c5c8c6; --comment:#969896; --red:#CC6666; --orange:#de935f; --yellow:#f0c674; --green:#b5bd68; --aqua:#8abeb7; --blue:#81a2be; --purple:#b294bb; --note:#1d1d1d}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%}
body {max-width:100ch; margin:auto}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block}
@ -176,11 +177,11 @@ td, th {padding:0}
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {display:block; width:auto}
.pure-menu-heading {text-transform:uppercase; color:#565d64}
.pure-menu-link {color:#777}
.pure-menu-children {background-color:#1d1f21}
.pure-menu-children {background-color:var(--bg)}
.pure-menu-disabled, .pure-menu-heading, .pure-menu-link {padding:.5em 1em}
.pure-menu-disabled {opacity:.5}
.pure-menu-disabled .pure-menu-link:hover {background-color:transparent}
.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:#282a2e}
.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:var(--hover)}
.pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited {color:#e2e0de}
.pure-table {border-collapse:collapse; border-spacing:0; empty-cells:show; border:1px solid #cbcbcb}
.pure-table caption {color:#e2e0de; font:italic 85%/1 arial, sans-serif; padding:1em 0; text-align:center}
@ -194,7 +195,7 @@ td, th {padding:0}
.pure-table-horizontal td, .pure-table-horizontal th {border-width:0 0 1px; border-bottom:1px solid #cbcbcb}
.pure-table-horizontal tbody>tr:last-child>td {border-bottom-width:0}
.highlight .hll {background-color:#373b41}
.highlight {background:#101112; color:#c5c8c6}
.highlight {background:var(--bg-code); color:#c5c8c6}
.highlight .c {color:#969896}
.highlight .err {color:#c66}
.highlight .k {color:#b294bb}
@ -245,32 +246,32 @@ td, th {padding:0}
.highlight .bp {color:#c5c8c6}
.highlight .vc, .highlight .vg, .highlight .vi {color:#c66}
.highlight .il {color:#de935f}
body {background-color:#1d1f21; color:#c5c8c6; font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
body {background-color:var(--bg); color:var(--fg); font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
abbr, cite, q {font-family:Source Serif Pro, serif}
cite, em, q {font-style:italic}
b, bold, dt, strong {font-weight:700}
code, kbd, pre, samp {font-family:Source Code Pro, monospace}
kbd, samp {background-color:#282a2e}
kbd, samp {background-color:var(--hover)}
.highlight, code, kbd, pre, samp {border:0; border-radius:.25em; padding:0 .125em}
mark {background-color:#f0c674}
blockquote {border-left:.5em solid #969896; border-radius:.25em; margin-left:0; padding-left:2em}
a {color:#81a2be}
a:hover, a:hover:visited {color:#8abeb7}
a:visited {color:#b294bb}
hr {border:0; border-top:1px dashed #c5c8c6}
::-moz-selection {background-color:#373b41}
::selection {background-color:#373b41}
.pure-g [class*=pure-u], button, html, input, select, textarea {color:#c5c8c6; font-family:Source Sans Pro, sans-serif; font-weight:400}
.pure-table {border:1px solid #969896; color:#c5c8c6; background-color:#1d1f21}
.pure-table td, .pure-table th {border-left:1px solid #969896}
.pure-table thead {color:#c5c8c6; background-color:#282a2e}
.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:#c5c8c6}
.pure-menu-header:hover, .pure-menu-item:hover {background-color:#282a2e}
mark {background-color:var(--yellow)}
blockquote {border-left:.5em solid var(--comment); border-radius:.25em; margin-left:0; padding-left:2em}
a {color:var(--blue)}
a:hover, a:hover:visited {color:var(--aqua)}
a:visited {color:var(--purple)}
hr {border:0; border-top:1px dashed var(--fg)}
::-moz-selection {background-color:var(--sel)}
::selection {background-color:var(--sel)}
.pure-g [class*=pure-u], button, html, input, select, textarea {color:var(--fg); font-family:Source Sans Pro, sans-serif; font-weight:400}
.pure-table {border:1px solid var(--comment); color:var(--fg); background-color:var(--bg)}
.pure-table td, .pure-table th {border-left:1px solid var(--comment)}
.pure-table thead {color:var(--fg); background-color:var(--hover)}
.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:var(--fg)}
.pure-menu-header:hover, .pure-menu-item:hover {background-color:var(--hover)}
.pure-menu-disabled:hover {background-color:transparent}
.footer-content {border-top:1px solid #c5c8c6}
.navigation-content {border-bottom:1px solid #c5c8c6}
.footer-content {border-top:1px solid var(--fg)}
.navigation-content {border-bottom:1px solid var(--fg)}
.navigation-header {font-size:1.25em}
.navigation-header a {color:#c5c8c6}
.navigation-header a {color:var(--fg)}
.navigation-header-subtitle {font-family:Source Serif Pro, serif}
.footer-content, .navigation-content, .pagination-content {display:table; margin:0 auto; text-align:center; width:100%}
figure {text-align:center}
@ -279,13 +280,16 @@ figure img {margin:0 auto}
.post-meta {font-size:.9em; margin:0 0 .5em}
.post-meta a {text-decoration:none}
.post-meta a:hover {text-decoration:underline}
.post-divider {border-top:1px solid #c5c8c6}
.post-divider {border-top:1px solid var(--fg)}
.pull-end {float:right}
.pull-start, [dir=rtl] .pull-end {float:left}
[dir=rtl] pull-start {float:right}
.fixup {position:relative; top:-.05em}
p>code, td>code {background-color:#10111280}
p>code, td>code {background-color:var(--bg-code-trans)}
div.listingblock pre {margin-top:0.1em}
li>p {margin:0.1em; }
div.note>table, div.note td {border:0}
div.note td.icon {background-color:#282a2e; color:#b5bd68; border-radius:20%}
div.note td.icon {color:var(--green); font-size:120%; border-right: 0.2em solid var(--hover)}
div.note table {background-color:var(--note)}
div.note td.icon div.title::after {content:":"}
div.note {margin-bottom:1em; margin-left: 1em}

54
themes/tastytea/static/assets/style.css
View File

@ -1,3 +1,4 @@
:root {--bg:#1d1f21; --bg-code:#101112; --bg-code-trans:#10111280; --hover:#282a2e; --sel:#373b41; --fg:#c5c8c6; --comment:#969896; --red:#CC6666; --orange:#de935f; --yellow:#f0c674; --green:#b5bd68; --aqua:#8abeb7; --blue:#81a2be; --purple:#b294bb; --note:#1d1d1d}
html {font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%}
body {max-width:100ch; margin:auto}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block}
@ -209,11 +210,11 @@ td, th {padding:0}
.pure-menu-horizontal .pure-menu-children .pure-menu-separator {display:block; width:auto}
.pure-menu-heading {text-transform:uppercase; color:#565d64}
.pure-menu-link {color:#777}
.pure-menu-children {background-color:#1d1f21}
.pure-menu-children {background-color:var(--bg)}
.pure-menu-disabled, .pure-menu-heading, .pure-menu-link {padding:.5em 1em}
.pure-menu-disabled {opacity:.5}
.pure-menu-disabled .pure-menu-link:hover {background-color:transparent}
.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:#282a2e}
.pure-menu-active>.pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover {background-color:var(--hover)}
.pure-menu-selected .pure-menu-link, .pure-menu-selected .pure-menu-link:visited {color:#e2e0de}
.pure-table {border-collapse:collapse; border-spacing:0; empty-cells:show; border:1px solid #cbcbcb}
.pure-table caption {color:#e2e0de; font:italic 85%/1 arial, sans-serif; padding:1em 0; text-align:center}
@ -227,7 +228,7 @@ td, th {padding:0}
.pure-table-horizontal td, .pure-table-horizontal th {border-width:0 0 1px; border-bottom:1px solid #cbcbcb}
.pure-table-horizontal tbody>tr:last-child>td {border-bottom-width:0}
.highlight .hll {background-color:#373b41}
.highlight {background:#101112; color:#c5c8c6}
.highlight {background:var(--bg-code); color:#c5c8c6}
.highlight .c {color:#969896}
.highlight .err {color:#c66}
.highlight .k {color:#b294bb}
@ -278,32 +279,32 @@ td, th {padding:0}
.highlight .bp {color:#c5c8c6}
.highlight .vc, .highlight .vg, .highlight .vi {color:#c66}
.highlight .il {color:#de935f}
body {background-color:#1d1f21; color:#c5c8c6; font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
body {background-color:var(--bg); color:var(--fg); font-display:swap; font-family:Source Sans Pro, sans-serif; font-size:18px; font-style:normal; font-weight:400}
abbr, cite, q {font-family:Source Serif Pro, serif}
cite, em, q {font-style:italic}
b, bold, dt, strong {font-weight:700}
code, kbd, pre, samp {font-family:Source Code Pro, monospace}
kbd, samp {background-color:#282a2e}
kbd, samp {background-color:var(--hover)}
.highlight, code, kbd, pre, samp {border:0; border-radius:.25em; padding:0 .125em}
mark {background-color:#f0c674}
blockquote {border-left:.5em solid #969896; border-radius:.25em; margin-left:0; padding-left:2em}
a {color:#81a2be}
a:hover, a:hover:visited {color:#8abeb7}
a:visited {color:#b294bb}
hr {border:0; border-top:1px dashed #c5c8c6}
::-moz-selection {background-color:#373b41}
::selection {background-color:#373b41}
.pure-g [class*=pure-u], button, html, input, select, textarea {color:#c5c8c6; font-family:Source Sans Pro, sans-serif; font-weight:400}
.pure-table {border:1px solid #969896; color:#c5c8c6; background-color:#1d1f21}
.pure-table td, .pure-table th {border-left:1px solid #969896}
.pure-table thead {color:#c5c8c6; background-color:#282a2e}
.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:#c5c8c6}
.pure-menu-header:hover, .pure-menu-item:hover {background-color:#282a2e}
mark {background-color:var(--yellow)}
blockquote {border-left:.5em solid var(--comment); border-radius:.25em; margin-left:0; padding-left:2em}
a {color:var(--blue)}
a:hover, a:hover:visited {color:var(--aqua)}
a:visited {color:var(--purple)}
hr {border:0; border-top:1px dashed var(--fg)}
::-moz-selection {background-color:var(--sel)}
::selection {background-color:var(--sel)}
.pure-g [class*=pure-u], button, html, input, select, textarea {color:var(--fg); font-family:Source Sans Pro, sans-serif; font-weight:400}
.pure-table {border:1px solid var(--comment); color:var(--fg); background-color:var(--bg)}
.pure-table td, .pure-table th {border-left:1px solid var(--comment)}
.pure-table thead {color:var(--fg); background-color:var(--hover)}
.pure-menu a, .pure-menu a:hover, .pure-menu a:hover:visited, .pure-menu a:visited {color:var(--fg)}
.pure-menu-header:hover, .pure-menu-item:hover {background-color:var(--hover)}
.pure-menu-disabled:hover {background-color:transparent}
.footer-content {border-top:1px solid #c5c8c6}
.navigation-content {border-bottom:1px solid #c5c8c6}
.footer-content {border-top:1px solid var(--fg)}
.navigation-content {border-bottom:1px solid var(--fg)}
.navigation-header {font-size:1.25em}
.navigation-header a {color:#c5c8c6}
.navigation-header a {color:var(--fg)}
.navigation-header-subtitle {font-family:Source Serif Pro, serif}
.footer-content, .navigation-content, .pagination-content {display:table; margin:0 auto; text-align:center; width:100%}
figure {text-align:center}
@ -312,13 +313,16 @@ figure img {margin:0 auto}
.post-meta {font-size:.9em; margin:0 0 .5em}
.post-meta a {text-decoration:none}
.post-meta a:hover {text-decoration:underline}
.post-divider {border-top:1px solid #c5c8c6}
.post-divider {border-top:1px solid var(--fg)}
.pull-end {float:right}
.pull-start, [dir=rtl] .pull-end {float:left}
[dir=rtl] pull-start {float:right}
.fixup {position:relative; top:-.05em}
p>code, td>code {background-color:#10111280}
p>code, td>code {background-color:var(--bg-code-trans)}
div.listingblock pre {margin-top:0.1em}
li>p {margin:0.1em; }
div.note>table, div.note td {border:0}
div.note td.icon {background-color:#282a2e; color:#b5bd68; border-radius:20%}
div.note td.icon {color:var(--green); font-size:120%; border-right: 0.2em solid var(--hover)}
div.note table {background-color:var(--note)}
div.note td.icon div.title::after {content:":"}
div.note {margin-bottom:1em; margin-left: 1em}