You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.0 KiB
HTML
159 lines
4.0 KiB
HTML
5 years ago
|
<!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>
|