ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2024-11-22 01:26:52 +01:00
Code Releases Activity

animation & spacing tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-08-29 18:28:23 +02:00
parent 8c87520a96
commit 86df7090de
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -63,10 +63,8 @@ You can make text **bold like so**
Some pages like front page source their content dynamically during site build. This is so we have a single source of truth for content used in multiple places on the site.
### Front page
Content for all sections on front page is coming from a data file:
- [`_src/_data/content-front.yml`](_src/_data/content-front.yml)
- [`_src/_data/content-foundation.yml`](_src/_data/content-foundation.yml)
# Development

0
_src/_assets/img/starbase-bicycle.svg → _src/_assets/img/starbase-mooncycle.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

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

@ -93,7 +93,7 @@ $edge-height: $spacer * 4;
.hero__title {
color: $brand-05;
font-size: $font-size-h2;
margin-bottom: $spacer;
margin-bottom: $spacer / $line-height;
@media ($screen-sm) {
font-size: $font-size-h1 * 1.1;
@ -139,9 +139,9 @@ $edge-height: $spacer * 4;
margin-bottom: -1rem;
}
.starbase__item--bicycle {
margin-bottom: -4.5rem;
animation: bicycle 10s forwards;
.starbase__item--mooncycle {
margin-bottom: -4rem;
animation: bicycle 8s both 1s;
}
@keyframes bicycle {
@ -149,6 +149,11 @@ $edge-height: $spacer * 4;
transform: translate3d(60vw, 0, 0);
}
35%,
60% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100vw, 0, 0);
}

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

@ -37,7 +37,7 @@
margin-bottom: $spacer;
@media ($screen-sm) {
margin-bottom: $spacer / 2;
margin-bottom: $spacer / $line-height;
}
}

1
_src/_assets/scss/ipdb.scss
View File

@ -7,7 +7,6 @@
@import 'buttons';
@import 'media';
@import 'sections';
@import 'hero';
@import 'header';
@import 'menus';
@import 'logo';

3
_src/_assets/scss/page-front.scss
View File

@ -1,4 +1,5 @@
@import 'variables';
@import 'hero';
.section--intro {
.section__description {
@ -35,7 +36,7 @@
.feature__title {
font-size: $font-size-h4;
margin-bottom: $spacer / 2;
margin-bottom: $spacer / $line-height;
}
.connect__title {

2
_src/_data/content-front.yml
View File

@ -17,7 +17,7 @@ intro:
- title: "Store any data, permanently"
text: "IPDB allows you to store data indefinitely. It provides blockchain-style tamper-resistance and database-style queryability to give you the best of both worlds."
- title: "Governed by Caretakers"
text: "The IPDB Foundation is run by its internet-loving Caretakers around the world."
text: "The IPDB Foundation is run by its internet-loving [Caretakers](/foundation/) around the world."
- title: "A Dashboard for your IPDB apps"
text: "Manage your apps, give users access, and get statistical insights about your app’s API usage."

24
_src/index.html
View File

@ -25,18 +25,20 @@ css: page-front
</div>
<div class="starbase">
<div class="row">
<svg class="starbase__item starbase__item--stones" width="234" height="80">
<use xlink:href="/assets/img/sprite.svg#starbase-stones"></use>
</svg>
<div class="starbase-wrap">
<div class="row">
<svg class="starbase__item starbase__item--stones" width="234" height="80">
<use xlink:href="/assets/img/sprite.svg#starbase-stones"></use>
</svg>
<svg class="starbase__item starbase__item--bicycle" width="59" height="31">
<use xlink:href="/assets/img/sprite.svg#starbase-bicycle"></use>
</svg>
<svg class="starbase__item starbase__item--mooncycle" width="59" height="31">
<use xlink:href="/assets/img/sprite.svg#starbase-mooncycle"></use>
</svg>
<svg class="starbase__item starbase__item--towers" width="673" height="389">
<use xlink:href="/assets/img/sprite.svg#starbase-towers"></use>
</svg>
<svg class="starbase__item starbase__item--towers" width="673" height="389">
<use xlink:href="/assets/img/sprite.svg#starbase-towers"></use>
</svg>
</div>
</div>
</div>
@ -83,7 +85,7 @@ css: page-front
<div class="grid__col grid__col--4">
<h1 class="feature__title">{{ feature.title }}</h1>
<p class="feature__text">{{ feature.text }}</p>
<div class="feature__text">{{ feature.text | markdownify }}</div>
</div>
</div>
</div>