Skip to content

Commit 77884a3

Browse files
hydrobeamhydrobeam
authored
feat(org-wasm): site improvements (#9)
* feat(org-wasm): site improvements - github icon topright - remove text blurb below editor - use height:100vh to have editor fill screen - + overflow-hidden on parent to make it not expand - formatting - minor padding changes * drop minimizer, causing problems
1 parent 7ef248e commit 77884a3

File tree

5 files changed

+137
-265
lines changed

5 files changed

+137
-265
lines changed

‎crates/org-wasm/index.html‎

Lines changed: 52 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,66 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
4-
<head>
3+
<head>
54
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<meta name="description" content="A parser & document exporter for Org-Mode. Written in Rust.">
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta
7+
name="description"
8+
content="A parser & document exporter for Org-Mode. Written in Rust."
9+
/>
810
<title>Org-rust</title>
911
<link rel="stylesheet" href="main.css" type="text/css" />
10-
</head>
12+
</head>
1113

12-
<body>
13-
<header>
14-
<div class="dummy-element"></div>
15-
<h2>Org-Rust Live Editor</h2>
16-
<div id="vimbutton">
14+
<body>
15+
<div style="display: flex; flex-direction: column; height: 100vh">
16+
<header>
17+
<div style="display: flex; align-items: center; gap: 8px">
18+
<h2>Org-Rust Live Editor</h2>
19+
<div id="vimbutton">
1720
<input type="checkbox" name="vim" id="vim" />
1821
<label for="vim">Vim Mode</label>
22+
</div>
1923
</div>
20-
</header>
21-
<div id="editor-view">
24+
<!-- github icon -->
25+
<a href="https://github.com/hydrobeam/org-rust">
26+
<svg
27+
xmlns="http://www.w3.org/2000/svg"
28+
width="34"
29+
height="34"
30+
viewBox="0 0 512 512"
31+
>
32+
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
33+
<path
34+
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
35+
/>
36+
</svg>
37+
</a>
38+
</header>
39+
<div id="editor-view">
2240
<div class="input-area">
23-
<div class="tab">
24-
<button class="contentlinks" value="default">Default</button>
25-
<button class="contentlinks" value="showcase">Showcase</button>
26-
<button class="contentlinks" value="footnotes">Footnotes</button>
27-
<button class="contentlinks" value="affiliated">Affiliated Keywords</button>
28-
<button class="contentlinks" value="images">Images</button>
29-
</div>
30-
<div id="textbox"></div>
41+
<div class="tab">
42+
<button class="contentlinks" value="default">Default</button>
43+
<button class="contentlinks" value="showcase">Showcase</button>
44+
<button class="contentlinks" value="footnotes">Footnotes</button>
45+
<button class="contentlinks" value="affiliated">
46+
Affiliated Keywords
47+
</button>
48+
<button class="contentlinks" value="images">Images</button>
49+
</div>
50+
<div id="textbox"></div>
3151
</div>
3252
<div class="view">
33-
<div class="tab">
34-
<button class="tablinks" id="org-parse">Org</button>
35-
<button class="tablinks" id="rendered-parse">Rendered HTML</button>
36-
<button class="tablinks" id="raw-parse">Raw HTML</button>
37-
</div>
38-
39-
<iframe src="iframe.html" id="rendered" class="tabcontent"></iframe>
40-
<pre id="org" class="tabcontent"></pre>
41-
<pre id="raw" class="tabcontent"></pre>
53+
<div class="tab">
54+
<button class="tablinks" id="org-parse">Org</button>
55+
<button class="tablinks" id="rendered-parse">Rendered HTML</button>
56+
<button class="tablinks" id="raw-parse">Raw HTML</button>
57+
</div>
58+
<iframe src="iframe.html" id="rendered" class="tabcontent"></iframe>
59+
<pre id="org" class="tabcontent"></pre>
60+
<pre id="raw" class="tabcontent"></pre>
4261
</div>
62+
</div>
63+
<script type="module" src="main.js"></script>
4364
</div>
44-
<p>
45-
Progress is documented at the <a href="https://github.com/hydrobeam/org-rust">
46-
<code>Org-Rust</code></a> repository.
47-
</p>
48-
49-
<script type="module" src="main.js"></script>
50-
</body>
51-
65+
</body>
5266
</html>

‎crates/org-wasm/main.css‎

Lines changed: 85 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,153 @@
11
:root {
2-
--gutter-colour: #cce1cf;
3-
--tab-hover: #bfd9c3;
4-
--tab-active: #a5caab;
5-
--line-hover: #f2f7f354;
6-
--line-selection: #f0ebbc64;
2+
--gutter-colour: #cce1cf;
3+
--tab-hover: #bfd9c3;
4+
--tab-active: #a5caab;
5+
--line-hover: #f2f7f354;
6+
--line-selection: #f0ebbc64;
77
}
88

99
button {
10-
font-family: monospace;
10+
font-family: monospace;
1111
}
1212

1313
.tab button {
14-
background-color: inherit;
15-
float: left;
16-
border: none;
17-
outline: none;
18-
cursor: pointer;
19-
padding: 6px 6px;
20-
transition: 0.3s;
21-
white-space: nowrap;
22-
flex: 1;
14+
background-color: inherit;
15+
float: left;
16+
border: none;
17+
outline: none;
18+
cursor: pointer;
19+
padding: 6px 6px;
20+
transition: 0.3s;
21+
white-space: nowrap;
22+
flex: 1;
2323
}
2424

2525
/* Change background color of buttons on hover */
2626
.tab button:hover {
27-
background-color: var(--tab-hover);
27+
background-color: var(--tab-hover);
2828
}
2929

3030
/* Create an active/current tablink class */
3131
.tab button.active {
32-
background-color: var(--tab-active);
32+
background-color: var(--tab-active);
3333
}
3434

3535
/* style non-rendered html */
3636
pre.tabcontent {
37-
background-color: #faf1f1;
38-
white-space: pre-wrap;
39-
font-size: 1rem;
37+
background-color: #faf1f1;
38+
white-space: pre-wrap;
39+
font-size: 1rem;
4040
}
4141

4242
iframe {
43-
padding: 0 !important;
43+
padding: 0 !important;
4444
}
4545

4646
.tab {
47-
display: flex;
48-
flex-wrap: wrap;
49-
max-height: min-content;
50-
overflow: hidden;
51-
border: 1px solid #ccc;
52-
background-color: var(--gutter-colour);
47+
display: flex;
48+
flex-wrap: wrap;
49+
max-height: min-content;
50+
overflow: hidden;
51+
border: 1px solid #ccc;
52+
background-color: var(--gutter-colour);
5353
}
5454

5555
.tabcontent {
56-
flex: 1;
57-
display: none;
58-
padding: 6px 12px;
59-
border-top: none;
60-
overflow: scroll;
61-
border: 1px solid #ccc;
56+
flex: 1;
57+
display: none;
58+
padding: 6px 12px;
59+
border-top: none;
60+
overflow: scroll;
61+
border: 1px solid #ccc;
6262
}
6363

6464
.view {
65-
grid-area: view;
66-
padding: 0;
67-
display: flex;
68-
flex-direction: column;
69-
overflow: scroll;
65+
grid-area: view;
66+
padding: 0;
67+
display: flex;
68+
flex-direction: column;
69+
overflow: scroll;
7070
}
7171

7272
.view * {
73-
margin: 0;
73+
margin: 0;
7474
}
7575

7676
.input-area {
77-
grid-area: input;
78-
display: flex;
79-
flex-direction: column;
80-
overflow: scroll;
77+
grid-area: input;
78+
display: flex;
79+
flex-direction: column;
80+
overflow: scroll;
8181
}
8282

8383
#textbox {
84-
flex: 1;
85-
display: flex;
86-
overflow: auto;
84+
flex: 1;
85+
display: flex;
86+
overflow: auto;
8787
}
8888

