Add key links below monogram

This commit is contained in:
n loewen 2023-09-22 11:28:56 -07:00
parent edcd5a4a0a
commit ea52f6986b
2 changed files with 36 additions and 19 deletions

View File

@ -41,13 +41,20 @@
</div> </div>
</div> </div>
<div class="navigation"> <div class="intro">
<h1> Elizabeth Pankratz </h1> <div class="bio"> I'm <h1>Elizabeth Pankratz</h1>,<br>
a <a href="#">linguist</a>,
<a href="#">textile artist</a>,
<br>
and <a href="#">applied statistician</a>
</div>
<div class="links">
<a href="#">about</a> <a href="#">about</a>
<a href="#">blog</a> <a href="#">blog</a>
<a href="#">contact</a> <a href="#">contact</a>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

View File

@ -92,33 +92,43 @@ body {
/* Title and links */ /* Title and links */
h1 { h1 {
display: inline;
font-weight: bold; font-weight: bold;
font-size: 1.7rem; font-size: 1em;
margin-top: 1em;
} }
.navigation { .intro {
margin-top: 2em;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.4;
} }
.navigation a { .intro .bio {
margin-bottom: 1em;
}
.intro .links a {
gap: 1em; /* TODO */
margin-right: 0.5ch;
}
.intro a {
color: black; color: black;
text-decoration: none; border-left: 0.33ch solid rgba(0,0,0,0);
margin-left: -0.25ch; border-right: 0.33ch solid rgba(0,0,0,0);
border-left: 0.25ch solid rgba(0,0,0,0); margin-left: -0.33ch;
border-right: 0.25ch solid rgba(0,0,0,0); margin-right: -0.33ch;
margin-right: 0.75ch;
} }
.navigation a:visited { .intro a:visited {
color: black; color: black;
} }
.navigation a:active, .intro a:active,
.navigation a:hover { .intro a:hover {
background-color:hsl(50, 100%, 70%); background-color:hsl(50, 100%, 70%);
border-left: 0.25ch solid hsl(50, 100%, 70%); border-left: 0.33ch solid hsl(50, 100%, 70%);
border-right: 0.25ch solid hsl(50, 100%, 70%); border-right: 0.33ch solid hsl(50, 100%, 70%);
} }