header and footer changes except hamburger menu

This commit is contained in:
keiki 2019-09-28 15:55:02 +02:00
parent 9455d871a1
commit 128519e281
5 changed files with 182 additions and 205 deletions

5
.gitignore vendored
View File

@ -5,10 +5,5 @@ dune-project
cache/*
Version.ml
/_opam/
<<<<<<< HEAD
/*.pp.ligo
<<<<<<< HEAD
**/.DS_Store
=======
**/.DS_Store
>>>>>>> [LIGO-93] redesign profile pics

View File

@ -24,57 +24,53 @@ class Footer extends React.Component {
render() {
return (
<footer className="nav-footer" id="footer">
<section className="sitemap">
<a className="nav-home"></a>
<div>
<h5>Docs</h5>
<a href={this.docUrl('setup-installation.html', this.props.language)}>
Installation
</a>
<a href={this.docUrl('api-cli-commands.html', this.props.language)}>
CLI Commands
</a>
<a href={this.docUrl('contributors/origin.html', this.props.language)}>
Contribute
</a>
<a href="/odoc">
Api Documentation
</a>
<section className="footer-wrapper">
<div className="sitemap">
<a className="nav-home"></a>
<div>
<h5>Docs</h5>
<a href={this.docUrl('setup-installation.html', this.props.language)}>
Installation
</a>
<a href={this.docUrl('api-cli-commands.html', this.props.language)}>
CLI Commands
</a>
<a href={this.docUrl('contributors/origin.html', this.props.language)}>
Contribute
</a>
<a href="/odoc">
Api Documentation
</a>
</div>
<div>
<h5>Community</h5>
<a
href="https://tezos.stackexchange.com/questions/tagged/ligo"
target="_blank"
rel="noreferrer noopener">
Tezos Stack Exchange
</a>
<a
href="https://discord.gg/9rhYaEt"
target="_blank"
rel="noreferrer noopener">
Discord
</a>
</div>
<div>
<h5>More</h5>
<a href={`${this.props.config.baseUrl}blog`}>Blog</a>
<a href={this.docUrl('tutorials/get-started/tezos-taco-shop-smart-contract.html', this.props.language)}>Tutorials</a>
<a href={`${this.props.config.repoUrl}`}>Gitlab</a>
</div>
</div>
<div>
<h5>Community</h5>
<a
href="https://tezos.stackexchange.com/questions/tagged/ligo"
target="_blank"
rel="noreferrer noopener">
Tezos Stack Exchange
</a>
<a
href="https://discord.gg/9rhYaEt"
target="_blank"
rel="noreferrer noopener">
Discord
</a>
</div>
<div>
<h5>More</h5>
<a href={`${this.props.config.baseUrl}blog`}>Blog</a>
<a href={this.docUrl('tutorials/get-started/tezos-taco-shop-smart-contract.html', this.props.language)}>Tutorials</a>
<a href={`${this.props.config.repoUrl}`}>Gitlab</a>
<div className="copyright">
{this.props.config.copyright}
</div>
</section>
<section className="copyright">
Website built with <a
href="https://docusaurus.io/"
target="_blank"
rel="noreferrer noopener">
Docusaurus
</a> by Facebook.
<div>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> & <a href="https://www.flaticon.com/authors/lucy-g" title="Lucy G">Lucy G</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
{this.props.config.copyright}
</section>
</footer>
);
}

View File

@ -106,109 +106,25 @@ class HomeSplash extends React.Component {
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> */}
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="tab-content">
<div
id="tab-group-3-content-4"
className="tab-pane active"
data-group="group_3"
tabIndex="-1"
>
<div>
<span>
<pre>
<code className="hljs css language-Pascal">
// variant defining pseudo multi-entrypoint actions
<br />
type action is
<br />| Increment of int
<br />| Decrement of int
<br />
<br />
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
<br /> block {"{ skip }"} with a - b<br />
<br />
// 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)),
<br /> case p of
<br /> | Increment(n) -&gt; add(s, n)
<br /> | Decrement(n) -&gt; subtract(s, n)
<br /> end)
<br />
</code>
</pre>
</span>
</div>
</div>
<div
id="tab-group-3-content-5"
className="tab-pane"
data-group="group_3"
tabIndex="-1"
>
<div>
<pre>
<code className="hljs css language-Pascal">
type storage = int <br />
<br />
(* variant defining pseudo multi-entrypoint actions *){" "}
<br />
<br />
type action =<br />| Increment of int
<br />| Decrement of int
<br />
<br />
let add (a: int) (b: int) : int = a + b<br />
<br />
let subtract (a: int) (b: int) : int = a - b<br />
<br />
(* 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)
<br />
</code>
</pre>
</div>
</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>
@ -216,32 +132,22 @@ class HomeSplash extends React.Component {
{PascalLIGOTab()}
{CamelLIGOTab()}
</div>
{props.children}
</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"
)}
>
Tutorials
</Button>
<Button href={docUrl("contributors/origin.html")}>
Contribute
</Button>
</PromoSection>
<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"
>
Get Started
</LinkButton>
</div>
<SampleCode />
</div>
@ -340,23 +246,20 @@ class Index extends React.Component {
{[
{
content:
"Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
image: `${baseUrl}img/edit.svg`,
imageAlign: "top",
title: "Syntax Agnostic"
"Write types, then code, and benefit from the safety coming from type systems.",
image: `${baseUrl}img/strong-type-system.svg`,
title: "Strong Type System"
},
{
content:
"Write types, then code, and benefit from the safety coming from type systems.",
image: `${baseUrl}img/lightning.svg`,
imageAlign: "top",
title: "Strong Type System"
"Write in PascaLIGO (pascal-like syntax) or CameLIGO (caml-like syntax). If you know OCaml, you can also add your own syntax.",
image: `${baseUrl}img/syntax-agnostic.svg`,
title: "Syntax Agnostic"
},
{
content: "With Granary, you can use LIGO as a lib from NodeJS.",
image: `${baseUrl}img/puzzle.svg`,
imageAlign: "top",
image: `${baseUrl}img/easy-integration.svg`,
title: "Easy Integration"
}
].map(FeatureCard)}
@ -410,8 +313,6 @@ class Index extends React.Component {
</a>
));
const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
return (
<div className="partners-container hide-small">
{PartnerShowcase}
@ -443,17 +344,10 @@ class Index extends React.Component {
</a>
));
const pageUrl = page => baseUrl + (language ? `${language}/` : "") + page;
return (
<div className="productShowcaseSection paddingBottom team">
<h1 className="sectionTitle">Team</h1>
<div className="team-container">{showcase}</div>
{/* <div className="more-users">
<a className="button" href={pageUrl('users.html')}>
More {siteConfig.title} Users
</a>
</div> */}
<div className="team">
<h2>Team</h2>
<div className="flex-inline-container">{showcase}</div>
</div>
);
};

