Skip to content

Commit fa97513

Browse files
Morten von WerderMorten von Werder
Morten von Werder
authored and
Morten von Werder
committed
Redesign the website navbar to match the manual
1 parent 7e3b183 commit fa97513

File tree

2 files changed

+164
-75
lines changed

2 files changed

+164
-75
lines changed

‎static/style.css‎

Lines changed: 117 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,128 @@
66
}
77

88
html {
9-
font-family: var(--bs-body-font-family);
9+
font-family: var(--bs-body-font-family);
10+
height: 100%;
11+
display: block;
12+
font-size: 17px;
13+
}
14+
body {
15+
display:block;
16+
margin:0;
17+
font-size: 1rem;
18+
font-weight: 400;
19+
line-height: 1.5;
1020
}
11-
a { text-decoration: none; }
12-
a:hover { text-decoration: underline; }
13-
h1 > a {
14-
color: var(--font-color);
15-
font-size: x-large;
21+
nav {
22+
padding-left: 1em;
23+
padding-right: 1em;
24+
background-color: rgb(248, 249, 250);
25+
color: rgb(84, 85, 85);
26+
display: flex;
27+
align-items: center;
28+
padding-top: 0.5rem;
29+
padding-bottom: 0.5rem;
1630
}
17-
h1, h2, h3, h4 { color: var(--font-color); }
18-
header > h1, header > nav {
19-
display: inline-block;
31+
nav > div {
32+
display:flex;
33+
flex-wrap:inherit;
34+
align-items:center;
35+
justify-content: space-between;
36+
width:100%;
37+
padding-right: 0.75rem;
38+
padding-left: 0.75rem;
39+
margin-right: auto;
40+
margin-left:auto;
2041
}
21-
header > nav > ul > li > a {
22-
margin: 0 1rem;
23-
font-size: x-large;
24-
font-weight: bold;
25-
color: var(--font-color);
42+
.nav-brand {
43+
margin-left: 0px !important;
44+
margin-right: 0px !important;
45+
max-width; calc(100% - 115px);
46+
min-width: 0px;
47+
display: flex;
48+
align-items: center;
49+
text-align:start;
2650
}
27-
p {
28-
margin-block-start: 0em;
29-
font-size: large;
51+
.nav-logo {
52+
margin-right: 4px;
53+
display: inline-flex;
54+
color: rgb(15, 42, 85);
55+
overflow:hidden;
56+
text-overflow: ellipsis;
57+
padding-top: 0.3125rem;
58+
padding-bottom: 0.3125rem;
59+
font-size: 1.25rem;
60+
text-decoration: none;
61+
white-space: nowrap;
62+
text-underline-offset: 3px;
3063
}
31-
nav > ul > li {
32-
font-size: 1.8em;
33-
display: inline;
64+
a > img {
65+
max-height: 24px;
66+
width: auto;
67+
padding-right: 4px;
3468
}
35-
nav > ul > li > a.selected, nav > ul > li > a:hover {
36-
border-bottom: 4px solid #6f777d;
37-
text-decoration: none;
69+
.nav-title {
70+
font-size: 1.25rem;
71+
color: rgb(15, 42, 85);
72+
overflow: hidden;
73+
text-overflow: ellipsis;
74+
padding-top: 0.3125rem;
75+
padding-bottom: 0.3125rem;;
76+
margin-right: 1rem;
77+
text-decoration: none;
78+
white-space: nowrap;
79+
text-underline-offset: 3px;
3880
}
39-
header {
40-
border-bottom: .1rem solid #E1E1E3;
81+
.nav-list {
82+
display: flex !important;
83+
flex-basis: auto;
84+
flex-grow: 1;
85+
align-items: center;
4186
}
87+
.nav-list > ul {
88+
overflow: visible;
89+
flex-direction: row;
90+
margin-right: auto !important;
91+
max-height: 75vh;
92+
display: flex;
93+
padding-left: 0px;
94+
margin-bottom: 0px;
95+
list-style: none;
96+
margin-top: 0px;
97+
}
98+
.nav-list > ul > li {
99+
padding-top: 1px;
100+
list-style: none;
101+
}
102+
.nav-list > ul > li > a {
103+
padding-left: 0.6rem;
104+
padding-right: 0.6rem;
105+
color: rgb(15, 42, 85);
106+
display: block;
107+
padding-top: 0.5rem;
108+
padding-bottom: 0.5rem;
109+
text-decoration: none;
110+
background: none;
111+
border: 0px;
112+
text-underline-offset: 3px;
113+
}
114+
main {
115+
padding: 0 1em 0 1em;
116+
}
117+
118+
a {
119+
text-decoration: none;
120+
text-underline-offset: 3px;
121+
}
122+
a:hover {
123+
text-decoration: underline;
124+
color: var(--font-color);
125+
}
126+
h1, h2, h3, h4 { color: var(--font-color); }
127+
p {
128+
margin-block-start: 0em;
129+
}
130+
42131
main {
43132
margin-top: 0.5rem;
44133

@@ -52,9 +141,12 @@ main {
52141

53142
footer {
54143
margin-top: 2em;
144+
margin-left: 1em;
145+
margin-right: 1em;
55146
padding-top: 1.5em;
56147
padding-left: 1em;
57148
padding-right: 1em;
149+
padding-bottom: 1em;
58150
border-top: .1rem solid #E1E1E3;
59151
color: var(--font-color);
60152
}

‎templates/base.html‎

Lines changed: 47 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -18,57 +18,54 @@
1818
<meta name="msapplication-TileImage" content="{{url_for('static',filename='nfdi4objects-logo.png')}}" />
1919
<title>N4O Graph: {{title}}</title>
2020
</head>
21-
<body>
21+
<body>
2222
<header>
23-
<h1>
24-
<a href="https://www.nfdi4objects.net/"><img src="{{url_for('static',filename='nfdi4objects-logo.png')}}" style="height: 1em;"></a>
25-
<a href="{{url_for('index')}}"><span style="font-weight:normal;">NFDI4</span>Objects Knowledge Graph</a>
26-
</h1>
27-
<nav>
28-
<ul>
29-
<li class="nav-item">
30-
{% if request.path.startswith("/sparql") %}
31-
<a class="nav-link selected" href="{{url_for('sparql_form')}}">SPARQL</a>
32-
{% else %}
33-
<a class="nav-link" href="{{url_for('sparql_form')}}">SPARQL</a>
34-
{% endif %}
35-
</li>
36-
<li class="nav-item">
37-
{% if request.path.startswith("/collection") %}
38-
<a class="nav-link selected" href="{{url_for('collection')}}">Collections</a>
39-
{% else %}
40-
<a class="nav-link" href="{{url_for('collection')}}">Collections</a>
41-
{% endif %}
42-
</li>
43-
<li class="nav-item">
44-
{% if request.path.startswith("/repository") %}
45-
<a class="nav-link selected" href="{{url_for('repository')}}">Repositories</a>
46-
{% else %}
47-
<a class="nav-link" href="{{url_for('repository')}}">Repositories</a>
48-
{% endif %}
49-
</li>
50-
<li class="nav-item">
51-
{% if request.path.startswith("/terminology") %}
52-
<a class="nav-link selected" href="{{url_for('terminology')}}">Terminologies</a>
53-
{% else %}
54-
<a class="nav-link" href="{{url_for('terminology')}}">Terminologies</a>
55-
{% endif %}
56-
</li>
57-
{% if config.tools %}
58-
<li class="nav-item">
59-
{% if request.path.startswith("/tools") %}
60-
<a class="nav-link selected" href="{{url_for('tools')}}">Tools</a>
61-
{% else %}
62-
<a class="nav-link" href="{{url_for('tools')}}">Tools</a>
63-
{% endif %}
64-
</li>
65-
{% endif %}
66-
<li class="nav-item">
67-
<a class="nav-link" href="https://nfdi4objects.github.io/n4o-graph/">Manual</a>
68-
</li>
69-
</ul>
70-
</nav>
71-
</header>
23+
<nav>
24+
<div>
25+
<div class="nav-brand">
26+
<a href="https://www.nfdi4objects.net/" class="nav-logo"><img src="{{url_for('static',filename='nfdi4objects-logo.png')}}"></a>
27+
<a href="{{url_for('index')}}" class="nav-title"><span>NFDI4<strong>Objects Knowledge Graph</strong></span></a>
28+
</div>
29+
<div class= "nav-list">
30+
<ul>
31+
<li>
32+
{% if request.path.startswith("/sparql") %}
33+
<a href="{{url_for('sparql_form')}}"><span><strong>SPARQL</strong></span></a>
34+
{% else %}
35+
<a href="{{url_for('sparql_form')}}"><span>SPARQL</span></a>
36+
{% endif %}
37+
</li>
38+
<li>
39+
{% if request.path.startswith("/collection") %}
40+
<a href="{{url_for('collection')}}"><span><strong>Collections</strong></span></a>
41+
{% else %}
42+
<a href="{{url_for('collection')}}"><span>Collections</span></a>
43+
{% endif %}
44+
</li>
45+
<li>
46+
{% if request.path.startswith("/terminology") %}
47+
<a href="{{url_for('terminology')}}"><span><strong>Terminologies</strong></span></a>
48+
{% else %}
49+
<a href="{{url_for('terminology')}}"><span>Terminologies</span></a>
50+
{% endif %}
51+
</li>
52+
{% if config.tools %}
53+
<li>
54+
{% if request.path.startswith("/tools") %}
55+
<a href="{{url_for('tools')}}"><span><strong>Tools</strong></span></a>
56+
{% else %}
57+
<a href="{{url_for('tools')}}"><span>Tools</span></a>
58+
{% endif %}
59+
</li>
60+
{% endif %}
61+
<li>
62+
<a href="https://nfdi4objects.github.io/n4o-graph/"><span>Manual</span></a>
63+
</li>
64+
</ul>
65+
</div>
66+
</div>
67+
</nav>
68+
</header>
7269
<main>
7370
{% block content %} {% endblock %}
7471
</main>

0 commit comments

Comments
 (0)