optimisations

eaa-imd · Aug 31, 2018 · e34e131 · e34e131
1 parent da47841
commit e34e131
Show file tree

Hide file tree

Showing 10 changed files with 282 additions and 68 deletions.
diff --git a/communication/index.html b/communication/index.html
@@ -36,8 +36,15 @@ <h2>Communication</h2>
   </section>
 
   <section class="section nav-next" id="nav-next">
+    <nav class="next">
+      <h2>Suite: </h2>
+      <a href="/#toolbox">
+        <span class="next-title title-style">Toolbox</span>
+        <img src="../images/icones/systemes-de-design.svg" alt="image">
+      </a>
+    </nav>
   </section>
-
+  
   <script>
 
     var dataArray = [ 

diff --git a/credits/index.html b/credits/index.html
@@ -18,7 +18,7 @@ <h1><a href="../">Design Tools Survey</a></h1>
 
     <section class="section credits">
   <h2 class="top-title">Crédits</h2>
-  <p class="texte-description">Ce projet a été réalisé en juin 2018, par une classe d'étudiants en 3e année Interactive Media Design de l'EAA La Chaux-de-Fonds.</p>
+  <p class="texte-description">Ce projet a été réalisé en mai-juin 2018, par une classe d'étudiants en 3e année Interactive Media Design de l'EAA La Chaux-de-Fonds.</p>
 
   <ul class="menu-tasks credits-list">
     <li>
@@ -77,20 +77,15 @@ <h2 class="top-title">Crédits</h2>
 <script>
 
   // Randomize Order
-  // produce a random distribution of 11 numbers.
+
   var nombres = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ];
 
   shuffle(nombres);
 
   for (var i = 1; i <= nombres.length; i++) {
 
-    // attribuer l'ordre à l'élément html
-    // var Projet = MenuList[i];
-
-    // console.log(nombres[i]);
     var cible = document.querySelector(".credits-list li:nth-of-type("+[i]+")");
     cible.style.order = nombres[i];
-    // cible.style.border = "1px solid red";
 
   }
 

diff --git a/css/base.css b/css/base.css
@@ -1,12 +1,10 @@
 @charset "UTF-8";
 
-@import url('https://fonts.googleapis.com/css?family=Chivo:700');
-
 @import 'global.css';
 
 @import 'graphe.css';
 
 @import 'menu.css';
 
-
+@import url('https://fonts.googleapis.com/css?family=Chivo:700');
 
diff --git a/css/global.css b/css/global.css
@@ -37,7 +37,16 @@ h2, .title-style
 
   h2, .title-style
   {
-  font-size: 60px;
+    font-size: 60px;
+  }
+
+  .menu h2
+  {
+    font-size: 2em;
+  }
+
+  .top-title {
+    margin-top: 2em;
   }
 
 }
@@ -65,7 +74,8 @@ h2, .title-style
   text-align: center;
   position: absolute;
   margin-left: 60px;
-  z-index: 10;
+  margin-top: 0;
+  z-index: 1;
 }
 
 .site-header a {
@@ -78,15 +88,10 @@ h2, .title-style
   {
     font-size: 2em;
     margin-left: 70px;
+    margin-top: 7px;
   }
 }
 
-.main-nav
-{
-  position: fixed;
-  top:2em;
-}
-
 
 /* Intro */
 
@@ -95,17 +100,65 @@ h2, .title-style
   margin-top: 120px;
 }
 
+/* Participants */
 
-@media screen and (min-width: 600px){
-.charts
-{
-	display:flex;
+.charts-index h3 {
+  margin-left: 2em;
 }
-
-	.ct-chart-2,.ct-chart-3
+
+.charts-index .legende {
+  margin: 0;
+}
+
+@media screen and (min-width: 600px){
+
+  .charts-index .ct-chart
 	{
-		margin-left:10%;
+		margin-left: 10%;
 	}
+
+}
+
+@media screen and (min-width: 1000px){
+
+  .charts-index {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+  }
+
+  .charts-index > .section {
+    margin: 0;
+    flex: 1 0 33%;
+  }
+
+  .charts-index .graphe > div {
+    flex: 1 1 50%;
+  }
+
+  .charts-index .visuel {
+    height: 0px;
+    padding-bottom: 50%;
+    padding-top: 2em;
+  }
+
+  .charts-index h3,
+  .charts-index .legende ul {
+    margin-left: 1em;
+  }
+
+/*  .charts-index .graphe .visuel {
+    flex-basis: 60%;
+  }
+
+  .charts-index .graphe .legende {
+    flex-basis: 40%;
+  }*/
+
+  .charts-index .ct-chart
+  {
+    margin-left: 0;
+  }
 }
 
 /* Description Outil */
@@ -162,6 +215,13 @@ h2, .title-style
     column-gap: 2em;
     font-size: 1.2em;
   }
+
+  .credits .texte-description 
+  {
+    column-count: 1;
+    width: 50%;
+  }
+
 }
 
 @media screen and (min-width: 1100px) {
@@ -173,10 +233,10 @@ h2, .title-style
 
   .texte-description
   {
-    column-count: 2;
     column-gap: 3em;
     font-size: 1.5em;
   }
+
 }
 
 /* Suite */
