tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

move nav bar css to nav.css,

Browse Source 
simplify some css rules for nav responsiveness

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-25 21:35:50 +00:00
parent 98fe0b2b3f
commit 92493670b7
6 changed files with 73 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
account.html
View File

@ -7,6 +7,7 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<script src="scripts/account.js" type="module"></script>
</head>
<body>

1
config.html
View File

@ -7,6 +7,7 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/form.css">
<script src="scripts/config.js" type="module"></script>
</head>

69
css/nav.css Normal file
View File

@ -0,0 +1,69 @@
nav {
overflow: hidden;
color: white;
background-color: black;
font-size: larger;
}
nav a, nav h1, nav label {
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
background-color: white;
color: black;
}
#hamitems:hover a[aria-current="true"] {
background-color: black;
color: white;
}
#hamnav label, #hamburger {
display: none;
}
@media screen and (min-width: 600px){
nav {
display: flex;
align-items: center;
}
#hamitems {
display: flex;
}
}
@media screen and (max-width: 600px){
nav {
display: grid;
grid-template-columns: 1fr auto;
}
#hamitems {
display: block;
grid-column: 1 / span 2;
}
#hamitems a {
box-sizing: border-box;
display: block;
text-align: center;
width: 100%;
border-top: 1px solid #888;
}
#hamnav label {
display: inline-block;
}
#hamitems {
display: none;
}
#hamnav input:checked ~ #hamitems {
display: block;
}
}

80
css/style.css
View File

@ -50,83 +50,3 @@ img {
.none {
display: none;
}
nav {
overflow: hidden;
color: white;
background-color: black;
font-size: larger;
}
nav a, nav h1, nav label {
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
#hamitems a:hover {
background-color: white;
color: black;
}
#hamitems a[aria-current="true"] {
background-color: white;
color: black;
}
#hamitems:hover a[aria-current="true"] {
background-color: black;
color: white;
}
#hamitems:hover a[aria-current="true"]:hover {
background-color: white;
color: black;
}
#hamnav label, #hamburger {
display: none;
}
@media screen and (min-width: 600px){
nav {
display: flex;
align-items: center;
}
#hamitems {
display: flex;
}
}
@media screen and (max-width: 600px){
nav {
display: grid;
grid-template-columns: 1fr auto;
}
#hamitems {
display: block;
grid-column: 1 / span 2;
}
#hamitems a {
box-sizing: border-box;
display: block;
text-align: center;
width: 100%;
border-top: 1px solid #888;
}
#hamnav label {
display: inline-block;
}
#hamitems {
display: none;
}
#hamnav input:checked ~ #hamitems {
display: block;
}
}

1
index.html
View File

@ -7,6 +7,7 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<script src="scripts/index.js" type="module"></script>
<script src="scripts/instance.js" type="module"></script>
</head>

1
login.html
View File

@ -7,6 +7,7 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<script src="scripts/login.js" type="module"></script>
</head>
<body class="w3-display-container" style="min-height: 100vh;">