status-im/subspace-docs
2
0
Fork 0
mirror of https://github.com/status-im/subspace-docs.git synced 2025-02-08 02:43:25 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #3 from status-im/improve_frontpage_styling

Browse Source 
improve frontpage fonts, margins, etc..
This commit is contained in:
Iuri Matias 2019-10-09 07:40:26 +09:00 committed by GitHub
commit 490548c1a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.vuepress/components/code1.vue
View File

@ -1,17 +1,17 @@
<template lang="html">
<div>
<div id="intro">
<div class="code-container">
<div class="code-text">
<strong>Event Tracking & Event Sourcing</strong>
<h3>Event Tracking & Event Sourcing</h3>
You can track events and react to their values. With Subspace observables doing event sourcing is easy.
</div>
<div class="code-content">
<div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $average<span class="token punctuation">,</span> $latest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@status-im/subspace"</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> rating$ <span class="token operator">=</span> Product<span class="token punctuation">.</span>events<span class="token punctuation">.</span><span class="token function">Rating</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"rating"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> rating$ <span class="token operator">=</span> Product<span class="token punctuation">.</span>events<span class="token punctuation">.</span><span class="token function">Rating</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"rating"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$latest</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">$average</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">rating</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"average rating of the last 5 events is "</span> <span class="token operator">+</span> rating<span class="token punctuation">)</span>
@ -23,7 +23,7 @@
<div class="code-container">
<div class="code-text">
<strong>Tracking State</strong>
<h3>Tracking State</h3>
You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.
</div>
<div class="code-content">
@ -37,7 +37,7 @@
<div class="code-container">
<div class="code-text">
<strong>Tracking balances</strong>
<h3>Tracking balances</h3>
You can also track changes in both ETH and ERC20 token balances
</div>
<div class="code-content">
@ -56,7 +56,7 @@
<div class="code-container">
<div class="code-text">
<strong>React Integration</strong>
<h3>React Integration</h3>
Subspace can make any react component compatible with observables so you easily reactive components
</div>
<div class="code-content">

36
.vuepress/styles/index.styl
View File

@ -11,30 +11,60 @@ body {
.code-container {
display: flex;
flex-wrap: wrap;
margin-top: 80px;
}
.code-container + .code-container {
margin-top: 10px;
margin-top: 80px;
}
.code-text {
display: block;
flex-basis: 30%;
padding: 13px 2%;
padding: 13px 4%;
padding-left: 0px !important;
text-align: justify;
color: black;
line-height: 29px;
}
.code-content {
display: block;
width: 66%;
font-size: 16.5px;
}
@media screen and (max-width: 800px) {
@media screen and (max-width: 1000px) {
.code-text {
flex-basis: 100%;
margin-right: 20px;
padding-left: 0px !important;
line-height: 29px;
}
.code-content {
width: 100%;
}
}
.home {
max-width: 1220px !important;
}
#intro {
font-size: 17px;
h3 {
font-size: 25px;
line-height: 32.5px;
}
}
.feature {
p {
color: black !important;
font-size: 17px;
font-weight: 400;
line-height: 29px;
}
}