Skip to content

Commit 3ec30fe

Browse files
cmontellacmontella
committed
Merge branch 'v0.2-beta' into 'main'
Style sheet update See merge request mech-lang/mech!117
2 parents 407e341 + f45597a commit 3ec30fe

File tree

3 files changed

+99
-40
lines changed

3 files changed

+99
-40
lines changed

‎.gitlab-ci.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ test:cargo:
22
script:
33
- rustup show
44
- rustup default nightly-2025-01-15
5-
#- wasm-pack --version
6-
#- wasm-pack build wasm-notebook --target web
5+
- cargo clean
76
- cargo build --bin mech
87
- cargo test interpret

‎include/style.css‎

Lines changed: 96 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,12 @@ html {
99
scroll-behavior: auto;
1010
}
1111

12-
.mech-program {
13-
counter-reset: h2 equation;
14-
margin: auto;
15-
margin-top: 20px;
16-
margin-bottom: 20px;
17-
width: 700px;
18-
}
19-
2012
body {
2113
font-family: 'Roboto', sans-serif;
2214
background-color: #2F353B;
2315
margin: 0;
2416
padding: 0;
25-
font-size: 12pt;
17+
font-size: 1rem;
2618
}
2719

2820
.mech-root {
@@ -31,27 +23,33 @@ body {
3123
flex-direction: row;
3224
}
3325

34-
#mech-output {
26+
.mech-content {
27+
min-width: 800px;
28+
counter-reset: h2 equation;
29+
flex: 2;
30+
}
31+
32+
.mech-program {
3533
max-width: 700px;
36-
min-width: 250px;
34+
margin: auto;
35+
}
36+
37+
#mech-output {
3738
background-color: #171D21;
3839
color: #f2ead9;
39-
border-radius: 10px;
40+
flex: 1;
4041
}
4142

4243
.mech-toc {
4344
width: 250px;
44-
min-width: 250px;
4545
counter-reset: h2;
4646
background-color: #171D21;
4747
color: #f2ead9;
4848
overflow-y: auto;
49-
margin-right: 20px;
50-
padding-right: 0px;
51-
padding-left: 0px;
5249
position: sticky;
5350
top: 0;
5451
height: 100vh;
52+
flex-shrink: 0;
5553
}
5654

