bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 02:16:10 +01:00
Code Releases Activity

consistent menu for front page & pages, new page headers

Browse Source
This commit is contained in:
Matthias Kretschmann 2016-01-09 19:07:09 +01:00
parent d877230627
commit 5fb4d81134
12 changed files with 95 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_src/_assets/styles/bigchain.scss
View File

@ -27,6 +27,7 @@
@import 'bigchain/_alerts';
@import 'bigchain/_code';
@import 'bigchain/_syntax';
@import 'bigchain/_header';
@import 'bigchain/_footer';
@import 'bigchain/_team';
@import 'bigchain/_utilities';
@ -38,3 +39,4 @@
@import 'page-front';
@import 'page-404';
@import 'page-styleguide';
@import 'page-about';

33
_src/_assets/styles/bigchain/_content-page.scss
View File

@ -1,36 +1,5 @@
.page__header {
position: relative;
// background
background: url('../img/photo1.jpg') no-repeat center bottom;
background-size: cover;
// color overlay
&:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
//background: $brand-main-brown;
background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%);
opacity: .7;
z-index: 0;
}
padding: ($spacer * 4) 0;
}
.page__title {
text-align: center;
margin: 0;
}
.page__content {
.content--page {
.row {
> h2 {
border-bottom: 1px solid $gray-lightest;

34
_src/_assets/styles/bigchain/_header.scss Normal file
View File

@ -0,0 +1,34 @@
.header {
position: relative;
margin-bottom: ($spacer * 4);
padding-top: 60px; // space for absolute menu
// background
background: url('../img/photo1.jpg') no-repeat center bottom;
background-size: cover;
// color overlay
&:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
//background: $brand-main-brown;
background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%);
opacity: .7;
z-index: 0;
}
}
.header__title {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
margin: 0;
padding: ($spacer * 4) 0;
}

27
_src/_assets/styles/bigchain/_menus.scss
View File

@ -7,12 +7,33 @@
padding: $spacer
}
.menu__logo svg { fill: #fff }
.menu__logo {
display: block;
svg { fill: #fff }
}
//
// Main menu overlaying a dark background image
// in front page hero or page headers
//
.menu--main {
@extend .background--gray;
position: absolute;;
left: 0;
right: 0;
top: 0;
width: 100%;
z-index: 2;
border-bottom: 1px solid rgba(#fff, .2);
height: 60px;
.menu__link { color: #fff; }
.menu__link {
color: #fff;
opacity: .8;
&:hover,
&:focus { opacity: 1 }
}
}
.menu--footer {

1
_src/_assets/styles/bigchain/_typography.scss
View File

@ -47,6 +47,7 @@ textarea {
// Links
//
a {
@extend .transition;
color: $link-color;
text-decoration: none;

2
_src/_assets/styles/bigchain/_variables.scss
View File

@ -46,7 +46,7 @@ $font-size-root-lg: 18px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default;
$font-size-sm: 0.875rem !default;
$font-size-sm: 0.8rem !default;
$font-size-xs: 0.65rem !default;
$font-size-h1: 3rem !default;

0
_src/_assets/styles/page-about.scss Normal file
View File

1
_src/_assets/styles/page-front.scss
View File

@ -99,6 +99,7 @@
.hero__content {
position: relative;
z-index: 1;
margin-top: 60px; // space for absolute menu
}
.hero__comingsoon {

35
_src/_includes/menu-main.html
View File

@ -1,21 +1,30 @@
<nav class="menu menu--main">
<div class="row">
<a class="menu__logo" href="/">
<svg class="logo logo--sm" aria-labelledby="title">
<title>Logo</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
</a>
{% for link in site.data.menus.main %}
<div class="grid grid--full grid-small--fit grid--center">
<div class="grid__col">
<a class="menu__logo" href="/">
<svg class="logo logo--sm" aria-labelledby="title">
<title>Logo</title>
<use xlink:href="/assets/img/sprite.svg#logo"></use>
</svg>
</a>
</div>
{% assign active = nil %}
{% if page.url contains link.url %}
{% assign active = 'active' %}
{% endif %}
<div class="grid__col">
<a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
{% for link in site.data.menus.main %}
{% endfor %}
{% assign active = nil %}
{% if page.url contains link.url %}
{% assign active = 'active' %}
{% endif %}
<a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</div>
</div>
</div>
</nav>

2
_src/_layouts/base.html
View File

@ -13,8 +13,6 @@
</div>
<![endif]-->
{% include menu-main.html %}
{{ content }}
{% include footer.html %}

9
_src/_layouts/page.html
View File

@ -2,13 +2,16 @@
layout: base
---
<header role="banner" class="page__header">
<header role="banner" class="header">
{% include menu-main.html %}
<div class="row">
<h1 class="page__title">{{ page.title }}</h1>
<h1 class="header__title">{{ page.title }}</h1>
</div>
</header>
<section role="main" class="page__content">
<section role="main" class="content content--page">
<div class="row">
{{ content }}

4
_src/index.html
View File

@ -4,6 +4,8 @@ layout: base
front_page: true
---
{% include menu-main.html %}
<header class="section hero">
<div class="row">
<div class="hero__content">
@ -27,7 +29,7 @@ front_page: true
</header>
<figure>
<img class="img__responsive" src="/assets/img/graph.png" width="672" height="226">
<img class="img--responsive" src="/assets/img/graph.png" width="672" height="226">
</figure>
<div class="grid grid--full grid-small--fit grid--gutters">