oppi.li
1import lustre/attribute as attr
2import lustre/element/html
3
4pub fn background_color() {
5 attr.style("background-color", "#f7f1e9")
6}
7
8pub fn body_query() {
9 html.style(
10 [attr.attribute("scoped", "")],
11 "
12 @media (width > 980px) {
13 .body-margin {
14 margin-left: 15vw;
15 margin-right: 15vw;
16 }
17 }
18 ",
19 )
20}
21
22pub fn body_styles() {
23 attr.styles([
24 #("color", "black"),
25 #("container-type", "size"),
26 #("font-family", "'Almarai', sans-serif"),
27 #("font-size", "18px"),
28 ])
29}
30
31pub fn navbar() {
32 attr.styles([
33 #("border", "2px solid black"),
34 #("display", "flex"),
35 #("border-radius", "0.4em"),
36 #("padding", "1em 1.5em 1em 1.5em"),
37 #("gap", "1.5em"),
38 #("margin-left", "1em"),
39 #("margin-right", "1em"),
40 #("align-items", "center"),
41 ])
42}
43
44pub fn navbar_right() {
45 attr.styles([
46 #("margin-left", "auto"),
47 #("display", "flex"),
48 #("gap", "1.5em"),
49 ])
50}
51
52pub fn navitem() {
53 attr.styles([
54 #("text-decoration", "none"),
55 #("color", "black"),
56 #("font-weight", "700"),
57 ])
58}
59
60pub fn link_icon() {
61 attr.styles([#("display", "flex"), #("align-items", "center")])
62}
63
64pub fn icon_size() {
65 attr.styles([#("max-width", "1.5em")])
66}
67
68pub fn index_layout_query() {
69 html.style(
70 [attr.attribute("scoped", "")],
71 "
72 .index-layout {
73 grid-template-columns: auto auto;
74 }
75
76 @container (width < 750px) {
77 .index-layout {
78 grid-template-columns: auto;
79 }
80 }
81 ",
82 )
83}
84
85pub fn index_layout() {
86 attr.styles([
87 #("display", "grid"),
88 #("justify-items", "center"),
89 #("gap", "2em"),
90 ])
91}
92
93pub fn infobox() {
94 attr.styles([
95 #("display", "grid"),
96 #("width", "fit-content"),
97 #("grid-template-columns", "auto auto"),
98 #("border", "2px solid black"),
99 #("border-radius", "0.4em"),
100 #("align-items", "center"),
101 ])
102}
103
104pub fn rounded_border() {
105 attr.styles([#("border", "2px solid black"), #("border-radius", "0.4em")])
106}
107
108pub fn avatar_size() {
109 attr.styles([
110 #("max-width", "10rem"),
111 #("max-height", "10rem"),
112 #("margin", "1em"),
113 ])
114}
115
116pub fn infobox_inner() {
117 attr.styles([#("padding", "1em"), #("border-left", "1px solid black")])
118}
119
120pub fn link() {
121 attr.styles([
122 #("text-decoration", "underline"),
123 #("color", "darkblue"),
124 #("font-variant-emoji", "text"),
125 ])
126}
127
128pub fn post_card() {
129 attr.styles([
130 #("border-radius", "0.4em"),
131 #("border", "2px solid black"),
132 #("padding", "0.5em 1em 0.5em 1em"),
133 #("margin-bottom", "1em"),
134 #("flex-grow", "1"),
135 #("text-decoration", "none"),
136 #("color", "black"),
137 ])
138}
139
140pub fn post_header() {
141 attr.styles([#("margin", "0")])
142}
143
144pub fn post_info() {
145 attr.styles([
146 #("display", "inline-flex"),
147 #("gap", "1em"),
148 #("margin-left", "1em"),
149 #("font-weight", "700"),
150 ])
151}
152
153pub fn footer() {
154 attr.styles([
155 #("margin-left", "1em"),
156 #("margin-right", "1em"),
157 #("text-align", "center"),
158 ])
159}
160
161pub fn project_card() {
162 attr.styles([
163 #("border-radius", "0.4em"),
164 #("border", "2px solid black"),
165 #("padding", "1em 1em 1em 1em"),
166 #("margin-bottom", "1em"),
167 ])
168}
169
170pub fn project_icon() {
171 attr.styles([
172 #("max-width", "4em"),
173 #("max-height", "4em"),
174 #("border-radius", "0.4em"),
175 ])
176}
177
178pub fn project_header() {
179 attr.styles([
180 #("display", "inline-flex"),
181 #("gap", "1em"),
182 #("align-items", "center"),
183 #("margin", "0"),
184 ])
185}
186
187pub fn project_icon_link_size() {
188 attr.styles([#("max-width", "2em")])
189}
190
191pub fn project_icon_link_holder() {
192 attr.styles([
193 #("display", "inline-flex"),
194 #("align-items", "center"),
195 #("gap", "0.5em"),
196 ])
197}
198
199pub fn monospaced() {
200 attr.styles([#("font-family", "monospace, monospace")])
201}
202
203pub fn code_block() {
204 attr.styles([
205 #("font-family", "monospace, monospace"),
206 #("border-radius", "0.4em"),
207 #("border", "2px solid black"),
208 #("padding", "1em 1em 1em 1em"),
209 ])
210}