n
/
elizabeth-website-sketch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add highlight effect on links + make a few clarifying changes to the code

This commit is contained in:
n loewen 2023-09-21 15:20:34 -07:00
parent 5d09048fe4
commit 2a3c4be9b9
2 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -31,7 +31,7 @@
<div class="column">
<a href="#" class="triangle triangle-bottom">
<img src="https://placekitten.com/200/200">
<div class="triangle-label multiline">Applied Statistician</div>
<div class="triangle-label multiline">Applied<br>Statistician</div>
</a>
<a href="#" class="triangle triangle-top">
@ -41,7 +41,7 @@
</div>
</div>
<div class="heading">
<div class="navigation">
<h1> Elizabeth Pankratz </h1>
<a href="#">about</a> &emsp;
<a href="#">blog</a> &emsp;

29
style.css
View File

@ -1,4 +1,7 @@
/* Home page */
* {
/* Make CSS behave more sensibly... */
box-sizing: border-box;
margin: 0;
padding: 0;
@ -77,8 +80,34 @@ body {
top: 0.5rem;
}
/* Title and links */
h1 {
font-weight: bold;
font-size: 1.7rem;
margin-top: 1em;
}
.navigation {
font-size: 1.4rem;
}
.navigation a {
color: black;
text-decoration: none;
margin-left: -0.25ch;
border-left: 0.25ch solid rgba(0,0,0,0);
border-right: 0.25ch solid rgba(0,0,0,0);
}
.navigation a:visited {
color: black;
}
.navigation a:active,
.navigation a:hover {
background-color:hsl(50, 100%, 70%);
border-left: 0.25ch solid hsl(50, 100%, 70%);
border-right: 0.25ch solid hsl(50, 100%, 70%);
}