Skip to content

Commit 3dd99ea

Browse files
kuraislekuraisle
authored
Merge pull request #2 from Health-Informatics-UoN/entrust-styling
Entrust styling
2 parents 89da99e + 1de9e08 commit 3dd99ea

9 files changed

Lines changed: 78 additions & 80 deletions

‎observablehq.config.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,19 @@ export default {
2727
// Some additional configuration options and their defaults:
2828
// theme: "default", // try "light", "dark", "slate", etc.
2929
// header: "", // what to show in the header (HTML)
30-
footer: "", // what to show in the footer (HTML)
30+
footer: `
31+
<div style="display:grid; grid-template-columns: 30% 30% 30%">
32+
<div>
33+
<img src="EOSC-ENTRUST LOGO_Horizontal.png" alt="EOSC-ENTRUST logo">
34+
</div>
35+
<div>
36+
<img src="Nottingham_Blue_single_colour_logo_SCREEN.png" alt="University of Nottingham logo">
37+
</div>
38+
<div>
39+
<img src="primary.svg" alt="Federated research logo">
40+
</div>
41+
</div>
42+
`, // what to show in the footer (HTML)
3143
// sidebar: true, // whether to show the sidebar
3244
// toc: true, // whether to show the table of contents
3345
// pager: true, // whether to show previous & next links in the footer

‎src/Categorisation.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
theme: air
3+
style: entrust-style.css
34
title: Categorisation of Analysis methods
45
---
56
# Categorising analysis types

‎src/EOSC-ENTRUST LOGO_Horizontal.png‎

19.3 KB
Loading

‎src/Nottingham_Blue_single_colour_logo_SCREEN.png‎

11 KB
Loading

‎src/analysis-breakdown.md‎

Lines changed: 1 addition & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
theme: [dashboard, air]
3+
style: entrust-style.css
34
title: Get analyses by requirements
45
toc: false
56
---
@@ -22,72 +23,6 @@ const statisticRelationships = FileAttachment("./data/statistic_relationships.cs
2223
const statbarns = FileAttachment("./data/statbarns.csv").csv();
2324
```
2425

25-
<!-- Old filter form
26-
```js
27-
const filters = view(Inputs.form({
28-
// Trust requirements
29-
trust_level: Inputs.select(
30-
["Any", "Aggregate data only", "Row-level data acceptable"],
31-
{
32-
label: "Trust level with aggregator",
33-
value: "Aggregate data only"
34-
}
35-
),
36-
37-
// Communication capabilities
38-
communication_rounds: Inputs.select(
39-
["Any", "One round only", "Multiple rounds OK"],
40-
{
41-
label: "Communication rounds",
42-
value: "One round only"
43-
}
44-
),
45-
46-
// Execution model
47-
branching_capable: Inputs.toggle(
48-
{
49-
label: "Capable of branching execution",
50-
value: false
51-
}
52-
),
53-
54-
// Persistent executors
55-
persistence_capable: Inputs.toggle(
56-
{
57-
label: "Capable of persistent execution",
58-
value: false
59-
}
60-
),
61-
62-
// Privacy methods
63-
privacy_methods: Inputs.checkbox(
64-
["Differential Privacy", "Homomorphic Encryption", "Secure MPC"],
65-
{
66-
label: "Privacy-preserving methods available",
67-
value: []
68-
}
69-
),
70-
71-
// Separability preference
72-
separability: Inputs.checkbox(
73-
["none", "fully", "iterative"],
74-
{
75-
label: "Acceptable decomposability",
76-
value: ["fully", "iterative"]
77-
}
78-
),
79-
80-
// Output type filter
81-
output_types: Inputs.checkbox(
82-
["scalar", "vector", "matrix", "table", "higher-order", "text", "graphic"],
83-
{
84-
label: "Required output types",
85-
value: ["scalar", "vector", "matrix", "table"]
86-
}
87-
)
88-
}));
89-
``` -->
90-
9126
```js
9227
const algo_filters = view(Inputs.form({
9328

‎src/components/display_statistic.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function htmlUnsafe(string) {
1818
function getSeparabilityColor(sep) {
1919
const colors = {
2020
"fully": "#10b981",
21-
"iterative": "#f59e0b",
21+
"iterative": "#EE7326",
2222
"none": "#ef4444"
2323
};
2424
return colors[sep] || "#6b7280";
@@ -84,7 +84,7 @@ export class Statistic {
8484
return html`
8585
<div style="
8686
background: #f9fafb;
87-
border-left: 3px solid #3b82f6;
87+
border-left: 3px solid #204f90;
8888
padding: 1rem;
8989
margin: 1rem 0;
9090
border-radius: 0.5rem;
@@ -99,7 +99,7 @@ export class Statistic {
9999
border-radius: 1rem;
100100
font-size: 0.875rem;
101101
color: #374151;
102-
${a.is_primary === "true" ? "font-weight: 600; border-color: #3b82f6; color: #3b82f6;" : ""}
102+
${a.is_primary === "true" ? "font-weight: 600; border-color: #204f90; color: #3b82f6;" : ""}
103103
">${a.alias_name}</span>
104104
`)}
105105
</div>
@@ -119,10 +119,10 @@ export class Statistic {
119119
margin: 1rem 0;
120120
">
121121
<div style="
122-
background: #fef3c7;
122+
background: #f2d6c2;
123123
padding: 0.75rem;
124124
border-radius: 0.5rem;
125-
border-left: 3px solid #f59e0b;
125+
border-left: 3px solid #EE7326;
126126
">
127127
<div style="font-size: 0.75rem; color: #92400e; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Output Type</div>
128128
<div style="font-size: 1rem; color: #78350f; font-weight: 500; margin-top: 0.25rem;">${this.output}</div>
@@ -136,10 +136,10 @@ export class Statistic {
136136
background: #e0e7ff;
137137
padding: 0.75rem;
138138
border-radius: 0.5rem;
139-
border-left: 3px solid #6366f1;
139+
border-left: 3px solid #204F90;
140140
">
141-
<div style="font-size: 0.75rem; color: #3730a3; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Algorithms</div>
142-
<div style="font-size: 1rem; color: #312e81; font-weight: 500; margin-top: 0.25rem;">${this.algorithms.length} available</div>
141+
<div style="font-size: 0.75rem; color: ##3f5f8c; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">Algorithms</div>
142+
<div style="font-size: 1rem; color: ##22344d; font-weight: 500; margin-top: 0.25rem;">${this.algorithms.length} available</div>
143143
</div>
144144
</div>
145145
`;
@@ -197,7 +197,7 @@ export class Statistic {
197197
<details style="margin-top: 1.5rem;">
198198
<summary style="
199199
cursor: pointer;
200-
color: #3b82f6;
200+
color: #204f90;
201201
font-weight: 600;
202202
font-size: 1.1rem;
203203
padding: 0.75rem;

‎src/entrust-style.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import url("observablehq:default.css");
2+
@import url("observablehq:theme-air.css");
3+
4+
:root {
5+
--theme-foreground-focus: #EE7326;
6+
--sans-serif: "Roboto", sans-serif;
7+
}
8+
9+
body, h1, h2, h3, h4, h5, h6 {
10+
font-family: var(--sans-serif);
11+
}
12+
13+
h1 {
14+
color: #EE7326;
15+
}
16+
17+
h2 {
18+
color: #204F90;
19+
}
20+
21+
h3 {
22+
color: #EE7326;
23+
}
24+
25+
h4, h5, h6 {
26+
color: grey;
27+
}

‎src/index.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
theme: air
33
toc: false
4+
style: entrust-style.css
45
---
56

67
<div class="hero">
@@ -32,10 +33,7 @@ First we justify how analyses are [categorised](Categorisation), then provide a
3233
font-size: 14vw;
3334
font-weight: 900;
3435
line-height: 1;
35-
background: linear-gradient(30deg, var(--theme-foreground-focus), currentColor);
36-
-webkit-background-clip: text;
37-
-webkit-text-fill-color: transparent;
38-
background-clip: text;
36+
color: #EE7326;
3937
}
4038

4139
.hero h2 {

0 commit comments

Comments
 (0)