search

gleam-lang / language-tour

👩🏽‍💻 Learn Gleam in your browser
https://tour.gleam.run/
73 stars 55 forks source link

[Suggestion] Rewrite of tour layout and now using the "code block" style in "large" view #79

Closed simon-curtis closed 2 months ago

simon-curtis commented 3 months ago

In line with the "everything" page using the code blocks I thought I was playing around with what this would look like using this theme in the "tour" page. I think it looks quite nice

I have three states: mobile (first), small screen, full screen ("large"). In "mobile" and "small screen" the appearance will be almost identical to the curren view.

I large view I apply the code block styling and add some padding to bring it away from the edge of the screen.

Mobile:

image

Small Screen:

image

Large Screen:

image

Note: While doing this, I have changed to using flex box to allow us more layout flexibility in the future rather than using absolute positioning

lpil commented 2 months ago

OK let's do this! Thank you!

One little thing, to me it looks like the gaps at the top of the popped out section and the sides and bottom of it, and the top of text on the left all seem to be of different sizes and don't match at all. Could you make them visually consistent please? Thanks

simon-curtis commented 2 months ago

Here you go! I've increased the margin of the editor by the width and height of the drop shadow var(--gap). Is this what you meant?

image