ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2024-12-28 07:37:44 +01:00
Code Releases Activity

clipped background component

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-08-24 12:44:40 +02:00
parent e1e7bfc74e
commit 9d0309fbed
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
_src/_assets/scss/_hero.scss
View File

@ -1,6 +1,7 @@
.hero {
background: $brand-02;
padding: 2rem;
padding: $spacer * 2;
min-height: 100vh;
&,
.hero__title,

39
_src/_assets/scss/_sections.scss
View File

@ -1,7 +1,9 @@
//
// All sections
//
.section {
padding-top: $spacer * 2;
padding-bottom: $spacer * 2;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: center;
@ -39,3 +41,38 @@
font-size: $font-size-large;
margin-bottom: 0;
}
//
// Section modifiers
//
$edge-height: $spacer * 5;
.section--background {
background: $brand-05;
position: relative;
margin-top: $edge-height;
margin-bottom: $edge-height;
&:before,
&:after {
content: '';
width: 100%;
height: $edge-height;
display: block;
position: absolute;
left: 0;
background: $brand-05;
}
&:before {
top: -($edge-height);
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
&:after {
top: auto;
bottom: -($edge-height);
clip-path: polygon(100% 0, 0 0, 0 100%);
}
}

6
_src/index.html
View File

@ -3,7 +3,7 @@ layout: base
front_page: true
---
<header class="hero">
<header class="hero section">
<div class="hero__content row">
<hgroup>
<h1 class="hero__title">The blockchain database platform
@ -29,7 +29,7 @@ for the decentralized stack</h1>
</section>
<section class="section section--foundation">
<section class="section section--background section--foundation">
<div class="row">
<header class="section__header">
<h1 class="section__title">IPDB Foundation: human-scale governance</h1>
@ -59,7 +59,7 @@ for the decentralized stack</h1>
</section>
<section class="section section--getstarted">
<section class="section section--background section--getstarted">
<div class="row">
<header class="section__header">
<h1 class="section__title">Get started</h1>