Coder Social home page Coder Social logo

h16nning / typora-gitbook-theme Goto Github PK

View Code? Open in Web Editor NEW
297.0 7.0 51.0 4.5 MB

This is a Typora theme is inspired by gitbook.com. Most of the user interface has been overhauled. It contains three variants: two light variants and one dark theme.

License: GNU General Public License v3.0

CSS 100.00%
typora-theme gitbook typora typora-themes theme dark-theme minimalistic

typora-gitbook-theme's Introduction

Gitbook Theme For Typora

img

This typora theme is inspired by the Gitbook document style. It features three variants: Azure, Slate and Teal.

Designed and tested on Windows 10 and macOS. Not tested, but it should also work for Linux.

Installation instructions

  1. Download the zipped project package here and un-zip it.
  2. Copy the gitbook-azure.css, gitbook-slate.css and gitbook-teal.css file as well as the folder named gitbook to your Typora theme library. It is important that you put this folder in there too as it contains important files and fonts, which are required for the theme to work properly.
  3. Launch or restart Typora and choose Gitbook Azure, Gitbook Slate, Gitbook Teal from the theme menu.

Contributing

Feel free to submit an issue, if something does not work / look right or you have any suggestions. If you would like to, you can also create your own variations of this theme (and / or open a pull request).

Please note that this theme is still in development. Updates are to expect.

Modfications

If you prefer the colors of the slate variant used previous to version 1.9 (these were slightly lighter and more slate-like), you can open the file gitbook-slate.css and change the second line from @import "gitbook/slate-colors.css"; to @import "gitbook/old-slate-colors.css";. After that you have to save the file and restart Typora for the colors to update properly. Sometimes it may also be necessary to switch to a different theme and then back to the Gitbook Slate theme after changing this.

You can also put these modifications into a seperate css file as chchen-standford points out here.

Details

img

Older Screenshots

These screenshots are not fully up to date but they show the slate and teal variants and some Windows specific views.

img

typora-gitbook-theme's People

Contributors

glanguage avatar gwfrank avatar h16nning avatar saegl5 avatar yuuuxt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

typora-gitbook-theme's Issues

Slate Azure still has scroll bar issue in the code line numbers column

On MacOS, Slate Azure theme still has the scroll bar issue in code line numbers column. Problem is fixed for Teal and Slate. Hopefully, this is an easy fix, or please let me know what I need to change in my CSS. Actually ... the spacing in Azure looks different from Teal and Slate as well. Have I done something wrong during installs? Azure just seems like the odd one out of the three.

Issue on code blocks

Typora latest update has broken the code blocks (tested under macOS). See (line six):

Screenshot 2021-07-23 at 08 51 07

Minor Math Block Counter Error

Hi! Again, thank you for bring this theme to us and helped me a lot!

Running on Win 10; Version 1.6.1

When I add the math block at first, the counter is (1), as it should be. However, after I modified it somehow, it jumpped to (2)

This is the oringal one which display correct

$$ prod_{i=1}^n p_i^{-p_i},\ where\ D\ is\ Diversity\ Index $$

This is after modification:

$$ D=\prod_{i=1}^n p_i^{-p_i},\ where\ D\ is\ Diversity\ Index $$

If you enter it correctly at the first time, this bug will not appear. I tried several time later, but I still can't tell what action it is.

image

add tag before headers

awesome theme, we love it so much ~
could you pls add this little tag before headers, really helpful for us to add header on order, thx~

image

Reduce left padding in code block

Hi, thanks for your theme, it's really beautiful.
I'm a mac user, I'd like none padding in code block, like default theme GitHub. However, I have set padding to 0rem, but it's also different with GitHubtheme. Is there any way to further reduce the left padding in the code block to be like Github theme?

/*CODE*/
.CodeMirror {
padding: 1rem;
font-family: var(--code-font-family);
}

  1. This Gitbook-Azure theme(padding=1rem):
    image
  2. This Gitbook-Azure theme(padding=0rem):
    image
  3. Default Github theme:
    image

