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

Serif text, sans-serif headlines. WARNING blocks.

This commit is contained in:
tastytea 2019-05-08 15:46:09 +02:00
parent 0b8f8bf85e
commit ff69b060f2
Signed by: tastytea
GPG Key ID: CFC39497F1B26E07
3 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
themes/modify_slick.sh
View File

@ -33,11 +33,17 @@ for file in style.css style-compat.css; do
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}
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;--admonitionbg:#1d1d1d}/' tastytea/static/assets/${file}
# Increase font-size
sed -i 's/font-size:16px/font-size:18px/g' tastytea/static/assets/${file}
# Change default font.
sed -i 's/Source Sans Pro,sans-serif/Source Serif Pro,serif/g' tastytea/static/assets/${file}
# Change font for sections headers.
sed -i 's/$/h1,h2,h3,h4,h5,h6{font-family: Source Sans Pro,sans-serif}/' tastytea/static/assets/${file}
# Set maximum characters per line to 100
sed -i 's/body{margin:0}/body{max-width:100ch;margin:auto}/' tastytea/static/assets/${file}
@ -50,13 +56,16 @@ for file in style.css style-compat.css; do
# Reduce margin between list items
sed -i 's/$/li>p{margin:0.1em;}/' tastytea/static/assets/${file}
# 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{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}
sed -i 's/$/div.note td{padding:0.5em 1em}/' tastytea/static/assets/${file}
# Style NOTE: and WARNING: (AsciiDoc)
sed -i 's/$/div.admonitionblock>table,div.admonitionblock td{border:0}/' tastytea/static/assets/${file}
sed -i 's/$/div.admonitionblock td.icon{font-size:120%;border-right: 0.2em solid var(--hover)}/' tastytea/static/assets/${file}
sed -i 's/$/div.admonitionblock table{background-color:var(--admonitionbg)}/' tastytea/static/assets/${file}
sed -i 's/$/div.admonitionblock td.icon div.title::after{content:":"}/' tastytea/static/assets/${file}
sed -i 's/$/div.admonitionblock{margin-bottom:1em;margin-left: 1em}/' tastytea/static/assets/${file}
sed -i 's/$/div.admonitionblock td{padding:0.5em 1em}/' tastytea/static/assets/${file}
sed -i 's/$/div.note td.icon{color:var(--green)}/' tastytea/static/assets/${file}
sed -i 's/$/div.warning td.icon{color:var(--red)}/' tastytea/static/assets/${file}
# Make CSS more readable
sed -i 's/}/}\n/g' tastytea/static/assets/${file}

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

@ -1,4 +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}
: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; --admonitionbg:#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}
@ -246,7 +246,7 @@ td, th {padding:0}
.highlight .bp {color:#c5c8c6}
.highlight .vc, .highlight .vg, .highlight .vi {color:#c66}
.highlight .il {color:#de935f}
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}
body {background-color:var(--bg); color:var(--fg); font-display:swap; font-family:Source Serif Pro, 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}
@ -261,7 +261,7 @@ 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-g [class*=pure-u], button, html, input, select, textarea {color:var(--fg); font-family:Source Serif Pro, 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)}
@ -285,12 +285,15 @@ figure img {margin:0 auto}
.pull-start, [dir=rtl] .pull-end {float:left}
[dir=rtl] pull-start {float:right}
.fixup {position:relative; top:-.05em}
h1, h2, h3, h4, h5, h6 {font-family: Source Sans Pro, sans-serif}
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 {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}
div.note td {padding:0.5em 1em}
div.admonitionblock>table, div.admonitionblock td {border:0}
div.admonitionblock td.icon {font-size:120%; border-right: 0.2em solid var(--hover)}
div.admonitionblock table {background-color:var(--admonitionbg)}
div.admonitionblock td.icon div.title::after {content:":"}
div.admonitionblock {margin-bottom:1em; margin-left: 1em}
div.admonitionblock td {padding:0.5em 1em}
div.note td.icon {color:var(--green)}
div.warning td.icon {color:var(--red)}

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

@ -1,4 +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}
: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; --admonitionbg:#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}
@ -279,7 +279,7 @@ td, th {padding:0}
.highlight .bp {color:#c5c8c6}
.highlight .vc, .highlight .vg, .highlight .vi {color:#c66}
.highlight .il {color:#de935f}
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}
body {background-color:var(--bg); color:var(--fg); font-display:swap; font-family:Source Serif Pro, 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}
@ -294,7 +294,7 @@ 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-g [class*=pure-u], button, html, input, select, textarea {color:var(--fg); font-family:Source Serif Pro, 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)}
@ -318,12 +318,15 @@ figure img {margin:0 auto}
.pull-start, [dir=rtl] .pull-end {float:left}
[dir=rtl] pull-start {float:right}
.fixup {position:relative; top:-.05em}
h1, h2, h3, h4, h5, h6 {font-family: Source Sans Pro, sans-serif}
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 {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}
div.note td {padding:0.5em 1em}
div.admonitionblock>table, div.admonitionblock td {border:0}
div.admonitionblock td.icon {font-size:120%; border-right: 0.2em solid var(--hover)}
div.admonitionblock table {background-color:var(--admonitionbg)}
div.admonitionblock td.icon div.title::after {content:":"}
div.admonitionblock {margin-bottom:1em; margin-left: 1em}
div.admonitionblock td {padding:0.5em 1em}
div.note td.icon {color:var(--green)}
div.warning td.icon {color:var(--red)}