add icons to navbar and make it smaller

This commit is contained in:
Ziad-I
2024-08-07 12:50:59 +03:00
committed by Dion Moult
parent 02ff6c00ef
commit cbc0b4837f
6 changed files with 80 additions and 27 deletions
@@ -9,8 +9,8 @@
--padding-small: 0.625rem; --padding-small: 0.625rem;
--padding-medium: 1rem; --padding-medium: 1rem;
--font-size-large: 1.2rem; --font-size-large: 1.2rem;
--logo-height: 2.5rem; --logo-height: 1.5rem;
--nav-height: 2.5rem; --nav-height: 0.625rem;
} }
:root.dark { :root.dark {
@@ -81,20 +81,18 @@ nav .logo {
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
margin-left: 0.0625rem;
display: flex; display: flex;
flex-grow: 1; flex: 1;
justify-content: center; justify-content: center;
} }
nav ul li { nav ul li {
margin-right: 3.125rem; margin-right: var(--margin-large);
} }
nav ul li a { nav ul li a {
text-decoration: none; text-decoration: none;
color: var(--blender-text, var(--nav-link-color)); color: var(--blender-text, var(--nav-link-color));
font-size: var(--font-size-large);
} }
nav ul li a:hover, nav ul li a:hover,
@@ -10,8 +10,8 @@
--padding-medium: 1rem; --padding-medium: 1rem;
--font-size-small: 1rem; --font-size-small: 1rem;
--font-size-large: 1.2rem; --font-size-large: 1.2rem;
--logo-height: 2.5rem; --logo-height: 1.5rem;
--nav-height: 2.5rem; --nav-height: 0.625rem;
--folder-collapse-font-size: 0.75rem; --folder-collapse-font-size: 0.75rem;
--folder-collapse-font-family: Courier, "Courier New", monospace; --folder-collapse-font-family: Courier, "Courier New", monospace;
--box-shadow: 0 0 0.7rem #5f5f5f66; --box-shadow: 0 0 0.7rem #5f5f5f66;
@@ -94,20 +94,18 @@ nav .logo {
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
margin-left: 0.0625rem;
display: flex; display: flex;
flex-grow: 1; flex: 1;
justify-content: center; justify-content: center;
} }
nav ul li { nav ul li {
margin-right: 3.125rem; margin-right: var(--margin-large);
} }
nav ul li a { nav ul li a {
text-decoration: none; text-decoration: none;
color: var(--blender-text, var(--nav-link-color)); color: var(--blender-text, var(--nav-link-color));
font-size: var(--font-size-large);
} }
nav ul li a:hover, nav ul li a:hover,
@@ -9,8 +9,8 @@
--padding-small: 0.625rem; --padding-small: 0.625rem;
--padding-medium: 1rem; --padding-medium: 1rem;
--font-size-large: 1.2rem; --font-size-large: 1.2rem;
--logo-height: 2.5rem; --logo-height: 1.5rem;
--nav-height: 2.5rem; --nav-height: 0.625rem;
} }
:root.dark { :root.dark {
@@ -81,20 +81,18 @@ nav .logo {
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
margin-left: 0.0625rem;
display: flex; display: flex;
flex-grow: 1; flex: 1;
justify-content: center; justify-content: center;
} }
nav ul li { nav ul li {
margin-right: 3.125rem; margin-right: var(--margin-large);
} }
nav ul li a { nav ul li a {
text-decoration: none; text-decoration: none;
color: var(--blender-text, var(--nav-link-color)); color: var(--blender-text, var(--nav-link-color));
font-size: var(--font-size-large);
} }
nav ul li a:hover, nav ul li a:hover,
@@ -50,9 +50,28 @@
class="logo" class="logo"
/> />
<ul> <ul>
<li><a href="/">IFC Data</a></li> <li>
<li><a href="/gantt">Gantt Chart</a></li> <a href="/"><i class="fa-solid fa-table"></i> Schedules</a>
<li><a href="/drawings" class="active">Drawings</a></li> </li>
<li>
<a href="/gantt"
><i class="fa-solid fa-chart-gantt"></i> Construction Sequencing</a
>
</li>
<li>
<a href="drawings" class="active"
><i class="fa-solid fa-images"></i> Documentation</a
>
</li>
<li>
<a><i class="fa-solid fa-camera"></i> BCF Topics</a>
</li>
<li>
<a><i class="fa-solid fa-square-check"></i> IDS Audits</a>
</li>
<li>
<a><i class="fa-solid fa-hotel"></i> Facility Management</a>
</li>
</ul> </ul>
<button id="toggle-theme" onclick="toggleTheme()"> <button id="toggle-theme" onclick="toggleTheme()">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
@@ -32,9 +32,28 @@
class="logo" class="logo"
/> />
<ul> <ul>
<li><a href="/">IFC Data</a></li> <li>
<li><a href="/gantt" class="active">Gantt Chart</a></li> <a href="/"><i class="fa-solid fa-table"></i> Schedules</a>
<li><a href="/drawings">Drawings</a></li> </li>
<li>
<a href="/gantt" class="active"
><i class="fa-solid fa-chart-gantt"></i> Construction Sequencing</a
>
</li>
<li>
<a href="drawings"
><i class="fa-solid fa-images"></i> Documentation</a
>
</li>
<li>
<a><i class="fa-solid fa-camera"></i> BCF Topics</a>
</li>
<li>
<a><i class="fa-solid fa-square-check"></i> IDS Audits</a>
</li>
<li>
<a><i class="fa-solid fa-hotel"></i> Facility Management</a>
</li>
</ul> </ul>
<button id="toggle-theme" onclick="toggleTheme()"> <button id="toggle-theme" onclick="toggleTheme()">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
@@ -39,9 +39,30 @@
class="logo" class="logo"
/> />
<ul> <ul>
<li><a href="/" class="active">IFC Data</a></li> <li>
<li><a href="/gantt">Gantt Chart</a></li> <a href="/" class="active"
<li><a href="/drawings">Drawings</a></li> ><i class="fa-solid fa-table"></i> Schedules</a
>
</li>
<li>
<a href="/gantt"
><i class="fa-solid fa-chart-gantt"></i> Construction Sequencing</a
>
</li>
<li>
<a href="drawings"
><i class="fa-solid fa-images"></i> Documentation</a
>
</li>
<li>
<a><i class="fa-solid fa-camera"></i> BCF Topics</a>
</li>
<li>
<a><i class="fa-solid fa-square-check"></i> IDS Audits</a>
</li>
<li>
<a><i class="fa-solid fa-hotel"></i> Facility Management</a>
</li>
</ul> </ul>
<button id="toggle-theme" onclick="toggleTheme()"> <button id="toggle-theme" onclick="toggleTheme()">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>