View File

@ -115,7 +115,6 @@ const siteConfig = {
team,
/* path to images for header/footer */
headerIcon: "img/logo.svg",
footerIcon: "img/logo.svg",
favicon: "img/logo.svg",
@ -140,7 +139,7 @@ const siteConfig = {
*/
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
copyright: `Copyright © ${new Date().getFullYear()} Marigold`,
copyright: `© ${new Date().getFullYear()} LIGO. All rights reserved.`,
highlight: {
// Highlight.js theme to use for syntax highlighting in code blocks.

View File

@ -105,6 +105,36 @@ footnote {
font-size: 0.75rem;
}
.projectTitle small {
max-width: 700px;
text-align: center;
margin: 0 auto;
margin-top: 0.7em;
}
.fixedHeaderContainer {
background-color: #ffffff;
color: var(--color-primary-text);
}
.fixedHeaderContainer a {
color: var(--color-primary-text);
}
.fixedHeaderContainer .headerWrapper header a:nth-child(2) {
background-color: #EFEFEF;
margin-left: 50px;
padding: 4px 7px;
font-weight: normal;
}
.fixedHeaderContainer .headerWrapper header h3 {
margin: 0;
color: var(--color-primary-text);
text-decoration: none;
}
.fixedHeaderContainer header .headerTitleWithLogo {
display: none;
}
@ -113,8 +143,40 @@ footnote {
background: var(--color-primary-text);
}
.nav-footer .copyright {
text-align: left;
margin-left: 92px;
margin-top: 3em;
border-top: 1px solid white;
padding-top: 3em;
margin-right: 92px;
}
.nav-footer .footer-wrapper {
margin: 0 auto 3em;
max-width: 1080px;
}
.nav-footer .sitemap {
margin: 0;
}
.navigationSlider .slidingNav {
background: #1a1a1a;
background: white;
}
.navigationSlider .slidingNav ul {
background: white;
color: var(--color-primary-text) !important;
}
.navigationSlider .slidingNav ul li > a:focus,
.navigationSlider .slidingNav ul li > a:hover,
.navigationSlider .slidingNav ul li.siteNavItemActive > a,
.navigationSlider .slidingNav ul li.siteNavGroupActive > a {
background-color: white;
color: var(--color-primary-brand) !important;
}
/** Top Section **/
@ -459,6 +521,10 @@ body
padding: 0 var(--padding-level-1);
}
.profileContainer a {
color: var(--color-primary-text);
}
.profileContainer:hover {
color: var(--color-primary-brand);
}
@ -524,10 +590,6 @@ body
background-color: var(--color-light-gray);
}
.card:hover {
background-color: var(--color-light-blue);
}
.card-text {
text-align: center;
}
@ -554,6 +616,16 @@ body
border-left: 5px solid var(--color-primary-brand);
}
@media only screen and (min-width: 1024px) {
.navigationSlider .slidingNav ul li a {
color: #0D0F33;
}
.navigationSlider .slidingNav ul li a:hover {
color: #3AA0FF;
}
}
@media (min-width: 560px) and (max-width: 768px) {
/** Special rules to reorient feature cards at only one screen size**/
.card {
@ -572,6 +644,10 @@ body
.profileContainer {
max-width: 30%;
}
.headerWrapper header a:nth-child(2) {
display: none;
}
}
@media (max-width: 560px) {
@ -588,7 +664,21 @@ body
}
}
@media (max-width: 735px) {
.nav-footer .sitemap {
max-width: 90%;
margin: 0 auto;
}
.nav-footer .copyright {
max-width: 90%;
text-align: left;
margin: 3em auto;
}
}
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}
@media only screen and (max-width: 1023px) {
@ -607,7 +697,10 @@ body
}
}
@media only screen and (min-width: 1280px) {
@media only screen and (max-width: 1023px) {
.reactNavSearchWrapper input#search_input_react {
background-color: rgba(0, 0, 0, 0.2);
}
}
@media only screen and (min-width: 1440px) {