improve nav bar styling

This commit is contained in:
Arthur Lu 2023-05-11 06:03:37 +00:00
parent 891b5c3af0
commit f9e0903671
5 changed files with 19 additions and 12 deletions

View File

@ -12,8 +12,8 @@
</head> </head>
<body> <body>
<header> <header>
<h1>tronnet</h1>
<nav id="hamnav"> <nav id="hamnav">
<h1>tronnet</h1>
<label for="hamburger">&#9776;</label> <label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"> <input type="checkbox" id="hamburger">
<div id="hamitems"> <div id="hamitems">

View File

@ -13,8 +13,8 @@
</head> </head>
<body> <body>
<header> <header>
<h1>tronnet</h1>
<nav id="hamnav"> <nav id="hamnav">
<h1>tronnet</h1>
<label for="hamburger">&#9776;</label> <label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"> <input type="checkbox" id="hamburger">
<div id="hamitems"> <div id="hamitems">

View File

@ -18,21 +18,28 @@
} }
} }
nav { header {
overflow: hidden; display: grid;
grid-template-columns: auto 1fr;
align-items: center;
width: 100%;
background-color: var(--nav-bg-color); background-color: var(--nav-bg-color);
color: var(--nav-text-color); color: var(--nav-text-color);
font-size: larger;
} }
nav h1 { header h1 {
font-size: 18px; font-size: 18px;
margin: 0px; margin: 0px;
background-color: var(--nav-header-bg-color); background-color: var(--nav-header-bg-color);
color: var(--nav-header-text-color); color: var(--nav-header-text-color);
} }
nav a, nav h1, nav label { nav {
overflow: hidden;
font-size: larger;
}
nav a, header h1, nav label {
text-align: left; text-align: left;
padding: 8px 10px; padding: 8px 10px;
text-decoration: none; text-decoration: none;
@ -64,7 +71,7 @@ nav a, nav h1, nav label {
} }
@media screen and (max-width: 600px){ @media screen and (max-width: 600px){
nav { header {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }

View File

@ -14,8 +14,8 @@
</head> </head>
<body> <body>
<header> <header>
<h1>tronnet</h1>
<nav id="hamnav"> <nav id="hamnav">
<h1>tronnet</h1>
<label for="hamburger">&#9776;</label> <label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"> <input type="checkbox" id="hamburger">
<div id="hamitems"> <div id="hamitems">

View File

@ -12,8 +12,8 @@
</head> </head>
<body> <body>
<header> <header>
<h1>tronnet</h1>
<nav id="hamnav"> <nav id="hamnav">
<h1>tronnet</h1>
<label for="hamburger">&#9776;</label> <label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger"> <input type="checkbox" id="hamburger">
<div id="hamitems"> <div id="hamitems">