search

serg / yourfolio

:star: Super simple and responsive theme for your personal website on Hugo
https://themeslake.com/theme/yourfolio/
MIT License
41 stars 23 forks source link

How to deactivate overlay text in responsive mode #13

Open MUWalter opened 3 years ago

MUWalter commented 3 years ago

Dear @serg ,

I was wondering how I could deactivate the overlay text for projects, maybe even the accent color in responsive mode. The reason is: In my opinion it doesn't make sense, because a hover on a smartphone is not possible, and sometimes it just gets stuck. So I would like in responsive mode that the project images don't show any text or color. Maybe you could give me a hint.

overlay text

If this is not so easy to do, maybe you can tell me how to change the font size for the type section.

EDIT: Alternatively it could be also nice to swipe to read the overlay text or click once to read the text and then click a second time to go to the link. It's just an idea.

All the best! Mark

serg commented 3 years ago

Hello Mark,

On mobile, the hover is activated when you apply the delayed tap on tile. Currently, I am not plan to change this default behaviour.

But you could customise this for your needs. On mobile, you could change color and background for tile hover in line 92 and 94 here. After, you need to copy these styles for desktop view inside project scope styles (like it was for 92-92 lines) under 278 line. This needed for overriding mobile styles and make tiles have color when hovering on desktop viewport.

For changing font size for type, please search occurrences for &-type style scope inside project definition in app.scss file. There are multiple definitions of &-type inside @media rule (that respond for different width of viewports).

Hope this helps! Have a great day!

MUWalter commented 3 years ago

Perfect, that did the trick. Thank you very much!

Am 26.05.2021 um 10:23 schrieb Sergey Furtak @.***>:

Hello Mark,

On mobile, the hover is activated when you apply the delayed tap for tile. Currently, I am not plan to change this behaviour.

But you could customise this for your needs. On mobile, you could change color and background for tile hover in line 92 and 94 here https://github.com/serg/yourfolio/blob/acaa8f1957e12fbd2ad872c2fcf0eaac3ed5c016/assets/scss/app.scss#L92L94. After, you need to copy these styles for desktop view inside project scope styles (like it was for 92-92 lines) under 278 line https://github.com/serg/yourfolio/blob/acaa8f1957e12fbd2ad872c2fcf0eaac3ed5c016/assets/scss/app.scss#L278. This needed for overriding mobile styles and make tiles have color when hovering on desktop viewport.

For changing font size for type, please search occurrences for &-type style scope inside project definition in app.scss https://github.com/serg/yourfolio/blob/acaa8f1957e12fbd2ad872c2fcf0eaac3ed5c016/assets/scss/app.scss file. There are multiple definitions of &-type inside @media rule (that respond for different width of viewports).

Hope this helps! Have a great day!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/serg/yourfolio/issues/13#issuecomment-848572314, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHEVHT4SEAW66LE5CKAROH3TPSVYHANCNFSM45JRSL5Q.

serg commented 3 years ago

Cool, glad to help!