diff --git a/install/app-typora.sh b/install/app-typora.sh index e696c51..19951cd 100644 --- a/install/app-typora.sh +++ b/install/app-typora.sh @@ -1,11 +1,10 @@ -if [ -n "$FORCE" ] || ! command -v typora &>/dev/null; then - sudo snap install typora - cd ~/Downloads - git clone https://github.com/dhh/ia_typora - mkdir -p ~/.local/share/fonts - cp ia_typora/fonts/iAWriterMonoS-* ~/.local/share/fonts/ - fc-cache - mkdir -p ~/snap/typora/current/.config/Typora/themes/ - cp ia_typora/ia_typora*.css ~/snap/typora/current/.config/Typora/themes/ - cd - +if ! command -v typora &>/dev/null; then + wget -qO - https://typoraio.cn/linux/public-key.asc | sudo tee /etc/apt/trusted.gpg.d/typora.asc + sudo add-apt-repository 'deb https://typora.io/linux ./' + sudo apt-get update -y + sudo apt-get install -y typora + + # Add iA Typora theme + ln -s ~/.local/share/omakub/themes/typora/ia_typora.css ~/.config/Typora/themes/ + ln -s ~/.local/share/omakub/themes/typora/ia_typora_night.css ~/.config/Typora/themes/ fi diff --git a/install/fonts.sh b/install/fonts.sh index cafa21b..d536bf5 100644 --- a/install/fonts.sh +++ b/install/fonts.sh @@ -21,6 +21,11 @@ unzip Meslo.zip -d Meslo cp Meslo/*.ttf ~/.local/share/fonts rm -rf Meslo.zip Meslo +wget https://github.com/iaolo/iA-Fonts/archive/refs/heads/master.zip +unzip master.zip -d iaFonts +cp iaFonts/iA-Fonts-master/iA\ Writer\ Mono/Static/iAWriterMonoS-*.ttf ~/.local/share/fonts +rm -rf master.zip iaFonts + fc-cache cd - diff --git a/themes/typora/ia_typora.css b/themes/typora/ia_typora.css new file mode 100644 index 0000000..4440439 --- /dev/null +++ b/themes/typora/ia_typora.css @@ -0,0 +1,309 @@ +:root { + --accent-color: #aeb1b5; /* #'s before H1-3 */ + --background-color: white; + --border-color: #ddd; + --code-bg-color: #f8f8f8; + --font-color: #42464c; + --header-color: #222324; + --link-color: #2077b2; + --control-text-color: #667176; + --side-bar-bg-color: #fafafa; + --body-font: iAWriterMonoS-Regular, monospace, Roboto; + --border-radius: 2px; + --document-horizontal-margin: 80px; + --document-padding-x: 10ch; + --font-size: 20px; + --h1-fontsize: 20px; /* 1,5 rem = 24px */ + --h2-fontsize: 20px; /* 1,375 rem = 22px */ + --h3-fontsize: 20px; /* 1,25 rem = 20px */ + --h4-fontsize: 20px; /* 1,125 rem = 18px */ + --line-height: 1.8; + --main-content-margin: 0 auto; + --main-content-max-width: 85ch; + --monospace-font-size: 20px; + --monospace-font: iAWriterMonoS-Regular, monospace; + --monospace-line-height: 1.6; + --monospace: var(--monospace-font); /* Fixes source code mode */ + --nav-width: 200px; + --vertical-padding: 40px; +} + +/* Narrow layout styles */ +@media (max-width: 640px) { + :root { + --document-padding-x: 4ch; + } +} + +html { + font-size: var(--font-size); + background-color: var(--background-color); +} + +html, +body { + color: var(--font-color); + font-family: var(--body-font); + line-height: var(--line-height); +} + +#write { + /* size of writing area: */ + padding-left: var(--document-padding-x); + padding-right: var(--document-padding-x); + max-width: var(--main-content-max-width); + box-sizing: border-box; +} + +/** + * --------------------- + * Block Elements + */ + +/* yaml */ +pre.md-meta-block { + background-color: var(--background-color); + padding-bottom: .5rem; + color: var(--accent-color); + border-bottom: 2px solid var(--border-color); + font-family: var(--monospace-font); +} + +/* headings */ +h1, h2, h3 { + font-weight: bold; + color: var(--header-color); +} + +h1 { + margin-top: 1rem; + margin-bottom: 1rem; + font-size: var(--h1-fontsize); +} + +h1:not(:first-child) { + margin-top: 1rem; +} + +h2 { + margin-top: 1rem; + margin-bottom: 0rem; + font-size: var(--h2-fontsize); +} + +h3 { + margin-top: 1rem; + margin-bottom: 0rem; + font-size: var(--h3-fontsize); +} + +h4, h5, h6 { + color: var(--header-color); + margin-top: 1rem; + margin-bottom: 0rem; + font-size: 1rem; +} + +h4 { + font-size: var(--h4-fontsize); +} + +h6 { + color: var(--control-text-color); +} + +h1::before, +h2::before, +h3::before { + font-weight: 400; + text-align: right; + width: 5ch; + padding-right: 1ch; + margin-left: -5ch; + color: var(--accent-color); + display: inline-block; +} + +h1::before { + content: '#'; +} + +h2::before { + content: '##'; +} + +h3::before { + content: '###'; +} + +h1 tt, +h1 code { + font-size: inherit; +} +h2 tt, +h2 code { + font-size: inherit; +} +h3 tt, +h3 code { + font-size: inherit; +} +h4 tt, +h4 code { + font-size: inherit; +} +h5 tt, +h5 code { + font-size: inherit; +} +h6 tt, +h6 code { + font-size: inherit; +} + +/* table */ +table { + margin-top: 1rem; + margin-bottom: 1rem; +} + +table tr:nth-child(2n), +thead { + background-color: var(--side-bar-bg-color); +} + +td, +th { + border-style: solid; + border-color: var(--border-color); + border-width: 1px; + padding: .35rem .7rem +} + +li p { + margin: 0; +} + +.task-list { + padding-left: 0; +} + +.task-list-item { + padding-left: 1.5em; + margin-bottom: 0rem; +} + +#write input[type='checkbox'] { + margin-top: 5px; +} + +blockquote { + margin: 1rem 0; + padding-left: 2ch; + margin-left: .5ch; + position: relative; + overflow: hidden; + border-left: 2px solid var(--border-color); + color: var(--accent-color); +} + +/* horizontal line */ +hr { + border: none; + border-bottom: 2px solid var(--border-color); + margin-top: 1.4rem; + margin-bottom: 1.4rem; +} + +p { + margin: 2rem 0; +} + +/** + * Code Fences + * see http:/*support.typora.io/Code-Block-Styles + */ + +.cm-s-inner .CodeMirror-gutters { + background: var(--code-bg-color); +} + +.code-tooltip { + box-shadow: none; + border-radius: var(--border-radius); + background-color: var(--code-bg-color); + border-color: var(--border-color); + border-style: solid; + border-width: 1px; +} + +.code-tooltip input { + outline: none; + width: 20ch; +} + +.md-fences .code-tooltip { + bottom: -1.8rem; + padding: none; +} + +.md-fences.md-focus .cm-s-inner { + /* Remove bottom right border radius when tooltip is shown */ + border-bottom-right-radius: 0; +} + +/* code tooltip autocomplete list */ + +.autoComplt-hint { + background-color: transparent !important; + margin: 0 !important; + padding: 0.125rem 0.375rem !important; + color: var(--text-color) !important; + line-height: var(--line-height) !important; + height: 1.4rem !important; +} + +.autoComplt-hint-selected { + background-color: var(--link-color) !important; + color: var(--background-color) !important; +} + +/* basic styles */ + +.md-fences, +code, +tt { + border: 1px solid var(--border-color); + background-color: var(--code-bg-color); + font-family: var(--monospace-font); + font-size: var(--monospace-font-size); + border-radius: .25rem; + padding: 0 .125rem; + line-height: var(--monospace-line-height); +} + +.md-fences { + margin-bottom: 18px; + margin-top: 15px; + padding: 0.2em 1em; + padding-top: 8px; + padding-bottom: 6px; +} + +a { + color: var(--link-color); +} + + +/** + * Control UI (optional) + */ + +.outline-item:hover { + color: var(--header-color); +} + +#write div.md-toc-tooltip { + background-color: var(--background-color); +} + diff --git a/themes/typora/ia_typora_night.css b/themes/typora/ia_typora_night.css new file mode 100644 index 0000000..d783d20 --- /dev/null +++ b/themes/typora/ia_typora_night.css @@ -0,0 +1,95 @@ +@import 'night/codeblock.dark.css'; +@import 'night/mermaid.dark.css'; +@import 'night/sourcemode.dark.css'; +@import 'ia_typora.css'; + +:root { + --accented-background-color: #1e1e1e; + --light-header-color: #dbdbdb; /* H1-H3 */ + --select-text-bg-color: #186a9a; + --accent-color: #4f525a; + --background-color: #101010; + --font-color: #bbbcbc; + --header-color: #bebebe; /* H4-H6 */ + --border-color: #232629; + --link-color: #5584aa; + --code-bg-color: #1c1a1a; + --hover-bg-color: #050505; + --control-text-color: var(--font-color); + --side-bar-bg-color: var(--accented-background-color); + --control-text-hover-color: var(--header-color); + --item-hover-text-color: var(--header-color); + --item-hover-bg-color: var(--hover-bg-color); + --bg-color: var(--background-color); + --text-color: var(--font-color); + --meta-content-color: var(--accent-color); + --md-char-color: var(--accent-color); + --window-border: 1px solid rgba(0,0,0,.07); + --active-file-bg-color: var(--hover-bg-color); +} + +.outline-item:hover { + background-color: var(--hover-bg-color); +} + +#write { + cursor: -webkit-image-set(url("night/cursor.png") 1x, url("night/cursor@2x.png") 2x) 8 8, auto; +} + +h1, +h2, +h3 { + color: var(--light-header-color); +} + +mark { + background: #b8b80a +} + +table tr:nth-child(2n), +thead { + background-color: #141313; +} + +sup.md-footnote { + background-color: var(--code-bg-color); + color: var(--font-color); +} + +/* right click menu */ +.context-menu { + background-color: #141313; +} + +.context-menu.dropdown-menu .divider { + background-color: #232629; +} + +/* focus mode */ +.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * { + color: #4f525a !important; +} + +.on-focus-mode .md-end-block:not(.md-focus) img, +.on-focus-mode .md-task-list-item:not(.md-focus-container)>input { + opacity: #4f525a !important; +} + +.on-focus-mode li[cid]:not(.md-focus-container){ + color: #4f525a; +} + +.on-focus-mode .md-fences.md-focus .CodeMirror-code>*:not(.CodeMirror-activeline) *, +.on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * { + color: #4f525a !important; +} + +.on-focus-mode .md-focus, +.on-focus-mode .md-focus-container { + color: var(--light-header-color); +} + +.on-focus-mode #typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * { + color: #4f525a !important; +} +