mirror of
https://github.com/ipdb/website.git
synced 2024-11-22 09:36:52 +01:00
bring all the menus to the yard
This commit is contained in:
parent
b81dd98053
commit
edb9afc7c0
GPG Key ID:
606EEEF3C479A91F
3
_src/_assets/img/logo.svg
Normal file
3
_src/_assets/img/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
@ -1,12 +1,28 @@
|
||||
$edge-height: $spacer * 5;
|
||||
|
||||
.header {
|
||||
background: $brand-05;
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
padding-bottom: $spacer;
|
||||
position: relative;
|
||||
margin-bottom: $edge-height;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: $edge-height;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -($edge-height);
|
||||
clip-path: polygon(100% 0, 0 0, 0 100%);
|
||||
background: $brand-05;
|
||||
}
|
||||
}
|
||||
|
||||
.header__title {
|
||||
font-size: $font-size-h1;
|
||||
margin-bottom: $spacer / 4;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header__subtitle {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.hero {
|
||||
background: $brand-02;
|
||||
background: $brand-03;
|
||||
padding: $spacer * 2;
|
||||
min-height: 100vh;
|
||||
|
||||
@ -8,4 +8,24 @@
|
||||
.hero__action {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu--main {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
color: #fff;
|
||||
|
||||
&:after {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
45
_src/_assets/scss/_logos.scss
Normal file
45
_src/_assets/scss/_logos.scss
Normal file
@ -0,0 +1,45 @@
|
||||
//
|
||||
// Logo
|
||||
//
|
||||
|
||||
// default logo
|
||||
.logo {
|
||||
fill: $brand-04;
|
||||
width: 150px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Color modifiers
|
||||
//
|
||||
.logo--white {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo--dark {
|
||||
fill: $brand-03;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Size modifiers
|
||||
//
|
||||
.logo--lg {
|
||||
width: 300px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.logo--sm {
|
||||
width: 75px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Caretakers
|
||||
//
|
||||
.logo-caretaker {
|
||||
|
||||
}
|
||||
75
_src/_assets/scss/_menus.scss
Normal file
75
_src/_assets/scss/_menus.scss
Normal file
@ -0,0 +1,75 @@
|
||||
.menu {
|
||||
width: 100%;
|
||||
padding-top: $spacer;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
display: inline-block;
|
||||
padding: $spacer;
|
||||
text-decoration: none;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $link-color;
|
||||
position: relative;
|
||||
|
||||
// link line
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 30px;
|
||||
background: $link-color;
|
||||
display: block;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
bottom: ($spacer / 2);
|
||||
// hidden by default
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
// show link line
|
||||
&:after { transform: scale(1); }
|
||||
}
|
||||
}
|
||||
|
||||
.menu__link--logo {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu--main {
|
||||
background: $brand-05;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
&:first-child {
|
||||
margin-left: -($spacer);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: -($spacer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu--footer {
|
||||
padding-top: $spacer * 2;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
@ -54,7 +54,7 @@ body {
|
||||
//
|
||||
|
||||
/* stylelint-disable selector-list-comma-newline-after */
|
||||
h1, h2, h3, h4, h5 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $headings-color;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
@ -68,17 +68,17 @@ h1, h2, h3, h4, h5 {
|
||||
}
|
||||
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3 {
|
||||
h2, .h2 {
|
||||
margin-top: ($spacer * 2);
|
||||
margin-bottom: ($spacer * 2);
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
margin-bottom: $spacer / 2;
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $font-size-h1; }
|
||||
|
||||
@ -7,6 +7,7 @@ $brand-03: #093749 !default;
|
||||
$brand-04: #557f8d !default;
|
||||
$brand-05: #eaf3f5 !default;
|
||||
$brand-06: #444 !default;
|
||||
$brand-07: #0e475d !default;
|
||||
|
||||
//
|
||||
// Typography
|
||||
|
||||
@ -6,3 +6,5 @@
|
||||
@import 'sections';
|
||||
@import 'hero';
|
||||
@import 'header';
|
||||
@import 'menus';
|
||||
@import 'logos';
|
||||
|
||||
5
_src/_data/menus.yml
Normal file
5
_src/_data/menus.yml
Normal file
@ -0,0 +1,5 @@
|
||||
main:
|
||||
- title: Foundation
|
||||
url: /foundation/
|
||||
- title: Style guide
|
||||
url: /styleguide/
|
||||
10
_src/_includes/footer.html
Normal file
10
_src/_includes/footer.html
Normal file
@ -0,0 +1,10 @@
|
||||
<footer class="footer">
|
||||
<div class="row">
|
||||
|
||||
<nav class="menu menu--footer">
|
||||
{% for page in site.pages %}
|
||||
<a class="menu__link" href="{{ page.url }}">{{ page.title }}</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
10
_src/_includes/header.html
Normal file
10
_src/_includes/header.html
Normal file
@ -0,0 +1,10 @@
|
||||
{% include menu-main.html %}
|
||||
|
||||
<header class="header header--page">
|
||||
<div class="row">
|
||||
<h1 class="header__title">{{ page.title }}</h1>
|
||||
{% if page.subtitle %}
|
||||
<h2 class="header__subtitle">{{ page.subtitle }}</h2>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
24
_src/_includes/menu-main.html
Normal file
24
_src/_includes/menu-main.html
Normal file
@ -0,0 +1,24 @@
|
||||
<nav class="menu menu--main">
|
||||
<div class="row">
|
||||
<div class="menu__logo">
|
||||
<a class="menu__link menu__link--logo" href="/">
|
||||
<svg class="logo" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="menu__items">
|
||||
|
||||
{% for link in site.data.menus.main %}
|
||||
{% assign active = nil %}
|
||||
{% if page.url contains link.url %}
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
|
||||
<a class="menu__link {{ active }}" href="{{ link.url }}">{{ link.title }}</a>
|
||||
{% endfor %}
|
||||
|
||||
<a class="menu__link button button--small button--primary" href="/foundation/">Signup</a>
|
||||
<a class="menu__link button button--small" href="/foundation/">Login</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,9 +1,9 @@
|
||||
{% for caretaker in site.data.caretakers %}
|
||||
|
||||
<div class="caretaker">
|
||||
<div class="caretaker">
|
||||
<a class="caretaker__link" href="{{ caretaker.link }}" rel="external">
|
||||
{{ caretaker.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
{% include scripts.html %}
|
||||
|
||||
</body>
|
||||
|
||||
@ -2,18 +2,11 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
<header class="header header--page">
|
||||
<div class="row">
|
||||
<h1 class="header__title">{{ page.title }}</h1>
|
||||
{% if page.subtitle %}
|
||||
<h2 class="header__subtitle">{{ page.subtitle }}</h2>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
{% include header.html %}
|
||||
|
||||
<main role="main" class="section content content--page {% if page.path contains '.md' %}content--page--markdown{% endif %}">
|
||||
|
||||
<div class="row">
|
||||
<div class="row {% if page.narrow %}row--narrow{% endif%}">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
layout: page
|
||||
|
||||
title: Bylaws
|
||||
|
||||
narrow: true
|
||||
---
|
||||
|
||||
# Definitions
|
||||
|
||||
@ -2,4 +2,6 @@
|
||||
layout: page
|
||||
|
||||
title: Imprint
|
||||
|
||||
narrow: true
|
||||
---
|
||||
|
||||
@ -4,6 +4,9 @@ front_page: true
|
||||
---
|
||||
|
||||
<header class="hero section">
|
||||
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="hero__content row">
|
||||
<hgroup>
|
||||
<h1 class="hero__title">The blockchain database platform
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
layout: page
|
||||
|
||||
title: Jobs
|
||||
|
||||
narrow: true
|
||||
---
|
||||
|
||||
# Internet Policy Intern @ Interplanetary Database Foundation
|
||||
|
||||
@ -2,4 +2,6 @@
|
||||
layout: page
|
||||
|
||||
title: Privacy policy
|
||||
|
||||
narrow: true
|
||||
---
|
||||
|
||||
@ -7,6 +7,7 @@ subtitle: Look sharp and stay consistent
|
||||
description: Look sharp and stay consistent
|
||||
|
||||
css: page-styleguide
|
||||
narrow: true
|
||||
---
|
||||
|
||||
# Typography
|
||||
@ -34,6 +35,24 @@ css: page-styleguide
|
||||
|
||||
# Logo
|
||||
|
||||
Logo can be used with a base class and modifier classes for size & color:
|
||||
|
||||
- `logo`: default logo
|
||||
- `logo--sm`: small version
|
||||
- `logo--lg`: large version
|
||||
- `logo--dark`: dark version
|
||||
- `logo--white`: white version
|
||||
|
||||
<svg class="logo logo--lg" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
|
||||
|
||||
<svg class="logo" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
|
||||
|
||||
<svg class="logo logo--sm" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
|
||||
|
||||
<svg class="logo logo--dark" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
|
||||
|
||||
<svg class="logo logo--white" aria-labelledby="title"><title>Logo IPDB</title><use xlink:href="/assets/img/sprite.svg#logo"></use></svg>
|
||||
|
||||
|
||||
# Components
|
||||
|
||||
|
||||
@ -2,4 +2,6 @@
|
||||
layout: page
|
||||
|
||||
title: IPDB Terms of Service
|
||||
|
||||
narrow: true
|
||||
---
|
||||
|
||||
Loading…
Reference in New Issue
Block a user