schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

make menu links into working links, fix link boxes

Browse Source
This commit is contained in:
Thefeli73 2020-02-17 21:15:28 +01:00
parent d25cd3523a
commit 25a822463c
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/css/layout/_nav.scss
View File

@ -25,14 +25,22 @@
opacity: 0;
position: fixed;
color: _palette(white);
bottom: 100vh;
right: 0;
left: 0;
margin: 0 auto -50vh;
top: 50%;
transform: translate(0, -50%);
li {
transform: translate3d(0,0,0);
margin: 0 40%;
margin: 1em 40%;
> a {
line-height: 3em;
margin: 1em 0;
display: block;
border-bottom: none;
}
&:before {
@include vendor('transition', (
'width #{_duration(transition2)} ease',
@ -45,6 +53,7 @@
left: auto;
background-color: _palette(white);
width: 0;
pointer-events: none;
}
&:after {
@include vendor('transition', (
@ -59,6 +68,8 @@
left: 0;
margin: auto;
color: _palette(menu);
pointer-events: none;
line-height: 3em;
}
&:hover {
&:before {

10
src/index.html
View File

@ -50,10 +50,10 @@
<div id="menu">
<span></span>
<ul>
<li data-text="Home">Home</li>
<li data-text="Websites">Websites</li>
<li data-text="Projects">Projects</li>
<li data-text="Contact">Contact</li>
<li data-text="Home"><a href="/">Home</a></li>
<li data-text="Websites"><a href="#">Websites</a></li>
<li data-text="Projects"><a href="#">Projects</a></li>
<li data-text="Contact"><a href="#">Contact</a></li>
</ul>
</div>
@ -64,7 +64,7 @@
<span class="bar bar1"></span>
</div>
<a href="https://schulze.studio">
<a href="/">
<picture id="logo">
<source srcset="/img/logo/logo@0.10x.webp" type="image/webp">
<source srcset="/img/logo/logo@0.10x.png" type="image/png">