Merge branch 'LIGO-95-layout' into 'LIGO-94-feature-cards'
[LIGO-95] Layout and top section See merge request ligolang/ligo!92
This commit is contained in:
Sarah Fowler
commit
560a93c657
@ -13,40 +13,7 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
||||
const Container = CompLibrary.Container;
|
||||
const GridBlock = CompLibrary.GridBlock;
|
||||
|
||||
class HomeSplash extends React.Component {
|
||||
render() {
|
||||
const { siteConfig, language = "" } = this.props;
|
||||
const { baseUrl, docsUrl } = siteConfig;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
|
||||
const langPart = `${language ? `${language}/` : ""}`;
|
||||
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
|
||||
const SplashContainer = props => (
|
||||
<div className="homeContainer">
|
||||
<div className="homeSplashFade">
|
||||
<div className="wrapper homeWrapper">
|
||||
<div className="tabs">
|
||||
<div className="nav-tabs">
|
||||
<div
|
||||
id="tab-group-3-tab-4"
|
||||
className="nav-link active"
|
||||
data-group="group_3"
|
||||
data-tab="tab-group-3-content-4"
|
||||
>
|
||||
PascaLIGO
|
||||
</div>
|
||||
<div
|
||||
className="nav-link"
|
||||
data-group="group_3"
|
||||
data-tab="tab-group-3-content-5"
|
||||
>
|
||||
CameLIGO
|
||||
</div>
|
||||
<div className="nav-link">ReasonLIGO (coming soon) </div>
|
||||
{/* <div id="tab-group-3-tab-5" className="nav-link" data-group="group_3"
|
||||
data-tab="tab-group-3-content-5">Camligo</div> */}
|
||||
</div>
|
||||
<div className="tab-content">
|
||||
const PascalLIGOTab = () => (
|
||||
<div
|
||||
id="tab-group-3-content-4"
|
||||
className="tab-pane active"
|
||||
@ -67,17 +34,15 @@ class HomeSplash extends React.Component {
|
||||
function add (const a : int ; const b : int) : int is
|
||||
<br /> block {"{ skip }"} with a + b<br />
|
||||
<br />
|
||||
function subtract (const a : int ; const b : int) :
|
||||
int is
|
||||
function subtract (const a : int ; const b : int) : int is
|
||||
<br /> block {"{ skip }"} with a - b<br />
|
||||
<br />
|
||||
// real entrypoint that re-routes the flow based on
|
||||
the action provided
|
||||
// real entrypoint that re-routes the flow based on the action
|
||||
provided
|
||||
<br />
|
||||
function main (const p : action ; const s : int) :
|
||||
(list(operation) * int) is
|
||||
<br /> block {"{ skip }"} with ((nil :
|
||||
list(operation)),
|
||||
function main (const p : action ; const s : int) : (list(operation)
|
||||
* int) is
|
||||
<br /> block {"{ skip }"} with ((nil : list(operation)),
|
||||
<br /> case p of
|
||||
<br /> | Increment(n) -> add(s, n)
|
||||
<br /> | Decrement(n) -> subtract(s, n)
|
||||
@ -88,6 +53,9 @@ class HomeSplash extends React.Component {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CamelLIGOTab = () => (
|
||||
<div
|
||||
id="tab-group-3-content-5"
|
||||
className="tab-pane"
|
||||
@ -99,8 +67,7 @@ class HomeSplash extends React.Component {
|
||||
<code className="hljs css language-Pascal">
|
||||
type storage = int <br />
|
||||
<br />
|
||||
(* variant defining pseudo multi-entrypoint actions *){" "}
|
||||
<br />
|
||||
(* variant defining pseudo multi-entrypoint actions *) <br />
|
||||
<br />
|
||||
type action =<br />| Increment of int
|
||||
<br />| Decrement of int
|
||||
@ -110,78 +77,80 @@ class HomeSplash extends React.Component {
|
||||
<br />
|
||||
let subtract (a: int) (b: int) : int = a - b<br />
|
||||
<br />
|
||||
(* real entrypoint that re-routes the flow based on the
|
||||
action provided *)
|
||||
(* real entrypoint that re-routes the flow based on the action
|
||||
provided *)
|
||||
<br />
|
||||
<br />
|
||||
let%entry main (p : action) storage =<br /> let storage
|
||||
=<br /> match p with
|
||||
<br /> | Increment n -> add storage n<br /> | Decrement
|
||||
n -> subtract storage n<br /> in (([] : operation list),
|
||||
storage)
|
||||
let%entry main (p : action) storage =<br /> let storage =<br /> match
|
||||
p with
|
||||
<br /> | Increment n -> add storage n<br /> | Decrement n -> subtract
|
||||
storage n<br /> in (([] : operation list), storage)
|
||||
<br />
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Logo = props => (
|
||||
<div className="projectLogo">
|
||||
<img src={props.img_src} alt="Project Logo" />
|
||||
</div>
|
||||
);
|
||||
|
||||
const ProjectTitle = () => (
|
||||
<h2 className="projectTitle">
|
||||
<small>{siteConfig.tagline}</small>
|
||||
</h2>
|
||||
);
|
||||
|
||||
const PromoSection = props => (
|
||||
<div className="section promoSection">
|
||||
<div className="promoRow">
|
||||
<div className="pluginRowBlock">{props.children}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const Button = props => (
|
||||
<div className="pluginWrapper buttonWrapper">
|
||||
<a className="button" href={props.href} target={props.target}>
|
||||
{props.children}
|
||||
const LinkButton = props => (
|
||||
<a href={props.href} target={props.target}>
|
||||
<button className={props.className}>{props.children}</button>
|
||||
</a>
|
||||
);
|
||||
|
||||
class HomeSplash extends React.Component {
|
||||
render() {
|
||||
const { siteConfig, language = "" } = this.props;
|
||||
const { baseUrl, docsUrl } = siteConfig;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ""}`;
|
||||
const langPart = `${language ? `${language}/` : ""}`;
|
||||
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
|
||||
const SampleCode = props => (
|
||||
<div className="sample-code-container">
|
||||
<div className="sample-code">
|
||||
<div className="tabs">
|
||||
<div className="nav-tabs">
|
||||
<div
|
||||
id="tab-group-3-tab-4"
|
||||
className="nav-link active"
|
||||
data-group="group_3"
|
||||
data-tab="tab-group-3-content-4"
|
||||
>
|
||||
PascaLIGO
|
||||
</div>
|
||||
<div
|
||||
className="nav-link"
|
||||
data-group="group_3"
|
||||
data-tab="tab-group-3-content-5"
|
||||
>
|
||||
CameLIGO
|
||||
</div>
|
||||
<div className="disabled">ReasonLIGO (coming soon) </div>
|
||||
</div>
|
||||
<div className="tab-content">
|
||||
{PascalLIGOTab()}
|
||||
{CamelLIGOTab()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<SplashContainer>
|
||||
<div className="inner">
|
||||
<ProjectTitle siteConfig={siteConfig} />
|
||||
<PromoSection>
|
||||
<Button href={docUrl("setup/installation.html")}>
|
||||
Get Started
|
||||
</Button>
|
||||
<Button
|
||||
href={docUrl(
|
||||
"tutorials/get-started/tezos-taco-shop-smart-contract"
|
||||
)}
|
||||
<div className="home-container">
|
||||
<div className="home-text">
|
||||
<h4 className="tagline-text">{siteConfig.tagline}</h4>
|
||||
<p className="body">{siteConfig.taglineSub}</p>
|
||||
<LinkButton
|
||||
href={docUrl("setup/installation.html")}
|
||||
className="large-primary-button"
|
||||
>
|
||||
Tutorials
|
||||
</Button>
|
||||
<Button href={docUrl("contributors/origin.html")}>
|
||||
Contribute
|
||||
</Button>
|
||||
</PromoSection>
|
||||
Get Started
|
||||
</LinkButton>
|
||||
</div>
|
||||
<SampleCode />
|
||||
</div>
|
||||
</SplashContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -347,7 +316,6 @@ class Index extends React.Component {
|
||||
return (
|
||||
<div className="partners-container hide-small">
|
||||
{PartnerShowcase}
|
||||
{/* <div className="partners-list"></div> */}
|
||||
<div className="partners-text">
|
||||
<h3>Our Partners</h3>
|
||||
<p className="body">
|
||||
@ -376,17 +344,10 @@ class Index extends React.Component {
|
||||
</a>
|
||||
));
|
||||
|
||||
const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
|
||||
|
||||
return (
|
||||
<div className="productShowcaseSection paddingBottom team">
|
||||
<div className="team">
|
||||
<h2>Team</h2>
|
||||
<div className="flex-inline-container">{showcase}</div>
|
||||
{/* <div className="more-users">
|
||||
<a className="button" href={pageUrl('users.html')}>
|
||||
More {siteConfig.title} Users
|
||||
</a>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,11 +1,23 @@
|
||||
{
|
||||
"docs": {
|
||||
"Setup": ["setup/installation", "setup/editor-support"],
|
||||
"Language Basics": ["language-basics/cheat-sheet", "language-basics/types", "language-basics/variables", "language-basics/functions", "language-basics/entrypoints", "language-basics/operators"],
|
||||
"Language Basics": [
|
||||
"language-basics/cheat-sheet",
|
||||
"language-basics/types",
|
||||
"language-basics/variables",
|
||||
"language-basics/functions",
|
||||
"language-basics/entrypoints",
|
||||
"language-basics/operators"
|
||||
],
|
||||
"API": ["api-cli-commands"]
|
||||
},
|
||||
"contributors-docs": {
|
||||
"Introduction": ["contributors/origin", "contributors/philosophy", "contributors/getting-started", "contributors/documentation-and-releases"],
|
||||
"Introduction": [
|
||||
"contributors/origin",
|
||||
"contributors/philosophy",
|
||||
"contributors/getting-started",
|
||||
"contributors/documentation-and-releases"
|
||||
],
|
||||
"Big Picture": [
|
||||
"contributors/big-picture/overview",
|
||||
"contributors/big-picture/front-end",
|
||||
@ -13,9 +25,15 @@
|
||||
"contributors/big-picture/back-end",
|
||||
"contributors/big-picture/vendors"
|
||||
],
|
||||
"Road Map": ["contributors/road-map/short-term", "contributors/road-map/long-term"]
|
||||
"Road Map": [
|
||||
"contributors/road-map/short-term",
|
||||
"contributors/road-map/long-term"
|
||||
]
|
||||
},
|
||||
"tutorials": {
|
||||
"Get Started": ["tutorials/get-started/tezos-taco-shop-smart-contract", "tutorials/get-started/tezos-taco-shop-payout"]
|
||||
"Get Started": [
|
||||
"tutorials/get-started/tezos-taco-shop-smart-contract",
|
||||
"tutorials/get-started/tezos-taco-shop-payout"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -82,7 +82,8 @@ const team = [
|
||||
const siteConfig = {
|
||||
title: "LIGO", // Title for your website.
|
||||
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 statically typed high-level smart-contract language that compiles down to Michelson.",
|
||||
taglineSub: "It seeks to be easy to use, extensible and safe.",
|
||||
url: "https://your-docusaurus-test-site.com", // Your website URL
|
||||
baseUrl: "/", // Base URL for your project */
|
||||
// For github.io type URLs, you would set the url and baseUrl like:
|
||||
|
||||
@ -41,12 +41,20 @@ body,
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
code,
|
||||
/** TODO: code font size is currently 85%; designs have it as 1rem (16px);
|
||||
this breaks some of the tiny-text in the internal pages, so wait until those
|
||||
are fixed to set this to the correct size
|
||||
**/
|
||||
.landing code,
|
||||
.mono {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.625rem;
|
||||
}
|
||||
@ -92,17 +100,11 @@ body,
|
||||
.landing .subhead {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.footnote {
|
||||
.footnote,
|
||||
footnote {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.projectTitle small {
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
.fixedHeaderContainer header .headerTitleWithLogo {
|
||||
display: none;
|
||||
}
|
||||
@ -118,12 +120,7 @@ body,
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.homeContainer {
|
||||
box-shadow: inset 0 -10px 10px -6px rgba(177, 176, 176, 0.2);
|
||||
background: #f6f4f4;
|
||||
}
|
||||
|
||||
.homeContainer .hljs {
|
||||
.hljs {
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
}
|
||||
@ -149,9 +146,9 @@ body,
|
||||
border-bottom: 4px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.homeContainer .tabs .nav-tabs > div:last-of-type {
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: #24292e64;
|
||||
color: #24292e64 !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -165,9 +162,32 @@ body,
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.promoSection .buttonWrapper:first-of-type > a.button {
|
||||
background: #b2210c;
|
||||
color: white;
|
||||
/** Top Section **/
|
||||
.home-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--padding-level-3);
|
||||
}
|
||||
|
||||
.home-text {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.sample-code-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
max-width: 60%;
|
||||
background: url("/img/geo.svg") top right/140px 140px no-repeat,
|
||||
url("/img/geo.svg") bottom left/200px 200px no-repeat;
|
||||
}
|
||||
|
||||
.sample-code {
|
||||
width: 80%;
|
||||
padding: 25px;
|
||||
box-shadow: 0px 0px 70px rgba(13, 15, 51, 0.06);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -179,44 +199,13 @@ blockquote {
|
||||
blockquote code {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/*
|
||||
blockquote a {
|
||||
color: rgba(255,255,255, 0.8);
|
||||
border-bottom: 1px solid rgba(255,255,255, 0.8);
|
||||
}
|
||||
|
||||
blockquote a:hover {
|
||||
color: rgba(255,255,255, 1);
|
||||
border-bottom: 1px solid rgba(255,255,255, 1);
|
||||
} */
|
||||
/*
|
||||
blockquote {
|
||||
background-color: rgba(252, 214, 0, 0.687);
|
||||
border-left-color: rgba(240, 210, 37, 1);
|
||||
color: rgba(0, 0, 0, 0.632);
|
||||
} */
|
||||
|
||||
a {
|
||||
color: rgba(178, 33, 12, 0.8);
|
||||
.landing a {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgba(178, 33, 12, 1);
|
||||
}
|
||||
|
||||
.homeContainer .homeWrapper .projectLogo {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.projectTitle {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.projectTitle small {
|
||||
margin: 0 auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.promoSection .promoRow {
|
||||
@ -240,7 +229,8 @@ a:hover {
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
.features {
|
||||
.features,
|
||||
.team {
|
||||
background: white;
|
||||
margin-top: -40px;
|
||||
position: relative;
|
||||
@ -269,18 +259,6 @@ html {
|
||||
color: #b2210c;
|
||||
}
|
||||
|
||||
.productShowcaseSection.team .logos img {
|
||||
border-radius: 50%;
|
||||
height: 150px;
|
||||
margin-bottom: 0px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.productShowcaseSection.team .logos p {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.toc .toggleNav {
|
||||
margin-top: 12px;
|
||||
}
|
||||
@ -289,6 +267,10 @@ html {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.mainContainer > * {
|
||||
padding: var(--padding-level-4) 0;
|
||||
}
|
||||
|
||||
.tocActive .onPageNav > .toc-headings {
|
||||
padding-top: 24px;
|
||||
}
|
||||
@ -357,6 +339,7 @@ body
|
||||
font-weight: normal;
|
||||
line-height: 1.375rem;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button,
|
||||
@ -385,7 +368,8 @@ body
|
||||
.large-secondary-button,
|
||||
.large-secondary-button:hover {
|
||||
border-radius: 37px;
|
||||
padding: 20px;
|
||||
padding: 5px 20px;
|
||||
min-height: 56px;
|
||||
min-width: 132px;
|
||||
color: var(--color-white);
|
||||
}
|
||||
@ -473,15 +457,16 @@ body
|
||||
color: var(--color-primary-brand);
|
||||
}
|
||||
|
||||
.profileContainer:hover .profileImage {
|
||||
box-shadow: 12px 12px 0px var(--color-primary-brand);
|
||||
}
|
||||
|
||||
.profileImage {
|
||||
max-height: 195px;
|
||||
max-width: 195px;
|
||||
width: 100%;
|
||||
border: var(--color-gray);
|
||||
}
|
||||
.profileImage:hover {
|
||||
box-shadow: 12px 12px 0px var(--color-primary-brand);
|
||||
}
|
||||
|
||||
.flex-inline-container {
|
||||
display: flex;
|
||||
@ -522,6 +507,7 @@ body
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
padding: var(--padding-level-3);
|
||||
margin: var(--padding-level-4) 0;
|
||||
}
|
||||
|
||||
.partners-container a {
|
||||
@ -573,13 +559,29 @@ body
|
||||
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.home-container {
|
||||
flex-direction: column-reverse;
|
||||
margin-top: var(--padding-level-1);
|
||||
}
|
||||
.home-text {
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
padding-top: var(--padding-level-2);
|
||||
}
|
||||
.sample-code-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
@media only screen and (min-width: 1280px) {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1440px) {
|
||||
.landing h4.tagline-text {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1500px) {
|
||||
|
||||
11
gitlab-pages/website/static/img/geo.svg
Normal file
11
gitlab-pages/website/static/img/geo.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg width="283" height="293" viewBox="0 0 283 293" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.5493 9.85961L22.8389 40.1643L44.2426 17.8585L14.5493 9.85961Z" fill="#FC683A"/>
|
||||
<path d="M256.608 227L215 282.348L282.301 293L256.608 227Z" fill="#EFEFEF"/>
|
||||
<circle cx="100" cy="154" r="74" stroke="url(#paint0_linear)" stroke-width="52"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="100" y1="54.0002" x2="100" y2="254" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3AA0FF"/>
|
||||
<stop offset="1" stop-color="#0072DC"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 568 B |
Loading…
Reference in New Issue
Block a user