dark theme about sinewalker.github.io HOT 11 CLOSED

experiments with simple maniuplations with files/assets/css/custom.css go a long way. Here's some simple stuff (the 100x100 pixel image is taken from the GitHub Dark Stylish theme -- I'd probably make my own to use)

body {
    background-color: #333;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==) !important;


    color: #aaa;
}

a {
    color: #e37f2a;
}

a:hover {
    color: #20b2d2;
    text-decoration: underline;
}

code {
    background-color: #111;
    color: #ccc !important;
}

The ipython notebook CSS is much more complicated though:

div.text_cell_render {
    color: #aaa;
}

div.prompt.input_prompt {
    color: #222;
}

That's a start, but still the inline code is overridden by nikola_ipython.css. This blog might help.

from sinewalker.github.io.

The font color for the Notebooks can be manually changed by editing the nikola_ipython.css file in the Nikola install.

This file is currently in ~/.venvs/Nikola/lib/python3.5/site-packages/nikola/data/themes/base/assets/css

hmm. Well, rather than editing the file in the venv library, how about I add it to files/assets/css and then edit it?

from sinewalker.github.io.

not quite:

(nikola) mjl@milo:css (src:*%>)$ nikola build
Scanning posts..........done!
ERROR: Two different tasks can't have a common target.'output/assets/css/nikola_ipython.css' is a target for copy_files:output/assets/css/nikola_ipython.css and copy_assets:output/assets/css/nikola_ipython.css.

from sinewalker.github.io.

I copied the nikola_ipython.css from the library, added it to my src branch, then made changes.

Renaming it to avoid the task collision, and then copying my modified file over top of the one in the library works.

But I don't like it because it's messy: have to keep it in my repo as something else, and have a setup step to copy the file to the library.

Better would be to find that copy:assets target and adjust it.

from sinewalker.github.io.

RTFM

CSS tweaking

Using the default configuration, you can create a assets/css/custom.css file under files/ or in your theme and then it will be loaded from the blocks of your site pages. Create it and put your CSS code there, for minimal disruption of the provided CSS files.

If you feel tempted to touch other files in assets, you probably will be better off with a custom theme.

So, that might be the way to go then. Make my own theme (!) with bootstrap3-gradient as the parent, and then have my own custom.css and nikola-ipython.css in there.

Also I should make a feature branch off of src for this work. It's going to take some time ;-)

from sinewalker.github.io.

I'd like to do something like this for the a:hover style:

text-shadow: 
   0px  0px 7px  rgba(232,188,7,0.75), 
   0px  0px 14px rgba(232,188,7,0.525), 
   0px  0px 21px rgba(232,188,7,0.3625), 
   0px  0px 28px rgba(232,188,7,0.25725), 
   1px  1px 1px  rgba(6%,6%,6%,1.0), 
  -1px -1px 1px  rgba(6%,6%,6%,1.0), 
   1px -1px 1px  rgba(6%,6%,6%,1.0), 
  -1px  1px 1px  rgba(6%,6%,6%,1.0) !important;

only, in blue #e37f2a, whatever that is in RGB. This above style comes from the Stylish Wikipedia theme "Wikipedia Dark/Light, Width, Clarity [by Splark]"

from sinewalker.github.io.

Here's how to do this properly:

1. mkdir -p themes/milosophy
2. echo bootstram3 > themes/milosohpy/parent (at this point, you have a working theme same as bootstrap3)
3. in conf.py: THEME="milosophy"
4. nikola build (check it works)

Now we can start to play. Put custom.css and nikola-ipython.css into themes/milosophy/assets/css, then do nikola auto and start to play!

Emacs is perfect for playing with colour values using rainbow mode:

from sinewalker.github.io.

For defining all these, I'm going to start with monokai, since that is what Nikola's built-in CSH is set to. The monokai theme for vim has a list of named colors that seems fairly translatable.

from sinewalker.github.io.

I went with native instead, copying the values from the Pygments native.py. This is mostly working. Some tweaking for old posts from wordpress, and some Ipython where the code blocks were rendered by ipython/pygments itself, I think.

from sinewalker.github.io.

The input_area class for IPython is still not right, with a white background, and output_subarea, output_stream, output_stdout, output_text have dark text on a dark background

needs fixing. Sampe post: http://milosophical.me/blog/2015/minecraft-python-0.html

from sinewalker.github.io.

Commit 44d77ce fixes

from sinewalker.github.io.