Skip to content

Commit 1a7dfd5

Browse files
robin-rprrobin-rpr
committed
Improve UI design
1 parent 80385d8 commit 1a7dfd5

9 files changed

Lines changed: 74 additions & 209 deletions

File tree

‎static/images/websocket.svg‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎static/styles/layout/_header.scss‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -52,32 +52,11 @@
5252

5353
&:hover {
5454
background: #e0e0e0;
55-
56-
.button__indicator {
57-
outline-color: #e0e0e0 !important;
58-
}
5955
}
6056

6157
&:active {
6258
color: inherit;
6359
}
64-
65-
.button__indicator {
66-
position: absolute;
67-
top: 1.125rem;
68-
outline: 4px solid white;
69-
right: 1.125rem;
70-
background: #b13544;
71-
color: #fff;
72-
font-size: 0.625rem;
73-
font-weight: 400;
74-
line-height: 1rem;
75-
letter-spacing: 0;
76-
height: 7px;
77-
width: 7px;
78-
border-radius: 50%;
79-
transition: outline-color 110ms;
80-
}
8160
}
8261
}
8362
}

‎static/styles/layout/_navigation.scss‎

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
max-width: 99rem;
1212
margin-left: auto;
1313
margin-right: auto;
14-
padding: 0 21px;
14+
padding-left: 21px;
15+
padding-right: 39px;
1516
height: 100%;
1617
display: flex;
1718
align-items: center;
@@ -79,8 +80,8 @@
7980
}
8081

8182
img {
82-
width: 1.125rem;
83-
height: 1.125rem;
83+
width: 1.25rem;
84+
height: 1.25rem;
8485
}
8586
}
8687

@@ -130,38 +131,14 @@
130131
.container__actions {
131132
display: flex;
132133
align-items: center;
133-
justify-content: center;
134-
height: 100%;
135134
position: relative;
136-
gap: 1rem;
135+
height: 100%;
137136

138137
.actions__button {
139-
&:before {
140-
content: "";
141-
display: block;
142-
position: absolute;
143-
top: -1px;
144-
left: 0;
145-
width: 100%;
146-
height: 1px;
147-
background: #204ff5;
148-
}
149-
150-
&:after {
151-
content: "";
152-
display: block;
153-
position: absolute;
154-
bottom: -1px;
155-
left: 0;
156-
width: 100%;
157-
height: 1px;
158-
background: #204ff5;
159-
}
160-
161-
color: #fff;
162138
height: 100%;
163-
background: #204ff5;
164-
padding: 11px 63px 11px 15px;
139+
color: inherit;
140+
transition: background 110ms;
141+
padding: 11px 18px;
165142
text-decoration: none;
166143
line-height: 2rem;
167144
font-size: 1rem;
@@ -179,6 +156,39 @@
179156
outline: none;
180157
position: relative;
181158
margin: 0;
159+
160+
&:hover:not(&--primary) {
161+
background: #e5e5e5;
162+
}
163+
164+
&--primary {
165+
color: #fff;
166+
height: 100%;
167+
background: #204ff5;
168+
padding: 11px 63px 11px 15px;
169+
170+
&:before {
171+
content: "";
172+
display: block;
173+
position: absolute;
174+
top: -1px;
175+
left: 0;
176+
width: 100%;
177+
height: 1px;
178+
background: #204ff5;
179+
}
180+
181+
&:after {
182+
content: "";
183+
display: block;
184+
position: absolute;
185+
bottom: -1px;
186+
left: 0;
187+
width: 100%;
188+
height: 1px;
189+
background: #204ff5;
190+
}
191+
}
182192
}
183193
}
184194
}

‎static/styles/pages/_asn.scss‎

Lines changed: 11 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
.wrapper__container {
1010
display: flex;
1111
width: 100%;
12-
padding: 1.75rem 0;
12+
padding: 2.5rem 0;
1313
background: #ffffff;
1414
row-gap: 1.25rem;
1515
flex-direction: column;
@@ -61,89 +61,9 @@
6161
}
6262
}
6363

