Skip to content

Commit 3e9025d

Browse files
ghivertghivert
committed
Add margins for main blocks
1 parent 6ea1c54 commit 3e9025d

File tree

2 files changed

+112
-86
lines changed

2 files changed

+112
-86
lines changed

‎landing_page/src/landing_page.gleam‎

Lines changed: 94 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import components/windows
66
import ffi
77
import layout.{
88
body_container, column, main_title, row, section, section_explanation, title,
9-
title_container,
9+
title_container, width_container,
1010
}
1111
import redraw
1212
import redraw/handler
@@ -50,20 +50,24 @@ fn description_section() {
5050
main_title("Create your own styles."),
5151
main_title("Make your application Gleaming."),
5252
]),
53-
body_container([], [
54-
title("Sketch, CSS for anywhere"),
55-
h.div([], [h.text(texts.explanation_fst)]),
53+
width_container([
54+
body_container([], [
55+
title("Sketch, CSS for anywhere"),
56+
h.div([], [h.text(texts.explanation_fst)]),
57+
]),
5658
]),
57-
body_container([], [
58-
title("CSS is the framework"),
59-
h.div([], [h.text(texts.explanation_snd)]),
60-
h.div([], [h.text(texts.explanation_trd)]),
61-
h.div([], [h.text("Show me an example with…")]),
62-
row([], [
63-
button.primary([scroll_to("lustre-section")], "Lustre"),
64-
button.primary([scroll_to("redraw-section")], "Redraw"),
65-
button.primary([scroll_to("plain-css-section")], "Plain CSS"),
66-
button.primary([scroll_to("wisp-section")], "SSR"),
59+
width_container([
60+
body_container([], [
61+
title("CSS is the framework"),
62+
h.div([], [h.text(texts.explanation_snd)]),
63+
h.div([], [h.text(texts.explanation_trd)]),
64+
h.div([], [h.text("Show me an example with…")]),
65+
row([], [
66+
button.primary([scroll_to("lustre-section")], "Lustre"),
67+
button.primary([scroll_to("redraw-section")], "Redraw"),
68+
button.primary([scroll_to("plain-css-section")], "Plain CSS"),
69+
button.primary([scroll_to("wisp-section")], "SSR"),
70+
]),
6771
]),
6872
]),
6973
])
@@ -78,26 +82,28 @@ fn lustre_section() {
7882
let copy_button = copy_button.copy_button()
7983
use <- redraw.component__("LustreSection")
8084
section("lustre-section", "var(--dark-background)", [
81-
column([], [
82-
copy_button.title("Sketch Lustre"),
83-
copy_button(#("gleam add sketch sketch_lustre")),
84-
]),
85-
layout.windows_wrapper(px(1000), [
85+
width_container([
8686
column([], [
87-
section_explanation([], [h.text(texts.sketch_lustre_fst)]),
88-
section_explanation([], [h.text(texts.sketch_lustre_snd)]),
89-
button.link("https://hexdocs.pm/sketch_lustre", texts.bring_me_docs),
87+
copy_button.title("Sketch Lustre"),
88+
copy_button(#("gleam add sketch sketch_lustre")),
9089
]),
91-
layout.windows_row([
92-
windows.scaffold([
93-
windows.menu_bar([windows.traffic_lights()]),
94-
windows.editor(texts.sketch_lustre_example),
90+
layout.windows_wrapper(px(1000), [
91+
column([], [
92+
section_explanation([], [h.text(texts.sketch_lustre_fst)]),
93+
section_explanation([], [h.text(texts.sketch_lustre_snd)]),
94+
button.link("https://hexdocs.pm/sketch_lustre", texts.bring_me_docs),
9595
]),
96-
windows.render([
97-
layout.buttons_row([
98-
button.example(button.Red, "Close"),
99-
button.example(button.Orange, "Minimize"),
100-
button.example(button.Green, "Fill"),
96+
layout.windows_row([
97+
windows.scaffold([
98+
windows.menu_bar([windows.traffic_lights()]),
99+
windows.editor(texts.sketch_lustre_example),
100+
]),
101+
windows.render([
102+
layout.buttons_row([
103+
button.example(button.Red, "Close"),
104+
button.example(button.Orange, "Minimize"),
105+
button.example(button.Green, "Fill"),
106+
]),
101107
]),
102108
]),
103109
]),
@@ -109,26 +115,28 @@ fn redraw_section() {
109115
let copy_button = copy_button.copy_button()
110116
use <- redraw.component__("RedrawSection")
111117
section("redraw-section", "var(--background)", [
112-
column([], [
113-
copy_button.title("Sketch Redraw"),
114-
copy_button(#("gleam add sketch sketch_redraw")),
115-
]),
116-
layout.windows_wrapper(px(1000), [
118+
width_container([
117119
column([], [
118-
section_explanation([], [h.text(texts.sketch_redraw_fst)]),
119-
section_explanation([], [h.text(texts.sketch_redraw_snd)]),
120-
button.link("https://hexdocs.pm/sketch_redraw", texts.bring_me_docs),
120+
copy_button.title("Sketch Redraw"),
121+
copy_button(#("gleam add sketch sketch_redraw")),
121122
]),
122-
layout.windows_row([
123-
windows.scaffold([
124-
windows.menu_bar([windows.traffic_lights()]),
125-
windows.editor(texts.sketch_redraw_example),
123+
layout.windows_wrapper(px(1000), [
124+
column([], [
125+
section_explanation([], [h.text(texts.sketch_redraw_fst)]),
126+
section_explanation([], [h.text(texts.sketch_redraw_snd)]),
127+
button.link("https://hexdocs.pm/sketch_redraw", texts.bring_me_docs),
126128
]),
127-
windows.render([
128-
layout.buttons_row([
129-
button.example(button.Red, "Close"),
130-
button.example(button.Orange, "Minimize"),
131-
button.example(button.Green, "Fill"),
129+
layout.windows_row([
130+
windows.scaffold([
131+
windows.menu_bar([windows.traffic_lights()]),
132+
windows.editor(texts.sketch_redraw_example),
133+
]),
134+
windows.render([
135+
layout.buttons_row([
136+
button.example(button.Red, "Close"),
137+
button.example(button.Orange, "Minimize"),
138+
button.example(button.Green, "Fill"),
139+
]),
132140
]),
133141
]),
134142
]),
@@ -140,28 +148,30 @@ fn plain_css_section() {
140148
let copy_button = copy_button.copy_button()
141149
use <- redraw.component__("PlainCssSection")
142150
section("plain-css-section", "var(--dark-background)", [
143-
column([], [
144-
copy_button.title("Sketch CSS"),
145-
copy_button(#("gleam add sketch sketch_css")),
146-
]),
147-
layout.windows_wrapper(px(1400), [
151+
width_container([
148152
column([], [
149-
section_explanation([], [h.text(texts.sketch_css_fst)]),
150-
section_explanation([], [h.text(texts.sketch_css_snd)]),
151-
button.link("https://hexdocs.pm/sketch_css", texts.bring_me_docs),
153+
copy_button.title("Sketch CSS"),
154+
copy_button(#("gleam add sketch sketch_css")),
152155
]),
153-
layout.windows_row([
154-
windows.scaffold([
155-
windows.menu_bar([windows.traffic_lights()]),
156-
windows.editor(texts.sketch_css_example),
156+
layout.windows_wrapper(px(1400), [
157+
column([], [
158+
section_explanation([], [h.text(texts.sketch_css_fst)]),
159+
section_explanation([], [h.text(texts.sketch_css_snd)]),
160+
button.link("https://hexdocs.pm/sketch_css", texts.bring_me_docs),
157161
]),
158-
windows.scaffold([
159-
windows.menu_bar([windows.traffic_lights()]),
160-
windows.css(texts.sketch_css_css),
161-
]),
162-
windows.scaffold([
163-
windows.menu_bar([windows.traffic_lights()]),
164-
windows.editor(texts.sketch_css_gleam),
162+
layout.windows_row([
163+
windows.scaffold([
164+
windows.menu_bar([windows.traffic_lights()]),
165+
windows.editor(texts.sketch_css_example),
166+
]),
167+
windows.scaffold([
168+
windows.menu_bar([windows.traffic_lights()]),
169+
windows.css(texts.sketch_css_css),
170+
]),
171+
windows.scaffold([
172+
windows.menu_bar([windows.traffic_lights()]),
173+
windows.editor(texts.sketch_css_gleam),
174+
]),
165175
]),
166176
]),
167177
]),
@@ -172,24 +182,26 @@ fn wisp_section() {
172182
let copy_button = copy_button.copy_button()
173183
use <- redraw.component__("WispSection")
174184
section("wisp-section", "var(--background)", [
175-
column([], [
176-
copy_button.title("Sketch SSR"),
177-
copy_button(#("gleam add sketch")),
178-
]),
179-
layout.windows_wrapper(px(1400), [
185+
width_container([
180186
column([], [
181-
section_explanation([], [h.text(texts.sketch_wisp_fst)]),
182-
section_explanation([], [h.text(texts.sketch_wisp_snd)]),
183-
button.link("https://hexdocs.pm/sketch_lustre", texts.bring_me_docs),
187+
copy_button.title("Sketch SSR"),
188+
copy_button(#("gleam add sketch")),
184189
]),
185-
layout.windows_row([
186-
windows.scaffold([
187-
windows.menu_bar([windows.traffic_lights()]),
188-
windows.editor(texts.sketch_ssr_example),
190+
layout.windows_wrapper(px(1400), [
191+
column([], [
192+
section_explanation([], [h.text(texts.sketch_wisp_fst)]),
193+
section_explanation([], [h.text(texts.sketch_wisp_snd)]),
194+
button.link("https://hexdocs.pm/sketch_lustre", texts.bring_me_docs),
189195
]),
190-
windows.scaffold([
191-
windows.menu_bar([windows.traffic_lights()]),
192-
windows.html(texts.sketch_ssr_html),
196+
layout.windows_row([
197+
windows.scaffold([
198+
windows.menu_bar([windows.traffic_lights()]),
199+
windows.editor(texts.sketch_ssr_example),
200+
]),
201+
windows.scaffold([
202+
windows.menu_bar([windows.traffic_lights()]),
203+
windows.html(texts.sketch_ssr_html),
204+
]),
193205
]),
194206
]),
195207
]),

‎landing_page/src/layout.gleam‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,26 @@ import redraw/html as h
33
import sketch as s
44
import sketch/media
55
import sketch/redraw/html as sh
6-
import sketch/size.{px, rem}
6+
import sketch/size.{percent, px, rem}
7+
8+
fn max_width() {
9+
s.class([
10+
s.max_width(px(1500)),
11+
s.margin_("auto"),
12+
s.width(percent(100)),
13+
s.padding(px(36)),
14+
s.display("inherit"),
15+
s.flex_direction("inherit"),
16+
s.gap_("inherit"),
17+
])
18+
}
19+
20+
pub fn width_container(children) {
21+
sh.div(max_width(), [], children)
22+
}
723

824
pub fn title_container(children) {
9-
s.class([s.padding(px(36)), s.gap(px(36))])
25+
s.class([s.gap(px(36)), s.compose(max_width())])
1026
|> sh.h1([], children)
1127
}
1228

@@ -42,7 +58,6 @@ pub fn column(attributes, children) {
4258

4359
pub fn body_container(attributes, children) {
4460
s.class([
45-
s.padding(px(36)),
4661
s.line_height("1.4"),
4762
s.max_width(px(700)),
4863
s.display("flex"),
@@ -55,7 +70,6 @@ pub fn body_container(attributes, children) {
5570
pub fn section(id, background, children) {
5671
s.class([
5772
s.background(background),
58-
s.padding(px(36)),
5973
s.display("flex"),
6074
s.flex_direction("column"),
6175
s.gap(px(36)),

0 commit comments

Comments
 (0)