Fix header link sizing

dandclark · Nov 5, 2023 · 61bef49 · 61bef49
1 parent 51b5bc6
commit 61bef49
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 14 deletions.
diff --git a/about.html b/about.html
@@ -14,8 +14,8 @@
  </div>
  <div id="img-container" role="img" alt="Profile image of Dan" title="Photo Credit: Julie Clark :)"></div>
  <nav>
- <div><a href="/">Home</a></div>
- <div class="current"><a href="/about.html">About</a></div>
+ <a href="/">Home</a>
+ <a href="/about.html" class="current">About</a>
  </nav>
  </header>
  <div class="titlebar-divider"></div>

diff --git a/index.html b/index.html
@@ -16,8 +16,8 @@
  </div>
  <div id="img-container" role="img" alt="Profile image of Dan" title="Photo Credit: Julie Clark :)"></div>
  <nav>
- <div class="current"><a href="/">Home</a></div>
- <div><a href="/about.html">About</a></div>
+ <a href="/" class="current">Home</a>
+ <a href="/about.html">About</a>
  </nav>
  </header>
  <div class="titlebar-divider"></div>

diff --git a/main.css b/main.css
@@ -61,22 +61,20 @@ body {
  border-radius: 0.5em;
 }
 
-.titlebar > .main-link-container {
+.titlebar > .main-link-container a {
  padding: 0.5em 1em 0.5em 1em;
  border-radius: 0.5em;
 }
 
-.titlebar.content-box > .main-link-container:hover {
- outline: 0.1em solid var(--main-text-color);
-}
-
 .titlebar.content-box a {
  color: var(--main-text-color);
+ display: block;
 }
 
 .titlebar.content-box a:hover {
  text-shadow: none;
  text-decoration: none;
+ outline: 0.1em solid var(--main-text-color);
 }
 
 nav {
@@ -87,17 +85,17 @@ nav {
  font-size: 1.4em;
 }
 
-nav div {
+.titlebar nav a {
  padding: 0.35em;
  border-radius: 0.3em;
 }
 
-nav div.current {
+.titlebar nav a.current {
  outline: 0.1em solid var(--main-text-color);
 }
 
-nav div:not(.current):hover {
- outline: 0.05em solid var(--main-text-color);
+.titlebar nav a:not(.current):hover {
+ outline: 0.06em solid var(--main-text-color);
 }
 
 .content-box a {
@@ -118,7 +116,6 @@ nav div:not(.current):hover {
 }
 
 .content-box li {
- /*list-style: none;*/
  margin: 0.4em 0em 0.4em 0em;
 }