Homepage improvements

This commit is contained in:
Sander Spies 2019-09-30 15:42:33 +02:00
parent 23c9aebf2e
commit c71c246194
3 changed files with 93 additions and 23 deletions

View File

@ -46,6 +46,34 @@ hljs.registerLanguage('pascaligo', pascaligo);
const pre = "```"; const pre = "```";
const pascaligoExampleSmall = `${pre}pascaligo
// variant defining pseudo multi-entrypoint
// actions
type action is
| Increment of int
| Decrement of int
function add
(const a: int; const b: int): int is
block { skip } with a + b
function subtract
(const a: int; const b: int): int
is block { skip } with a - b
// real entrypoint that re-routes the flow
// based on the action provided
function main
(const p: action; const s: int):
(list(operation) * int) is
block { skip }
with ((nil : list(operation)),
case p of
| Increment(n) -> add(s, n)
| Decrement(n) -> subtract(s, n)
end)
${pre}`;
const pascaligoExample = `${pre}pascaligo const pascaligoExample = `${pre}pascaligo
// variant defining pseudo multi-entrypoint actions // variant defining pseudo multi-entrypoint actions
type action is type action is
@ -68,6 +96,28 @@ function main (const p : action ; const s : int) :
| Decrement(n) -> subtract(s, n) | Decrement(n) -> subtract(s, n)
end) end)
${pre}`; ${pre}`;
const cameligoExampleSmall = `${pre}ocaml
type storage = int
(* variant defining pseudo multi-entrypoint
actions *)
type action =
| Increment of int
| Decrement of int
let add (a: int) (b: int): int = a + b
let subtract (a: int) (b: int): int = a - b
(* real entrypoint that re-routes the flow
based on the action provided *)
let%entry main(p : action) storage =
let storage =
match p with
| Increment n -> add storage n
| Decrement n -> subtract storage n
in (([] : operation list), storage)
${pre}`;
const cameligoExample = `${pre}ocaml const cameligoExample = `${pre}ocaml
type storage = int type storage = int
@ -94,10 +144,11 @@ ${pre}`;
const PascalLIGOTab = () => ( const PascalLIGOTab = () => (
<div <div
id="tab-group-3-content-4" id="tab-group-3-content-4"
className="tab-pane active" className="tab-pane active code-snippet"
data-group="group_3" data-group="group_3"
tabIndex="-1" tabIndex="-1"
> >
<MarkdownBlock>{pascaligoExampleSmall}</MarkdownBlock>
<MarkdownBlock>{pascaligoExample}</MarkdownBlock> <MarkdownBlock>{pascaligoExample}</MarkdownBlock>
</div> </div>
); );
@ -105,10 +156,11 @@ const PascalLIGOTab = () => (
const CamelLIGOTab = () => ( const CamelLIGOTab = () => (
<div <div
id="tab-group-3-content-5" id="tab-group-3-content-5"
className="tab-pane" className="tab-pane code-snippet"
data-group="group_3" data-group="group_3"
tabIndex="-1" tabIndex="-1"
> >
<MarkdownBlock>{cameligoExampleSmall}</MarkdownBlock>
<MarkdownBlock>{cameligoExample}</MarkdownBlock> <MarkdownBlock>{cameligoExample}</MarkdownBlock>
</div> </div>
); );
@ -161,6 +213,9 @@ class HomeSplash extends React.Component {
return ( return (
<div className="home-container"> <div className="home-container">
<div className="home-text"> <div className="home-text">
<div className="projectTitle">
<img alt={siteConfig.title} src={`${siteConfig.baseUrl}img/logo.svg`} />
</div>
<h4 className="tagline-text">{siteConfig.tagline}</h4> <h4 className="tagline-text">{siteConfig.tagline}</h4>
<p className="body">{siteConfig.taglineSub}</p> <p className="body">{siteConfig.taglineSub}</p>
<LinkButton <LinkButton

View File

@ -82,7 +82,8 @@ const team = [
const siteConfig = { const siteConfig = {
title: "LIGO", // Title for your website. title: "LIGO", // Title for your website.
tagline: tagline:
"LIGO is a statically typed high-level smart-contract language that compiles down to Michelson. It seeks to be easy to use, extensible and safe.", "LIGO is a friendly smart-contract language for Tezos",
taglineSub: "Michelson was never so easy",
url: "https://your-docusaurus-test-site.com", // Your website URL url: "https://your-docusaurus-test-site.com", // Your website URL
baseUrl: "/", // Base URL for your project */ baseUrl: "/", // Base URL for your project */
// For github.io type URLs, you would set the url and baseUrl like: // For github.io type URLs, you would set the url and baseUrl like:

View File

@ -191,6 +191,7 @@ footnote {
} }
.home-text { .home-text {
text-align: center;
flex: 1; flex: 1;
} }
@ -204,9 +205,9 @@ footnote {
} }
.sample-code { .sample-code {
border: solid 1px lightgray;
width: 80%; width: 80%;
padding: 25px; padding: 10px;
box-shadow: 0px 0px 70px rgba(13, 15, 51, 0.06);
background-color: white; background-color: white;
} }
@ -259,10 +260,6 @@ blockquote {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.tab-pane {
height: 550px;
}
blockquote code { blockquote code {
opacity: 0.5; opacity: 0.5;
} }
@ -628,7 +625,21 @@ body
border-left: 5px solid var(--color-primary-brand); border-left: 5px solid var(--color-primary-brand);
} }
.code-snippet > div:nth-child(2) {
display: none;
}
@media only screen and (min-width: 1024px) { @media only screen and (min-width: 1024px) {
.code-snippet > div:nth-child(2) {
display: block;
}
.code-snippet > div:nth-child(1) {
display: none;
}
}
@media only screen and (min-width: 768px) {
.navigationSlider .slidingNav ul li a { .navigationSlider .slidingNav ul li a {
color: #0D0F33; color: #0D0F33;
} }
@ -636,6 +647,11 @@ body
.navigationSlider .slidingNav ul li a:hover { .navigationSlider .slidingNav ul li a:hover {
color: #3AA0FF; color: #3AA0FF;
} }
.tab-pane {
height: 500px;
}
} }
@media (min-width: 560px) and (max-width: 768px) { @media (min-width: 560px) and (max-width: 768px) {
@ -701,11 +717,11 @@ body
.home-text { .home-text {
text-align: center; text-align: center;
padding: var(--padding-level-2) 0; padding: var(--padding-level-2);
} }
.sample-code-container { .sample-code-container {
width: 90%; width: 100%;
} }
.sample-code { .sample-code {
@ -721,24 +737,22 @@ body
max-width: 90%; max-width: 90%;
padding: var(--padding-level-3); padding: var(--padding-level-3);
} }
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
.reactNavSearchWrapper input#search_input_react { .reactNavSearchWrapper input#search_input_react {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.landing code {
font-size: .8rem;
} }
.landing h4.tagline-text { .landing h4.tagline-text {
font-size: 2.25rem; font-size: 1.5rem;
} }
.sample-code-container {
max-width: 60%;
}
.sample-code {
padding: 25px;
width: 80%;
}
} }
@ -748,7 +762,7 @@ body
overflow-x:hidden; overflow-x:hidden;
padding:.5em; padding:.5em;
background:white; background:white;
color:black color:black;
} }
.hljs-comment, .hljs-comment,
.hljs-quote, .hljs-quote,