8989
.cm-editor {
90-
flex-grow: 1;
91-
font-size: 1rem;
90+
flex-grow: 1;
91+
font-size: 1rem;
9292
}
9393

9494
#editor-view {
95-
height: 94svh;
96-
display: grid;
97-
grid-template-columns: 50% 50%;
98-
grid-template-areas: "input view";
99-
border: solid 1px grey;
95+
height: 100%;
96+
display: grid;
97+
grid-template-columns: 50% 50%;
98+
grid-template-areas: "input view";
99+
border: solid 1px grey;
100+
overflow: hidden; /* make it so that the view area doesn't expand when content is placed within it */
100101
}
101102

102103
body {
103-
margin: 0;
104-
line-height: 1.4;
105-
font-size: 1.25em;
106-
background-color: rgb(250, 250, 250);
104+
margin: 0;
105+
line-height: 1.4;
106+
font-size: 1.25em;
107+
background-color: rgb(250, 250, 250);
107108
}
108109

109110
header p {
110-
margin: 0;
111-
background-image: none;
112-
font-weight: normal;
113-
color: #7e8170;
111+
margin: 0;
112+
background-image: none;
113+
font-weight: normal;
114+
color: #7e8170;
114115
}
115116

116117
header {
117118
display: flex;
118-
gap: 10px;
119-
justify-content: flex-start;
120-
align-items: baseline;
119+
justify-content: space-between;
120+
align-items: center;
121121
flex-direction: row;
122122
margin: 0;
123+
padding: 0.15em 0.05em;
123124
}
124125

125126
h1,
126127
h2,
127128
h3,
128129
header {
129-
font-weight: 600;
130-
background-image: linear-gradient(to bottom right, #13223f, #139323);
131-
color: transparent;
132-
background-clip: text;
133-
-webkit-background-clip: text;
134-
margin: 0;
135-
margin-bottom: 0.25em;
130+
font-weight: 600;
131+
background-image: linear-gradient(to bottom right, #13223f, #139323);
132+
color: transparent;
133+
background-clip: text;
134+
-webkit-background-clip: text;
135+
margin: 0;
136136
}
137137

138138
@media (max-width: 850px) {
139-
#editor-view {
140-
grid-template-columns: 100%;
141-
grid-template-areas:
142-
"input"
143-
"view";
144-
grid-template-rows: 50% 50%;
145-
}
146-
147-
header {
148-
height: auto;
149-
}
150-
body {
151-
font-size: 1.125em;
152-
}
139+
#editor-view {
140+
grid-template-columns: 100%;
141+
grid-template-areas:
142+
"input"
143+
"view";
144+
grid-template-rows: 50% 50%;
145+
}
146+
147+
header {
148+
height: auto;
149+
}
150+
body {
151+
font-size: 1.125em;
152+
}
153153
}

0 commit comments

Comments
 (0)