Commit 6052b078 authored by Nichlas W. Andersen's avatar Nichlas W. Andersen
Browse files

Header alternatives

A few more header alternatives and cleaned up button styling.
parent 60bc8b9f
<header class="block block-header-2">
<div class="block-header-2--logo">
<a href="#0">
<img src="img/forestry-full.svg" alt="{{ site.title }}">
</a>
</div>
<nav class="block-header-2--nav">
<ul>
<li class="nav-item active"><a href="#0">Home</a></li>
<li class="nav-item"><a href="#0">Features</a></li>
<li class="nav-item"><a href="#0">Pricing</a></li>
<li class="nav-item"><a href="#0">Team</a></li>
</ul>
<button class="button primary small block-header-2--cta">Download</button>
</nav>
</header>
\ No newline at end of file
<header class="block block-header-3">
<div class="block-header-3--logo">
<a href="#0">
<img src="img/forestry-full.svg" alt="{{ site.title }}">
</a>
</div>
</header>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
......@@ -3,6 +3,8 @@ layout: default
title: Homepage
---
{% include block-header-1.html %}
{% include block-header-2.html %}
{% include block-header-3.html %}
{% include block-hero-2.html %}
{% include block-text-1.html %}
{% include block-feature-1.html %}
......
.block-header-2 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.block-header-2--logo img {
max-height: 1.5rem;
}
.block-header-2--nav {
display: flex;
align-items: baseline;
}
.block-header-2 .nav-item {
display: inline-block;
list-style: none;
margin-right: 1rem;
font-size: 0.85rem;
}
.block-header-2 .nav-item.active a {
color: var(--color-primary);
}
.block-header-2 .nav-item a {
text-decoration: none;
color: var(--color-black-1);
}
.block-header-2 .nav-item a:hover {
color: var(--color-black-3);
}
.block-header-2 .nav-item.active a:hover {
color: var(--color-primary);
}
.block-header-2 .nav-item:last-of-type {
margin: 0;
}
.block-header-2--cta {
margin-left: 2rem;
}
\ No newline at end of file
.block-header-3 {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
background-color: var(--color-white);
}
.block-header-3--logo img {
max-height: 1.5rem;
}
\ No newline at end of file
......@@ -7,7 +7,6 @@
font-weight: 500;
cursor: pointer;
position: relative;
box-shadow: 0px 5px 0px 0px rgba(255,255,255, 0.5);
user-select: none;
}
......@@ -15,11 +14,6 @@
opacity: 0.8;
}
.button:active {
transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px rgba(255,255,255, 0.2);
}
.button.primary {
background-color: var(--color-primary);
color: var(--color-white);
......@@ -30,14 +24,14 @@
color: var(--color-black);
}
/* Input button */
input + .button {
box-shadow: none;
/* Secondary */
.button.secondary {
background-color: transparent;
border: 1.5px solid var(--color-primary);
}
input + .button:active {
transform: translate(0);
box-shadow: none;
/* Sizes */
.button.small {
font-size: 0.6rem;
padding: 0.5rem 1rem;
}
\ No newline at end of file
......@@ -10,6 +10,8 @@
/* Blocks */
@import "imports/block-header-1.css";
@import "imports/block-header-2.css";
@import "imports/block-header-3.css";
@import "imports/block-hero-1.css";
@import "imports/block-hero-2.css";
@import "imports/block-one-column-1.css";
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment