search

varabyte / kobweb-site

Source code behind the site kobweb.varabyte.com
http://kobweb.varabyte.com
MIT License
20 stars 5 forks source link

Improve site appearance on mobile #4

Closed bitspittle closed 1 month ago

bitspittle commented 2 years ago

We should use responsive styles that feel good on a mobile device instead of it looking like a super tiny desktop mode

See also this reddit comment: https://www.reddit.com/r/Kotlin/comments/r94xg3/comment/hnascvf/?utm_source=share&utm_medium=web2x&context=3

deepanshu11madan commented 2 years ago

Made a few changes for the phone screen and smaller window this week, It's a lot better now for the most part. The only thing left here I think is the nav header and icons look a bit smaller on phone and can be improved.

bitspittle commented 2 years ago

Oh nice I didn't even check.

Have you seen how to do responsive styles? They're mentioned in the README but I haven't documented them well yet.

Something like:

ComponentStyle("blah") {
   base { ... applies to mobile ... }
   Breakpoint.MD { ... applies to desktop ... }
}

You can also use media queries in the site's StyleSheet

On Wed, Dec 8, 2021, 8:05 AM dm11 @.***> wrote:

Made a few changes for the phone screen and smaller window this week, It's a lot better now for the most part. Now, I think the nav header and icons look a bit smaller on phone and can be improved.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/varabyte/kobweb-site/issues/4#issuecomment-988949004, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKNONAXCLS5ZJ76P632MII3UP5657ANCNFSM5JTBYL2A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

deepanshu11madan commented 2 years ago

Nice, yeah I saw how the grid items were done.

But most optimizations I made were removing hardcoded values for spacing and width. Like earlier, there would be a lot of margin space on the sides of the sections and the fixed height & width of grid items didn't look good on phones.

It can be improved a bit more but for now it looks like this:

Screen Shot 2021-12-08 at 8 29 33 AM
bitspittle commented 2 years ago

Oh great! Feel free to close this bug unless you were still working on something.

On Wed, Dec 8, 2021, 8:33 AM dm11 @.***> wrote:

Nice, yeah I saw how the grid items were done.

But most optimizations I made were removing hardcoded values for spacing and width. Like earlier, there would be a lot of margin space on the sides of the sections and the fixed height & width of grid items didn't look good on phones.

So now it looks like this: [image: Screen Shot 2021-12-08 at 8 29 33 AM] https://user-images.githubusercontent.com/47491495/145246381-b825e83f-cdc0-4a45-b5e9-243cca9d431b.png :

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/varabyte/kobweb-site/issues/4#issuecomment-988973720, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKNONAWHIEPEZ6WJU2UH653UP6CE7ANCNFSM5JTBYL2A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

deepanshu11madan commented 2 years ago

I'll keep it open for now, it still needs some work