Merge branch 'develop'

This commit is contained in:
Alice Gaudon 2020-07-16 09:25:10 +02:00
commit 44b32401a7
2 changed files with 76 additions and 33 deletions

View File

@ -63,13 +63,28 @@ header {
li { li {
list-style: none; list-style: none;
a, span { a, button {
position: relative; position: relative;
height: 64px;
margin: 0;
padding: 0 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
height: 64px;
padding: 0 24px; &:hover, &:active {
&:not(button) {
background-color: rgba(255, 255, 255, 0.07);
}
.tip {
visibility: visible;
opacity: 1;
transition: opacity ease-out 100ms;
transition-delay: 150ms;
}
}
.feather { .feather {
--icon-size: 24px; --icon-size: 24px;
@ -85,8 +100,26 @@ header {
} }
} }
a:hover, a:active { button {
background-color: rgba(255, 255, 255, 0.07); margin: 8px;
padding: 24px;
height: 32px;
.feather {
margin-right: 0;
}
.tip {
text-transform: initial;
font-weight: initial;
}
}
form {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
} }
} }
} }
@ -139,10 +172,14 @@ header {
transform: translateX(0%); transform: translateX(0%);
} }
li a { li {
a, button {
.tip { .tip {
display: block; display: block;
margin-left: 8px; margin-left: 8px;
text-transform: inherit;
font-weight: inherit;
}
} }
} }
} }
@ -151,7 +188,8 @@ header {
@media (min-width: $menuLayoutSwitchTreshold) { @media (min-width: $menuLayoutSwitchTreshold) {
nav ul li { nav ul li {
a .tip { a, button {
.tip {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
display: block; display: block;
@ -172,14 +210,19 @@ header {
background-color: #000; background-color: #000;
border-radius: 5px; border-radius: 5px;
} }
}
&:last-child a .tip { &:last-child {
a, button {
.tip {
left: unset; left: unset;
right: 4px; right: 4px;
transform: none; transform: none;
} }
} }
} }
}
}
} }
footer { footer {

View File

@ -16,7 +16,7 @@
<nav> <nav>
<button id="menu-button"><i data-feather="menu"></i></button> <button id="menu-button"><i data-feather="menu"></i></button>
<ul id="main-menu"> <ul id="main-menu">
<li><a href="{{ route('about') }}"><i data-feather="info"></i> About</a></li> <li><a href="{{ route('about') }}"><i data-feather="info"></i> <span class="tip">About</span></a></li>
</ul> </ul>
</nav> </nav>
{% endblock %} {% endblock %}