fix code block on mobile

[zerongjiang]

Hey, I like how the .highlight code block looks like. It's like a silk gift wrap.

But there's too much padding on the left, when nested in a list or on a small screen.

And the <ul> tag on chrome has -webkit-padding-start set to 40px. The reset is added.

I updated the style.scss a little bit.

I've tested it on different screen size. It would affect the layout on bigger screens.

Thanks.

Before.

After.

[muan]

Hi there, since these are changes are for small screens only, could you add them to https://github.com/muan/scribble/blob/master/_assets/responsive.scss instead?

[zerongjiang]

Hi, i tried to add style to responsive.scss first. But there's also problem for nested fenced code block in a list. See screenshot below:

So i think instead of add padding to the <pre> tag, why not just remove the not(.hightlight) from the following line and keep it all the same to the elements under .post.

I didn't mean to break the structure of sass, but seems like a better solution.

> *:not(.highlight) { padding: 0 60px; }

[muan]

Ah, you are right. This makes sense. Thank you! :)

[zerongjiang]

; )

Happy Chinese New Year !

             /\,%,_
              \%%%/,\
            _.-"%%|//%
          .'  .-"  /%%%
      _.-'_.-" 0)   \%%%
     /.\.'           \%%%
     \ /      _,      %%%
      `"---"~`\   _,*'\%%'   _,--""""-,%%,
               )*^     `""~~`          \%%%,
             _/                         \%%%
         _.-`/                           |%%,___
     _.-"   /      ,           ,        ,|%%   .`\
    /\     /      /             `\       \%'   \ /
    \ \ _,/      /`~-._         _,`\      \`""~~`
     `"` /-.,_ /'      `~"----"~    `\     \
         \___,'                       \.-"`/
                                       `--'

[muan]

🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍🎍🎍🎍📕📕🎍🎍🎍🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍🎍🎍📕📕📕📕🎍🎍🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍🎍📕📕📕📕📕📕🎍🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍📕📕📕📕📕📕📕📕🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍📕💛💛💛💛💛📕📕📕📕🎍🎍🎍🎍🎍
🎍🎍🎍🎍📕📕💛📕💛📕💛📕💛📕📕📕🎍🎍🎍🎍
🎍🎍🎍📕📕📕💛💛💛💛💛📕💛📕📕📕📕🎍🎍🎍
🎍🎍📕📕📕📕💛📕💛📕💛📕💛📕💛📕📕📕🎍🎍
🎍📕📕📕📕📕💛💛💛💛💛📕💛💛📕📕📕📕📕🎍
📕📕📕📕📕📕📕💛💛💛📕📕💛📕📕📕📕📕📕📕
🎍📕📕📕📕📕📕💛📕💛📕📕💛💛💛📕📕📕📕🎍
🎍🎍📕📕📕📕📕💛💛💛📕📕📕📕📕📕📕📕🎍🎍
🎍🎍🎍📕📕📕📕📕📕📕📕📕💛📕📕📕📕🎍🎍🎍
🎍🎍🎍🎍📕📕📕💛💛💛💛📕📕💛📕📕🎍🎍🎍🎍
🎍🎍🎍🎍🎍📕📕📕📕📕📕📕📕📕📕🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍📕📕📕📕📕📕📕📕🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍🎍📕📕📕📕📕📕🎍🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍🎍🎍📕📕📕📕🎍🎍🎍🎍🎍🎍🎍🎍
🎍🎍🎍🎍🎍🎍🎍🎍🎍📕📕🎍🎍🎍🎍🎍🎍🎍🎍🎍