From 9487d21536036171c8beb3358531ec2d979cda50 Mon Sep 17 00:00:00 2001 From: Sander Spies Date: Sat, 28 Sep 2019 10:19:22 +0200 Subject: [PATCH 1/4] - Prevent jumping around of elements. - Set a maximum width for the content. - Enlarge certain elements for mobile --- gitlab-pages/website/static/css/custom.css | 59 +++++++++++++++------- 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/gitlab-pages/website/static/css/custom.css b/gitlab-pages/website/static/css/custom.css index 5a41e4e9f..d05420da8 100644 --- a/gitlab-pages/website/static/css/custom.css +++ b/gitlab-pages/website/static/css/custom.css @@ -109,6 +109,10 @@ footnote { display: none; } +.fixedHeaderContainer { + left: 0; +} + .nav-footer { background: var(--color-primary-text); } @@ -122,11 +126,10 @@ footnote { display: flex; align-items: center; justify-content: space-around; - padding: var(--padding-level-3); } .home-text { - width: 35%; + flex: 1; } .sample-code-container { @@ -194,6 +197,11 @@ blockquote { color: rgba(255, 255, 255, 1); } +.tab-pane { + height: 550px; + overflow-x: auto; +} + blockquote code { opacity: 0.5; } @@ -261,6 +269,11 @@ html { background: white; } +body { + margin: 0 auto; + max-width: 1500px; +} + .copyright a { color: #b2210c; } @@ -563,33 +576,45 @@ body } } -@media only screen and (min-device-width: 360px) and (max-device-width: 736px) { -} - -@media only screen and (max-width: 1023px) { +@media only screen and (min-device-width: 360px){ .home-container { - flex-direction: column-reverse; - margin-top: var(--padding-level-1); - } - .home-text { + flex-direction: column; align-content: center; - text-align: center; - width: 90%; - padding-top: var(--padding-level-2); } + + .home-text { + text-align: center; + padding: var(--padding-level-2) 0; + } + .sample-code-container { width: 90%; } + + .sample-code { + padding: 0; + width: 100%; + } } @media only screen and (min-width: 1280px) { -} + .home-container { + flex-direction: row; + margin: var(--padding-level-1); + max-width: 90%; + padding: var(--padding-level-3); + } -@media only screen and (min-width: 1440px) { .landing h4.tagline-text { font-size: 2.25rem; } -} -@media only screen and (min-width: 1500px) { + .sample-code-container { + max-width: 60%; + } + + .sample-code { + padding: 25px; + width: 80%; + } } From 5749123bf65ad37418bf556f944c0f5021f83467 Mon Sep 17 00:00:00 2001 From: Sander Spies Date: Sat, 28 Sep 2019 18:00:56 +0200 Subject: [PATCH 2/4] Add syntax highlighting for Cameligo. --- gitlab-pages/website/pages/en/index.js | 131 +++++++++++---------- gitlab-pages/website/static/css/custom.css | 58 ++++++++- 2 files changed, 128 insertions(+), 61 deletions(-) diff --git a/gitlab-pages/website/pages/en/index.js b/gitlab-pages/website/pages/en/index.js index 8c9cac7de..2b491ded2 100644 --- a/gitlab-pages/website/pages/en/index.js +++ b/gitlab-pages/website/pages/en/index.js @@ -9,10 +9,73 @@ const React = require("react"); const CompLibrary = require("../../core/CompLibrary.js"); +const hljs = require("highlight.js"); + const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock; +const pascaligoHighlighting = ` +function pascaligo(hljs) { + return { + case_insensitive: true, + keywords: 'and begin block case const contains down else end fail for ' + + 'from function if in is list map mod nil not of or patch ' + + 'procedure record remove set skip step then to type var while' + , + literal: 'true false unit int string some none', + lexemes: '[a-z_]\\w*!?' + + } +} +` + +const pre = "```"; + +const pascaligoExample = `${pre}pascaligo +// variant defining pseudo multi-entrypoint actions +type action is + | Increment + | Decrement + +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 cameligoExample = `${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 PascalLIGOTab = () => (
( data-group="group_3" tabIndex="-1" > -
- - 
-          
-            // 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)
-            

-          
-
- -
+ {pascaligoExample}
); @@ -62,33 +94,7 @@ const CamelLIGOTab = () => ( data-group="group_3" tabIndex="-1" > -
- 
-        
-          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)
-          

-        
-
-
+ {cameligoExample} ); @@ -134,6 +140,11 @@ class HomeSplash extends React.Component { + + ); @@ -319,7 +330,7 @@ class Index extends React.Component {

Our Partners

- We are not alone in this world -- here're some guys who support us + We are not alone in this world -- here're some people who support us

diff --git a/gitlab-pages/website/static/css/custom.css b/gitlab-pages/website/static/css/custom.css index d05420da8..79a84ead1 100644 --- a/gitlab-pages/website/static/css/custom.css +++ b/gitlab-pages/website/static/css/custom.css @@ -199,7 +199,6 @@ blockquote { .tab-pane { height: 550px; - overflow-x: auto; } blockquote code { @@ -618,3 +617,60 @@ body width: 80%; } } + + +/* code highlights */ +.hljs { + display:block; + overflow-x:hidden; + padding:.5em; + background:white; + color:black + } + .hljs-comment, + .hljs-quote, + .hljs-variable { + color:#008000 + } + .hljs-keyword, + .hljs-selector-tag, + .hljs-built_in, + .hljs-name, + .hljs-tag { + color:#00f + } + .hljs-string, + .hljs-title, + .hljs-section, + .hljs-attribute, + .hljs-literal, + .hljs-template-tag, + .hljs-template-variable, + .hljs-type, + .hljs-addition { + color:#a31515 + } + .hljs-deletion, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-meta { + color:#2b91af + } + .hljs-doctag { + color:#808080 + } + .hljs-attr { + color:#f00 + } + .hljs-symbol, + .hljs-bullet, + .hljs-link { + color:#00b0e8 + } + .hljs-emphasis { + font-style:italic + } + .hljs-strong { + font-weight:bold + } + \ No newline at end of file From 4f409cfa1f0aa0aa3faf2a62052f4a4a671dbb69 Mon Sep 17 00:00:00 2001 From: Sander Spies Date: Sat, 28 Sep 2019 18:00:56 +0200 Subject: [PATCH 3/4] Add syntax highlighting for Cameligo. --- gitlab-pages/website/pages/en/index.js | 131 +++++++++++---------- gitlab-pages/website/static/css/custom.css | 58 ++++++++- 2 files changed, 128 insertions(+), 61 deletions(-) diff --git a/gitlab-pages/website/pages/en/index.js b/gitlab-pages/website/pages/en/index.js index 8c9cac7de..0f63faeb1 100644 --- a/gitlab-pages/website/pages/en/index.js +++ b/gitlab-pages/website/pages/en/index.js @@ -9,10 +9,73 @@ const React = require("react"); const CompLibrary = require("../../core/CompLibrary.js"); +const hljs = require("highlight.js"); + const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock; +const pascaligoHighlighting = ` +function pascaligo(hljs) { + return { + case_insensitive: true, + keywords: 'and begin block case const contains down else end fail for ' + + 'from function if in is list map mod nil not of or patch ' + + 'procedure record remove set skip step then to type var while' + , + literal: 'true false unit int string some none', + lexemes: '[a-z_]\\w*!?' + + } +} +` + +const pre = "```"; + +const pascaligoExample = `${pre}pascaligo +// variant defining pseudo multi-entrypoint actions +type action is + | Increment + | Decrement + +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 cameligoExample = `${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 PascalLIGOTab = () => (
( data-group="group_3" tabIndex="-1" > -
- - 
-          
-            // 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)
-            

-          
-
- -
+ {pascaligoExample}
); @@ -62,33 +94,7 @@ const CamelLIGOTab = () => ( data-group="group_3" tabIndex="-1" > -
- 
-        
-          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)
-          

-        
-
-
+ {cameligoExample} ); @@ -134,6 +140,11 @@ class HomeSplash extends React.Component { + + ); @@ -319,7 +330,7 @@ class Index extends React.Component {

Our Partners

- We are not alone in this world -- here're some guys who support us + We are not alone in this world -- here're some people who support us

diff --git a/gitlab-pages/website/static/css/custom.css b/gitlab-pages/website/static/css/custom.css index d05420da8..79a84ead1 100644 --- a/gitlab-pages/website/static/css/custom.css +++ b/gitlab-pages/website/static/css/custom.css @@ -199,7 +199,6 @@ blockquote { .tab-pane { height: 550px; - overflow-x: auto; } blockquote code { @@ -618,3 +617,60 @@ body width: 80%; } } + + +/* code highlights */ +.hljs { + display:block; + overflow-x:hidden; + padding:.5em; + background:white; + color:black + } + .hljs-comment, + .hljs-quote, + .hljs-variable { + color:#008000 + } + .hljs-keyword, + .hljs-selector-tag, + .hljs-built_in, + .hljs-name, + .hljs-tag { + color:#00f + } + .hljs-string, + .hljs-title, + .hljs-section, + .hljs-attribute, + .hljs-literal, + .hljs-template-tag, + .hljs-template-variable, + .hljs-type, + .hljs-addition { + color:#a31515 + } + .hljs-deletion, + .hljs-selector-attr, + .hljs-selector-pseudo, + .hljs-meta { + color:#2b91af + } + .hljs-doctag { + color:#808080 + } + .hljs-attr { + color:#f00 + } + .hljs-symbol, + .hljs-bullet, + .hljs-link { + color:#00b0e8 + } + .hljs-emphasis { + font-style:italic + } + .hljs-strong { + font-weight:bold + } + \ No newline at end of file From cb00dd2eaccebe623299b553f9478b4addca4064 Mon Sep 17 00:00:00 2001 From: Sander Spies Date: Sat, 28 Sep 2019 23:26:17 +0200 Subject: [PATCH 4/4] Fix pascaligo highlighting. --- gitlab-pages/website/pages/en/index.js | 72 +++++++++++++++----------- 1 file changed, 41 insertions(+), 31 deletions(-) diff --git a/gitlab-pages/website/pages/en/index.js b/gitlab-pages/website/pages/en/index.js index 0f63faeb1..51f827e80 100644 --- a/gitlab-pages/website/pages/en/index.js +++ b/gitlab-pages/website/pages/en/index.js @@ -15,49 +15,64 @@ const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ const Container = CompLibrary.Container; const GridBlock = CompLibrary.GridBlock; -const pascaligoHighlighting = ` function pascaligo(hljs) { return { - case_insensitive: true, - keywords: 'and begin block case const contains down else end fail for ' + - 'from function if in is list map mod nil not of or patch ' + - 'procedure record remove set skip step then to type var while' - , - literal: 'true false unit int string some none', - lexemes: '[a-z_]\\w*!?' - + // case_insensitive: true, + beginKeywords: '', + keywords: { + keyword: 'and begin block case const contains down else end fail for ' + + 'from function if in is list map mod nil not of or patch ' + + 'procedure record remove set skip step then to type var while with', + literal: 'true false unit int string some none bool nat list' + }, + lexemes: '[a-zA-Z][a-zA-Z0-9_]*', + contains: [ + hljs.C_LINE_COMMENT_MODE, + + { + className: 'type', + begin: /[A-Z][a-z]+/ + }, + { + begin: /[*+-:;\(\)\{\}|\>\<]/, + // className: 'ignore' + } + ] } } -` + +hljs.registerLanguage('pascaligo', pascaligo); + const pre = "```"; const pascaligoExample = `${pre}pascaligo // variant defining pseudo multi-entrypoint actions type action is - | Increment - | Decrement +| Increment of int +| Decrement of int -function add(const a: int ; const b: int): int is - block { skip } with a + b +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 +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 +// 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} `; + end) +${pre}`; const cameligoExample = `${pre}ocaml type storage = int (* variant defining pseudo multi-entrypoint actions *) - type action = | Increment of int | Decrement of int @@ -67,14 +82,14 @@ 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 *) + 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} `; +${pre}`; const PascalLIGOTab = () => (
- - - + ); return (