More visible anchors buttons in the home page
authorJuliette Belin <juliette.belin@logilab.fr>
Wed, 01 Mar 2017 18:15:05 +0100
changeset 202 fe9bfdee1ff3
parent 196 6f5890d489d7
child 203 e469f58bc9b6
More visible anchors buttons in the home page
cubicweb_sherpa/data/cubes.sherpa.css
cubicweb_sherpa/views/templates/index.jinja2.html
--- a/cubicweb_sherpa/data/cubes.sherpa.css	Wed Mar 01 17:11:45 2017 +0100
+++ b/cubicweb_sherpa/data/cubes.sherpa.css	Wed Mar 01 18:15:05 2017 +0100
@@ -263,9 +263,49 @@
   display: block;
 }
 
+#anchors-wrapper {
+  text-align: center;
+  margin: 6em 0;
+}
+
+#anchors-wrapper .anchor-part {
+  color: #777;
+}
+
+
+#anchors-wrapper > div:first-child {
+  border-left: transparent;
+}
+
+#anchors-wrapper > div {
+  border-right: transparent;
+}
+
+#anchors-wrapper a {
+  border-radius: 0;
+  font-size: 1.6em;
+  padding-top: 3em;
+  padding-bottom: 3em;
+  border: none;
+  text-align: center;
+  color: #0d4e96;
+  font-family: 'Lovelo';
+  white-space: normal;
+}
+
+#anchors-wrapper div:hover,
+#anchors-wrapper div:hover > a{
+  background-color: #f6f6f6;
+  cursor: pointer;
+}
+
+#anchors-wrapper div >a:hover{
+  background-color: transparent;
+}
+
 #buttons-wrapper {
   text-align: center;
-  margin-bottom:4em;
+  margin: 4em 0 4em 0;
 }
 
 #buttons-wrapper a {
@@ -275,6 +315,7 @@
   padding: 1em 2em 1em 2em;
   border-radius: 0;
   font-weight: bold;
+  font-size: 0.9em;
 }
 
 #buttons-wrapper a:hover {
@@ -457,7 +498,6 @@
   padding: 1em;
 }
 
-
 #sherpa-project-page h2 {
   margin-top: auto;
   text-align: left;
@@ -580,6 +620,14 @@
     float: left;
     margin-top: auto;
   }
+
+  #anchors-wrapper > div:first-child {
+    border-left: 1px solid #777;
+  }
+
+  #anchors-wrapper > div {
+    border-right: 1px solid #777;
+  }
 }
 
 /* XXX remove me once seda > 0.6.1 is released */
--- a/cubicweb_sherpa/views/templates/index.jinja2.html	Wed Mar 01 17:11:45 2017 +0100
+++ b/cubicweb_sherpa/views/templates/index.jinja2.html	Wed Mar 01 18:15:05 2017 +0100
@@ -2,17 +2,23 @@
 
   <section id="presentation">
     <h1>Bienvenue sur le site SHERPA du Service Interministériel des Archives de France</h1>
-    <div class="titleUnderline">
-      <span class="underline mr"></span><span class="losange"></span><span class="underline ml"></span>
-    </div>
+
     <p>
-SHERPA est un outil qui permet de créer des profils d'archivage conformes au standard d'échange (SEDA) en mode collaboratif. Suivez le guide ! Voulez-vous...
+SHERPA est un outil qui permet de créer des profils d'archivage conformes au standard d'échange (SEDA) en mode collaboratif.
     </p>
-    <div id="buttons-wrapper">
-      <a href="{{base_url}}#commencer" class="btn btn-default">commencer tout de suite ?</a>
-      <a href="{{base_url}}#project" class="btn btn-default">savoir ce qu'est un profil ?</a>
-      <a href="{{base_url}}#seda" class="btn btn-default">en savoir plus sur la norme SEDA ?</a>
-      <a href="{{base_url}}#utilisation" class="btn btn-default">découvrir quelques clés du SHERPA ?</a>
+    <div id="anchors-wrapper">
+      <div class="col-md-3">
+        <a href="{{base_url}}#commencer" class="btn btn-default">Commencer <br /><span class="anchor-part">tout de suite</span></a>
+      </div>
+      <div class="col-md-3">
+        <a href="{{base_url}}#project" class="btn btn-default">Savoir <br /><span class="anchor-part">ce qu'est un profil</span></a>
+      </div>
+      <div class="col-md-3">
+        <a href="{{base_url}}#seda" class="btn btn-default">En savoir plus <br /><span class="anchor-part">sur la norme SEDA</span></a>
+      </div>
+      <div class="col-md-3">
+        <a href="{{base_url}}#utilisation" class="btn btn-default">Découvrir <br /><span class="anchor-part">quelques clés du SHERPA</span></a>
+      </div>
     </div>
   </section>