border-radius: 25px;

open/index.html

@@ -25,7 +25,7 @@
 
         <div id="dragZone" class="dragzone">
 
-            <div id="program" class="ui-widget-content draggable resizable visible" style="max-width: 250px; height: 1400px;">
+            <div id="program" class="corpi ui-widget-content draggable visible">
                     <h1>10 Sept 21</h1>
                     <li>12:00-17:00:</li>
                         <ul>XPUB Bookshop</ul>

open/scripts/App.js

@@ -21,13 +21,20 @@ $(document).ready(function(){
     Object.values(corpi).forEach(corpus => {
 
         $('#dragZone' ).append(`
-            <div class="ui-widget-content draggable resizable" id="${corpus['id']}">
+            <div id="${corpus['id']}" class="corpi ui-widget-content draggable" >
                     <h1>${corpus['title']}</h1>
                     <p>${corpus['content']}</p>
                     <button class="closable">X</button>
             </div>
             `)
-        $('#icons').append(`<button onclick="$(${corpus['id']}).fadeIn().css('z-index', zIndex++)" class="icon">${corpus["glyph"]}</button>`)
+        $('#icons').append(`
+        <div class="iconContainer">
+            <a href="#${corpus['id']}" class="innerLink">
+                <p><button class="icon" onclick="$(${corpus['id']}).fadeIn().css('z-index', zIndex++)" >${corpus["glyph"]}</button></p>
+                <span class="textIcon">${corpus['title']}</span>
+            </a>
+        </div>
+        `)
     });
 
     // Start mouse UI

open/styles/style.css

@@ -3,29 +3,24 @@
   src: url(../fonts/AC1-SemiLightDots.ttf);
 }
 
-
 body {
   max-width: 100vw;
   background-color: blue;
   color: white;
   font-family: Arial, Helvetica, sans-serif;
+  padding: 0;
+  margin: 0;
 }
 
 h1 {
   font-family: points;
-  font-size: 60px;
+  font-size: 40px;
   color: white;
+  margin-top: 8px;
 }
 
-button {
-  user-select: none;
-  display: inline-block;
-  padding: 3px 1em;
-  color: currentColor;
-  font-weight: var(--bold);
+.innerLink {
   text-decoration: none;
-  margin-bottom: 4px;
-  background-color: rgba(0, 0, 0, 0);
 }
 
 .draggable {
@@ -33,8 +28,9 @@ button {
   position: absolute;
   border: 2px white solid;
   background: black;
-  -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0.49); 
-          box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0.49);
+  -webkit-box-shadow: 0px 10px 13px -7px #000000,
+    5px 5px 15px 5px rgba(0, 0, 0, 0.49);
+  box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0.49);
 }
 
 .draggable p,
@@ -78,23 +74,14 @@ button {
 
 .hover {
   font-weight: bolder;
-}
-
-.icon {
-  width: 70px;
-  height: 70px;
-  border: none;
-  z-index: 1;
-  font-size: 30px;
-  cursor: pointer;
-  /* font-size: 50px ; */
+  color: white !important;
 }
 
 .icon:hover {
   font-size: 35px;
 }
 
-#bar{
+#bar {
   z-index: 10;
   position: fixed;
   bottom: 0;
@@ -102,10 +89,10 @@ button {
   width: 100%;
   height: 5%;
   border: solid 2px white;
-  background-color: rgba(19, 19, 156, .9);
+  background-color: rgba(19, 19, 156, 0.9);
 }
 
-#colophon{
+#colophon {
   margin: auto;
   width: 50%;
   /* position: fixed; */
@@ -117,21 +104,20 @@ button {
   padding: 1% 5%;
 }
 
-#colophon h1{
+#colophon h1 {
   color: blue;
 }
 
-.bottoneCose{
+.bottoneCose {
   width: 10%;
   height: 100%;
 }
 
-
-.bottoneCose:active{
+.bottoneCose:active {
   background-color: rgb(113, 113, 226);
 }
 
-.clicked{
+.clicked {
   background-color: white;
   color: blue;
 }
@@ -139,3 +125,136 @@ button {
 .visible {
   display: inline;
 }
+
+.corpi {
+  padding: 15px;
+  min-width: 200px;
+}
+
+#program {
+  min-width: 180px;
+  max-width: 250px;
+  height: 1400px;
+}
+
+#collectiveioning {
+  min-width: 320px;
+}
+
+/* ICONS NAVIGATION */
+.iconContainer {
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+  position: relative;
+  text-align: center;
+  border-radius: 6px;
+}
+
+.iconContainer:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.iconContainer a p {
+  margin: 0;
+  padding: 0;
+}
+
+.icon {
+  width: 70px;
+  height: 70px;
+  border: none;
+  z-index: 1;
+  cursor: pointer;
+  font-size: 30px;
+}
+
+.icon:hover {
+  font-size: 30px;
+}
+
+button {
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.textIcon {
+  margin-top: -20px;
+}
+
+/* FOOTER */
+.bottoneCose {
+  user-select: none;
+  display: inline-block;
+  padding: 3px 1em;
+  color: currentColor;
+  font-weight: var(--bold);
+  text-decoration: none;
+  margin-bottom: 4px;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+/* MEDIA QUERIES */
+
+/* On screens that are 992px or less, set the background color to blue */
+@media screen and (max-width: 700px) {
+  body {
+    background-color: red;
+    font-size: 16px;
+  }
+
+  h1 {
+    font-size: 30px;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  .corpi {
+    min-width: unset !important;
+    max-width: unset !important;
+    width: unset !important;
+    height: auto !important;
+    top: unset !important;
+    right: unset !important;
+    left: unset !important;
+    border: unset !important;
+    display: block !important;
+    position: unset !important;
+    margin-bottom: 40px;
+    cursor: unset !important;
+  }
+
+  .closable {
+    display: none;
+  }
+
+  #program {
+    text-align: center;
+  }
+
+  /* #program {
+    min-width: unset !important;
+    max-width: unset !important;
+    width: 95% !important;
+    height: auto !important;
+    top: unset !important;
+    right: unset !important;
+    left: unset !important;
+    border: unset !important;
+  } */
+
+  /* FOOTER */
+
+  #bar {
+    text-align: center;
+  }
+
+  .bottoneCose {
+    width: unset;
+  }
+}