@@ -218,3 +278,8 @@ h2, .title-style
   height: auto;
   width: 5em;
 }
+
+/* Pages specifiques */
+
+
+
diff --git a/css/graphe.css b/css/graphe.css
@@ -27,13 +27,17 @@
 
 .legende .couleur {
   width: 1em;
+  flex: 0 0 1em;
   height: 1em;
   background-color: gray;
   border-radius: 100%;
   margin-right: 1em;
   margin-top: 0.5em;
 }
 
+.legende li span {
+}
+
 .legende li:first-of-type {
   font-weight: bold;
 }
@@ -70,6 +74,21 @@ Style du graphe
 
 /*
 
+Affichage du texte dans les tranches du graphe
+
+*/
+
+.ct-chart-donut .ct-label:first-child {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.ct-chart-donut .ct-label:nth-child(1n+7) {
+  display: none;
+}
+
+/*
+
 Couleurs par défaut du graphe
 
 */
@@ -191,6 +210,8 @@ en fonction du nombre d'éléments.
 
 .systemes-de-design .ct-slice-donut-solid  { fill: #2932FF; }
 .systemes-de-design li .couleur { background-color : #2932FF; }
+.systemes-de-design .ct-label { fill: #fff; }
+.systemes-de-design .ct-label:nth-child(1n+5) { display: none; }
 
 .communication .ct-slice-donut-solid  { fill: #058D3F; }
 .communication li .couleur { background-color : #058D3F; }
@@ -202,4 +223,5 @@ en fonction du nombre d'éléments.
 .ct-slice-donut-solid:hover {
 /*  fill: #000;
 */  opacity: 1;
+    fill: #ccc;
 }
diff --git a/css/menu.css b/css/menu.css
@@ -1,27 +1,43 @@
 /*nav*/
 
+
 .main-nav
 {
-	width: 100%;
-	max-width: 80em;
-	z-index: 1;
-/*	left: -16px;
-*/}
+  position: fixed;
+  top: 2em;
+  top: 0px;
+  left: 0px;
+/*  border: 1px solid red;
+*/	width: 100%;
+  width: 100vw;
+/*	max-width: 80em;
+*/	z-index: 2;
+
+ /* left: -16px;
+  top: -16px;*/
+  margin: 0;
+  padding: 0;
+}
 
 .menu-nav a:link
 {
 	font-size: 3em;
 }
 
+.main-nav > label {
+  position: fixed;
+}
+
 .menu {
 	background-color: #fff;
 	width: 100%;
-	border: 1px solid blue;
-	margin-left: -1em;
+/*	border: 1px solid blue;
+*//*	margin-left: -1em;*/
 	z-index: 1;
 	padding: 0;
+  margin: 0;
 	overflow-y: auto;
-	max-height: 80vh;
+	height: 100vh;
 }
 
 .menu-tasks {
@@ -89,6 +105,7 @@
   border-radius: 100%;
 }
 
+
 .menu-tasks a:link
 {
 	color: black;
@@ -113,14 +130,39 @@
 	color: white;
 }
 
+/* Menu Titles */
+
+.menu h2 {
+  text-align: center;
+}
+
+.menu-title {
+  display: block;
+  text-align: center;
+}
+
+/* Menu Best-of */
+
+.menu-best img {
+  margin-bottom: 0.7em;
+}
+
+.menu-best .outil {
+  font-size: 1.3em;
+  font-weight: 800;
+  margin-top: 0.3em;
+}
+
+/* Hamburger Icon */
 
 .icon
 {
   position: relative;
   width: 60px; 
   height: 50px;
-  display:inline-block;
-  cursor:pointer;
+  display: inline-block;
+  cursor: pointer;
+  margin: 1em 0 0 1em;
 }
 
 .bar
@@ -204,3 +246,7 @@ label
   font-size: 1.5em;
   margin-top: 0.3em;
 }
+
+.credits .menu-tasks li {
+/*  padding: 0;
+*/}