64-
.asn__tabs {
65-
.tabs__wrapper {
66-
margin-right: auto;
67-
margin-left: auto;
68-
max-width: 100%;
69-
border-bottom: 1px solid #e0e0e0;
70-
71-
.wrapper__container {
72-
display: flex;
73-
flex-wrap: wrap;
74-
max-width: 99rem;
75-
height: 3.125rem;
76-
margin-right: auto;
77-
margin-left: auto;
78-
padding: 0 2.5rem;
79-
80-
.container__tabs {
81-
display: flex;
82-
flex-direction: row;
83-
align-items: center;
84-
position: relative;
85-
margin-bottom: -1px;
86-
87-
.tab__item {
88-
padding: 0 1.5rem;
89-
height: 100%;
90-
display: flex;
91-
min-width: 12.5rem;
92-
background: #e0e0e0;
93-
border-left: 1px solid #afafaf;
94-
position: relative;
95-
font-weight: 350;
96-
cursor: pointer;
97-
text-align: left;
98-
align-items: center;
99-
100-
&:first-child:before {
101-
width: calc(100% + 1px);
102-
left: -1px;
103-
}
104-
105-
&:last-child:before {
106-
width: calc(100% + 1px);
107-
}
108-
109-
&:before {
110-
content: '';
111-
display: block;
112-
height: 2.5px;
113-
width: 100%;
114-
background: transparent;
115-
position: absolute;
116-
top: 0;
117-
left: 0;
118-
}
119-
120-
&:first-child:not(.tab__item--active) {
121-
border-left-color: transparent !important;
122-
}
123-
124-
&:last-child:is(.tab__item--active) {
125-
border-right: 1px solid #e0e0e0;
126-
}
127-
128-
&--active {
129-
background: #ffffff;
130-
border-left: 1px solid #e0e0e0;
131-
132-
&:before {
133-
background: #204ff5;
134-
}
135-
136-
& + .tab__item {
137-
border-left-color: transparent !important;
138-
}
139-
}
140-
}
141-
}
142-
}
143-
}
144-
}
145-
14664
.asn__content {
65+
border-top: 1px solid #e0e0e0;
66+
14767
.content__wrapper {
14868
margin-right: auto;
14969
margin-left: auto;
@@ -157,11 +77,10 @@
15777
margin-left: auto;
15878

15979
.container__content {
80+
width: 100%;
16081
display: flex;
16182
flex-direction: column;
162-
width: 100%;
163-
padding: 2.25rem 2.5rem;
164-
row-gap: 1rem;
83+
padding: 2.5rem;
16584

16685
.content__panel {
16786
.panel__header {
@@ -171,7 +90,7 @@
17190
align-items: center;
17291
column-gap: 1rem;
17392
height: 3.125rem;
174-
margin-bottom: 2.25rem;
93+
margin-bottom: 2.5rem;
17594

17695
.header__description {
17796
font-size: 1rem;
@@ -186,7 +105,7 @@
186105
display: flex;
187106
flex-direction: row;
188107
align-items: center;
189-
column-gap: 1.5rem;
108+
column-gap: 2.5rem;
190109
}
191110
}
192111

@@ -195,7 +114,7 @@
195114
display: flex;
196115
flex-direction: row;
197116
flex-wrap: nowrap;
198-
margin-bottom: 1.5rem;
117+
margin-bottom: 2.5rem;
199118

200119
.metrics__card {
201120
display: flex;
@@ -240,8 +159,8 @@
240159
display: grid;
241160
grid-template-columns: repeat(16, 1fr);
242161
grid-auto-rows: minmax(200px, auto);
243-
margin-bottom: 1.5rem;
244-
gap: 1.5rem;
162+
margin-bottom: 2.5rem;
163+
gap: 2.5rem;
245164

246165
.charts__item {
247166
display: flex;
@@ -328,7 +247,7 @@
328247
display: grid;
329248
grid-template-columns: repeat(16, 1fr);
330249
grid-auto-rows: auto;
331-
gap: 1.5rem;
250+
gap: 2.5rem;
332251

333252
.tables__item {
334253
@for $i from 1 through 16 {

‎static/styles/pages/_index.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
.container__search {
3636
height: 4rem;
37-
margin-bottom: 5rem;
37+
margin-bottom: 5.5rem;
3838
display: block;
3939
flex: 0 0 83.33333%;
4040
max-width: 83.33333%;
@@ -140,7 +140,7 @@
140140

141141
.item__title {
142142
font-size: 1.125rem;
143-
font-weight: 600;
143+
font-weight: 500;
144144
line-height: 1.75rem;
145145
letter-spacing: 0;
146146
margin-bottom: 0.5rem;
@@ -158,7 +158,7 @@
158158
}
159159

160160
i {
161-
font-size: 1.125rem;
161+
font-size: 1.25rem;
162162
color: #204ff5;
163163
}
164164
}

‎templates/layout/header.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,6 @@
1111
</a>
1212
</div>
1313

14-
<!-- Search -->
15-
{% if request.path.startswith('/as') %}
16-
{% include "components/searchbar.html" %}
17-
{% endif %}
18-
1914
<!-- Actions -->
2015
<div class="container__actions">
2116
<!-- Actions Buttons -->

‎templates/layout/navigation.html‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,42 @@
66
<a class="item__link" href="/" aria-label="Home">Home</a>
77
</li>
88
<li class="list__item">
9-
<a class="item__link" href="/top" aria-label="Top Prefixes">Top Prefixes</a>
9+
<a class="item__link" href="/ai" aria-label="AI">AI</a>
1010
</li>
1111
<li class="list__item">
12-
<a class="item__link" href="#" aria-label="Collectors">
13-
<span>Collectors</span>
12+
<a class="item__link" href="#" aria-label="Products">
13+
<span>Products</span>
1414
<i class="fa-sharp fa-light fa-angle-down"></i>
1515
</a>
1616
<ul class="item__dropdown">
1717
<!-- Dropdown items -->
1818
<li class="dropdown__item">
19-
<a class="item__link" href="/ris" aria-label="RIS">RIS</a>
19+
<a class="item__link" href="/telescope" aria-label="Telescope">Telescope</a>
2020
</li>
2121
<li class="dropdown__item">
22-
<a class="item__link" href="/routeviews" aria-label="RouteViews">RouteViews</a>
22+
<a class="item__link" href="/whois" aria-label="Whois">Whois</a>
23+
</li>
24+
<li class="dropdown__item">
25+
<a class="item__link" href="/ai" aria-label="AI">AI</a>
2326
</li>
2427
</ul>
2528
</li>
2629
<li class="list__item">
27-
<a class="item__link" href="/looking-glass" aria-label="Looking Glass">Looking Glass</a>
30+
<a class="item__link" href="/pricing" aria-label="Pricing">Pricing</a>
2831
</li>
2932
<li class="list__item">
30-
<a class="item__link" href="/whois" aria-label="Whois">Whois</a>
33+
<a class="item__link" href="/blog" aria-label="Blog">Blog</a>
3134
</li>
3235
<li class="list__item">
3336
<a class="item__link" href="/support" aria-label="Support">
3437
Support
3538
<img src="{{ url_for('static', filename='images/link.svg') }}">
3639
</a>
3740
</li>
38-
<li class="list__item">
39-
<a class="item__link" href="/api" aria-label="API">API</a>
40-
</li>
4141
</ul>
4242
<section class="container__actions">
43-
<a class="actions__button" href="/peer" aria-label="Peer with us">Peer with us</a>
43+
<a class="actions__button" href="/demo" aria-label="Demo">Book a demo</a>
44+
<a class="actions__button actions__button--primary" href="/sign-up" aria-label="Get started">Get started</a>
4445
</section>
4546
</div>
4647
</nav>

0 commit comments

Comments
 (0)