krzysztof/model-mgr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update home.html

Browse Source
This commit is contained in:
krzysztof
2026-08-27 07:28:38 +00:00
parent f846285bf5
commit 00c0250617
1 changed files with 182 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
home.html
+182 -7
View File
@@ -1,10 +1,20 @@
<html>
<head>
<script src="https://kit.fontawesome.com/cb9d270ae6.js" crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
:root {
/* colors */
--top: #f6f8fa;
--hover: #f0f1f2;
--border: #d1d9e0;
--dim: #5b6067;
--active-border: #f05133;
}
body {
display: grid;
grid-template-columns: 1fr 200px;
grid-template-rows: 64px 128px 1fr 24px;
grid-template-rows: 48px 100px 1fr 24px;
grid-template-areas: "header header"
"nav nav"
"main aside"
@@ -12,17 +22,29 @@ body {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
font-family: 'Nunito';
}
header {
grid-area: header;
background-color: black;
color: white;
background-color: var(--top);
color: black;
border-bottom: 1px solid var(--border);
padding: 0 8px;
font-size: 12px;
}
nav {
grid-area: nav;
background-color: whitesmoke;
background-color: white;
color: black;
border-bottom: 1px solid lightgray;
border-bottom: 1px solid var(--border);
position: relative;
}
nav > table {
width: 100%;
}
nav > table td {
width: 50%;
}
main {
grid-area: main;
@@ -39,14 +61,167 @@ footer {
background-color: white;
color: black;
}
ul.pathlist {
list-style: none;
padding: 8px;
margin: 0;
font-size: 20px;
}
ul.pathlist li {
display: inline-block;
}
ul.pathlist li:not(li:has(i)):not(li:last-child)::after {
content: '/';
padding: 0 8px;
}
ul.pathlist li:has(i) {
padding: 0 8px 0 4px;
}
ul a, menu a {
color: inherit;
text-decoration: none;
}
ul.pathlist a {
padding: 4px;
border-radius: 4px;
background-color: transparent;
}
ul.pathlist a:hover {
background-color: var(--hover);
}
nav menu {
list-style: none;
padding: 0 0 0 16px;;
margin: 0;
position: absolute;
bottom: 0;
left: 0;
}
nav menu li {
display: inline-block;
font-size: 16px;
padding: 8px;
margin: 0 4px 0 0;
}
nav menu li.active {
font-weight: 600;
border-bottom: 2px solid var(--active-border);
}
nav menu li i {
padding-right: 4px;
}
header menu {
list-style: none;
margin: 0;
padding: 8px;
height: 32px;
line-height: 32px;
}
td:has(ul.toollist) {
text-align: right;
padding-right: 8px;
}
ul.toollist {
margin: 0;
padding: 0;
}
ul.toollist li {
display: inline-block;
margin: 0 4px 0 0;
background-color: var(--top);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--dim);
overflow: hidden;
}
ul.toollist li a {
padding: 0 6px;
font-size: 12px;
height: 24px;
line-height: 24px;
display: inline-block;
}
ul.toollist li a i {
line-height: 24px;
}
</style>
</head>
<body>
<header>
h
<menu>
<li>
<a href="#">Explore</a>
</li>
</menu>
</header>
<nav>
n
<table>
<tr>
<td>
<ul class="pathlist">
<li>
<i class="fa-solid fa-cube"></i>
</li>
<li>
<a href="#">
<strong>Krzysztof</strong>
</a>
</li>
<li>
<a href="#">
<span>new-proj</span>
</a>
</li>
</ul>
</td>
<td>
<ul class="toollist">
<li>
<a href="#share">
<i class="fa-solid fa-share"></i>
</a>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="1">
<menu>
<li class="active">
<a href="#">
<i class="fa-regular fa-folder-open"></i>
<span>Projekt</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-regular fa-clock"></i>
<span>Historia</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-regular fa-circle-dot"></i>
<span>Zastrzeżenia</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-regular fa-file-lines"></i>
<span>Instrukcje</span>
</a>
</li>
<li>
<a href="#">
<i class="fa-solid fa-shuffle"></i>
<span>Odmiany</span>
</a>
</li>
</menu>
</td>
</tr>
</table>
</nav>
<main>
m