mirror of
https://github.com/offen/website.git
synced 2024-11-22 17:10:29 +01:00
menu basic
This commit is contained in:
parent
f6c6e75a41
commit
0015bca088
@ -38,7 +38,7 @@ LAYOUT
|
|||||||
----------------------------------------------------*/
|
----------------------------------------------------*/
|
||||||
.menu {
|
.menu {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 64px; /* mt5 */
|
height: 4rem; /* mt5 */
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -84,13 +84,13 @@ MENU
|
|||||||
margin: 0 10px 40px 0;
|
margin: 0 10px 40px 0;
|
||||||
}
|
}
|
||||||
.nav-bar {
|
.nav-bar {
|
||||||
height: 70px;
|
height: 4rem;
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 12px 0 0 20px;
|
padding: 12px 0 0 20px;
|
||||||
float: left;
|
float: left;
|
||||||
line-height: 70px;
|
line-height: 4rem;
|
||||||
}
|
}
|
||||||
body.index .icon {
|
body.index .icon {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -114,15 +114,15 @@ nav ul li a,
|
|||||||
nav ul li a:visited {
|
nav ul li a:visited {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
line-height: 70px;
|
line-height: 4rem;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background: $yellow-mid;
|
background: #F7BF08;
|
||||||
color: $black-mid;
|
color: #39352A;
|
||||||
}
|
}
|
||||||
nav ul li a:hover,
|
nav ul li a:hover,
|
||||||
nav ul li a:visited:hover {
|
nav ul li a:visited:hover {
|
||||||
color: $black-mid;
|
color: #39352A;
|
||||||
}
|
}
|
||||||
nav ul li a:not(:only-child):after,
|
nav ul li a:not(:only-child):after,
|
||||||
nav ul li a:visited:not(:only-child):after {
|
nav ul li a:visited:not(:only-child):after {
|
||||||
@ -146,9 +146,9 @@ nav ul li ul li a {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: $yellow-mid;
|
background: #F7BF08;
|
||||||
height: 70px;
|
height: 4rem;
|
||||||
width: 70px;
|
width: 4rem;
|
||||||
}
|
}
|
||||||
/* Mobile Styles */
|
/* Mobile Styles */
|
||||||
@media only screen and (max-width: 960px) {
|
@media only screen and (max-width: 960px) {
|
||||||
@ -160,7 +160,8 @@ nav ul li ul li a {
|
|||||||
}
|
}
|
||||||
nav {
|
nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 70px 0 15px;
|
padding: 0 0 15px 0;
|
||||||
|
padding-top: 4rem;
|
||||||
}
|
}
|
||||||
nav ul {
|
nav ul {
|
||||||
display: none;
|
display: none;
|
||||||
@ -206,7 +207,7 @@ nav ul li ul li a {
|
|||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 25px;
|
width: 25px;
|
||||||
background: $black-mid;
|
background: #39352A;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
content: '';
|
content: '';
|
||||||
|
@ -38,28 +38,28 @@
|
|||||||
<section class="nav-bar">
|
<section class="nav-bar">
|
||||||
<div class="nav-container">
|
<div class="nav-container">
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="42" height="46" class="logo"></a>
|
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<nav>
|
<nav>
|
||||||
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
|
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
|
||||||
<ul class="nav-list">
|
<ul class="nav-list">
|
||||||
<li>
|
<li>
|
||||||
<a href="/">Summary</a>
|
<a class="b link dim fnt-cclr-mid-black" href="/">Summary</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/deep-dive/">Deep dive</a>
|
<a class="b link dim fnt-cclr-mid-black" href="/deep-dive/">Deep dive</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/blog/">Status</a>
|
<a class="b link dim fnt-cclr-mid-black" href="/blog/">Status</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="/about/">About</a>
|
<a class="b link dim fnt-cclr-mid-black" href="/about/">About</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
|
<a class="b link dim fnt-cclr-mid-black" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
<a class="b link dim fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
Loading…
Reference in New Issue
Block a user