Skip to content

Commit 776bcd5

Browse files
platypiiplatypii
committed
Modern style
1 parent fbe5976 commit 776bcd5

File tree

4 files changed

+64
-74
lines changed

4 files changed

+64
-74
lines changed

‎hightable/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</head>
1010
<body>
1111
<nav class="sidebar">
12-
<a class="brand" href='https://hyparam.github.io/hyperparam-cli/apps/hightable-demo/'>
12+
<a class="brand" href='https://hyparam.github.io/demos/hightable/'>
1313
HighTable
1414
</a>
1515
</nav>

‎hightable/src/index.css‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
* {
22
box-sizing: border-box;
3-
}
4-
body {
5-
display: flex;
63
font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
74
margin: 0;
85
padding: 0;
96
}
7+
body {
8+
display: flex;
9+
}
1010

1111
/* sidebar */
1212
nav.sidebar {
1313
height: 100vh;
1414
width: 48px;
15-
background-image: linear-gradient(to bottom, #667, #585669);
16-
box-shadow: 0 0 4px rgba(10, 10, 10, 0.5);
15+
background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
16+
box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
1717
height: 100vh;
1818
}
1919

2020
/* brand logo */
2121
.brand {
22-
color: #fff;
23-
display: flex;
2422
align-items: center;
25-
filter: drop-shadow(0 0 2px #444);
23+
color: #111;
24+
display: flex;
25+
filter: drop-shadow(0 0 2px #666);
2626
font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
2727
font-size: 1.1em;
2828
font-weight: bold;
29-
text-orientation: mixed;
30-
opacity: 0.85;
29+
opacity: 0.9;
3130
padding: 10px 12px;
31+
text-decoration: none;
32+
text-orientation: mixed;
3233
user-select: none;
3334
writing-mode: vertical-rl;
34-
text-decoration: none;
3535
}
3636
.brand:hover {
37-
color: #fff;
38-
filter: drop-shadow(0 0 2px #333);
39-
opacity: 0.9;
37+
color: #111;
38+
filter: drop-shadow(0 0 2px #444);
39+
opacity: 1;
4040
text-decoration: none;
4141
}
4242
.brand::before {
@@ -54,10 +54,6 @@ nav.sidebar {
5454
flex: 1;
5555
}
5656

57-
.table-corner {
58-
background: url('https://hyperparam.app/assets/table/hightable.svg') #e4e4e6 no-repeat center 6px;
59-
}
60-
6157
.layout {
6258
display: flex;
6359
flex: 1;
@@ -99,4 +95,8 @@ nav.sidebar {
9995
margin: 1em;
10096
display: flex;
10197
gap: 0.5em;
102-
}
98+
}
99+
100+
.table-corner {
101+
background: url('https://hyperparam.app/assets/table/hightable.svg') #f9f4ff no-repeat center 6px;
102+
}

‎hyparquet/index.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@
1212
<meta name="viewport" content="width=device-width, initial-scale=1" />
1313
</head>
1414
<body>
15-
<nav>
16-
<a class="brand" href='https://hyparam.github.io/hyperparam-cli/apps/hyparquet-demo/'>
17-
hyparquet
18-
</a>
15+
<nav class="sidebar">
16+
<div>
17+
<a class="brand" href='https://hyparam.github.io/demos/hyparquet/'>
18+
hyparquet
19+
</a>
20+
</div>
1921
</nav>
2022
<main id="content">
2123
<div id="app"></div>

‎hyparquet/src/index.css‎

Lines changed: 38 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
* {
22
box-sizing: border-box;
3+
font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
34
margin: 0;
45
padding: 0;
56
}
67
body {
78
display: flex;
8-
font-family: 'Mulish', 'Helvetica Neue', Helvetica, Arial, sans-serif;
99
height: 100vh;
1010
width: 100vw;
1111
}
@@ -35,11 +35,12 @@ sub img {
3535
cursor: pointer;
3636
}
3737

38-
.error {
39-
color: #c11;
40-
font-family: monospace;
38+
.error-bar {
4139
white-space: pre-wrap;
4240
}
41+
.error-bar * {
42+
font-family: monospace;
43+
}
4344

4445
/* dropzone */
4546
.dropzone {
@@ -75,34 +76,40 @@ sub img {
7576
}
7677

7778
/* sidebar */
78-
nav {
79+
nav.sidebar {
7980
height: 100vh;
8081
width: 48px;
81-
background-image: linear-gradient(to bottom, #667, #585669);
82-
box-shadow: 0 0 4px rgba(10, 10, 10, 0.5);
8382
height: 100vh;
8483
}
84+
nav.sidebar > div {
85+
background-image: linear-gradient(to bottom, #f2f2f2, #e4e4e4);
86+
box-shadow: 0 0 6px rgba(10, 10, 10, 0.4);
87+
height: 100vh;
88+
position: absolute;
89+
width: 48px;
90+
z-index: 30;
91+
}
8592

8693
/* brand logo */
8794
.brand {
88-
color: #fff;
89-
display: flex;
9095
align-items: center;
91-
filter: drop-shadow(0 0 2px #444);
96+
color: #111;
97+
display: flex;
98+
filter: drop-shadow(0 0 2px #666);
9299
font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
93100
font-size: 1.1em;
94101
font-weight: bold;
95-
text-orientation: mixed;
96-
opacity: 0.85;
102+
opacity: 0.9;
97103
padding: 10px 12px;
104+
text-decoration: none;
105+
text-orientation: mixed;
98106
user-select: none;
99107
writing-mode: vertical-rl;
100-
text-decoration: none;
101108
}
102109
.brand:hover {
103-
color: #fff;
104-
filter: drop-shadow(0 0 2px #333);
105-
opacity: 0.9;
110+
color: #111;
111+
filter: drop-shadow(0 0 2px #444);
112+
opacity: 1;
106113
text-decoration: none;
107114
}
108115
.brand::before {
@@ -115,18 +122,13 @@ nav {
115122
}
116123

117124
/* content area */
118-
main,
119-
#content {
125+
main {
120126
display: flex;
121127
flex-direction: column;
122128
flex: 1;
123129
min-width: 0;
124130
}
125131

126-
#content {
127-
position: relative;
128-
}
129-
130132
#app {
131133
flex: 1;
132134
}
@@ -202,26 +204,24 @@ button.close-button:hover {
202204

203205
.top-header {
204206
align-items: center;
205-
background: linear-gradient(to right, #353540, #24202b);
206-
color: #dde4ea;
207+
border-bottom: 1px solid #ddd;
208+
background: #eee;
207209
display: flex;
210+
font-family: 'Courier New', Courier, monospace;
211+
font-size: 18px;
212+
font-weight: 600;
208213
height: 32px;
209214
justify-content: space-between;
210215
min-height: 32px;
211-
padding-left: 8px;
212-
}
213-
.top-header {
214-
color: #f0f8ff;
215-
font-family: 'Courier New', Courier, monospace;
216-
font-size: 18px;
216+
padding-left: 20px;
217+
text-decoration-thickness: 1px;
217218
text-overflow: ellipsis;
218219
white-space: nowrap;
219-
text-decoration-thickness: 1px;
220220
}
221221

222222
.view-header {
223223
align-items: center;
224-
background-color: #ccc;
224+
background-color: #f2f2f2;
225225
color: #444;
226226
display: flex;
227227
gap: 16px;
@@ -390,22 +390,6 @@ input[type="file"] {
390390
display: flex;
391391
}
392392

393-
394-
#filename {
395-
font-size: 10pt;
396-
margin-top: 20px;
397-
}
398-
.sidebar {
399-
word-break: break-all;
400-
}
401-
.sidebar a {
402-
color: #445;
403-
text-decoration: none;
404-
}
405-
.sidebar a:hover {
406-
text-decoration: underline;
407-
}
408-
409393
/* layout */
410394
.layout {
411395
margin: 10px;
@@ -448,5 +432,9 @@ input[type="file"] {
448432
}
449433

450434
.table-corner {
451-
background: url('https://hyperparam.app/assets/table/hyparquet.svg') #e4e4e6 no-repeat center 6px;
452-
}
435+
background: url('https://hyperparam.app/assets/table/hyparquet.svg') #f9f4ff no-repeat center 6px;
436+
}
437+
.table thead th:first-child {
438+
min-width: 0;
439+
width: 0;
440+
}

0 commit comments

Comments
 (0)