Change summary
ws/static/home.html | 9 +++++--
ws/static/styles.css | 49 ++++++++++++++++++++++++++++++++++++++++++---
2 files changed, 51 insertions(+), 7 deletions(-)
Detailed changes
@@ -18,9 +18,12 @@
<link rel="stylesheet" href="/static/styles.css" />
</head>
<body>
- <header class="wrapper">
- <h1>Willow <span><a href="/logout">Log out</a></span></h1>
- <p><a href="/new">Track a new project</a></p>
+ <header>
+ <h1>Willow</h1>
+ <nav>
+ <a href="/new">Track a new project</a>
+ <a href="/logout">Log out</a>
+ </nav>
</header>
<div class="two_column">
<div class="projects">
@@ -54,7 +54,7 @@ a:visited {
.two_column {
display: flex;
- gap: 30px;
+/* gap: 30px;*/
flex-direction: row;
margin: auto auto;
max-width: 1040px;
@@ -112,9 +112,50 @@ a:visited {
margin: auto auto;
}
-header > h1 > span {
- font-size: 12px;
- float: right;
+header {
+ width: 100%;
+ max-width: 1040px;
+ margin: 0 auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-content: center;
+}
+
+header h1 {
+ margin-block: 1.2rem;
+}
+
+header nav {
+ display: flex;
+ justify-content: flex-end;
+ align-content: baseline;
+ flex: 1 1 auto;
+ margin-block: 1.2rem;
+}
+
+header nav a,
+header nav a:visited {
+ display: block;
+ text-decoration: none;
+ font-size: 1.2rem;
+ line-height: 1;
+ color: hsl(100, 95%, 30%);
+ border: 1px solid hsl(100, 95%, 30%);
+ background-color: transparent;
+ border-radius: 0.5rem;
+ padding: 0.6rem 0.5rem 0.4rem;
+}
+
+header nav a + a {
+ margin-inline-start: 0.5rem;
+}
+
+header nav a:last-of-type,
+header nav a:last-of-type:visited {
+ color: hsl(350, 100%, 65%);
+ border-color: hsl(350, 100%, 65%);
+ background-color: transparent;
}
@media (prefers-color-scheme: dark) {