Commit d5788860 authored by Yann REGIS-GIANAS's avatar Yann REGIS-GIANAS

A new version of the webpage.

parent 8e7ec381
Pipeline #70332 passed with stages
in 52 seconds
......@@ -16,10 +16,11 @@
<div class="contents">
<div class="header">
<h1 class="bar">Menhir</h1>
<div class="flexbox">
<div class="card card-1">
<div class="card card-1 card-header">
<h2 class="card-title">What is it?</h2>
<p class="card-contents">
Menhir is an LR(1) parser generator for
......@@ -37,7 +38,7 @@ with a few caveats, described in the
</p>
</div>
<div class="card card-1">
<div class="card card-1 card-header">
<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>,
......@@ -53,7 +54,7 @@ Menhir's source code is hosted in this
</p>
</div>
<div class="card card-1">
<div class="card card-1 card-header">
<h2 class="card-title">How to get help?</h2>
<p class="card-contents">
There is a
......@@ -69,13 +70,17 @@ Menhir has been designed and implemented by
</p>
</div>
</div>
</div>
<div class="widecard card-1">
<div class="widecard card-1" id="features">
<h2 class="card-title">What are the key features of Menhir?</h2>
<p class="card-contents">
<p class="card-contents subtitle">
Menhir has many features that make it superior to the traditional
yacc-style parser generators that many people are familiar with.
(<a href="#features">See below</a>.)
<img src="footer.png" class="footer"/>
</p>
<ul class="features">
......
......@@ -5,32 +5,37 @@ body {
font-size: 1.1em;
}
div.header {
background-color: With;
background-size: cover;
background-image:url(affichage.jpg);
background-repeat:no-repeat;
background-position:center top;
}
h1 {
margin: 0;
margin-left: 0.4rem;
margin-right: 0.4rem;
font-family: 'Carter One', cursive;
padding-left: 20vw;
padding-top: 3vw;
padding-bottom: 3vw;
font-size: 12vh;
text-align: left;
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;
height: 98vh;
position: relative;
padding: 0.2rem;
flex: 1;
margin: 0.5rem;
margin-bottom: 5rem;
}
.card {
......@@ -48,6 +53,10 @@ h1 {
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card-header {
background-color: rgba(255, 255, 255, 0.7);
}
.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
......@@ -55,7 +64,22 @@ h1 {
p.card-contents {
margin: auto;
width: 85%;
margin-top: 1em;
margin-top: 0.5em;
}
p.subtitle {
text-align: center;
font-size: 1.3em;
margin-top: 3vh;
margin-bottom: 10vh;
}
img.footer {
height: 15vh;
display: block;
margin-top: 5vh;
margin-left: auto;
margin-right: auto;
}
h2.card-title {
......@@ -97,9 +121,9 @@ code {
}
ul.features {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
......@@ -112,6 +136,11 @@ code {
li {
padding: 0;
padding-top: 0.5em;
font-size: 1.2em;
}
div.header {
height: 60vh;
}
}
......
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