<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Social Networks</title> <style> @font-face { font-family: bree-serif; src: url("bree-serif/BreeSerif-Regular.otf"); } @font-face { font-family: georgia; src: url("georgiai.ttf"); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-family: bree-serif; font-size: 19px; } h1 { font-size: 57px; text-align: right; font-weight: 400; font-style: normal; letter-spacing: 0px; text-transform: none; line-height: 1.3em; font-family: bree-serif; margin-right: 50px; margin-top: 20px; } h2 { font-size: 14px; text-align: right; font-weight: 400; font-style: normal; letter-spacing: 0px; text-transform: none; line-height: 1.3em; font-family: georgia; margin-right: 50px; margin-left: 75%; margin-top: 20px; } .underline { text-decoration: underline; text-decoration-color: #df5b57; } #container { background-color: white; padding: 20px; } .row { display: flex; flex-direction: row; } .circle { flex-grow: 0; flex-shrink: 0; width: 15px; height: 15px; border-radius: 50%; background-color: #df5b57; } .text { padding-left: 10px; } </style> </head> <body> <h1>Questions on</br> <span class="underline">Social Networks</span></h1> <div id="container"> </div> <script> function shuffle(a) { for(let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } const messages = shuffle([ "Can decentralised web have an impact beyond geeks & social web enthusiasts?", "Why do we need decentralised networks?", "How do we perceive federated publishing?", "Collectivity vs individuality: does decentralisation helps?", "Who moves to a decentralised network and why?", "What content does a federated network host?", "Is the medium the message?", "Does the medium transform the message?", "Does the same story have a different value, according to where is heard?", "How important is to choose, or create our media of communication?", "Is decentralisation a panacea, or a pharmakon?", "Is decentralisation enough?", "What are the dangers of centralised networks?", "Whose voice is amplified or curbed in a centralised network?", "Do we need digital social networking platforms?", "Do we need virtual public spheres that are difficult to shut down?", "Is a federated network oriented towards answering a common goal?", "How is the common goal of the network shaped?", "Is being part of the network as important as being a custodian of it?", "Who maintains a federated network?", "What is the lifespan of a federated network?", "How can a federated network be sustained with economic means?" ]); function getRandomArbitrary(min, max) { return Math.floor(Math.random() * (max - min) + min); } const container = document.getElementById('container'); const containerWidth = parseInt(getComputedStyle(container).width) - 40; messages.forEach(message => { const row = document.createElement('div'); row.classList.add('row'); row.style.marginBottom = getRandomArbitrary(10,10) + 'px'; const circle = document.createElement('div'); circle.classList.add('circle'); const text = document.createElement('div'); text.classList.add('text'); text.textContent = message; row.appendChild(circle); row.appendChild(text); container.appendChild(row); const circleWidth = parseInt(getComputedStyle(circle).width); const textWidth = parseInt(getComputedStyle(text).width); const dw = containerWidth - circleWidth - textWidth; row.style.marginLeft = getRandomArbitrary(0,dw) + 'px'; }); </script> </body> <html>