5755
.mech-toc h2 {
@@ -83,11 +81,11 @@ body {
8381

8482
.mech-toc h1 {
8583
visibility: hidden;
86-
font-size: 12pt;
84+
font-size: 1rem;
8785
}
8886

8987
.mech-toc h2 {
90-
font-size: 12pt;
88+
font-size: 1rem;
9189
padding-left: 13px;
9290
}
9391

@@ -110,7 +108,7 @@ h2.toc::before {
110108
}
111109

112110
h3.toc::before {
113-
font-size: 12pt;
111+
font-size: 1rem;
114112
padding-right: 3px;
115113
color: rgba(255, 255, 255, 0.55);
116114
}
@@ -119,7 +117,7 @@ h3.toc::before {
119117
}
120118

121119
.mech-toc h3 {
122-
font-size: 12pt;
120+
font-size: 1rem;
123121
padding-left: 30px;
124122
}
125123

@@ -138,13 +136,13 @@ h3.toc::before {
138136
}
139137

140138
h4.toc::before {
141-
font-size: 12pt;
139+
font-size: 1rem;
142140
padding-right: 3px;
143141
color: rgba(255, 255, 255, 0.55);
144142
}
145143
.mech-toc h4 {
146144
line-height: 23px;
147-
font-size: 12pt;
145+
font-size: 1rem;
148146
padding-left: 60px;
149147
margin: 10px;
150148
}
@@ -217,14 +215,14 @@ h4.toc::before {
217215
padding-right: 6px;
218216
}
219217

220-
.mech-program .mech-program-title {
218+
.mech-program-title {
221219
width: 900px;
222220
font-family: 'FiraCodeRegular', monospace;
223221
padding-bottom: 10px;
224222
border-bottom: 4px dashed #d19710;
225223
color: #f2ead9;
226224
letter-spacing: 2px;
227-
font-size: 22pt;
225+
font-size: 1.83rem;
228226
font-weight: bold;
229227
text-align: center;
230228
margin-bottom: 16px;
@@ -242,7 +240,7 @@ h4.toc::before {
242240
padding-bottom: 10px;
243241
border-bottom: 3px dashed #d19710;
244242
color: #f2ead9;
245-
font-size: 16pt;
243+
font-size: 1.33rem;
246244
font-weight: bold;
247245
letter-spacing: 2px;
248246
margin-bottom: 20px;
@@ -258,7 +256,7 @@ h4.toc::before {
258256
.mech-program h3 {
259257
font-family: 'FiraCodeRegular', monospace;
260258
color: #f2ead9;
261-
font-size: 14pt;
259+
font-size: 1.17rem;
262260
font-weight: bold;
263261
margin-bottom: 10px;
264262
letter-spacing: 1px;
@@ -273,7 +271,7 @@ h4.toc::before {
273271
.mech-program h4 {
274272
font-family: 'FiraCodeRegular', monospace;
275273
color: #f2ead9;
276-
font-size: 12pt;
274+
font-size: 1rem;
277275
font-weight: bold;
278276
margin-bottom: 10px;
279277
letter-spacing: 1px;
@@ -301,7 +299,7 @@ h4.toc {
301299
background-color: #171D21;
302300
color: #ada594;
303301
font-family: 'FiraCodeLight', monospace;
304-
font-size: 12pt;
302+
font-size: 1rem;
305303
line-height: 18px;
306304
padding: 20px;
307305
border-radius: 10px;
@@ -338,7 +336,7 @@ h4.toc {
338336
background-color: #171D21;
339337
color: #ada594;
340338
font-family: 'FiraCodeLight', monospace;
341-
font-size: 12pt;
339+
font-size: 1rem;
342340
line-height: 18px;
343341
border-radius: 0px;
344342
padding: 30px;
@@ -481,7 +479,7 @@ code {
481479
border: 1px solid #777;
482480
color: #eddaf1;
483481
font-family: 'FiraCodeLight', monospace;
484-
font-size: 12pt;
482+
font-size: 1rem;
485483
padding: 0px 6px 0px 6px;
486484
margin: 0px 2px 0px 2px;
487485
border-radius: 3px;
@@ -494,7 +492,7 @@ code {
494492
background-color: #171D21;
495493
border: 1px solid #777;
496494
font-family: 'FiraCodeLight', monospace;
497-
font-size: 12pt;
495+
font-size: 1rem;
498496
padding: 0px 6px 0px 6px;
499497
margin: 0px 2px 0px 2px;
500498
border-radius: 3px;
@@ -506,7 +504,7 @@ code {
506504
border: 1px solid #777;
507505
color: #9ccdf4;
508506
font-family: 'FiraCodeLight', monospace;
509-
font-size: 12pt;
507+
font-size: 1rem;
510508
padding: 0px 6px 0px 6px;
511509
margin: 0px 2px 0px 2px;
512510
border-radius: 3px;
@@ -854,7 +852,7 @@ ol {
854852
.mech-list-item-emoji::before {
855853
content: attr(data-bullet);
856854
position: relative;
857-
font-size: 12pt;
855+
font-size: 1rem;
858856
color: #ee6262;;
859857
right: 30px;
860858
top: 13px;
@@ -873,7 +871,7 @@ ol {
873871

874872
.mech-figure-label {
875873
color: #F3B62D;
876-
font-size: 12pt;
874+
font-size: 1rem;
877875
min-width: 60px;
878876
text-align: right;
879877
}
@@ -889,7 +887,7 @@ ol {
889887
.mech-figure-caption {
890888
margin-top: 1em;
891889
color: #eadec2;
892-
font-size: 12pt;
890+
font-size: 1rem;
893891
text-align: left;
894892
line-height: 1.4;
895893
font-style: italic;
@@ -1033,7 +1031,7 @@ li p {
10331031
background-color: #222A30;
10341032
color: #f2ead9;
10351033
font-family: 'FiraCodeLight', monospace;
1036-
font-size: 12pt;
1034+
font-size: 1rem;
10371035
padding: 20px;
10381036
border: 1px solid #888f92;
10391037
border-radius: 0px 0px 10px 10px; /* Only bottom corners rounded */
@@ -1335,4 +1333,66 @@ mark {
13351333
.mech-table-cell .mech-paragraph {
13361334
margin: 0;
13371335
padding: 0;
1336+
}
1337+
1338+
@media (max-width: 1650px) {
1339+
.mech-program-title {
1340+
width: 700px;
1341+
margin-left: 0px;
1342+
}
1343+
.mech-program h2 {
1344+
width: 700px;
1345+
margin-left: -10px;
1346+
}
1347+
.mech-program h3 {
1348+
margin-left: 0px;
1349+
}
1350+
}
1351+
1352+
@media (max-width: 1200px) {
1353+
#mech-output {
1354+
display: none;
1355+
}
1356+
}
1357+
1358+
@media (max-width: 1100px) {
1359+
.mech-toc {
1360+
display: none;
1361+
}
1362+
}
1363+
1364+
@media (max-width: 750px) {
1365+
.mech-content {
1366+
max-width: 100%;
1367+
min-width: 300px;
1368+
margin: 10px;
1369+
}
1370+
1371+
.mech-program {
1372+
max-width: 100%;
1373+
min-width: 0px;
1374+
}
1375+
1376+
.mech-program-title {
1377+
width: 100%;
1378+
margin-left: 0px;
1379+
}
1380+
.mech-program h2 {
1381+
width: 100%;
1382+
margin-left: 0px;
1383+
}
1384+
.mech-program h3 {
1385+
margin-left: 0px;
1386+
}
1387+
1388+
.mech-program-section {
1389+
padding-left: 0px;
1390+
padding-right: 0px;
1391+
}
1392+
1393+
.mech-table {
1394+
max-width: 100%;
1395+
overflow-x: auto;
1396+
}
1397+
13381398
}

‎src/syntax/src/formatter.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ impl Formatter {
105105
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"
106106
onload="renderMathInElement(document.body);"></script>
107107
108-
108+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
109109
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
110110
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
111111
<style>
@@ -478,7 +478,7 @@ window.addEventListener("scroll", () => {{
478478
let body = self.body(&node.body);
479479
let formatted_works_cited = self.works_cited();
480480
if self.html {
481-
format!("<div class=\"mech-program\">{}{}{}</div>",title,body,formatted_works_cited)
481+
format!("<div class=\"mech-content\"><div class=\"mech-program\">{}{}{}</div></div>",title,body,formatted_works_cited)
482482
} else {
483483
format!("{}{}{}",title,body,formatted_works_cited)
484484
}

0 commit comments

Comments
 (0)