Skip to content

Commit b1d2222

Browse files
dpetuncomputable
dpet
authored and
uncomputable
committed
style update and fonts added
1 parent c36d492 commit b1d2222

File tree

6 files changed

+152
-28
lines changed

6 files changed

+152
-28
lines changed

Diff for: ‎index.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
46
<title>Simplicity Web IDE</title>
7+
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
<link rel="stylesheet" href="{{ site.baseurl }}/css/font-awesome/css/all.min.css">
510
<link data-trunk rel="sass" href="src/scss/style.scss" />
6-
<link data-trunk rel="sass" href="src/scss/helpers.scss" />
711
</head>
812
<body></body>
13+
914
</html>

Diff for: ‎src/components/app.rs

+17-12
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,14 @@ pub fn App() -> impl IntoView {
4242
<div class="container center">
4343
<h1>Simfony IDE</h1>
4444
<p class="text-grey">
45-
<a href="https://github.com/BlockstreamResearch/simfony">Simfony</a>
45+
<a href="https://github.com/BlockstreamResearch/simfony" target="blank">Simfony</a>
4646
" is a high-level language for writing Bitcoin smart contracts."
4747
</p>
4848
<p class="text-grey">
4949
"Simfony looks and feels like "
50-
<a href="https://www.rust-lang.org">Rust</a>
50+
<a href="https://www.rust-lang.org" target="blank">Rust</a>
5151
". Just how Rust compiles down to assembly language, Simfony compiles down to "
52-
<a href="https://github.com/BlockstreamResearch/simplicity">Simplicity</a>
52+
<a href="https://github.com/BlockstreamResearch/simplicity" target="blank">Simplicity</a>
5353
" bytecode. Developers write Simfony, full nodes execute Simplicity."
5454
</p>
5555
</div>
@@ -64,10 +64,10 @@ pub fn App() -> impl IntoView {
6464
</div>
6565

6666
<div class="program-input">
67-
<div class="flex program-input-header">
68-
<div>
69-
<h3>Program</h3>
70-
<p class="text-grey">Select a program, upload a json, or enter your own program below.</p>
67+
<div class="program-input-header">
68+
<div class="program-input-intro">
69+
<h2>Program</h2>
70+
<p>Select a program, upload a json, or enter your own program below.</p>
7171
</div>
7272
<SelectExampleProgram update_program_str=update_program_str set_name=set_name/>
7373
</div>
@@ -77,16 +77,21 @@ pub fn App() -> impl IntoView {
7777
on:input=move |event| update_program_str(event_target_value(&event))
7878
placeholder="Enter your program here"
7979
rows="15" cols="80"
80+
spellcheck="false"
8081
/>
8182

82-
<div>
83-
<button on:click=move |_| run_program()>
84-
"Run program"
85-
</button>
83+
<div class="flex program-input-footer">
84+
<ExampleProgramDescription name=name/>
85+
86+
<div class="run-button">
87+
<button on:click=move |_| run_program()>
88+
"Run program"
89+
</button>
90+
</div>
91+
8692
</div>
8793
</div>
8894

89-
<ExampleProgramDescription name=name/>
9095
<Analysis program=program/>
9196
<Merkle program=program/>
9297
</div>

Diff for: ‎src/components/examples.rs

+5-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ where
2323

2424
view! {
2525
<select
26+
class="example-program-select"
2627
on:input=move |event| select_example_program(event_target_value(&event))
2728
>
2829
<option value="" disabled selected>Example programs</option>
@@ -31,18 +32,19 @@ where
3132
.map(|name| view! { <option value={name}>{name}</option>})
3233
.collect::<Vec<_>>()
3334
}
35+
<i class="fa-solid fa-user"></i>
3436
</select>
3537
}
3638
}
3739

3840
#[component]
3941
pub fn ExampleProgramDescription(name: ReadSignal<Option<String>>) -> impl IntoView {
4042
view! {
41-
<div>
43+
<div class="program-details">
4244
{
4345
move || name.get().map(|n| view! {
44-
<h2>{name}</h2>
45-
<p>
46+
<h3 class="program-title">{name}</h3>
47+
<p class="program-description">
4648
{
4749
move || examples::get_description(n.as_str()).map(|d| d.to_string())
4850
}

Diff for: ‎src/components/merkle.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ use simplicity::dag::DagLike;
88
#[component]
99
pub fn Merkle(program: Signal<Result<Arc<Expression>, String>>) -> impl IntoView {
1010
view! {
11-
<div>
11+
<div class="merkle">
1212
{
1313
move || program.get().ok().map(|t| view! {
1414
<h2>Merkle tree</h2>

Diff for: ‎src/scss/helpers.scss

+13-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
.text-grey{
2-
color: #B5BDC2;
3-
1+
@font-face {
2+
font-family:"rigid-square";
3+
src:url("https://use.typekit.net/af/6727e5/00000000000000007735c42c/30/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/6727e5/00000000000000007735c42c/30/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/6727e5/00000000000000007735c42c/30/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n6&v=3") format("opentype");
4+
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
45
}
6+
7+
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
8+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
9+
10+
$text-grey: #b5bdc2;
11+
$text-white: #ffffff;
12+
$background-light: #1b1f24;
13+
$background-dark: #0d0f11;
14+
515
.center{
616
text-align: center;
717
}

Diff for: ‎src/scss/style.scss

+110-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
@import 'helpers.scss';
12

23
body {
3-
background-color: #0D0F11;
4-
color: white;
5-
font-family: sans-serif;
4+
background-color: $background-dark;;
5+
color: $text-white;
6+
font-family: 'inter', sans-serif;
67

78
}
9+
10+
h1, h2, h3, h4, h5, h6{
11+
font-family: 'rigid-square';
12+
}
13+
814
a {
915
color: #7973F4;
1016
}
@@ -13,27 +19,123 @@ p {
1319
line-height: 1.5;
1420
}
1521
.container{
16-
width: 1200px;
22+
width: 800px;
1723
max-width: 100%;
1824
margin: 50px auto;
1925
}
2026

2127
// program input box
2228
.program-input{
23-
background-color: #1b1f24;
29+
background-color: $background-light;
2430
padding: 10px;
2531

2632
&-header{
2733
margin-bottom: 10px;
34+
position: relative;
35+
36+
.program-input-intro {
37+
margin-right: 200px;
38+
}
39+
40+
h2 {
41+
margin: 6px 0;
42+
}
43+
44+
p{
45+
color: $text-grey;
46+
}
2847
}
2948

30-
h3 {
31-
margin: 6px 0;
49+
50+
&-footer {
51+
min-height: 50px;
52+
padding: 10px 5px 0px 5px;
53+
position: relative;
54+
55+
.program-details {
56+
margin-right: 200px;
57+
58+
.program-title {
59+
margin: 0 0 5px 0;
60+
}
61+
62+
.program-description {
63+
color: $text-grey;
64+
}
65+
}
66+
}
67+
68+
.run-button {
69+
position: absolute;
70+
bottom: 0;
71+
right: 0;
72+
73+
button {
74+
color: white;
75+
background-color: #363cff;
76+
width: 200px;
77+
padding: 15px;
78+
border: none;
79+
}
80+
}
81+
82+
.example-program-select {
83+
height: 40px;
84+
padding-left: 10px;
85+
color: $text-grey;
86+
background-color: $background-dark;
87+
width: 200px;
88+
border: 1px solid #363636;
89+
position: absolute;
90+
bottom: 0;
91+
right: 0;
92+
93+
-webkit-appearance: none;
94+
-moz-appearance: none;
95+
96+
&:focus-visible {
97+
outline: none;
98+
}
3299
}
33100

34101
&-field{
35102
width: 100%;
36-
background-color: #0d0f11;
103+
background-color: $background-dark;
37104
border: none;
105+
color: #55ccff;
106+
font-family: 'Roboto Mono';
107+
font-size: 12px;
108+
resize: none;
109+
110+
&:focus-visible {
111+
outline: none;
112+
}
113+
}
114+
}
115+
116+
// analysis
117+
.analysis {
118+
margin-top: 40px;
119+
padding: 10px;
120+
background-color: $background-light;
121+
122+
.analysis-title {
123+
margin: 0;
38124
}
39125
}
126+
127+
// merkle tree
128+
.merkle {
129+
margin-top: 40px;
130+
padding: 10px;
131+
background-color: $background-light;
132+
133+
h2 {
134+
margin: 6px 0;
135+
}
136+
137+
li {
138+
color: $text-grey;
139+
word-wrap: break-word;
140+
}
141+
}

0 commit comments

Comments
 (0)