Rounded Cornor of Highlighted Part

Thank you for the theme!!! I really love it, but I found there are some details are not very good.

As you may see in the picture below, the cornor of highlight is only rounded at the begining and at the end. And when it come to a new line, it is 90 degree sharp, which I think is not very consistant with the design.
Could you make an improvment on it?

image

Graphical bug in the Themes Menu

There is a graphical bug in the Themes Menu of Typora which causes parts of the preview getting rendered above the checkmark.
graphical bug

Too many blanks in outline

There's too many blanks between different level of titles in outline, is there corresponding solution?

image

transition cause focus problem

In Windows 10 system , Typora version : 0.10.11. if not focus(select) on sidebar item,sidebar drop item will flash across . i debug this issue, It's cause by transition code.
3

.file-tree-node:not(.file-node-root):not(.file-node-expanded)
    .file-node-background {
    transition-duration: 0.2s;
    transition-property: background-color;
}

remove this code, problem resolve. maybe another solution?

The cursor of the first character in a list item is slightly higher

The problem exists in both ordered and unordered list. For example, when inserting an ordered list, type 1. followed by a space. Then an empty list is created, and it is found that the cursor is slightly higher than expected. It returns to normal after entering any character in the list.

Compare the height of the bottom of the cursor with the height of "1." in the following two pictures:

Snipaste_2021-06-18_19-15-56

Snipaste_2021-06-18_19-16-14

I found this problem on macOS. There is no such problem under Windows.

Minor Display Issue of Math Block

Running on Win 10.

When using a BIG symboy like \sum, the lower part will go out from the box when having preview. No problem found in final view. Don't know whether it is Typora's problem.

Snipaste_2021-01-11_22-57-10

BTW, I haven't fix the problem #8 by the 1.6.1 release. I paste the unzipped zip folder to the theme folder, but the connor is still sharp as it was.

image

image

Background Color for Gitbook Slate

Gitbook Azure/Slate are my primary Typora themes. Thanks for sharing these beautiful themes!

Right now I am still using v1.8 because I like the bluish background better. The new background in v1.9.1 is a little too dark for me. I wonder if you could code the CSS in a way that is very easy to tweak the background color, perhaps by changing one or two global variables under :root?

Big left blank area

The left blank area of this theme is much bigger than the official theme "Github", which causes the display area to decrease.

image

Word Highlight while Searching

image

As you may see in the picture. When I'm searching for some words that is highlighted by ==word== syntax was changed in to the same color as the background. Maybe change it to another color would be better?

Minor Display Issue When Selecting Texts

image

Hi! As I circled out in the picture that when selecting a part of text containning highlighted text, the background of beginning of each line and the end of each line is not properly hightlighted.

Wish i can have a .docx output style file

Hello guys, recently my work need i write document in .docx, and i really like your typora theme work, so i was wondering, if you guys can support a .docx stylesheet file for Word, Thanks!

Readability of Links in Highlighted Mode

Snipaste_2021-02-15_18-08-38
Snipaste_2021-02-15_18-08-44
Snipaste_2021-02-15_18-09-37

Similar issue with the last one I posted. The font color is exactly the same as highlighted background when editing. Merely visible when I put my cursor on the link. Could you change the font color a bit to increase the readability?

Thank you sooooo much for making this theme! It is now my favorite theme!

Readability in "Preference" Page

Hello! It has been a quite while since last update. I'm not sure whether you are still updating, but here is the issue I recently met with the newest updating from Typora.

When I enter the typora preference page -> Export, (as you may see in the picture) the background color blend with the font color, it is almost impossible to read it in the Slate theme.

image

Again, thank you soooo much for bring this excellent theme for us.

code line number display has overlap

As shown in the following graph, when the line number is greater than 10, with gitbook theme set as the default one, open typora directly, this phenomenon will appear.

However, after switching into a different theme and switch back, the problem will disappear.

image

Typora: 0.9.96

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.