blog/themes/modify_slick.sh

#!/bin/sh

if [ "$(basename ${PWD})" != "themes" ]; then
    echo "cd to theme directory, please." >&2
    exit 1
fi

mkdir -p tastytea/static/assets

for file in style.css style-compat.css; do
    cp slick/static/assets/${file} tastytea/static/assets/${file}

    # Remove fonts, save >400KiB (~92,5%)
    sed -Ei 's/@font-face\{[^\}]+\}//g' tastytea/static/assets/${file}

    sed -Ei 's/@font-face\{[^\}]+\}//g' tastytea/static/assets/${file}

    # Remove 3-columns (hotfix).
    sed -Ei 's/\.pure-u-md-7-12,\.pure-u-md-14-24\{[^\}]+\}//' 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;--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}

    # Add dark background to <code>
    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}

    # Reduce margin between list items
    sed -i 's/$/li>p{margin:0.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}
    sed -i 's/$/div.tip td.icon{color:var(--blue)}/' tastytea/static/assets/${file}
    sed -i 's/$/div.important td.icon{color:var(--yellow)}/' tastytea/static/assets/${file}

    # Float images .
    sed -i 's/$/.right{float:right}/' tastytea/static/assets/${file}
    sed -i 's/$/.left{float:left}/' tastytea/static/assets/${file}

    # Make CSS more readable
    sed -i 's/}/}\n/g' tastytea/static/assets/${file}
    sed -i 's/{/ {/g' tastytea/static/assets/${file}
    sed -i 's/,/, /g' tastytea/static/assets/${file}
    sed -i 's/;/; /g' tastytea/static/assets/${file}
done