Simple navbar. Will need to fix colours later.

This commit is contained in:
Dominik Picheta 2018-05-07 19:58:42 +01:00
commit c10d5f4e44
2 changed files with 36 additions and 1 deletions

View file

@ -13,6 +13,21 @@
</head>
<body>
<header class="navbar container grid-xl" id="main-navbar">
<section class="navbar-section">
<a href="#">
<img src="http://via.placeholder.com/60x60"
id="img-logo"/>
</a>
</section>
<section class="navbar-section">
<div class="input-group input-inline">
<input class="form-input input-sm navbar-control" type="text" placeholder="search">
</div>
<button class="btn btn-primary btn-sm navbar-control">Sign up</button>
<button class="btn btn-primary btn-sm navbar-control">Log in</button>
</section>
</header>
</body>

View file

@ -5,4 +5,24 @@ $primary-color: #2e5bec;
$dark-color: #3e396b;
// Import full Spectre source code
@import "spectre/src/spectre";
@import "spectre/src/spectre";
// Custom styles.
// - Navigation bar.
$navbar-height: 60px;
$logo-height: $navbar-height - 20px;
#main-navbar {
background-color: #17181f;
height: $navbar-height;
}
#img-logo {
vertical-align: middle;
height: $logo-height;
}
.navbar-control {
margin-left: $control-padding-x;
}