Skip to content

G
gargantext.org
Commit bc2d0e07 authored by Fabien Maniere's avatar Fabien Maniere
Browse files
Options

add logos, chnge txt slideup, sections bg

parent 232e624b
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 19 deletions
poc-v1/css/garg-animations.css
View file @ bc2d0e07
......@@ -138,17 +138,17 @@
.slide-up {
animation-name: slideUp;
animation-duration: 2600s;
animation-duration: 800s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes slideUp {
from {
transform: translateY(48%);
transform: translateY(0%);
}
to {
transform: translateY(-100%);
transform: translateY(-50%);
}
}
\ No newline at end of file
poc-v1/css/styles.css
View file @ bc2d0e07
......@@ -2,6 +2,7 @@
:root {
--garg-secondary: #007bff;
--garg-yellow: #e5a400;
}
#header {
......@@ -56,6 +57,13 @@ main section.panel {
width: 230px;
height: 130px;
}
.hero-logo-wrapper {
width: 180px;
}
.logos-small {
right: -55px;
top: 18px;
}
h1, h2, h3, h4, h5 {
color: var(--bs-blue);
......@@ -100,6 +108,8 @@ h1 {
}
/* BACKGROUNDS */
.bg-grey {
background-color: var(--garg-light-grey);
}
......@@ -125,10 +135,16 @@ h1 {
background: linear-gradient(132deg, var(--bs-white) 30.00%, var(--garg-secondary) 300.00%)
}
.bg-garg-gradient-light {
background: linear-gradient(132deg, var(--bs-white) 0.00%, #e5a400 100.00%);
background: linear-gradient(132deg, var(--bs-white) 0.00%, var(--garg-yellow) 100.00%);
}
.bg-garg-gradient-mix {
background: linear-gradient(90deg, var(--bs-primary) 0%, var(--garg-secondary) 50%, #e5a400 100%);
background: linear-gradient(90deg, var(--bs-primary) 0%, var(--garg-secondary) 50%, var(--garg-yellow) 100%);
}
.bg-garg-gradient-radial-light-blue {
background: radial-gradient(circle, transparent 40%, rgb(161 216 255) 300%);
}
.bg-garg-gradient-radial-light-yellow {
background: radial-gradient(circle, transparent 50%, var(--garg-yellow) 250%);
}
.bg-garg-map-petit-prince {
/* background-image: url(../img/graph-petit-prince_v3.png), linear-gradient(132deg, #003153 0.00%, var(--garg-secondary) 100.00%); */
......@@ -197,7 +213,7 @@ h1 {
color: transparent;
}
.text-garg-gradient-light {
background: linear-gradient(to right, white 0%, #e5a400 100%);
background: linear-gradient(to right, white 0%, var(--garg-yellow) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
......
poc-v1/index.html
View file @ bc2d0e07
......@@ -21,7 +21,7 @@
<script src="js/bootstrap.min.js" defer></script>
<script src="js/main.js" defer></script>
</head>
<body class="poppins-regular text-dark-grey">
<body class="poppins-regular text-dark-grey bg-garg-gradient-radial-light-blue">
<div class="wrapper">
......@@ -51,8 +51,9 @@
<li class="nav-item">
<a class="nav-link text-garg-gradient" aria-current="page" href="#connect">Se connecter</a>
</li>
<li class="nav-item ms-lg-5">
<a class="nav-link border border-primary" aria-current="page" href="#">🇬🇧 English</a>
<li class="nav-item ms-lg-5 d-flex ">
<a class="nav-link" aria-current="page" href="#" title="English">🇬🇧</a>
<!-- <span class="px-1 small">|</span><a class="nav-link" aria-current="page" href="#">🇨🇵</a> -->
</li>
</ul>
</div>
......@@ -186,7 +187,13 @@
<div class="container position-relative py-lg-5 mt-5">
<div class="">
<div class="col mx-auto text-center align-items-center text-white">
<img src="img/logo.svg" width="180" alt="GarganText">
<div class="hero-logo-wrapper position-relative m-auto">
<img src="img/logo.svg" width="180" alt="GarganText">
<ul class="logos-small position-absolute list-unstyled m-0">
<li class=""><img src="img/logo-cnrs-white.png" alt="CNRS - Centre national de la recherche scientifique" class="logo logo-cnrs" width="45"></li>
<li class="pt-2"><img src="img/logo-iscpif.png" alt="ISCPIF - Institut des systèmes complexes Paris Ile-de-France" class="logo logo-iscpif" width="40"></li>
</ul>
</div>
<h1 class="text-white py-4">
La complexité de vos données
<br class="d-none d-lg-block">devient votre atout
......@@ -240,7 +247,7 @@
<!-- SECTION Discover -->
<a name="discover"></a>
<section id="section-discover" class="panel">
<section id="section-discover" class="panel bg-garg-gradient-radial-light-blue">
<div class="container">
<div class="row align-items-center justify-content-around px-3">
<div class="col">
......@@ -326,7 +333,7 @@
<!-- SECTION Learn -->
<a name="learn"></a>
<section id="section-learn" class="panel">
<section id="section-learn" class="panel bg-garg-gradient-secondary-vertical">
<div class="container">
<div class="row align-items-center justify-content-around px-3">
<div class="col">
......@@ -394,7 +401,7 @@
<!-- SECTION Connect -->
<a name="connect"></a>
<section id="section-connect" class="panel bg-garg-gradient-secondary-vertical">
<section id="section-connect" class="panel">
<div class="container">
<div class="row align-items-center justify-content-around px-3">
<div class="col">
......@@ -568,8 +575,8 @@
<footer class="bg-green justify-content-center align-items-center text-center p-4 mt-5">
<div class="footer-bottom text-light text-center py-5 "><a href="https://gitlab.iscpif.fr/gargantext/main/raw/master/LICENSE" target="_blank" class="text-light">Mentions légales <i class="fa fa-external-link " aria-hidden="true"></i></a> - © GarganText 2024</div>
<ul class="logos list-unstyled list-inline">
<li class="list-inline-item"><img src="img/logo-iscpif.png" alt="" class="logo logo-iscpif"></li>
<li class="list-inline-item"><img src="img/logo-cnrs-white.png" alt="" class="logo logo-cnrs"></li>
<li class="list-inline-item"><a href="https://www.cnrs.fr" target="_blank" class="footer-link"><img src="img/logo-iscpif.png" alt="CNRS - Centre national de la recherche scientifique" class="logo logo-iscpif"></a></li>
<a class="list-inline-item"><a href="https://iscpif.fr" target="_blank" class="footer-link"><img src="img/logo-cnrs-white.png" alt="ISCPIF - Institut des systèmes complexes Paris Ile-de-France" class="logo logo-cnrs"></a></li>
</ul>
</footer>
......
poc-v1/js/main.js
View file @ bc2d0e07
......@@ -13,13 +13,12 @@ document.addEventListener("DOMContentLoaded", function() {
// gsap.to(".excerpt-petit-prince", {
// duration: 360,
// yPercent: -100,
// duration: 10,
// yPercent: -50,
// ease: "none",
// repeat: -1
// repeat: -1,
// });
});
......
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