Commit 2484cf85 authored by Dario Pinto's avatar Dario Pinto
Browse files

Merge branch 'CssElias' into 'master'

CSS menu and timeline

See merge request OCamlPro/www!83
parents 715af8c6 b59d64e4
...@@ -281,31 +281,26 @@ let links_to_home_pages = ...@@ -281,31 +281,26 @@ let links_to_home_pages =
Format.sprintf Format.sprintf
{| {|
<div class="row"> <div class="row">
<div class="col-lg-4" align="left"> <div class="col-4">
<p class="toplinks2"> <p class="toplinks">
<a href="/blog"> <a href="/blog">
Home Home
<img class="blogimg" src="/blog/assets/img/icon_home.svg"/>
</a> </a>
</p> </p>
<p class="toplinks">
<img class="blogimg" src="/blog/assets/img/icon_home.svg"/>
</p>
</div> </div>
<div class="col-lg-4" align="center"> <div class="col-4">
<p class="toplinks"> <p class="toplinks">
<a href="/blog/feed"> <a href="/blog/feed">
<img class="blogimg" src="/blog/assets/img/icon_atom_feed.svg"/> <img class="blogimg" src="/blog/assets/img/icon_atom_feed.svg"/>
</a> </a>
</p> </p>
</div> </div>
<div class="col-lg-4" align="right"> <div class="col-4">
<p class="toplinks3">
<img class="blogimg" src="/blog/assets/img/icon_categories.svg"/>
</p>
<p class="toplinks"> <p class="toplinks">
<a href="/blog/category"> <a href="/blog/category">
Categories Categories
</p> <img class="blogimg" src="/blog/assets/img/icon_categories.svg"/>
</a> </a>
</p> </p>
</div> </div>
......
...@@ -35,6 +35,7 @@ p img { ...@@ -35,6 +35,7 @@ p img {
font-size: 1em; font-size: 1em;
font-family: 'Fontin'; font-family: 'Fontin';
margin-left: 10px; margin-left: 10px;
text-align: center;
} }
.toplinks2 { .toplinks2 {
...@@ -236,6 +237,82 @@ img.feed { ...@@ -236,6 +237,82 @@ img.feed {
} }
/*************** Navbar Elements *********************/
/* Remove border from toggler */
.navbar-toggler {
border: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
border: 0;
}
/* Lines of the Toggler */
.toggler-icon{
width: 30px;
height: 3px;
background-color: #e74c3c;
display: block;
transition: all 0.2s;
}
/* Adds Space between the lines */
.middle-bar{
margin: 5px auto;
}
/* State when navbar is opened (START) */
.navbar-toggler .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
opacity: 0;
filter: alpha(opacity=0);
}
.navbar-toggler .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
/* State when navbar is opened (END) */
/* State when navbar is collapsed (START) */
.navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
filter: alpha(opacity=100);
}
.navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
/* State when navbar is collapsed (END) */
/* Color of Toggler when collapsed */
.navbar-toggler.collapsed .toggler-icon {
background-color: white;
}
.dropdown-menu {
background-color: #69abbf;
}
.dropdown-menu-dark .dropdown-item {
color: white;
}
/************** Navbar Elements **************************/
/**************Animation File Start Here (animate.css)****************/ /**************Animation File Start Here (animate.css)****************/
/**************Copy and Save this in another file (animate.css)****************/ /**************Copy and Save this in another file (animate.css)****************/
...@@ -1977,8 +2054,8 @@ img.feed { ...@@ -1977,8 +2054,8 @@ img.feed {
} }
#timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul .righting-wrap { #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul .righting-wrap {
float: left; float: left;
width: 70%; width: 75%; /*70%*/ /*75%*/
height: 130px; height: 325px; /*250px*/ /*325px*/
padding: 0 12px 0 0; padding: 0 12px 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
...@@ -213,7 +213,7 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -213,7 +213,7 @@ We cater to very specific needs. For example, we can translate a “black box”
</div> </div>
<div class="righting-wrap"> <div class="righting-wrap">
<li><a href="#" class="importo">April 1, 2011</a></li> <li><a href="#" class="importo">April 1, 2011</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">OcamlPro is founded </span> </li> <li><span class="causale" style="color:#000; font-weight: 600;">OCamlPro is founded </span> </li>
<li><span class="causale">OCamlPro is founded to help spread the OCaml language in the industry. <br> <li><span class="causale">OCamlPro is founded to help spread the OCaml language in the industry. <br>
Fabrice le Fessant, a researcher and member of the French Inria Institute, founds OCamlPro to boost the development of OCaml and promote it in the industry.</span> </li> Fabrice le Fessant, a researcher and member of the French Inria Institute, founds OCamlPro to boost the development of OCaml and promote it in the industry.</span> </li>
</div> </div>
...@@ -237,8 +237,8 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -237,8 +237,8 @@ We cater to very specific needs. For example, we can translate a “black box”
</div> </div>
<div class="righting-wrap"> <div class="righting-wrap">
<li><a href="#" class="importo">May 1, 2011</a></li> <li><a href="#" class="importo">May 1, 2011</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Long-term collaboration with Jane Street on Ocaml tooling </span> </li> <li><span class="causale" style="color:#000; font-weight: 600;">Long-term collaboration with Jane Street on OCaml tooling </span> </li>
<li><span class="causale">Jane Street supports the diffusion of Ocaml, and becomes OcamlPro's most important client.</span> </li> <li><span class="causale">Jane Street supports the diffusion of OCaml, and becomes OCamlPro's most important client.</span> </li>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</ul> </ul>
...@@ -260,8 +260,8 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -260,8 +260,8 @@ We cater to very specific needs. For example, we can translate a “black box”
</div> </div>
<div class="righting-wrap"> <div class="righting-wrap">
<li><a href="#" class="importo">February 28, 2012</a></li> <li><a href="#" class="importo">February 28, 2012</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">OcamlPro contributes Open Source developer tools under the codename TypeRex! </span> </li> <li><span class="causale" style="color:#000; font-weight: 600;">OCamlPro contributes Open Source developer tools under the codename TypeRex! </span> </li>
<li><span class="causale">The TypeRex programming studio is a set of open source tools for developing applications in Ocaml.</span> </li> <li><span class="causale">The TypeRex programming studio is a set of open source tools for developing applications in OCaml.</span> </li>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</ul> </ul>
...@@ -289,7 +289,7 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -289,7 +289,7 @@ We cater to very specific needs. For example, we can translate a “black box”
<div class="righting-wrap"> <div class="righting-wrap">
<li><a href="#" class="importo">March 1, 2013</a></li> <li><a href="#" class="importo">March 1, 2013</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">First official release of OPAM 1.0 </span> </li> <li><span class="causale" style="color:#000; font-weight: 600;">First official release of OPAM 1.0 </span> </li>
<li><span class="causale">The Ocaml Package Manager is officially released as OPAM 1.0. </span> </li> <li><span class="causale">The OCaml Package Manager is officially released as OPAM 1.0. </span> </li>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</ul> </ul>
...@@ -312,7 +312,7 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -312,7 +312,7 @@ We cater to very specific needs. For example, we can translate a “black box”
<div class="righting-wrap"> <div class="righting-wrap">
<li><a href="#" class="importo">December 1, 2014</a></li> <li><a href="#" class="importo">December 1, 2014</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Release of the Flambda optimizing compiler </span> </li> <li><span class="causale" style="color:#000; font-weight: 600;">Release of the Flambda optimizing compiler </span> </li>
<li><span class="causale">The first Flambda is proposed into Ocaml by Pierre Chambart and Mark Shinwell in PR #132 - work funded by Jane Street. </span> </li> <li><span class="causale">The first Flambda is proposed into OCaml by Pierre Chambart and Mark Shinwell in PR #132 - work funded by Jane Street. </span> </li>
<li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/01/2018, 13:05"</small></p> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/01/2018, 13:05"</small></p> </li>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
...@@ -335,7 +335,7 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -335,7 +335,7 @@ We cater to very specific needs. For example, we can translate a “black box”
</div> </div>
<div class="righting-wrap"> <div class="righting-wrap">
<li><a href="#" class="importo">July 1, 2015</a></li> <li><a href="#" class="importo">July 1, 2015</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Université Paris 7 appoints OcamlPro to implement the exercise platform of the Ocaml MOOC on France Université Numérique</span> </li> <li><span class="causale" style="color:#000; font-weight: 600;">Université Paris 7 appoints OCamlPro to implement the exercise platform of the OCaml MOOC on France Université Numérique</span> </li>
<li><span class="causale">OCamlPro implements the first version of the exercise autocorrecting platform of the OCaml MOOC on France Université Numérique for Université Paris 7, based on TryOCaml, integrates to the OpenEDX/FUN and designs some of the exercices of the course, in close collaboration with Roberto Di Cosmo and Yann-Régis Gianas at Irill.</span> </li> <li><span class="causale">OCamlPro implements the first version of the exercise autocorrecting platform of the OCaml MOOC on France Université Numérique for Université Paris 7, based on TryOCaml, integrates to the OpenEDX/FUN and designs some of the exercices of the course, in close collaboration with Roberto Di Cosmo and Yann-Régis Gianas at Irill.</span> </li>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
......
...@@ -6,23 +6,26 @@ ...@@ -6,23 +6,26 @@
<meta name="description" content="![description]" /> <meta name="description" content="![description]" />
<meta name="keywords" content="![keywords]" /> <meta name="keywords" content="![keywords]" />
<link rel="icon" type="image/svg+xml" href="/assets/img/logo_ocp_icon.svg"> <link rel="icon" type="image/svg+xml" href="/assets/img/logo_ocp_icon.svg">
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/css/prism.css" rel="stylesheet" /> <link href="/assets/css/prism.css" rel="stylesheet">
<link href="/assets/css/style.css" rel="stylesheet"> <link href="/assets/css/style.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="/"><img src="/assets/img/logo_ocamlpro.png" alt="OCamlPro" height="42" /></a> <a class="navbar-brand" href="/"><img src="/assets/img/logo_ocamlpro.png" alt="OCamlPro" height="42" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
<span class="navbar-toggler-icon"></span> aria-label="Toggle navigation">
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon middle-bar"></span>
<span class="toggler-icon bottom-bar"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-md-0"> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/research-and-development">R&amp;D</a> <a class="nav-link" href="/research-and-development">R&amp;D</a>
</li> </li>
......
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