2
0
mirror of https://github.com/offen/website.git synced 2024-10-18 20:20:24 +02:00

menu basic

This commit is contained in:
Hendrik Niefeld 2019-12-23 07:23:47 +01:00
parent f6c6e75a41
commit 0015bca088
2 changed files with 20 additions and 19 deletions

View File

@ -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: '';

View File

@ -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>