Well, what I am doing after that is just designing new front page. I found that flex-content as center but fleg-item left is can be done with @media-screen and using javascriptt.
Designing bycycle
What I am doingon that day is opening GIMP. I designing bycycle based on picture I found on duckduckgo. I design it with with size 300x300 even though the normal pic header is around 192x192. After that I am designing ascii with [xorg-bitmap](https://aur.archlinux org/packages/bitmap). To convert the result then using this command :
bmtoa -chars u0 | nvim -
The result suddenly appear on neovim and I can edit the ascii with this command
" for delete char
:nnoremap x xi<space><C-c>
" for add o cha
:nnoremap o rt
" for add w char
: nnoremap w rw
After that I imported ascii with read command on neovim.
:read bycycle
Suddenly the ascii got imported to html file. More importantly Visual line for vim is pretty useful to detect blank character. After that I just make dashed style everywhere on my blog. The hardest part is how can I make the parent div is on the center but child div is filling from left. It is almost hard to implement until suddenly I come to sleep.
Leaning inline-block and flex
The most simple approach to make flexible list is using inline-block. It is very awesome though if the width of content still lower that the child div overflow will be inline but if the width of the content is more than screen width the child div overflow will be block. The caveat using this is the block is always on the left. If I use
.parent-div {
. text-align: center;
}
The all of the content will be on the center. The fill item of child div also on the center. What I expect is the fill of child item is on the left.
Until then the morning come. There is many approach I try to make it happen :
- Make div parent width is same as the content but doesn’t change when line break
- Set parent div
width: 100%, an thenn make the padding auto so the inside content will be center.
The approach (2) is impossible to be done, because CSS doesn’t support it. The approach (1) is possible but it is using many condition of media-width and another approach is using js.
Seem it is too much for my code. So I just let the fill will be on the left and also text direction will be on the left.
After that I want to focus on my 2022 blog and leave the frontpage. For my refreshing, I just found good konosuba light novel translation. The first time I like light novel is because I read it using font-family: Georgia so I try style it using stylus, and it is very awesome. I just wonder how it doesn’t work. Suddenly I just copy the worked selector and change it with my style. It worked like a charm and I found that selector definition can declared using class and then element if it using javascript.
I also found the livejs, and it is awesome just add :
<script src="live.js"></script>
at the body element. It will reload faster if css file is changed. If js or html file is changed, it will be reload the browser. So if anything goes wrong just type Ctr+Shift+R. That is how to use live js, and I also using python http.server to make simple server on the directory. It is make me more love with web development hehe.
Well, that is awesome. So let’s head to 2022 blog and maybe I will just deployed it in the cloudflare.