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

10
src/index.html
View File

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