dummy nav

This commit is contained in:
2026-01-28 10:53:44 -08:00
parent 735b655a4e
commit 16479476a8
3 changed files with 64 additions and 1 deletions

48
assets/styles/nav.css Normal file
View File

@ -0,0 +1,48 @@
nav {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
margin: 1rem auto;
}
nav a {
text-decoration: none;
}
nav h2 {
display: inline;
margin: 0;
font-size: 1.8rem;
}
@media (max-width: 650px) {
nav h2 {
font-size: 1.5rem;
}
}
nav ul {
display: flex;
flex-flow: column;
justify-content: space-around;
align-items: flex-end;
align-self: flex-end;
}
nav li {
list-style: none;
}
nav li a {
display: block;
padding: .3rem 0;
font-family: Courier, monospace;
font-size: 1.3rem;
}
@media (max-width: 650px) {
nav li a {
font-size: 1.2rem;
}
}

View File

@ -18,11 +18,25 @@
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
</head>
<body>
<header>
<nav>
<h2>
<a href="/" title="home page">Andie Lastname</a>
</h2>
<ul>
<li>
<a href="/1" title="dummy link 1">one</a>
</li>
<li>
<a href="/2" title="dummy link 2">two</a>
</li>
<li>
<a href="/3" title="dummy link 3">three</a>
</li>
</ul>
</nav>
</header>
<main id="main">

View File

@ -19,6 +19,7 @@
<!-- CSS -->
<link rel="stylesheet" href="/assets/styles/main.css">
<link rel="stylesheet" href="/assets/styles/palette.css">
<link rel="stylesheet" href="/assets/styles/nav.css">
</head>
<body>
<header>