Henrik/instant-workstation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Navigation Bar

Browse source
This commit is contained in:
Henrik Brüsecke 2026-08-21 18:25:07 +03:00
parent 69a80ac781
commit a4376b714f
9 changed files with 143 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/shell/css/brand.css Normal file
View file

@ -0,0 +1,17 @@
.brand-link {
align-items: center;
color: inherit;
display: flex;
gap: 15px;
height: 100%;
text-decoration: none;
}
.brand-logo {
height: 100%;
}
.brand-title {
font-size: 20px;
font-weight: 750;
}

19
frontend/shell/css/desktop.css Normal file
View file

@ -0,0 +1,19 @@
@media (min-width: 960px) {
.screen-narrow {
display: none;
}
.screen-wide {
display: inline;
}
}
@media (min-height: 540px) {
.header {
height: 60px;
}
.nav-link-account {
padding: 10px 15px;
}
}

22
frontend/shell/css/header.css Normal file
View file

@ -0,0 +1,22 @@
body {
font-family: system-ui;
margin: 0;
}
.header {
background-color: #202020;
box-sizing: border-box;
color: white;
display: flex;
gap: 30px;
height: 40px;
padding: 5px 15px;
}
.screen-narrow {
display: inline;
}
.screen-wide {
display: none;
}

9
frontend/shell/css/hover.css Normal file
View file

@ -0,0 +1,9 @@
.brand-link:hover,
.nav-link:hover {
color: orange;
}
.nav-link-account:hover {
background-color: orange;
color: white;
}

21
frontend/shell/css/nav.css Normal file
View file

@ -0,0 +1,21 @@
.nav {
align-items: center;
color: inherit;
display: flex;
flex: 1;
gap: 15px;
}
.nav-link {
color: inherit;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.nav-link-account {
background-color: #0d6efd;
border-radius: 5px;
margin-left: auto;
padding: 5px 10px;
}

34
frontend/shell/index.html Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<html>
<head>
<link href="css/brand.css" rel="stylesheet">
<link href="css/header.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet">
<link href="css/desktop.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instant Workstation</title>
</head>
<body>
<header class="header">
<a class="brand-link" href="/">
<img alt="" class="brand-logo" src="logo.svg">
<span class="brand-title screen-wide">Instant Workstation</span>
</a>
<nav class="nav">
<a class="nav-link screen-narrow" href="https://code.instantworkstation.com">Code</a>
<a class="nav-link screen-wide" href="https://code.instantworkstation.com">Source Code</a>
<a class="nav-link screen-narrow" href="https://docs.instantworkstation.com">Docs</a>
<a class="nav-link screen-wide" href="https://docs.instantworkstation.com">Technical Documentation</a>
<a class="nav-link nav-link-account" href="/account">Account</a>
</nav>
</header>
</body>
</html>

1
frontend/shell/logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.1 KiB