gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity

About me link

Browse source
This commit is contained in:
Joe Wroten 2019-01-08 22:13:13 -06:00
parent 3e7875d444
commit 2ee4d8757d
3 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/assets/stylesheet.css
View file

@ -58,10 +58,28 @@ a {
} }
.-container { .-container {
position: relative;
max-width: 40rem; max-width: 40rem;
margin: 0 auto; margin: 0 auto;
} }
.about-link {
transition: top .15s ease-out;
position: absolute;
top: -5px;
right: 20px;
}
.about-link:hover,
.about-link:focus {
top: 0;
}
.about-link-image {
height: 60px;
border-radius: 0 0 50% 50%;
}
.tag { .tag {
padding: 0 .3em; padding: 0 .3em;
border-radius: 3px; border-radius: 3px;

3
src/templates/index.hbs
View file

@ -19,6 +19,9 @@
<use xlink:href="./assets/spritesheet.svg#menu" /> <use xlink:href="./assets/spritesheet.svg#menu" />
</svg> </svg>
</a> </a>
<a href="#" class="about-link">
<img class="about-link-image" src="./assets/avatar-small.png" alt="About Joe Wroten" />
</a>
</header> </header>
<main class="index-top -container -pad-h"> <main class="index-top -container -pad-h">
<h1 class="intro"> <h1 class="intro">

5
src/templates/interior.hbs
View file

@ -15,12 +15,15 @@
</head> </head>
<body class="interior -{{pageType}}"> <body class="interior -{{pageType}}">
<header class="interior-header"> <header class="interior-header">
<div class="interior-topbar -pad-h -pad-v"> <div class="interior-topbar -container -pad-h -pad-v">
<a href="/"> <a href="/">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="./assets/spritesheet.svg#back" /> <use xlink:href="./assets/spritesheet.svg#back" />
</svg> </svg>
</a> </a>
<a href="#" class="about-link">
<img class="about-link-image" src="./assets/avatar-small.png" alt="About Joe Wroten" />
</a>
</div> </div>
<div class="interior-headline -{{pageType}} -pad-h -pad-v"> <div class="interior-headline -{{pageType}} -pad-h -pad-v">
<h1 class="-container"> <h1 class="-container">