Commit 6728e397 authored by Yann REGIS-GIANAS's avatar Yann REGIS-GIANAS

A draft CSS for Menhir website.

parent beacf7e1
Pipeline #60295 passed with stages
in 28 seconds
www/affichage.jpg

87.6 KB | W: | H:

www/affichage.jpg

74.4 KB | W: | H:

www/affichage.jpg
www/affichage.jpg
www/affichage.jpg
www/affichage.jpg
  • 2-up
  • Swipe
  • Onion skin
......@@ -5,14 +5,10 @@
<html xml:lang="en" lang="en">
<head>
<style type="text/css">
body { padding: 40px 40px; }
tt { font-family:monospace,monospace; font-size:1em; font-weight:800; }
li { margin-bottom: 10px; }
img.displayed { display: block; margin-left: auto; margin-right: auto }
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menhir</title>
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
......@@ -20,17 +16,19 @@
<!--------------------------------------------------------------------------->
<img src="affichage.jpg" alt="Your dearest desire: a menhir" class="displayed"/>
<div class="contents">
<h1>Menhir</h1>
<h1 class="bar">Menhir</h1>
<p>
<div class="flexbox">
<div class="card card-1">
<h2 class="card-title">What is it?</h2>
<p class="card-contents">
Menhir is an LR(1) parser generator for
<a href="http://ocaml.org/">OCaml</a>:
it compiles LR(1) grammars down to OCaml code.
</p>
<p>
<p class="card-contents">
Menhir replaces
<a href="http://caml.inria.fr/pub/docs/manual-ocaml/lexyacc.html#sec278">ocamlyacc</a>.
Legacy grammars can be compiled by Menhir,
......@@ -39,37 +37,49 @@ with a few caveats, described in the
(<a href="doc/manual.html">HTML</a>;
<a href="doc/manual.pdf">PDF</a>).
</p>
</div>
<p>
<div class="card card-1">
<h2 class="card-title">How to get it?</h2>
<p class="card-contents">
Menhir is available through <a href="http://opam.ocaml.org/">opam</a>,
OCaml's package manager. Type <tt>opam
install menhir</tt>.
</p>
<p>
<p class="card-contents">
Menhir's source code is hosted in this
<a href="https://gitlab.inria.fr/fpottier/menhir/">repository</a>
(<a href="https://gitlab.inria.fr/fpottier/menhir/tags">releases</a>;
<a href="https://gitlab.inria.fr/fpottier/menhir/blob/master/CHANGES.md">changes</a>).
</p>
</div>
<p>
<div class="card card-1">
<h2 class="card-title">Do you need help?</h2>
<p class="card-contents">
There is a
<a href="https://sympa.inria.fr/sympa/info/menhir">mailing list</a>
for announcements of new releases and discussion of problems, bugs,
feature requests, and so on. Only subscribers can post.
</p>
<p>
<p class="card-contents">
Menhir has been designed and implemented by
<a href="http://gallium.inria.fr/~fpottier/">François Pottier</a> and
<a href="http://www.pps.jussieu.fr/~yrg/">Yann Régis-Gianas</a>.
<a href="http://yann.regis-gianas.org/">Yann Régis-Gianas</a>.
</p>
</div>
</div>
<p>Menhir has many features that make it superior to the traditional
yacc-style parser generators that many people are familiar with.</p>
<div class="widecard card-1">
<h2 class="card-title">What are the key features of Menhir?</h2>
<ul>
<p class="card-contents">
Menhir has many features that make it superior to the traditional
yacc-style parser generators that many people are familiar with.
</p>
<ul class="features">
<li>
Menhir is not restricted to LALR(1) grammars. It accepts <b>LR(1)</b>
......@@ -150,6 +160,6 @@ yacc-style parser generators that many people are familiar with.</p>
</li>
</ul>
</div>
</body>
</html>
body {
font-family: sans-serif;
margin: auto;
width: 100%;
margin: 0 0 0 0;
background-color: rgb(105,136,164);
}
h1 {
margin: 0;
margin-left: 0.4rem;
margin-right: 0.4rem;
font-family: 'Carter One', cursive;
font-size: 10vh;
text-align: center;
color: rgb(105,136,164);
font-variant: small-caps;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
background-color: With;
background-size: cover;
background-image:url(affichage.jpg);
background-repeat:no-repeat;
background-position:center top;
}
.widecard {
background: #fff;
border-radius: 2px;
height: auto;
position: relative;
padding: 0.2rem;
flex: 1;
margin: 0.5rem;
}
.card {
background: #fff;
border-radius: 2px;
margin: 0.4rem;
padding: 0.2rem;
position: relative;
flex: 1;
padding-bottom: 2rem;
}
.card-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
p.card-contents {
margin: auto;
width: 85%;
margin-top: 1em;
}
h2.card-title {
font-family: 'Carter One', cursive;
font-size: 3vh;
text-align: center;
color: rgb(105,136,164);
font-variant: small-caps;
margin-top: 0.1em;
margin-bottom: 0.1em;
}
div.contents {
font-family: sans-serif;
margin: auto;
width: 100%;
background-color: rgb(105,136,164);
}
@media only screen and (min-width: 768px) {
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
padding-top: 0.5em;
}
div.contents {
font-family: sans-serif;
margin: auto;
width: 60%;
background-color: rgb(105,136,164);
}
ul.features {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
text-align: justify;
text-justify: inter-word;
padding-left: 3em;
padding-right: 3em;
}
li {
padding: 0;
padding-top: 0.5em;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment